// this one doesnt work at all... why?
viewof nSq2 = Inputs.range([1, 20], {value: 5, step: 1, label: "N per row and col"})
p5(sketch => {
let system;
let sizeScale = 150;
let widthScale = 6;
let heightScale = 8;
let canvasWidth = width
let canvasHeight = heightScale * sizeScale;
let nSquare = nSq2
let colors = [
sketch.color("#FCBC3C"),
sketch.color("#FB5444"),
sketch.color("#F68C8C"),
sketch.color("#3C4C7C"),
sketch.color("#74B4E4")
]
let squareSize = canvasWidth / (nSquare + 1);
let xMargin = squareSize / 2;
let yMargin = (canvasHeight - squareSize * nSquare) / 2;
let cutouts = ["left", "top", "right", "bottom"];
let backgroundColors = randomize([0,1,2,3,4], nSq2);
let circleColors = randomize([0,1,2,3,4], nSq2)
let backgroundCutouts = backgroundColors;
sketch.setup = function() {
sketch.createCanvas(canvasWidth, canvasHeight);
sketch.textAlign(sketch.CENTER);
sketch.textFont('sans-serif');
sketch.textStyle(sketch.BOLD);
sketch.noStroke();
sketch.rectMode(sketch.CENTER);
}
sketch.draw = function() {
sketch.background(sketch.color("#242523"));
for (let row = 0; row < nSquare; row++) {
// Row offset is yMargin + (row + 0 .5) * squareSize
// Starting squares from center, because we will also start circles from there :)
let yStart = yMargin + (row + 0.5) * squareSize;
for (let col = 0; col < nSquare; col++) {
// Setup
let colorIndex = row * nSquare + col;
let xStart = xMargin + (col + 0.5) * squareSize;
// Background
let backgroundColor = backgroundColors[colorIndex];
backgroundColor = colors[backgroundColor];
sketch.fill(backgroundColor);
sketch.rect(xStart, yStart, squareSize, squareSize);
// Circle
let circleColor = circleColors[colorIndex];
circleColor = colors[circleColor];
sketch.fill(circleColor);
let circleSize = squareSize * 0.8;
sketch.circle(xStart, yStart, circleSize);
// Cutout
let cutout = backgroundCutouts[colorIndex];
cutout = cutouts[cutout];
sketch.fill(backgroundColor);
let cutoutOffset = circleSize * 0.5;
let cutoutSlice = circleSize * 0.25;
let xCutoutPosition;
let yCutoutPosition;
let xCutoutSize;
let yCutoutSize;
if (cutout === "left") {
xCutoutPosition = -cutoutOffset;
yCutoutPosition = 0;
xCutoutSize = cutoutSlice;
yCutoutSize = circleSize;
} else if (cutout == "right") {
xCutoutPosition = +cutoutOffset;
yCutoutPosition = 0;
xCutoutSize = cutoutSlice;
yCutoutSize = circleSize;
} else if (cutout == "top") {
xCutoutPosition = 0;
yCutoutPosition = -cutoutOffset;
yCutoutSize = cutoutSlice;
xCutoutSize = circleSize;
} else if (cutout == "bottom") {
xCutoutPosition = 0;
yCutoutPosition = cutoutOffset;
yCutoutSize = cutoutSlice;
xCutoutSize = circleSize;
}
sketch.rect(
xStart + xCutoutPosition,
yStart + yCutoutPosition,
xCutoutSize,
yCutoutSize
);
}
}
sketch.noLoop();
}
})
randomize = (array, size) => {
const rand = () => Math.floor(Math.random() * array.length);
const randExcept = exclude => {
let v = array[rand()];
while (exclude.includes(v)) v = array[rand()];
return v;
}
const indexes = Array.from(Array(size*size).keys());
let lastV = null, nthV = null;
return indexes.map(i => {
let exclude = nthV!==null && i%size===1 ? [lastV, nthV] : [lastV];
let v = randExcept(exclude);
lastV = v;
if (i%size===1) nthV = v;
return v;
})
}
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.
