xxxxxxxxxx
let ratio = 0.95;
let offset;
function setup() {
createCanvas(800, 800);
colorMode(HSB, 360, 100, 100, 100);
angleMode(DEGREES);
}
function draw() {
background(0, 0, 90);
randomSeed(230529 + frameCount / 150);
offset = width / 15;
let x = offset;
let y = offset;
let d = width - offset * 2;
herringboneInRect(x, y, d, 8, 0);
// noLoop();
}
function herringboneInRect(x, y, d, num, depth) {
let w = sqrt(sq(d + offset * 2) * 2);
let rd = d / num;
push();
strokeWeight(2);
rectMode(CENTER);
fill(0, 0, 100, 0);
noStroke();
rect(x + d / 2, y + d / 2, d, d);
drawingContext.clip();
push();
translate(x + d / 2, y + d / 2);
rotate((int(random(4)) * 360) / 4);
scale(random() > 0.5 ? -1 : 1, random() > 0.5 ? -1 : 1);
translate(-w, -w);
let ox = -w;
let i = 0;
while (ox < w * sqrt(2)) {
let nx = ox;
let ny = (-i * rd) / 2;
while (ny < w * sqrt(2)) {
let v =
(nx + rd / 2 + (ny + rd / 2) * width) / (width * height) +
frameCount / 150 * map(ny, 0, height, 0.5, 3);
let n = int(noise(nx / width, ny / height, frameCount / 150) * 4);
let m = v;
v %= 1;
v = easeInOutCirc(v);
stroke(0, 0, 0);
rectMode(CORNER);
push();
strokeCap(SQUARE);
strokeWeight(1);
let dir = v;
if (random() > 0.5 && int(m) % 2 == 0) {
strokeWeight((rd / 2) * dir);
push();
translate(nx + rd / 2, ny + rd / 2 / 2);
rotate(45 + n * 90);
scale(ratio);
line(-rd / 2, 0, rd / 2, 0);
pop();
} else {
strokeWeight(rd * dir);
push();
translate(nx + rd / 2, ny + rd / 2 / 2);
rotate(45 + n * 90);
scale(ratio);
line(0, -rd / 2 / 2, 0, rd / 2 / 2);
pop();
// line( ny, nx + rd / 2, ny + rd / 2);
}
pop();
nx += rd;
n = int(noise(nx / width, ny / height, frameCount / 150) * 4);
fill(0, 0, random(10, 100 - 10));
stroke(0, 0, 0);
push();
strokeCap(SQUARE);
dir = 1 - v;
if (random() > 0.5 && int(m) % 2 == 0) {
strokeWeight(rd * dir);
push();
translate(nx + rd / 2 / 2, ny + rd / 2);
rotate(45 + n * 90);
scale(ratio);
line(-rd / 2 / 2, 0, rd / 2 / 2, 0);
pop();
} else {
strokeWeight((rd / 2) * dir);
push();
translate(nx + rd / 2 / 2, ny + rd / 2);
rotate(45 + n * 90);
scale(ratio);
line(0, -rd / 2, 0, rd / 2);
pop();
}
pop();
ny += rd;
}
ox += rd / 2;
i++;
}
pop();
pop();
}
function easeInOutCirc(x) {
return x < 0.5 ?
(1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 :
(Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
}