Tickle
The word "tickle" jitters when the cursor hovers over. Sometimes, it can be tickled off the screen.
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
let message = 'tickle',
font,
bounds, // holds x, y, w, h of the text's bounding box
fontsize = 60,
x,
y; // x and y coordinates of the text
function preload() {
font = loadFont('assets/SourceSansPro-Regular.otf');
}
function setup() {
createCanvas(710, 400);
// set up the font
textFont(font);
textSize(fontsize);
// get the width and height of the text so we can center it initially
bounds = font.textBounds(message, 0, 0, fontsize);
x = width / 2 - bounds.w / 2;
y = height / 2 - bounds.h / 2;
}
function draw() {
background(204, 120);
// write the text in black and get its bounding box
fill(0);
text(message, x, y);
bounds = font.textBounds(message, x, y, fontsize);
// check if the mouse is inside the bounding box and tickle if so
if (
mouseX >= bounds.x &&
mouseX <= bounds.x + bounds.w &&
mouseY >= bounds.y &&
mouseY <= bounds.y + bounds.h
) {
x += random(-5, 5);
y += random(-5, 5);
}
}
