xxxxxxxxxx
61
// Connie Hu - Week 3 - htmlDOM experiment!
// Sources used
//8: HTML / CSS / DOM - p5.js Tutorial by Daniel Shiffman
// https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX
let header
function preload() {
frog = loadImage("DopeyFrog.png");
}
function setup(){
createCanvas(500, 500);
x = random(100, 300);
y = random(100, 300);
xspeed = 4;
yspeed = 4;
header = createElement('h2','Interesting Caption')
bgcolor = color(255);
button = createButton("ClICK HERE!")
button.mousePressed(changeColor);
textbox = createInput('Enter Caption')
slider = createSlider(10, 64, 16);
textbox.input(updateText);
slider.input(updateSize);
}
function changeColor() {
bgcolor = color(random(255), random(255), random(255));
}
function updateText() {
header.html(textbox.value());
}
function updateSize() {
header.style("font-size", slider.value() + "pt");
}
function draw() {
background(bgcolor);
image(frog, x, y, 100 ,100);
x = x + xspeed;
y = y + yspeed;
if (x + 107 >= width || x <= 0) {
xspeed = xspeed * -1;
//background(random(255));
}
if (y + 120 >= height || y <= 0) {
yspeed = yspeed * -1;
}
}