Coding , Music and Animation — creating something for Fun !

I created Beatballs for fun and now i am going to explain things i used to build this.

1. P5.js
2. P5.sound.js
3. NoSliderUi

And as usual Html , Css , Js .

P5 is awesome and As they say “p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.” It supported by processing foundation . Unlike Processing.js you write code in javascript in P5 .

P5 also has some cool libraries . P5.sound is one of them . it helps you Play with music . I also used noUiSlider a cool lightweight js library for sliders .

Main Core :-

var c = function( p ) {

var fr = 10; //starting FPS

var sp = 120;

var ep = 390; // end point

var v0 = 5; 

var v = v0; //balls velocity

var a = 12.0; // acceleration

var sound ; //

p.preload = function() {

 sound = p.loadSound(‘sounds/congo.mp3’);

}

p.setup =function () {

var myCanvas = p.createCanvas(100, 600);

 myCanvas.parent(“congo”);p.frameRate(fr); 

 p.background(‘white’);

}

p.draw = function() {

var x = document.getElementsByClassName(‘sliders’);

v = x.slider1.noUiSlider.get()/2 ;

 if(sp < ep){

 sp = sp + v;

 v += a;

 }

 else{

 sound.play();

 sp = 120;

 p.clear();

 v = v0;

 }

 p.clear();

 var c = p.color(100, 0, 0);

 p.fill(c);

 p.ellipse(50,sp,10,10);

};

}

new p5(c,”congo”);

This is one instance of P5 node , Here i am dropping the ball , Playing the music also speeding up/down as sliders change . P5 has few set of structure functions .

Preload () : This function called directly before setup(), the preload() function is used to handle asynchronous loading of external files.

Setup() : The setup() function is called once when the program starts. It’s used to define initial environment properties.

Draw() :This is main function . Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Usually you put your logic here.

There are bunch of other functions to . you can look at them all here .

There are two ways you can use p5 variables . one is global mode and other is instance mode . Global mode mostly when you have only one draw() method , Look at the example here. And if you want more than one draw function in a single file than you can use instance mode (Look at the above example) .

new p5(c,”congo”); In this line i am creating a new instance and attaching it to my congo div in my html .

I also used noUiSlider . Its very easy , just plug & play , for more details look at here.

You can create a peace of composition Using Beatballs , and share it with your friends .

Happy Coding !! :)