-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (131 loc) · 6.04 KB
/
index.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dust Bunnies</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
let backgroundImage;
let dustBunnyImages = [];
let dustBunnies = [];
let dustBunnySad;
let roomba;
const num = 50; // using gifs - so it can't handle too large of a num!
const noiseScale = 0.01;
let radius;
let bunnySize;
let roombaSize;
// Preload all images
function preload() {
backgroundImage = loadImage('wood.png');
for (let i = 0; i < num; i++) {
dustBunnyImages.push(loadImage("dustBunny.gif"));
}
roomba = loadImage("roomba.png");
dustBunnySad = loadImage("dustBunnySad.gif");
}
// setup the vectors of each bunny in the window
// as well as adjusting the sizes of bunnies, roomba,
// and radius of suck according to the size of the window
function setup() {
frameRate(60);
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < num; i++) {
dustBunnies.push(createVector(random(width), random(height)));
}
stroke(0, 128, 128);
noiseSeed(1);
bunnySize = Math.min(windowHeight / 8, windowWidth / 8);
sadBunnySize = bunnySize * 4;
roombaSize = Math.min(windowHeight / 6, windowWidth / 6);
radius = Math.min(windowHeight / 3, windowWidth / 3);
mouseX = windowWidth / 2;
mouseY = windowHeight / 2;
}
function draw() {
background(backgroundImage); // set the background every frame
// makes the screen look dirty until all dust bunnies are sucked up
fill(100, 50, 0, 150 * dustBunnies.length / num);
rect(0, 0, windowWidth, windowHeight);
// once every dust bunny has been sucked up, display text to say,
// "All clean!" as well as a defeated and sad dust bunny
if (dustBunnies.length < 1) {
image(dustBunnySad, windowWidth / 2 - sadBunnySize / 2, windowHeight * 3 / 5 - sadBunnySize / 2, sadBunnySize, sadBunnySize);
fill(0);
textSize(Math.min(windowWidth / 9, windowHeight / 9));
textAlign(CENTER, CENTER);
textFont('Papyrus');
text("All Clean!", windowWidth / 2 + 5, windowHeight * (4 / 5));
text("All Clean!", windowWidth / 2 - 5, windowHeight * (4 / 5));
textSize(Math.min(windowWidth / 9, windowHeight / 9));
fill(255);
text("All Clean!", windowWidth / 2, windowHeight * 4 / 5);
} else {
// for loop to set path of dust bunnies using perlin noise
for (let i = dustBunnies.length - 1; i >= 0; i--) {
let bunny = dustBunnies[i];
let bunnyImage = dustBunnyImages[i];
let n = noise(bunny.x * noiseScale, bunny.y * noiseScale);
let a = TAU * n;
// check for mouse click and for whether the current bunny
// is close enough to be sucked by the roomba
if (mouseIsPressed && (dist(bunny.x, bunny.y, mouseX, mouseY) < radius)) {
// make the bunny go towards the roomba
let directionX = mouseX - bunny.x;
let directionY = mouseY - bunny.y;
bunny.x += directionX / 100;
bunny.y += directionY / 100;
// remove bunny if it gets too close to the roomba
if (dist(bunny.x, bunny.y, mouseX, mouseY) < roombaSize) {
dustBunnies.splice(i, 1);
}
push();
translate(bunny.x, bunny.y);
// if the bunny is to the right of the roomba,
// flip the image so it looks like the bunny is trying to run away
if (mouseX < bunny.x) {
scale(-1, 1);
}
rotate(random(-.2, .2)); // make the bunny shake as if it is struggling to escape the roomba
image(bunnyImage, -bunnySize / 2, -bunnySize / 2, bunnySize, bunnySize);
pop();
}
// if the mouse is not clicked/held - the bunnies follow their perlin noise path
else {
bunny.x += cos(a);
bunny.y += sin(a);
image(bunnyImage, bunny.x - bunnySize / 2, bunny.y - bunnySize / 2, bunnySize, bunnySize);
}
// check if a bunny goes off screen - it will respawn somewhere random within the window
if (!onScreen(bunny)) {
bunny.x = random(width);
bunny.y = random(height);
}
}
// draw the roomba at the current location of the mouse
image(roomba, mouseX - roombaSize * 3 / 2, mouseY - roombaSize, roombaSize * 3, roombaSize * 2);
}
}
// confirms whether a bunny is on/off screen
function onScreen(v) {
if (v.x >= -bunnySize && v.x <= width + bunnySize && v.y >= 0 && v.y <= height) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>