Recently, I attempted to utilize some of the particle designs featured on this website
https://speckyboy.com/particle-animation-code-snippets/ERROR:
An error was thrown: Uncaught TypeError: Cannot read property 'getContext' of null at javascript.js:2
var canvas = document.querySelector("#scene"),
ctx = canvas.getContext("2d"),
particles = [],
amount = 0,
mouse = {
x: 0,
y: 0
},
radius = 1;
var colors = ["#468966", "#FFF0A5", "#FFB03B", "#B64926", "#8E2800"];
var copy = document.querySelector("#copy");
var ww = canvas.width = window.innerWidth;
var wh = canvas.height = window.innerHeight;
function Particle(x, y) {
this.x = Math.random() * ww;
this.y = Math.random() * wh;
this.dest = {
x: x,
y: y
};
this.r = Math.random() * 5 + 2;
this.vx = (Math.random() - 0.5) * 20;
this.vy = (Math.random() - 0.5) * 20;
this.accX = 0;
this.accY = 0;
this.friction = Math.random() * 0.05 + 0.94;
this.color = colors[Math.floor(Math.random() * 6)];
}
Particle.prototype.render = function() {
// rendering logic here...
};
// Additional functions and event listeners...
initScene();
requestAnimationFrame(render);body {
margin: 0;
overflow: hidden;
font-size: 0;
}
// CSS styling rules...
<!-- Edit the text with whatever you want :) -->
<!-- Works with emojis too ! -->
<link rel="stylesheet" href="stylesheet.css">
<script src="javascript.js"></script>
<canvas id="scene"></canvas>
<input id="copy" type="text" value="Hello Codepen ♥" />
<p>Click anywhere to change the radius of your mouse</p>