Sketches

Installing Processing

The main web site for processing is:

http://processing.org/

To down load the processing software to your PC or MAC – use

http://processing.org/download/

If you have a Windows PC – use the Windows 32-bit version.   You will then download a file call Processing -2.0x-windows32.zip.  If you have Windows 7 – this will be in your downloads folder

Create a folder call c:\dev – you can do this from the Windows Explorer

Now use right click on the processing zip file and extract all.  Then move the extracted folder to c:\dev

So you now should have:

c:\dev\processing-2.0b6

From your Windows explorer- it should look like this:

Now to run – just click on Processing.exe – If you have Windows 7 – you can pin this to the task bar.

 

 

 

 

 

 

 

 

 

 

Messin’ with the Bezier command

This sketch is messing with the bezier command – you can move the control points

// Variables

 int p1_x=200;
 int p1_y=370;
 int p2_x=300;
 int p2_y=370;
 boolean p1=false;
 boolean p2=false;


void setup()
{
  
 size(500,500); 
 
 // These are the control points we will move
  
}
void draw()
{


  background(130);
  fill(233, 224 , 71);
  strokeWeight(7);
  ellipse(250, 250, 300 ,300);
  fill(0);
  ellipse(200, 210 , 30, 70);
  fill(0);
  ellipse(300, 210 , 30, 70);
  fill (255);
  
  // Lets check the postion of the mouse and set the control point
  
  if (mousePressed) {
    if ( inside(10,10,30,30) )
    {
       p1=true;
       p2=false;
      
    } else if ( inside(50,10,30,30)) 
    {
      println("Poiint 2 selected");
      p2=true;
      p1=false;
    }
    else
      {
        p1=false;
        p2=false;
      }
  }
  
  
  if (p1) {
    p1_x=mouseX;
    p1_y=mouseY;
  }
    if (p2) {
    p2_x=mouseX;
    p2_y=mouseY;
  }

  
  
  // Bezier end point is 10 pixels down
  bezier(150, 295, p1_x, p1_y, p2_x, p2_y, 350, 320);
  
  // Top line of the mouth - also 10 points down
  line(150, 295, 350, 320);
  line(160, 180, 210, 135);
  line(340, 100, 290,75 );
  
  
  
  //draw close button

  stroke(0);

  
  strokeWeight(1);

  fill(255,0,255);  
  ellipse(150,295,10,10);
  ellipse(350,320,10,10);

  fill(0,255,0);
// Draw the control points
  ellipse(p1_x,p1_y,10,10);

  rect(10,10,30,30);

  line(10,10,40,40);

  line(40,10,10,40);

  //save button
  fill(0,0,255);
  ellipse(p2_x,p2_y,10,10);

  rect(50,10,30,30);
  rect(55,15,20,20);


}


boolean inside(int left, int top, int right, int bottom ) {

  int p1x=left;
  int p1y=top;
  int p2x=p1x+right;
  int p2y=p1y+bottom;
  
  
  
  if (mouseX>left && mouseX<p2x && mouseY>top && mouseY<p2y ) {
    return true;

  }

  else {

    return false;

  }

}

Doodle in Grey – cool paint app

This is a cool doodle app – and it will save your picture.


int oldX=0,oldY=0,drawcolor=0;

void setup() {
  size (400,300);
  background(255);
  smooth();
  frameRate(123);
}

void draw() {
  int n=0;
  int colors[]= {
    0,100,200,250
  };

  if(mousePressed) {
    strokeWeight(3);
    stroke(drawcolor);
    line(mouseX,mouseY,oldX,oldY);


    //check if the exit button is pressed
    if (inside (10,10,40,40)) {
      exit();
    }
    
    //check if save button is pressed
    if (inside(10,260,40,290)){
      
      save("mypicture.png");
      background(255);
    }    

    //color selector
    for(n=0;n<4;n++) {
      if (inside(360,10+n*40,390,40+n*40)) {
          
        if (mouseButton==LEFT){
          drawcolor = colors[n];
        }
        else{
        background(colors[n]);
        }  
      }
    }
  }

  oldX=mouseX;
  oldY=mouseY;

  //draw close button
  stroke(0);
  strokeWeight(1);
  rect(10,10,30,30);
  line(10,10,40,40);
  line(40,10,10,40);
  
  //save button
  rect(10,260,30,30);
  rect(15,265,20,20);

  //draw color buttons
  for(n=0;n<4;n++)
  {
    fill(colors[n]);
    rect(360,10+n*40,30,30);
  }
}
// returns true if mouse is inside this rectangle
boolean inside(int left, int top, int right, int bottom ) {
  
  if (mouseX>left && mouseX<right && mouseY>top && mouseY<bottom ) {

    return true;
  }

  else {
    return false;
  }
}

Greyscale Picker Helper

This is the same as the Color picker – it only has one value in the fill() and stroke() commands – 0 – black – 255 = white


/* Nice and simple Greyscale picker */

slideBar[] controls;
PFont maTypo;
 
void setup(){
  size(500,420);
  // creating a type using arial
  maTypo=createFont("arial",10, false);
  textFont(maTypo,10);
  // instancing of the three slidebars
  controls=new slideBar[1];
  controls[0] = new slideBar(10,30,300,26,0,255);
  
}
 
void draw(){
  
  background(0);
  fill(controls[0].val);
  rect(10,100,480,300);
  
  for(int a=0;a<controls.length;a++){
    controls[a].dessine();
  }
  
  text("Use Slider to Select Greyscale", 350, 30);
  
  String text;
  
  text = str(int(controls[0].val)  ) ;
  text("fill(" + text + ");", 350, 60);
  text("stroke(" + text + ");", 350, 80);
}
 
void mouseReleased(){
  for(int a=0;a<controls.length;a++){
    controls[a].lache();
  }
}

// quick and dirty slidebar
// instance as :
// new slideBar(x,y,width,height,minimum value, maximum value);
// the output will be stuck in (mySlidebar).val

class slideBar{
  int x,y,h,l;
  float mi,  ma, val,pos,tot;
  boolean caught;
  slideBar(int _x, int _y, int _l, int _h, float _mi, float _ma){
    x=_x; 
    y=_y;
    h=_h;
    l=_l;
    mi=_mi;
    ma=_ma;
    val=0;
    tot= (ma-mi)/l; 
    caught=false;
    pos=0;
  }
  void dessine(){
    if(mousePressed ){
      if(mouseX>x && mouseX<x+l && mouseY>y && mouseY<y+h){
        caught=true;
      } 
      if(caught){
        pos=constrain(mouseX, x, x+l);
        val =  (pos-x)*tot  ; 
        // tell the others to drop
        for(int a=0;a<controls.length;a++){
          if (controls[a] != this){
            controls[a].caught=false;
          }
        }
      }
    }
    fill(255);
    rect(x,y,l,h);
    line(pos,y,pos,y+h);
    int vvv = int(val);
    //fill(255-controls[0].val,255-controls[1].val,255-controls[2].val);
    
    fill(255);
    text(vvv, x+l+10, y+10);
  } 
  void lache(){
    caught=false;
  }
} 

Colour Picker Helper

Use this sketch to be able to select a colour and see what the fill and stroke command should look like


/* Nice and simple Colour picker */

slideBar[] controls;
PFont maTypo;

void setup(){
  size(500,420);
  // creating a type using arial
  maTypo=createFont("arial",10, false);
  textFont(maTypo,10);
  // instancing of the three slidebars
  controls=new slideBar[3];
  controls[0] = new slideBar(10,10,300,16,0,255);
  controls[1] = new slideBar(10,30,300,16,0,255);
  controls[2] = new slideBar(10,50,300,16,0,255);
}

void draw(){

  background(0);
  fill(controls[0].val,controls[1].val,controls[2].val);
  rect(10,100,480,300);

  for(int a=0;a<controls.length;a++){
    controls[a].dessine();
  }

  text("Use Sliders to Select Colours", 350, 30);

  String text;

  text = str(int(controls[0].val)) + "," + str(int(controls[1].val)) + "," + str(int(controls[2].val)) ;
  text("fill(" + text + ");", 350, 60);
  text("stroke(" + text + ");", 350, 80);
}

void mouseReleased(){
  for(int a=0;a<controls.length;a++){     controls[a].lache();   } } class slideBar{   int x,y,h,l;   float mi,  ma, val,pos,tot;   boolean caught;   slideBar(int _x, int _y, int _l, int _h, float _mi, float _ma){     x=_x;      y=_y;     h=_h;     l=_l;     mi=_mi;     ma=_ma;     val=0;     tot= (ma-mi)/l;      caught=false;     pos=0;   }   void dessine(){     if(mousePressed ){       if(mouseX>x && mouseX<x+l && mouseY>y && mouseY<y+h){
        caught=true;
      }
      if(caught){
        pos=constrain(mouseX, x, x+l);
        val =  (pos-x)*tot  ;
        // tell the others to drop
        for(int a=0;a<controls.length;a++){
          if (controls[a] != this){
            controls[a].caught=false;
          }
        }
      }
    }
    fill(255);
    rect(x,y,l,h);
    line(pos,y,pos,y+h);
    int vvv = int(val);
    //fill(255-controls[0].val,255-controls[1].val,255-controls[2].val);

    fill(255);
    text(vvv, x+l+10, y+10);
  }
  void lache(){
    caught=false;
  }
}

Animated Face

This is a great sketch – shows you a cool zombie face – but move the mouse and see what happens!!





//Zombie eyes solution
//change these values to suit the position you want for the eyes
int leftEyeX = 270;
int leftEyeY = 225;
int rightEyeX = 400;
int rightEyeY = 225;
 
 
void setup() {
size(640, 480);
smooth();
}
 
void draw() {
background(0, 38, 145); // blue background color
strokeWeight(5);
 
fill(170, 150, 114);// face colour
quad(500, 55, 180, 55, 200, 350, 480, 350); //head
rect(200, 415, 280, 60); //jaw
 
fill(200, 200, 200); //teeth colour
// upper teeth
quad(200, 350, 250, 350, 240, 380, 210, 380);
quad(250, 350, 300, 350, 290, 380, 260, 380);
quad(300, 350, 350, 350, 340, 380, 310, 380);
quad(350, 350, 400, 350, 390, 380, 360, 380);
quad(400, 350, 450, 350, 440, 380, 410, 380);
quad(450, 350, 480, 350, 490, 380, 460, 380);
 
// lower teeth
quad(200, 415, 230, 415, 220, 390, 190, 390);
quad(230, 415, 280, 415, 270, 390, 240, 390);
quad(280, 415, 330, 415, 320, 390, 290, 390);
quad(330, 415, 380, 415, 370, 390, 340, 390);
quad(380, 415, 430, 415, 420, 390, 390, 390);
quad(430, 415, 480, 415, 470, 390, 440, 390);
 
noStroke();
fill(255, 66, 0); // blood colour
triangle(490, 390,480, 415,500, 415);
ellipse(490, 415, 20, 20);
 
stroke(0);
strokeWeight(5);
fill(255);
ellipse(leftEyeX, leftEyeY, 80, 80); //left eye
ellipse(rightEyeX, rightEyeY, 80, 80); //right eye
 
fill(0, 255, 0);//green pupil
 
float pupilLeftX = map(mouseX, 0, width, leftEyeX-25, leftEyeX+25);///adjust the added value to suit
float pupilLeftY = map(mouseY, 0, height, leftEyeY-25, leftEyeY+20);
float pupilRightX = map(mouseX, 0, width, rightEyeX-25, rightEyeX+25);
float pupilRightY = map(mouseY, 0, height, rightEyeY-25, rightEyeY+20);
 
ellipse(pupilLeftX, pupilLeftY, 20, 20); //left pupil
ellipse(pupilRightX, pupilRightY, 20, 20); //right pupil
 
}