JavaScript – Processing.js 2D library – part 001. – free-tutorials.org news free tutorials source code development scripts

This is part 001 from tutorials series about Processing.js.
The javascript library Processing helps us to create one good interface with our javascript.
This library comes with many features to show into canvas data and info and also to create 2D and 3D interfaces.
I used to show these features one online editor named studio sketchpad and can be found here.
Using this online editor can help you but if you want to use all features then you need to put the library into your HTML file.
In this tutorial, I just use the online editor and later will come with another tutorial about how to set the library.
Make one account of this online editor if you want to save your work.
The development is simple and has some rules.
The script will have two functions setup – for settings and draw – basically will draw the canvas.

void setup(){
}
void draw(){
}

void setup(){

}

void draw(){

}

This will fill with functions, statements and all the commands available to Processing.js.
Take a look at page references.
On the bottom of the script can also take classes.
This will be created like this:


class my_class{
    
}

class my_class{

}

As can we see classes comes without void and args ().
Let’s how it’s working classes by using two: Ball and MovingBall.
If you want to make one class and then you need to use then use these steps:
– create the class Ball;
– add two functions: update and display;
– add also the position of the class by using two float variables x,y ;
– because any class need to have one instance when you need one, so put this instance into the class and named like the class Ball;
– this instance will need to take the position and then to used so you need also two variables: _x and _y;
– if you want to show it then also you need a display function with some 2D/3D primitives;
Also, the classes can be created not just to show you the 2D/3D primitives.
Let’s see the source code of this class named Ball.


class Ball{
    
    float x;
    float y;
    
    
    Ball(float _x, float _y){
        x = _x;
        y = _y;
    }

    void display(){
        ellipse(x,y,20,20);
    }
}

class Ball{

float x;

float y;

Ball(float _x, float _y){

x = _x;

y = _y;

}

void display(){

ellipse(x,y,20,20);

}

Let’s make another class named MovingBall.
This class will be like the Ball class and will be extended by Ball class.
This means all content of Ball class can be used or not by MovingBall.


class MovingBall extends Ball {
    MovingBall(float _x, float _y){
        super(_x,_y);
        }
    }

class MovingBall extends Ball {

MovingBall(float _x, float _y){

super(_x,_y);

}

This MovingBall has the MovingBall extends the Ball with _x,_y and also used super to reference the superclass of a subclass. Take a look where is put the variables x,y, and _x,_y into the Ball and MovingBall.
The Ball will get _x,_y positions and will give it to x,y, also the MovingBall will follow the same rules.
Now I will add one function to MovingBall named drawing, see:


    void drawline(){
        stroke(0,0,100);
        line(x,y,0,0);
        }

void drawline(){

stroke(0,0,100);

line(x,y,0,0);

}

This will set the sets the color used to draw lines and borders around shapes with stroke function and will make one line from x,y to 0,0.
When will run this function will have one line.
Let’s see the MovingBall class:

class MovingBall extends Ball {
    MovingBall(float _x, float _y){
        super(_x,_y);
        }
    void drawline(){
        stroke(0,0,100);
        line(x,y,0,0);
        }
    }

class MovingBall extends Ball {

MovingBall(float _x, float _y){

super(_x,_y);

}

void drawline(){

stroke(0,0,100);

line(x,y,0,0);

}

The first step when you want to use this library is to know how to set the canvas and how to change it.
The size of this canvas can be done with this function: size.
For example : size(400,400) means 400 pixels x 400 pixels.
The background can change it with background() function and sets the color used for the background.
The smooth function will draw all geometry with smooth (anti-aliased) edges.
Because we want to draw something then you need to fill the setup and draw functions.
Into setup function will put the new classes and will use into draw function to draw.
Let’s see the final source code:

class Ball{
    
    float x;
    float y;
    
    float speedX=1;
    float speedY=1;
    
    Ball(float _x, float _y){
        x = _x;
        y = _y;
    }
    void update(){
        x+=speedX;
        y+=speedY;
        }
    void display(){
        ellipse(x,y,20,20);
    }
}

class MovingBall extends Ball {
    MovingBall(float _x, float _y){
        super(_x,_y);
        }
    void drawline(){
        stroke(0,0,100);
        line(x,y,0,0);
        }
    }

void setup(){
     size(400,400);
     smooth();
     ball001 = new Ball(200,200);
     mb001 = new MovingBall(100,100);
}

void draw(){
    background(0);
    ball001.display();
    mb001.display();
    mb001.update();
    mb001.drawline()
}

class Ball{

float x;

float y;

float speedX=1;

float speedY=1;

Ball(float _x, float _y){

x = _x;

y = _y;

}

void update(){

x+=speedX;

y+=speedY;

}

void display(){

ellipse(x,y,20,20);

}

class MovingBall extends Ball {

MovingBall(float _x, float _y){

super(_x,_y);

}

void drawline(){

stroke(0,0,100);

line(x,y,0,0);

}

void setup(){

size(400,400);

smooth();

ball001 = new Ball(200,200);

mb001 = new MovingBall(100,100);

}

void draw(){

background(0);

ball001.display();

mb001.display();

mb001.update();

mb001.drawline()

}

You can see my example here:

Leave a Reply Cancel reply