xxxxxxxxxx
110
let img;
let message = 'sitting, standing, ',
font,
bounds, // holds x, y, w, h of the text's bounding box
fontsize = 60,
x,
y; // x and y coordinates of the text
let msg2= 'stepping and jumping, ', bounds2;
let msg3= 'the stage is transformed into ', bounds3;
let msg4= 'a moving text', bounds4;
function preload() {
img = loadImage('ven.png');
font = loadFont('Roboto-Regular.ttf');
}
function setup() {
createCanvas(windowWidth, windowHeight);
textSize(fontsize);
// get the width and height of the text so we can center it initially
bounds = font.textBounds(message, 0, 0, fontsize);
bounds2 = font.textBounds(msg2, 0, 0, fontsize);
bounds3 = font.textBounds(msg3, 0, 0, fontsize);
bounds4 = font.textBounds(msg4, 0, 0, fontsize);
x1 = width / 2 - bounds.w / 2;
y1 = height / 2 - bounds.h / 2;
x2 = width / 2 - bounds2.w / 2;
y2 = 3*height / 5 - bounds2.h / 2;
x3 = width / 2 - bounds3.w / 2;
y3 = 2*height / 3 - bounds3.h / 2;
x4 = width / 2 - bounds4.w / 2;
y4 = 4*height / 5 - bounds4.h / 2;
}
function draw() {
clear();
background(0);
push();
scale(1.5);
image(img, 0, 0);
pop();
tint(255,250);
fill(255);
text(message, x1, y1);
text(msg2, x2, y2);
text(msg3, x3, y3);
text(msg4, x4, y4);
bounds = font.textBounds(message, x1, y1, fontsize);
bounds2 = font.textBounds(msg2, x2, y2, fontsize);
bounds3 = font.textBounds(msg3, x3, y3, fontsize);
bounds4 = font.textBounds(msg4, x4, y4, 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
) {
x1 += random(-5, 5);
y1 += random(-5, 5);
}
if (
mouseX >= bounds2.x &&
mouseX <= bounds2.x + bounds2.w &&
mouseY >= bounds2.y &&
mouseY <= bounds2.y + bounds2.h
) {
x2 += random(-5, 5);
y2 += random(-5, 5);
}
if (
mouseX >= bounds3.x &&
mouseX <= bounds3.x + bounds3.w &&
mouseY >= bounds3.y &&
mouseY <= bounds3.y + bounds3.h
) {
x3 += random(-5, 5);
y3 += random(-5, 5);
}
if (
mouseX >= bounds4.x &&
mouseX <= bounds4.x + bounds4.w &&
mouseY >= bounds4.y &&
mouseY <= bounds4.y + bounds4.h
) {
x4 += random(-5, 5);
y4 += random(-5, 5);
}
// scale(0.8);
}