Carbon based creator lifeform
floatingFacets = p5(s => {
const getRandomColor = getRandomColorCurry(colors);
const canvasId = "universe";
const centerDistance = width / 2;
const sw = unit * borderProportion; // Stroke weight
let centerShitfX = 1;
let centerShitfY = 1;
let willDraw = true;
const colorize = (s, size) => {
s.strokeWeight(0);
for (let x = 0; x < size; x++) {
s.fill(
saturation > 0
? transformColor(getRandomColor(), saturation)
: getRandomColor()
);
s.rect(0, 0 + x * unit, size * unit, unit);
}
};
const diamondMask = (s, size) => {
s.strokeWeight(0);
s.erase();
const sta = 0;
const end = size * unit;
const mid = end / 2;
s.triangle(sta, sta, sta, mid, mid, sta);
s.triangle(mid, sta, end, sta, end, mid);
s.triangle(sta, mid, sta, end, mid, end);
s.triangle(mid, end, end, mid, end, end);
s.noErase();
};
const stroke = (s, size) => {
s.strokeWeight(sw);
s.stroke(
saturation > 0 ? transformColor(borderColor, saturation) : borderColor
);
s.fill(0, 0, 0, 0);
const sta = 0;
const end = size * unit;
const mid = end / 2;
s.quad(mid, sta + sw, end - sw, mid, mid, end - sw, sta + sw, mid);
};
const placeDiamond = (size, position, s) => {
const diamond = s.createGraphics(size * unit, size * unit);
colorize(diamond, size);
diamondize && diamondMask(diamond, size);
borderProportion > 0 && stroke(diamond, size);
s.image(diamond, position.x, position.y);
};
const draw = () => {
!preserveDraw && s.clear();
for (let size = iterations; size > 0; size = size - 2) {
const x = centerDistance - (size * unit * centerShitfX) / 2;
const y = centerDistance - (size * unit * centerShitfY) / 2;
placeDiamond(size, { x, y }, s);
}
};
const shift = ev => {
if (ev.target.id === canvasId) {
willDraw = true;
centerShitfX = guideLockOne(ev.layerX / centerDistance);
centerShitfY = guideLockOne(ev.layerY / centerDistance);
}
};
s.setup = () => {
s.createCanvas(width, width).id(canvasId);
draw();
};
s.draw = () => {
if (willDraw) {
draw();
willDraw = false;
}
};
s.mousePressed = shift;
s.mouseDragged = shift;
})
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.
