Using conditionals and enviroment variables we can create a simple drawing program.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Let's change our "paintbrush" of the drawing by mapping the change in mouse movement.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Compound conditionals§
In the next example we will divide the canvas into quadrants.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 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);
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
In the next example, the self portrait has four different expressions in the different quadrants.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Sequence§
Let's do the same thing with one click.
Instead of detecting areas on the canvas, we can increment a counter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX