JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

CSS

html, body {
	padding:0;
	margin:0;
	overflow:hidden;
}

JavaScript

let objects = [];
let amt = 10;


function setup() {
  createCanvas(innerWidth, innerHeight);
	for(let i = 0; i < amt; i++){
		objects.push(new Ray(i, amt));
	}
}

function draw() {
    background(27,27,27);
		
		objects.map((obj) => {
			obj.update();
			obj.render();
		});
}

function updateObjects() {
	resizeCanvas(windowWidth, windowHeight);
	objects.map((obj) => {
		obj.updateObject();
	});
}

function windowResized() {
	updateObjects();
}

class Ray {
	constructor(nr, amt) {
		this.nr = nr;
		this.amt = amt;
		
		this.swayIncrement = 0;
		this.swayWidth = 100; //Considered as speed and somewhat the travel width
		this.swayAmplitude = 1; //Considered as ravel width
		this.sway = (TWO_PI / this.swayWidth);
		
		this.brightness = round(random(100, 255));
		
		this.pos = createVector(0, 0);
		this.botPos = createVector(0, innerHeight);
		this.size = createVector(0, 0);
		
		this.resizeObject(this.nr, this.amt);
	}
	
	resizeObject(nr, amt) {
		this.size.x = innerWidth / amt;
		this.size.y = innerHeight;
		
		this.pos.x = nr * this.size.x;
		this.pos.y = innerHeight - innerHeight;
	}
	
	updateObject() {
		this.resizeObject(this.nr, this.amt);
	}
	
	update() {
		this.pos.x = this.pos.x -= random(-2, 2) + (sin(this.swayIncrement += this.sway) * this.swayAmplitude);
		this.botPos.x = map(this.pos.x, 0, innerWidth, 0, innerWidth);
		
		if(this.pos.x <= -this.size.x){
			console.log(this.size.x);
			this.pos.x = innerWidth + this.size.x;
		}
	}
	
	render() {
		//noStroke();
		//fill(`rgba(${this.brightness},${this.brightness},${this.brightness},0.3)`);
		fill('gray');
		beginShape(QUADS);
			vertex(this.pos.x, this.pos.y); 	//top left
			vertex(this.pos.x, this.size.y); 	//bottom left
			vertex(this.size.x, this.size.y); //botton right
			vertex(this.pos.x, this.size.y); 	//top right
		endShape(CLOSE);
		//rect(this.pos.x, this.pos.y, this.botPos.x - this.size.x, this.size.y);
	}
}