genart.lol

Creative Coding / Generative Art

Phase Shift

View On

Every cell has an independent phase offset, creating desynchronized oscillations in size. The result is a living, breathing grid of colorful ellipses that pulse with organic rhythm.

Your browser does not support the video tag.
Mouse cursorHover over the code to get explainers
let cols, rows;
let scales = [];
let offsetIncrement;
let time = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
cols = width / 10;
rows = height / 10;
offsetIncrement = 0.05;
for (let i = 0; i < cols * rows; i++) {
scales[i] = random(TWO_PI);
}
colorMode(HSB, 360, 100, 100, 100);
noStroke();
}
function draw() {
background(0, 0, 0);
let xoff = 0;
for (let i = 0; i < cols; i++) {
let yoff = 0;
for (let j = 0; j < rows; j++) {
let index = i + j * cols;
let scale = map(sin(scales[index] + time), -1, 1, 0, 1);
let angle = noise(xoff, yoff, time) * TWO_PI * 2;
let myColor = map(sin(angle), -1, 1, 180, 360);
let brightness = map(cos(angle), -1, 1, 50, 100);
let radius = map(sin(scales[index] + time), -1, 1, 0, 20);
fill(myColor, 100, brightness, 50);
ellipse(
i * 10 + 5,
j * 10 + 5,
radius + scale * 15,
radius + scale * 15
);
scales[index] += offsetIncrement;
yoff += offsetIncrement;
}
xoff += offsetIncrement;
}
time += 0.01;
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
cols = width / 10;
rows = height / 10;
scales = [];
for (let i = 0; i < cols * rows; i++) {
scales[i] = random(TWO_PI);
}
}

Spiral Ellipses

View On

A scaling spiral ellipses effect in P5.js

Your browser does not support the video tag.
let angle = 0;
let scaleFactor = 1;
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
}
function draw() {
background(0, 10);
translate(width / 2, height / 2);
strokeWeight(2);
noFill();
for (let i = 0; i < 200; i++) {
let x = (cos(angle + i * 0.1) * (i * scaleFactor)) % width;
let y = (sin(angle + i * 0.1) * (i * scaleFactor)) % height;
stroke(255, random(100, 255), random(100, 255), 150);
ellipse(x, y, i * 0.5, i * 0.5);
}
angle += 0.02;
scaleFactor += 0.01 * sin(angle);
if (scaleFactor > 1.5) {
scaleFactor = 1;
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

Generative art, interactive installations, and creative coding for brands and individuals.

genart.lol

Creative coding & generative art

Connect

r/creativecodingGitHubOpenProcessing

Made with

p5.jsNext.jsTailwind CSS

Legal

Terms of ServicePrivacy Policy

© 2025 genart.lol.