Month: October 2012

App Design

Part of the course is to design an app – this app will be published on the google play store

Keep it simple:

Ideas please:

1 – Simple Hangman

2 – Bunny Popper – Bunny pops up – gets bashed – faster and faster

3 – Space Invaders ? – Based on the sketch

4 – ????

 

All Shapes to Draw with

This shows all the shapes that you can use – a Rectangle, Triangle and Ellipse


size(640, 360);

background(0);
noStroke();

fill(204);
triangle(18, 18, 18, 360, 81, 360);


fill(102);
rect(81, 81, 63, 63);


fill(204);
quad(189, 18, 216, 18, 216, 360, 144, 360);


fill(255);
ellipse(252, 144, 72, 72);

fill(204);
triangle(288, 18, 351, 360, 288, 360);

fill(255);
arc(479, 300, 280, 280, PI, TWO_PI);


Using Variables

This a simple example on how to use variables. It saves you having to work out all the points – you can use variables to keep it simple. And if you want to change the position of something you can just change the variables

size(640, 360);
background(0);
stroke(153);
strokeWeight(4);
strokeCap(SQUARE);

int a = 50;
int b = 120;
int c = 180;

line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);

a = a + c;
b = height-b;

line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);

a = a + c;
b = height-b;

line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);

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;

  }

}

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 );


}

Assignment 2 – Making the sketch move

This is part of the next assignment – 2. The idea is to be able to use the location of the cursor to draw a circle.

The assignment is to replace the circle with a cross – like a + sign or a x multiplication sign. You can also look to making the cross thicker using the strokeWeight(number); command

You can add colour as well if you want.

This needs to proper sketch structure. You can use the code here as the basis.


// Variables

void setup()
{

//your setup code
size(300,300);



}

void draw()
{

// Your code

background(0);

ellipse(mouseX,mouseY,30,30);


}