const proportions = [0.5, 0.3, .2]
theShader = loadShader('shader.vert', 'shader.frag');
describe("3 separate point clouds with destinct different colors (that when combined add to white) float around on the canvas and create an emerging pattern based on voronoi noise and cell shading");
pointTypes= [color(proportions[0] * 255, proportions[1] * 255, proportions[2] * 255),
color(proportions[2] * 255, proportions[0] * 255, proportions[1] * 255),
color(proportions[1] * 255, proportions[2] * 255, proportions[0] * 255)]
createCanvas(windowWidth, windowHeight, WEBGL);
for(let j = 0; j < pointTypes.length; j++) {
for(let i = 0; i < maxPoints; i++) {
newPoints[i] = createVector((random() - 0.5) * width, (random() - 0.5) * height);
newDirections[i] = p5.Vector.random2D().mult(100);
directions[j] = newDirections;
for(let i = 0; i < pointTypes.length; i++) {
theShader.setUniform('u_mouse', [mouseX, height - mouseY]);
theShader.setUniform('u_resolution', [width, height]);
theShader.setUniform('u_points', getRawVectorArray());
theShader.setUniform('u_colors', getRawTypeColors());
rect(0, 0, width, height);
function updatePoints(type) {
let newPoints = [maxPoints];
for(let i = 0; i < points[type].length; i++) {
newPoints[i] = updatePoint(type, i);
points[type] = newPoints;
function updatePoint(type, index) {
let newDirection = createVector(0, 0);
newDirection.add(p5.Vector.mult(points[type][index], -1).limit(maxSpeed));
for(let i = 0; i < maxPoints; i++) {
let diffVec = p5.Vector.sub(points[type][i], points[type][index]);
newDirection.add(diffVec);
directions[type][index].add(newDirection);
let newPoint = p5.Vector.add(points[type][index], p5.Vector.mult(directions[type][index], deltaTime * 0.001 * speedScaling));
function getRawVectorArray() {
for(let j = 0; j < pointTypes.length; j++) {
for(let i = 0; i < maxPoints; i++) {
rawArray[2 * j * maxPoints + i * 2] = points[j][i].x;
rawArray[2 * j * maxPoints + i * 2 + 1] = points[j][i].y;
function getRawTypeColors() {
for(let i = 0; i < pointTypes.length; i++) {
rawArray[3 * i + 0] = red(pointTypes[i]) / 255.0;
rawArray[3 * i + 1] = green(pointTypes[i]) / 255.0;
rawArray[3 * i + 2] = blue(pointTypes[i]) / 255.0;
function mousePressed() {
if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
function windowResized() {
resizeCanvas(windowWidth, windowHeight);