I am trying to get some vanilla js to work in the global js area. I have it working on my desktop with visual composer but when I add it the global js nothing happens.
Am I missing something?
Here is the code:
const canvas = document.getElementById(“canvas1”);
const ctx = canvas.getContext(“2d”); // CTX MEANS CONTEXT
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
let particleArray;
// get mouse mouse position ///////////////////////////////
let mouse = {
x: null,
y: null,
radius: ((canvas.height/80) * (canvas.width/80))
}
window.addEventListener(‘mousemove’,
function(event){
mouse.x = event.x;
mouse.y = event.y;
});
// create Particle
class Particle {
constructor(x, y, directionX, directionY, size, color) {
this.x = x;
this.y = y;
this.directionX = directionX;
this.directionY = directionY;
this.size = size;
this.color = color;
this.speedX = this.directionX;
this.speedY = this.directionY;
}
// create method to draw individual particle
draw() {
ctx.beginPath();
ctx.arc(this.x,this.y,this.size,0,Math.PI * 2, false);
ctx.fillStyle = '#777';
ctx.fill();
}
// check particle position, check mouse position, move the paticle, draw the particle
update() {
// check if particle is still within canvas
if (this.x > canvas.width || this.x < 0){
this.directionX = -this.directionX;
this.speedX = this.directionX;
} if (this.y + this.size > canvas.height || this.y - this.size < 0){
this.directionY = -this.directionY;
this.speedY = this.directionY;
}
// check mouse position/particle position - collision detection
let dx = mouse.x - this.x;
let dy = mouse.y - this.y;
let distance = Math.sqrt(dx*dx + dy*dy);
if (distance < mouse.radius + this.size){
if(mouse.x < this.x && this.x < canvas.width - this.size*10){
this.x+=10;
}
if (mouse.x > this.x && this.x > this.size*10){
this.x-=10;
}
if (mouse.y < this.y && this.y < canvas.height - this.size*10){
this.y+=10;
}
if (mouse.y > this.y && this.y > this.size*10){
this.y-=10;
}
}
// move particle
this.x += this.directionX;
this.y += this.directionY;
// call draw method
this.draw();
}
}
// create particle array
function init(){
particleArray = [];
let numberOfParticles = (canvas.height*canvas.width)/9000;
for (let i=0; i<numberOfParticles; i++){
let size = (Math.random()*20)+1;
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
let directionX = (Math.random() * 2) - .5;
let directionY = (Math.random() * 2) - .5;
let color = 'gold';
particleArray.push(new Particle(x, y, directionX, directionY, size, color));
}
}
// create animation loop
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0,0,innerWidth,innerHeight);
for (let i = 0; i < particleArray.length; i++){
particleArray[i].update();
}
connect();
}
init();
animate();