Skip to content

Commit 18c3975

Browse files
Batman Scripts
1 parent aa384d5 commit 18c3975

File tree

3 files changed

+132
-0
lines changed

3 files changed

+132
-0
lines changed

batman.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Bat Signal</title>
6+
<link rel="stylesheet" href="./style.css">
7+
</head>
8+
<body>
9+
<!-- partial:index.partial.html -->
10+
<div class="wrapper">
11+
<canvas></canvas>
12+
</div>
13+
<!-- partial -->
14+
<script src="./script.js"></script>
15+
16+
</body>
17+
</html>

script.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
let scalar = .75,
2+
width = 610 * scalar,
3+
height = 273 * scalar,
4+
pSystemSize = 20,
5+
pathString = '',
6+
pathLength;
7+
8+
const tau = Math.PI * 2,
9+
repaint = 'rgba(0,0,10,.05)',
10+
shadowPath = document.createElementNS('http://www.w3.org/2000/svg','path'),
11+
wrapper = document.querySelector('.wrapper'),
12+
canvas = document.querySelector('canvas'),
13+
ctx = canvas.getContext('2d');
14+
15+
canvas.width = width;
16+
canvas.height = height;
17+
wrapper.style.width = width + 'px';
18+
19+
pathString = 'M264 97 l11 -82, 10 33, 41 0, 9 -33, 10 82 q72 32, 83 -70 c205 50, 205 155, 39 210 c-5 -60, -72 -60, -81 -12, -10 -42, -70 -32, -81 33 c-11 -72, -70 -72, -80 -33 c-9 -48, -76 -48, -81 12 c-168 -55, -168 -160, 40 -210 q9 102, 80 69 m40 -95 c405 0, 405 270, 0 270 c-405 0, -405 -270, 0 -270';
20+
shadowPath.setAttribute('d', pathString);
21+
pathLength = shadowPath.getTotalLength();
22+
23+
const ParticleSystem = function(num){
24+
this.colour = '#eee';
25+
this.numParticles = num;
26+
this.allParticles = [];
27+
this.generate();
28+
}
29+
ParticleSystem.prototype.generate = function(){
30+
for(let i=0; i<this.numParticles; i++){
31+
let vo = {};
32+
vo.colour = this.colour;
33+
vo.position = pathLength/this.numParticles * i;
34+
vo.id = i;
35+
vo.parent = this;
36+
vo.scalar = scalar;
37+
vo.size = 1;
38+
vo.speed = 3.2;
39+
vo.vx = 0;
40+
vo.vy = 0;
41+
this.allParticles.push(new Particle(vo));
42+
}
43+
}
44+
ParticleSystem.prototype.update = function(){
45+
for(let i=0; i<this.allParticles.length; i++){
46+
this.allParticles[i].update();
47+
}
48+
}
49+
ParticleSystem.prototype.getPointAtLength = function(id){
50+
return shadowPath.getPointAtLength(id);
51+
}
52+
53+
const Particle = function(vo){
54+
this.colour = vo.colour;
55+
this.id = vo.id;
56+
this.position = vo.position;
57+
this.parent = vo.parent;
58+
this.scalar = vo.scalar;
59+
this.size = vo.size;
60+
this.speed = vo.speed;
61+
this.pt = this.parent.getPointAtLength(this.position);
62+
this.x = this.pt.x * this.scalar;
63+
this.y = this.pt.y * this.scalar;
64+
this.vx = 0;
65+
this.vy = 0;
66+
}
67+
68+
Particle.prototype.update = function(){
69+
this.position += this.speed;
70+
if(this.position >= pathLength){
71+
this.position = this.position - pathLength;
72+
}
73+
this.pt = this.parent.getPointAtLength(this.position);
74+
this.x = this.pt.x * this.scalar;
75+
this.y = this.pt.y * this.scalar;
76+
}
77+
78+
function update(){
79+
system.update();
80+
}
81+
82+
function draw(){
83+
ctx.fillStyle = repaint;
84+
ctx.fillRect(0, 0, width, height);
85+
ctx.fillStyle = system.colour;
86+
for(let i=0; i<system.numParticles; i++){
87+
let p = system.allParticles[i];
88+
ctx.beginPath();
89+
ctx.arc(p.x, p.y, p.size, 0, tau, false);
90+
ctx.fill();
91+
}
92+
}
93+
function animate(){
94+
update();
95+
draw();
96+
requestAnimationFrame(animate);
97+
}
98+
let system = new ParticleSystem(pSystemSize);
99+
animate();

style.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
* {
2+
margin: 0;
3+
}
4+
5+
body {
6+
background: #000008;
7+
}
8+
9+
.wrapper {
10+
margin: 20px auto;
11+
position: relative;
12+
}
13+
14+
canvas {
15+
position: absolute;
16+
}

0 commit comments

Comments
 (0)