Nesta One Day Digital Teachers: Processing

All the materials for this are available on the super openprocessing.org site in the Nesta one day digital: teachers addition classroom. If you are looking at one and want to hack around log in an click the tweak button to edit in the browser. Alternatively download processing and copy and paste any of the complete sketches below.

The essence of what I was trying to get out of this session was simple. Try and demonstrate the flexibility of Processing as an introduction to programming in a range of contexts. The first examples locate it within the type of activities currently undertaken, then we moved on to some 2D graphics underpinnings (shapes colour etc) and the finally we moved on to some interactive examples. I had hoped hoped to close with parcels systems as a mechanism to talk about object orientation but hey 2 hrs is 2 hrs 🙂

Example 1 hello world:

//This will display the string between the double quotes
//the ln puts us on the next line
println("1 hello world");

//we can do this by hand if we want
print("2 hello world\n");

// decelration of a string variable and assign its value
// to Chris 
String name = "Chris";

// you can concatonate strings with the + operator
println("3 hello "+name+" how are you?");

// you can also display text to the screen
text("4 hello",0,20);

Example 2 shapes and lines:

//for this we will use Hue Saturation and Brighness as a colour space
colorMode(HSB, 100);

//coordonates are how we position shapes
// the x coordonate is given first and extends from left to right
// the y coordonate is given secodn and extend from top to bottom

//draw a single point 10 pixels in and down
point(10, 10);

// rectangle needs an x,y position of the upper left corner
// it also needs a width and height rect(x,y,width,height);
rect(20, 10, 30, 20);

// a line has a start point and an end point
line(20, 40, 60, 50);

//we can use a for loop to draw a colum of rectangles
// a for loop has three bits
// we need a variabel: int y=10
// deside when we want to loop until y<100
// and deside how much we add to our variable  y+=10
for(int y=10;y<100;y+=10){
  fill(y,100,100);
  rect(80,y,10,10);
}

// we can use two loops to draw a grid
// a for loop has three bits
// we need a variabel: int x
// deside when we want to loop until x<50
// and deside how much we add to our variable  x+=10
// we will use one for x and y
for (int x = 0; x<50;x+=10) {
  for (int y = 50; y<100;y+=10) {
    //this will use the last fill colour spesified 
    rect(x, y, 10, 10);
  }
}

//we can change the colour and thikness of the lines two 
strokeWeight(5);
stroke(20,100,100);
line(95,10,95,90);

Example 3 paint app:

void setup() {
  size(400, 400);
  background(0);
  //line colour white
  stroke(255);
  //no fill
  noFill();
}

void draw() {

  if (mousePressed) {
    ellipse(mouseX, mouseY, 10, 10);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

//this fucniton is called when we press a key

void keyPressed() {
  //this fucntion stores the char pressed as key
  // we can compare this to things with a double equals
  // and change things about how we are drawing

  //this gorup of if's will change the line thikness
  if (key == '1') {
    strokeWeight(1);
  } 
  if (key == '2') {
    strokeWeight(2);
  } 
  if (key == '3') {
    strokeWeight(3);
  } 
  if (key == '4') {
    strokeWeight(4);
  } 
  if (key == '5') {
    strokeWeight(5);
  } 

  //this will let us select colour
  if (key == 'r') {
    stroke(255, 0, 0);
  } 
  if (key == 'b') {
    stroke(0, 255, 0);
  } 
  if (key == 'g') {
    stroke(0, 0,255);
  } 

  //if we get the space key we will refreash the screen
  if (key == ' ') {
    background(0);
  }
}

Example 4 animation:

float x=0;       // variable for the x position of the ellipse
float xInc=1;    //  this is how much we will move the x pos 

//this function is called once when the sketch first runs
void setup(){
  //we can set the size of the output window
  size(500,500);
  //the dimentions can be accessed by the variabels width and height
  println("width  ["+width+"]");
  println("height ["+height+"]");

  //initilise the x pos to be the middle of the screen
  x= width/2;

  //redraw the background black
  background(0);
}

void draw(){
  //redraw the window
  background(0);

  //draw the ellipse
  ellipse(x,height/2,20,20);

  //add 2 to the x position of the ellipse
  x+=xInc;

  //if the possition is greater than width (so centre of ellipse at edge of screen)
  // || or
  //the x pos is on the right edge of the window
  if(x > width || x < 0){
    //flip the sign of the amount we move
    // if its +ve it moves to the right
    // if its -ve it moves to the left
    xInc= xInc *(-1); 
  }
}

 

 

Example 5 follow me:

//some varabel for our object we will interact with 
float xPos=0;  
float yPos=0;
float d=5;

void setup() {
  size( 400, 400);    //screen size 400 x 400
  background(255);    //background white
  xPos= width/2;      //postition our ellipse in the center of the screen
  yPos=height/2;
}

void draw() {
  background(255);    //every frame re draw with white backgorund

  stroke(0);  //line colour is black          
  strokeWeight(0.1);  //very thin line
  ellipse(xPos,yPos,100,100);  //draw a large ellips this is our line of collision

  //if you mouse is inside the ellips above 
  // distance from center to mouse is less than radius
  if (dist(mouseX, mouseY, xPos, yPos) <50) {

    //calculate the distance in the x axis from our ellipse
    //to our mouse
    float xDist = mouseX-xPos;

    //map the distance from its range 0-100 to a much smaller one 0-10
    //this means the furhter our mouse the quicker it will move towords it
    // as we get closer it slows and we get a nice deceleration effect
    float xMove = map(xDist, 0, 100, 0, 10);

    //change the xPos by the amoutn we have calculated
    xPos+=xMove;

    //duplicate the previous three steps for the y axis and you ellipse will move in 2 dimensions

  }
  //draw the ellips at the center
  ellipse(xPos, yPos, d, d);
}

Example 6: particle system:

//set up an array of refferances to Particle objects
Particle p[] = new Particle[30];

void setup() {
  size( 400, 400);    //screen size 400 x 400
  background(255);    //background white

  //as we are using an array we need a fixed loop
  //to step through each element of the array
  for (int i=0;i<p.length;i++) {
    //now we need to hang an object off each refferance
    p[i]=new Particle();
  }
  //no fill so we can see overlapping Particles
  noFill();
}

void draw() {
 // background(255);    //every frame re draw with white backgorund

  //as we are in an array we must move each Particle
  for (int i=0;i<p.length;i++) {
    p[i].move();
  }
}

//declare a class
class Particle {
  //some varabel for our object we will interact with 
  float xPos=0;  
  float yPos=0;
  float d=0;

  //this is the constructor is called when we instansiate an object
  public Particle() {
    //place this Particle in a random position
    //and make it  a random size
    xPos = random(width);
    yPos = random(height);
    d=random(5, 10);
  }

  public void  move() {
    stroke(0,0,0);  //line colour is black          
    strokeWeight(0.1);  //very thin line
    //ellipse(xPos, yPos, 6*d, 6*d);  //draw a large ellips this is our line of collision

    //if you mouse is inside the ellips above 
    // distance from center to mouse is less than radius OR the mouse is pressed
    if (dist(mouseX, mouseY, xPos, yPos) <3*d || mousePressed) {

      //calculate the distance in the x axis from our ellipse
      //to our mouse
      float xDist = mouseX-xPos;
      float yDist = mouseY-yPos;

      //map the distance from its range 0-100 to a much smaller one 0-10
      //this means the furhter our mouse the quicker it will move towords it
      // as we get closer it slows and we get a nice deceleration effect
      float xMove = map(xDist, 0, 100, 0, 10);
      float yMove = map(yDist, 0, 100, 0, 10);

      //change the xPos by the amoutn we have calculated
      xPos+=xMove;
      yPos+=yMove;
    }
    else {
      //if we are no close to the mouse wiggle
      xPos+=random(-1, 1.4);
      yPos+=random(-2, 2);
    }
    //draw the ellips at the center
    ellipse(xPos, yPos, d, d);
  }
}

 

 

Advertisements

One Response to Nesta One Day Digital Teachers: Processing

  1. Pingback: One Day Digital: teachers | Short and Dishevelled

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s