Published
Edited
Aug 10, 2020
1 fork
md`# Pattern Moire - Circle Grids`
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, height);
sketch.noLoop();
sketch.pixelDensity(2);
};
function drawPattern1(
x0,
x1,
y0,
y1,
circleRadius = 4,
circleOffset = 10,
fill = "black",
margin = 25
) {
let sizeChange = chance.bool({ likelihood: 50 });
let sizeChangeSmaller = chance.bool({ likelihood: 50 });
let sizeChangeAmount = chance.floating({ min: 0.001, max: 0.02 });
x0 += margin;
x1 -= margin;
y0 += margin;
y1 -= margin;
if (chance.bool({ likelihood: 10 })) x0 = margin;
if (chance.bool({ likelihood: 10 })) x1 = width - margin;
if (chance.bool({ likelihood: 10 })) y0 = margin;
if (chance.bool({ likelihood: 10 })) y1 = height - margin;
let r = circleRadius;
for (let x = x0; x <= x1; x += circleOffset) {
for (let y = y0; y <= y1; y += circleOffset) {
sketch.fill(fill);
sketch.ellipse(Math.round(x), Math.round(y), r, r);
if (chance.bool({ likelihood: 25 }) && sizeChange && sizeChangeSmaller)
r -= r * sizeChangeAmount;
else if (chance.bool({ likelihood: 25 }) && sizeChange) {
r += r * sizeChangeAmount;
if (chance.bool({ likelihood: 25 }))
circleOffset += r * sizeChangeAmount;
}
}
}
}
function drawPattern1Random(i = 0) {
let rndx0 = chance.floating({ min: 0, max: width / 2 });
let rndx1 = chance.floating({ min: rndx0, max: width });
let rndy0 = chance.floating({ min: 0, max: height / 2 });
let rndy1 = chance.floating({ min: rndy0, max: height });
let r = chance.floating({ min: 0.5, max: height / 18 });
let offset = r * chance.floating({ min: 0.95, max: 3.5 });
let fill = "#000000";
if (i !== 0 && chance.bool({ likelihood: 33 })) fill = "#F7F7F7";
drawPattern1(rndx0, rndx1, rndy0, rndy1, r, offset, fill);
}
sketch.draw = function() {
sketch.background('#F7F7F7');
//sketch.noFill();
sketch.noStroke();
//sketch.stroke('black');
//sketch.strokeWeight(0.5);
let patternCount = chance.natural({ min: 2, max: 9 });
for (let i = 0; i < patternCount; i++) {
drawPattern1Random(i);
}
};
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
