Using conditionals and enviroment variables we can create a simple drawing program.
function setup() {
createCanvas(640, 360);
background(250);
}
function draw() {
noStroke();
if (mouseX > width/2) {
fill("lightblue");
} else {
fill("plum");
}
if (mouseIsPressed) {
ellipse(mouseX, mouseY, 40);
}
}
Let's change our "paintbrush" of the drawing by mapping the change in mouse movement.
function setup() {
createCanvas(640, 360);
background(250);
}
function draw() {
noStroke();
if (mouseX > width/2) {
fill("lightblue");
} else {
fill("plum");
}
if (mouseIsPressed) {
// bigger difference in mouse position means bigger size
var s = mouseX - pmouseX;
ellipse(mouseX, mouseY, s);
}
}
Compound conditionals
In the next example we will divide the canvas into quadrants.
/* initialize red green and blue all to zero */
function setup() {
createCanvas(640, 360);
background(250);
}
function draw() {
/* draw lines for quadrants */
strokeWeight(1); stroke("white");
line(width/2, 0, width/2, height);
line(0, height/2, width, height/2);
noStroke();
if (mouseX < width/2 && mouseY < height/2) {
// top left
fill('plum');
} else if (mouseX > width/2 && mouseY < height/2) {
// top right
fill('lightblue');
} else if (mouseX < width/2 && mouseY > height/2) {
// bottom left
fill('gold');
} else {
// bottom right
fill('lightgreen');
}
if (mouseIsPressed) {
var s = (mouseX - pmouseX) + (mouseY - pmouseY);
ellipse(mouseX, mouseY, s);
}
}
function draw() {
background("black");
/* draw quandrant lines */
strokeWeight(1);
stroke("white");
line(width/2, 0, width/2, height);
line(0, height/2, width, height/2);
fill("white");
// set rect params
var x = 0;
var y = 0;
var w = width / 2;
var h = height / 2;
/* for each quandrant, determine of mouse
is inside bounds */
if (mouseX > w && mouseY > h) {
x = w;
y = h;
} else if (mouseX < w && mouseY > h) {
y = h;
} else if (mouseX > w && mouseY < h) {
x = w;
}
// else is 0, 0
// draw rect
rect(x, y, width / 2, height / 2);
}
State change
Using conditionals a drawing can be updated using user input.
The following examples use the self portrait example from the interaction lesson, adding state changes rather than change that occur over a range of time or space.
var mouthSize = 10; // starting value for mouthSize
function draw() {
background(220);
rectMode(CENTER);
var x = width/2;
var y = height/2;
var s = 200; // size
var o = 50; // offset
noStroke();
fill("plum");
ellipse(x, y, s); // face
fill("yellow");
ellipse(x - o, y, 25); // right eye
ellipse(x + o, y, 25); // left eye
fill('plum');
stroke("#ffddff");
strokeWeight(4);
if (mouseIsPressed) {
mouthSize = 50;
} else {
mouthSize = 10;
}
rect(x, y + o, s/2, mouthSize, 10); // mouth
}
In the next example, the self portrait has four different expressions in the different quadrants.
function draw() {
background(220);
rectMode(CENTER);
var x = width/2;
var y = height/2;
var s = 200; // size
var o = 50; // offset
// default expression
var mouthWidth = 100;
var mouthHeight = 10;
var eyeWidth = 25;
var eyeHeight = 25;
if (mouseIsPressed) {
if (mouseX < width/2 && mouseY < height/2) {
// surprised expression
mouthHeight = 10;
eyeWidth = 50;
eyeHeight = 50;
} else if (mouseX > width/2 && mouseY < height/2) {
// angry
mouthHeight = 5;
eyeWidth = 50;
eyeHeight = 10;
} else if (mouseX < width/2 && mouseY > height/2) {
// sad
mouthWidth = 20;
eyeWidth = 50;
eyeHeight = 50;
} else {
// scared
mouthHeight = 50;
eyeWidth = 100;
eyeHeight = 100;
}
}
noStroke();
fill("plum");
ellipse(x, y, s); // face
fill("yellow");
ellipse(x - o, y, eyeWidth, eyeHeight); // right eye
ellipse(x + o, y, eyeWidth, eyeHeight); // left eye
fill('plum');
stroke("#ffddff");
strokeWeight(4);
rect(x, y + o, mouthWidth, mouthHeight, 10); // mouth
}
Sequence
Let's do the same thing with one click.
Instead of detecting areas on the canvas, we can increment a counter.
var counter = 0;
function mousePressed() {
counter += 1;
if (counter == 4) {
counter = 0;
}
}
function draw() {
background(220);
rectMode(CENTER);
var x = width/2;
var y = height/2;
var s = 200; // size
var o = 50; // offset
// default expression
var mouthWidth = 100;
var mouthHeight = 10;
var eyeWidth = 25;
var eyeHeight = 25;
if (counter == 0) {
// surprised expression
mouthHeight = 10;
eyeWidth = 50;
eyeHeight = 50;
} else if (counter == 1) {
// angry
mouthHeight = 5;
eyeWidth = 50;
eyeHeight = 10;
} else if (counter == 2) {
// sad
mouthWidth = 20;
eyeWidth = 50;
eyeHeight = 50;
} else {
// scared
mouthHeight = 50;
eyeWidth = 100;
eyeHeight = 100;
}
noStroke();
fill("plum");
ellipse(x, y, s); // face
fill("yellow");
ellipse(x - o, y, eyeWidth, eyeHeight); // right eye
ellipse(x + o, y, eyeWidth, eyeHeight); // left eye
fill('plum');
stroke("#ffddff");
strokeWeight(4);
rect(x, y + o, mouthWidth, mouthHeight, 10); // mouth
}