Tutorials

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;

  }

}
Advertisements

Smiley Face – Moving the mouth tutorial

This sketch is an update to the smiley face. One of the questions asked was how do we make the mouth go down – this shows how that works.

The mouth is made up of the bezier command and a single line command. What I have done is to change the Y coordinate by adding 10 to the original value.

// Bezier end point is 10 pixels down
bezier(150, 295, 200, 370, 300, 370, 350, 320);

// Top line of the mouth – also 10 points down
line(150, 295, 350, 320);


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

size (500, 500);
  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);
  
  // Bezier end point is 10 pixels down
  bezier(150, 295, 200, 370, 300, 370, 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 );


}