WEB DESIGN STUDIO
COURSE
CONTACT
Processing
Processing is a software sketchbook, and a language for learning how to code within the context of the visual arts.

Processing is free, open source and runs on the Mac, Windows and Linux platforms.
The processing community in these years has written more ham a hundred libraries to facilitate computer vision, data visualization, music composition, networking, 3D file exporting and programming electronics.

Visit their homepage from here.
-Intro
-Projects
We were introduced to Processing and learnt some basics of Java.

A standard program is composed by at least this 2 functions:



void setup { … ;

}

void draw { … ;

}
float skyX=0, skyY=0, skyW=600, skyH=150;
float sunX=500, sunY=50, sunW=75, sunH=75;
float dx=1;
float boyx=590, boyy=50, boyw=60, boyh=20;



void setup()
{
size(600, 500);
}


void draw()
{
background(30,144,255);

// Set fill to Light blue
fill(192, 221, 250);
noStroke();
rect(skyX, skyY, skyW, skyH);

//sun body
strokeWeight(2);
stroke(0);
ellipseMode(CENTER); // Set ellipseMode
fill(255, 243, 3);
ellipse(sunX, sunY, sunW, sunH);

body(boyx, boyy, boyw, boyh);
moveBoy();
}


///////// move boy ///////////

void moveBoy() {

// normal movement of the boy from right to left

if (boyx>width) boyx=0;

{
boyx = boyx-(2*dx);
//take dx and -1 untill 0 then run the next if

}

if (boyx <= -100) {
boyx=600;
// sets this back to 600 so boy/boat can move from the right
}

}

void body(float boyx, float boyy, float boyw, float boyh)
{

//head
strokeWeight(1);
stroke(1);
fill(255, 0, 0);
ellipseMode(CENTER);
ellipse(boyx-48, boyy+20, boyw-20, boyh+20);


//leg2
stroke(210,180,140); // Set color
strokeWeight(10);
line(boyx-70, boyy+100, boyx-25, boyy+185);

//body
fill(252, 185, 48); // Set color
noStroke();
rect(boyx-85, boyy+41, 70, 90); // Draw rect

//boat
fill(139,69,19);
noStroke();
rect(boyx-180, boyy+131, 250, 45);

//boat L
fill(139,69,19);
noStroke();
triangle(boyx-180, boyy+175,boyx-180, boyy+131, boyx-220, boyy+131);

//boat R
fill(139,69,19);
noStroke();
triangle(boyx+70, boyy+175,boyx+70, boyy+131, boyx+100, boyy+131);

//leg1
stroke(210,180,140); // Set to d green
strokeWeight(10);
line(boyx-70, boyy+110, boyx-30, boyy+220);


}
SKETCH 2: 
-Code
PVector position1, position2;
PVector v1, v2;
float distance1;
float distance2;
float value = 0;
int w = 20, h = 20;



void setup()
{
size(800, 600); // size screen
position1 = new PVector(100, 100);
position2 = new PVector(200,200);

v1 = new PVector( 0, 0);
v2 = new PVector(0, 0);
}


//click right and left mouse buttons

void mousePressed()
{
if (mouseButton == LEFT)
{
w = w + 10;
h = h + 10;
}

if (mouseButton == RIGHT)
{
w = w - 10;
h = h - 10;

}
}



SKETCH 1: 

void draw()
{
background(value, 255, 255);
rect(position1.x, position1.y, w, h);
v1.x = mouseX - position1.x;
v1.y = mouseY - position1.y;
distance1 = v1.mag();
v1.normalize();

position1.x = position1.x + 6*(v1.x);
position1.y = position1.y + 6*(v1.y);

rect(position2.x,position2.y, w, h, 20);

v2.x = mouseX - position2.x;
v2.y = mouseY - position2.y;
distance2 = v2.mag();

position2.x = position2.x + v2.x;
position2.y = position2.y + v2.y;

if(distance1 < 200 )
fill(random(255),random(255),random(255));

else
fill(0,0,0);

}






-Code
-TOP
-TOP