MammaMia posted 4 years ago
chris posted 4 years ago

Hi! I'm well, hope you are too!

Would you be able to post a code snippet of your .js file? If you hit the { } icon on the top of the text editor here, it should transform your code to look something like this:

const test = 'string here'

Should be able to help you out a bit better with a code example :)

MammaMia posted 4 years ago


I can send you my pages address, scroll to the bottom of page.

If you refresh the page on that CANVAS, it will work, but for the first time it doesn't work.

chris posted 4 years ago

Very cool website, really like the creativity behind everything you're doing.

Regarding your issue with the balls not expanding, my first thought is that it's due to the offset of the canvas relative to the window's scroll position. Whenever you add a canvas to a page that requires scrolling and interaction, you have to subtract the window's scroll position and or the canvas' offset from the top of the window, from your mousemove event listener's clientY.

So wherever you're setting clientY you need to subtract from it, the canvas' offset which you can obtain with getBoundingClientRect().top, then also subtract the window's scroll which you can get with window.scrollY. Think you should be good after that, let me know if that helps!

MammaMia posted 4 years ago

Hi, thanks!

Something like this ?

const offsetLeft = document.getElementById('flyingBalls').getBoundingClientRect().left;
const offsetTop = document.getElementById('flyingBalls').getBoundingClientRect().top;

let mouse = {
    x: undefined,
    y: undefined
var maxRadius1 = 40;
let ballCount1 = 1000;
var colorArray = [
window.addEventListener('mousemove', function (event) {
    mouse.x = event.x - offsetLeft;
    mouse.y = event.y - offsetTop - window.scrollY;
window.addEventListener('resize', function () {
    canvas4.width = window.innerWidth;
    // canvas.height = window.innerHeight;


Want to participate?

Create a free Chris Courses account to begin

Sign In

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.