This is probably more of a Javascript question but I thought it was worth asking for your help so here we go: I am trying to put an animation within the boundaries of a section (ID: headingTitle), currently it is spanning across the whole window width and height https://www.gabriel-alvarez.xyz/
Wondering if anybody has an idea on how to do this?
hi @Gabriel_Alvarez more than JS is your request related to P5 library so next time please refer to their community as they will be more experienced with P5. I’ve never worked with this library but I was able to make it work by setting width and height variables inside setup -fn-. I thing that you can get these informations in their documentation.
This code worked for me
// Variables for the ball
var xBall = Math.floor(Math.random() * 300) + 50;
var yBall = 50;
var diameter = 50;
var xBallChange = 5;
var yBallChange = 5;
var headingCanvas = document.querySelector(".hero");
function setup() {
var width = headingCanvas.clientWidth;
var height = headingCanvas.clientHeight;
createCanvas(width, height);
// createCanvas(windowWidth, windowHeight);
noStroke();
fill(255, 204);
}
function draw() {
background(255);
// Ball bounces off walls
xBall += xBallChange;
yBall += yBallChange;
if (xBall < diameter / 2 || xBall > width - 0.5 * diameter) {
xBallChange *= -1;
}
if (yBall < diameter / 2 || yBall > height - diameter) {
yBallChange *= -1;
}
// Draw ball
fill(0);
noStroke();
ellipse(xBall, yBall, diameter, diameter);
this.display = function () {
ellipse(this.posX, this.posY, this.size);
};
}
