https://friday-the-13th-screensaver.netlify.app/script.js

1'use strict'
2
3// bouncing twitter logo - with particles!!!
4// logo grows each time it hits the edge
5// particles when it hits the edge
6// 
7// https://www.hicetnunc.xyz/tz/tz1gthv2uBERqmpmXwoCkSbffWTrkfwWwrH4
8// https://twitter.com/generatethings
9// https://generatethings.xyz/
10
11// images
12let dvd;
13let dvd_black;
14
15// layout
16let logo_scale = 2;
17let scale_start = logo_scale;
18let scale_increase = 0.4;
19let x;
20let y;
21let xspeed;
22let yspeed;
23let r, g, b;
24let bg_r, bg_g, bg_b;
25
26// particles
27let system;
28let system_on = true;
29let particles_to_add = 10;
30let particle_size = 10;
31
32function preload() {
33  // dvd = loadImage("hen-small-white.png");
34  // dvd_black = loadImage("hen-small-white.png");
35  // dvd = loadImage("https://cdn.glitch.com/421e16bd-5472-472f-b50d-2a15b2621490%2Fhen-small-white.png?v=1624296612620");
36  // dvd = loadImage("twitter-white.png");
37  dvd = loadImage("/images/fridaythe13thlogo-white.png");
38  // dvd = loadImage("https://cdn.glitch.com/a427aa27-8a8a-474c-9fc8-66579684a375%2Ftwitter-white.png?v=1625063231503");
39}
40
41function setup() {
42  // pixelDensity(2);
43  createCanvas(windowWidth, windowHeight);
44  // createCanvas(768, 512);
45  x = random(width);
46  y = random(height);
47  xspeed = 2;
48  yspeed = 2;
49  newColour();
50  newBackgroundColour();
51  
52  //   particles
53  system = new ParticleSystem(createVector(-100, -100));
54}
55
56function newColour() {
57  r = random(127) + 127;
58  g = random(0) + 0;
59  b = random(0) + 0;
60
61  // maybe it's white?
62  if (Math.random() < 0.5) {
63    r = g = b = random(55) + 200;
64    // g = random(127) + 127;
65    // b = random(127) + 127;
66  }
67}
68
69function newBackgroundColour() {
70  bg_r = random(50) + 0;
71  bg_g = 0;
72  bg_b = 0;
73}
74
75function resetScale() {
76  logo_scale = scale_start;
77}
78
79function draw() {  
80  noSmooth();
81  background(bg_r, bg_g, bg_b);
82  noStroke(255);
83  fill(bg_r, bg_g, bg_b);
84  tint(r, g, b);
85  // if (x < 1) {
86  //   scale(-1, 1);
87  // }
88  // else {
89  //   scale(1, 1);
90  // }
91  image(dvd, x, y, 40 * logo_scale, 37 * logo_scale);
92
93  x = x + xspeed;
94  y = y + yspeed;
95  
96  // 32
97  // 26
98
99  if (x + (dvd.width * logo_scale) >= width) {
100    logo_scale += scale_increase;
101    xspeed = -xspeed;
102    x = width - (dvd.width * logo_scale);
103    // newColour();
104    // filter(INVERT);
105    system.addParticlesXY(createVector(x + (dvd.width * logo_scale), y));
106  } else if (x <= 0) {
107    logo_scale += scale_increase;
108    xspeed = -xspeed;
109    x = 0;
110    // newColour();
111    // filter(INVERT);
112    system.addParticlesXY(createVector(x, y));
113  }
114
115  if (y + (dvd.height * logo_scale) >= height) {
116    logo_scale += scale_increase;
117    yspeed = -yspeed;
118    y = height - (dvd.height * logo_scale);
119    // newColour();
120    // filter(INVERT);
121    system.addParticlesXY(createVector(x, y + (dvd.height * logo_scale) - 10));
122  } else if (y <= 0) {
123    logo_scale += scale_increase;
124    yspeed = -yspeed;
125    y = 0;
126    // newColour();
127    // filter(INVERT);
128    system.addParticlesXY(createVector(x, y));
129  }
130  
131  if ((dvd.height * logo_scale) > windowHeight) {
132    x = random(width);
133    y = random(height);
134    mouseClicked();
135    // filter(INVERT);
136  
137    newBackgroundColour();
138  }
139  
140  // particles
141  system.run();
142}
143
144function mouseClicked() {
145  logo_scale = scale_start;
146  newColour();
147  var newspeed = 1 + random(1) + random(1);
148  if (xspeed < 0) {
149    xspeed = newspeed * -1;
150  }
151  else {
152    xspeed = newspeed;
153  }
154  if (yspeed < 0) {
155    yspeed = newspeed * -1;
156  }
157  else {
158    yspeed = newspeed;
159  }
160  
161  newBackgroundColour();
162}
163
164function windowResized() {
165  resizeCanvas(windowWidth, windowHeight)
166}
167
168// ------------ PARTICLES ---------------
169
170
171
172// A simple Particle class
173let Particle = function(position) {
174  this.acceleration = createVector(0, 0.05);
175  this.velocity = createVector(random(-1, 1), random(-1, 0));
176  this.position = position.copy();
177  this.lifespan = 255;
178};
179
180Particle.prototype.run = function() {
181  this.update();
182  this.display();
183};
184
185// Method to update position
186Particle.prototype.update = function(){
187  this.velocity.add(this.acceleration);
188  this.position.add(this.velocity);
189  this.lifespan -= 2;
190};
191
192// Method to display
193Particle.prototype.display = function() {
194  stroke(200, this.lifespan);
195  strokeWeight(0);
196  // fill(127, this.lifespan);
197  let particle_r = 127 + random(127);
198  let particle_g = 0 + random(127);
199  let particle_b = 0 + random(127);
200  fill(particle_r, particle_g, particle_b, this.lifespan);
201  // fill(127 + random(127), 127 + random(127), 127 + random(127), this.lifespan);
202  rect(this.position.x, this.position.y, particle_size, particle_size);
203};
204
205// Is the particle still useful?
206Particle.prototype.isDead = function(){
207  return this.lifespan < 0;
208};
209
210let ParticleSystem = function(position) {
211  this.origin = position.copy();
212  this.particles = [];
213};
214
215ParticleSystem.prototype.addParticle = function() {
216  this.particles.push(new Particle(this.origin));
217};
218
219ParticleSystem.prototype.run = function() {
220  for (let i = this.particles.length-1; i >= 0; i--) {
221    let p = this.particles[i];
222    p.run();
223    if (p.isDead()) {
224      this.particles.splice(i, 1);
225    }
226  }
227};
228
229ParticleSystem.prototype.addParticlesXY = function(origin) {
230  for (let i = 0; i < particles_to_add; i++) {
231    this.particles.push(new Particle(origin));
232  }
233};