-
Notifications
You must be signed in to change notification settings - Fork 0
/
Sleepy Monster 2
132 lines (108 loc) · 2.94 KB
/
Sleepy Monster 2
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// Random array picker source code from:https://www.youtube.com/watch?v=iCXBNKC6Wjw
// The Coding Train. 7.1: What Is An Array? - P5.Js Tutorial. 2015, https://www.youtube.com/watch?v=VIQoUghHSxU
let w;
let h;
let multi = ['#C264C1', '#EBE14A', '#00980A', '#687DF2', '#69F591'];
let mycolor;
function setup() {
createCanvas(windowWidth, windowHeight);
w = windowWidth;
h = windowHeight;
let rand = round(random(multi.length-1));
mycolor = multi[rand];
angleMode(DEGREES);
frameRate(9);
ellipseMode(CENTER);
}
function draw() {
//text(mycolor, 34, 45);
background(mycolor);
sleepy();
wakeMultitouch();
function sleepy() {
//hair
noStroke();
fill("#010178");
rect(0, 0, w / 9, h / 5);
rect(w / 9, 0, w / 9, h / 7);
rect(w / 4.5, 0, w / 9, h / 5);
rect(w / 3, 0, w / 9, h / 7);
rect(w * 4 / 9, 0, w / 9, h / 5);
rect(w * 5 / 9, 0, w / 9, h / 7);
rect(w * 6 / 9, 0, w / 9, h / 5);
rect(w * 7 / 9, 0, w / 9, h / 7);
rect(w * 8 / 9, 0, w / 9, h / 5);
rect(w, 0, w / 9, h / 7);
//left eyebrow
rectMode(CENTER);
fill("#010178");
rect(w / 3, h / 3, w / 4, h / 20);
//right eyebrow
fill("#010178");
rect(width - w / 3, h / 3, w / 4, h / 20);
//left eye closed
fill("#010178");
ellipse(w / 3, h / 2, w / 4, w / 4);
//right eye closed
noStroke();
fill("#010178");
ellipse(width - w / 3, h / 2, w / 4, w / 4);
//nose
fill("#010178");
arc(w / 2, height - h / 2.8, w / 16, w / 16, 180, 0);
//mouth
{
fill("FFFFFFF");
stroke("#010178");
strokeWeight(h / 40);
var step = frameCount % 20;
translate(width - w / 2, height - h / 5);
applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
ellipse(10, 0, w / 5, w / 5);
textSize(80);
noStroke();
fill('#FFFFFF');
text('zzz', w / 5, w / 5);
resetMatrix();
}
}
function wakeMultitouch() {
fill("#010178");
let display = touches.length;
//text(display, 20, 100);
//ellipse(200,200,300-100*display,300-100*display);
//left eye open
noStroke();
fill('#010178');
ellipse(w / 3, h / 2, w / 4, w / 4);
fill('#69F5E7');
ellipse(w / 3, h / 2, w / 5, w / 5);
fill('#B6BDFA');
ellipse(w / 3, h / 2, w / 6, w / 6);
fill('#010178');
ellipse(w / 3, h / 2, w / 11, w / 11);
fill('#FFFFFF');
ellipse(w / 2.8, h / 2.1, w / 28, w / 28);
//right eye open
fill('#010178');
ellipse(width - w / 3, h / 2, w / 4, w / 4);
fill('#69F5E7');
ellipse(width - w / 3, h / 2, w / 5, w / 5);
fill('#B6BDFA');
ellipse(width - w / 3, h / 2, w / 6, w / 6);
fill('#010178');
ellipse(width - w / 3, h / 2, w / 11, w / 11);
fill('#FFFFFF');
ellipse(width - w / 3.2, h / 2.1, w / 28, w / 28);
//left eye closed
fill("#010178");
ellipse(w / 3, h / 2, 0.25*w - 25*display , 0.25*w - 25*display);
//right eye closed
noStroke();
fill("#010178");
ellipse(width - w / 3, h / 2, 0.25*w - 25*display , 0.25*w - 25*display);
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}