Skip to content

Instantly share code, notes, and snippets.

@tpatel
Created December 29, 2020 14:57
Show Gist options
  • Save tpatel/3c7ae37452b1ec7916a87bd1581c523a to your computer and use it in GitHub Desktop.
Save tpatel/3c7ae37452b1ec7916a87bd1581c523a to your computer and use it in GitHub Desktop.
Draws many wobbly circles
const points = 16;
const maxNoise = 0.5;
const transparency = 0.05;
const lines = 1024;
const lineStepNoise = 0.001;
const minRadius = 10;
const maxRadius = 700;
function setup() {
createCanvas(1600, 1600);
background('#000000');
noLoop();
}
function randomLine(j) {
noFill();
beginShape();
for(let i=-1; i<=points+1; i++) {
const angle = map(i, 0, points, 0, 2*PI);
const xoff = map(cos(angle), -1, 1, 0, maxNoise);
const yoff = map(sin(angle), -1, 1, 0, maxNoise);
const r = map(noise(xoff, yoff, j), 0, 1, minRadius, maxRadius);
const x = cos(angle)*r;
const y = sin(angle)*r;
curveVertex(x, y);
}
endShape();
}
function draw() {
strokeWeight(2);
stroke(`rgba(255, 255, 255, ${transparency})`)
translate(width/2, height/2);
for(let i=0; i<2048; i++) {
randomLine(i*lineStepNoise);
}
}
@tpatel
Copy link
Author

tpatel commented Dec 29, 2020

image

@tpatel
Copy link
Author

tpatel commented Dec 30, 2020

Copy/pasting it into the p5.js editor is the simplest to run the code => https://editor.p5js.org

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment