Last active
May 12, 2020 04:44
-
-
Save marcedwards/53f4104960436c3feb53ca2552eba418 to your computer and use it in GitHub Desktop.
Woven lines in Processing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// Woven lines. | |
// Created using Processing 3.5.4. | |
// | |
// Code by @marcedwards from @bjango. | |
// | |
// A GIF of this code can be seen here: | |
// https://twitter.com/marcedwards/status/1238436611785773057 | |
// | |
void setup() { | |
size(400, 400, P3D); | |
frameRate(30); | |
smooth(4); | |
ortho(); | |
colorMode(RGB, 1); | |
noFill(); | |
} | |
void draw() { | |
background(#191030); | |
translate(width / 2, height / 2); | |
rotate(0.125 * TAU); | |
scale(1.5, 1.5); | |
translate(-width / 2, -height / 2); | |
drawGrid(false, #ff3351, #191030); | |
drawGrid(true, #764aed, #191030); | |
} | |
void drawGrid(boolean leftright, color c, color bg) { | |
stroke(c); | |
strokeWeight(4); | |
drawLines(leftright, 0); | |
stroke(bg); | |
strokeWeight(12); | |
drawLines(leftright, -5); | |
} | |
void drawLines(boolean leftright, float offset) { | |
int zigzag = 10; | |
float v = 0; | |
for (int i = 0; i <= width; i += 20) { | |
beginShape(); | |
for (int j = 0; j <= height; j += 20) { | |
if (leftright) { | |
for (float k = -10; k < 10; k += 0.1) { | |
v = gradientSpiral(j + k, i, timeLoop(120, 10), 1.6); | |
if (v > 0.5) { | |
endShape(); | |
beginShape(); | |
} else { | |
vertex(j + k, i, offset); | |
} | |
} | |
} else { | |
for (float k = -10; k < 10; k += 0.1) { | |
v = gradientLinearY(i, j + k, timeLoop(120)); | |
if (v > 0.5) { | |
endShape(); | |
beginShape(); | |
} else { | |
vertex(i, j + k, zigzag + offset); | |
} | |
} | |
} | |
zigzag *= -1; | |
} | |
endShape(); | |
} | |
} | |
// | |
float timeLoop(float totalframes, float offset) { | |
return (frameCount + offset) % totalframes / totalframes; | |
} | |
float timeLoop(float totalframes) { | |
return timeLoop(totalframes, 0); | |
} | |
float gradientLinearY(float x, float y, float offset) { | |
return wrap(y / height, offset); | |
} | |
float gradientSpiral(float x, float y, float offset, float frequency) { | |
float xc = width / 2; | |
float yc = height / 2; | |
float normalisedRadius = length(x - xc, y - yc) / max(xc, yc); | |
float plotAngle = atan2(y - yc, x - xc); | |
float waveAngle = normalisedRadius * TAU * frequency; | |
return wrap(radWrap(plotAngle + waveAngle) / TAU, 1 - offset); | |
} | |
float radWrap(float rad) { | |
float r = rad % TAU; | |
return r < 0 ? r + TAU : r; | |
} | |
float wrap(float value, float offset) { | |
return (value + offset) % 1; | |
} | |
float length(float x, float y) { | |
return sqrt(x * x + y * y); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment