Website tool for processing language. – free-tutorials.org with free tutorials and source code

The Studio SketchPad aims to be an open studio for individuals learning to sketch beautiful code on the web canvas with Processing and EtherPad.
The default licensing adopted for the sketches are the Creative Commons Attribution-ShareAlike 3.0 Unported license.
Today I will come with this tutorial about how to use this tool.
First, you need to open all three websites from this tutorial.
The Studio SketchPad come with a good web tool to test the Processing Visualization Language with Etherpad.
About Etherpad is a highly customizable Open Source online editor providing collaborative editing in really real-time.
Open your account from Studio SketchPad. From Home menu add your first new sketch from the right top of the website. If the website comes with the Untitled source code the run it. This will show you how is working.
The base of the processing code is two functions: setup and draw.
The setup function will set all you need to run the draw function.
Let’s see my code:

void setup() {  
//the dimension of the display window width and height in units of pixels
  size(400, 400); 
// sets the color used for the background
  background(255);
// Sets the color used to draw lines and borders around shapes
  stroke(0, 0, 0, 255)  
//sets the width of the stroke used for lines, points, and the border around shapes
  strokeWeight(0.5);  
  initX=width/2;
  initY=height/2;
//disables filling geometry
  noFill();
//draws all geometry with smooth (anti-aliased) edges
  smooth();
}  
 
int initX, initY;
int rad=width*2;
 
void draw(){
    int res=10;
    int circle=360;
    float cRadX, cRadY, cX, cY;
    float x, y;
    float a = 0.0;
    float inc = TWO_PI/(res*2);
    background(255);
    ellipse(initX, initY, width, height);
    for(int i=0; i<res; i+=180/circle) {
        x=initX+sin(a)*rad;
        y=initY+cos(a)*rad;
        
        strokeWeight(1);
        // the mouse location is take by mouseX, mouseY
        line(mouseX, mouseY, x, y);
        smooth(10);
        //ellipse(cX, cY, cRadX, cRadY);
        a += inc;
        //ellipse(initX, initY, width-mouseX-i*50, height-mouseY-i*50);
    }
}

void setup() {

//the dimension of the display window width and height in units of pixels

size(400, 400);

// sets the color used for the background

background(255);

// Sets the color used to draw lines and borders around shapes

stroke(0, 0, 0, 255)

//sets the width of the stroke used for lines, points, and the border around shapes

strokeWeight(0.5);

initX=width/2;

initY=height/2;

//disables filling geometry

noFill();

//draws all geometry with smooth (anti-aliased) edges

smooth();

}

int initX, initY;

int rad=width*2;

void draw(){

int res=10;

int circle=360;

float cRadX, cRadY, cX, cY;

float x, y;

float a = 0.0;

float inc = TWO_PI/(res*2);

background(255);

ellipse(initX, initY, width, height);

for(int i=0; i<res; i+=180/circle) {

x=initX+sin(a)*rad;

y=initY+cos(a)*rad;

strokeWeight(1);

// the mouse location is take by mouseX, mouseY

line(mouseX, mouseY, x, y);

smooth(10);

//ellipse(cX, cY, cRadX, cRadY);

a += inc;

//ellipse(initX, initY, width-mouseX-i*50, height-mouseY-i*50);

}

I put comments into my source code to understand some of the processing language functions.
The variable and math are simple. Variables have a global or local “scope”. for example variables declared outside of setup() and draw() are global variables.
NOTE: If a local variable is declared with the same name as a global variable, the program will use the local variable to make its calculations within the current scope.
You can see the result here and also you can search on my website similar tutorials with processing.

Leave a Reply Cancel reply