# 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);
}
}```

```//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;

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