Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Processing p5.js + Javascript ES6 Test Sketch
// Javascript ES6 Class Test
// Works in Chrome and p5 on OS X.
'use strict';
let rays,
nRays = 1000;
class DisplayableList extends Array {
constructor() {
super();
}
update() {
this.forEach(function(item) {
item.update();
})
}
display() {
this.forEach(function(item) {
item.display();
})
}
}
class Ray {
constructor(position, velocity) {
this.position = position;
this.velocity = velocity;
}
update() {
this.position.add(this.velocity);
}
display() {
let p2 = this.position.copy().sub(this.velocity.copy().mult(4));
line(this.position.x, this.position.y, p2.x, p2.y);
}
}
function init() {
rays = new DisplayableList();
let start_position = createVector(random(width), random(height));
for (let i = 0; i < nRays; i++) {
let position = start_position.copy(),
velocity = p5.Vector.fromAngle(random(TAU)).mult(random(0.25, 4)),
ray = new Ray(position, velocity);
rays.push(ray);
}
}
function setup() {
createCanvas(500, 500);
init();
stroke(255, 32, 32, 128);
}
function draw() {
if (frameCount % 120 === 0) {
init();
}
blendMode(BLEND);
background(0);
blendMode(ADD);
rays.update();
rays.display();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment