Drawing with logic

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 }