The avatar for @mateh
Máté Homolya
Design Technologist
Published
Edited
Jun 23, 2022
1 fork
8 stars
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
id = (n) => n
Insert cell
seed = {
generate;
return id(Math.random());
}
Insert cell
viewof generate = Inputs.button("Generate")
Insert cell
Insert cell
Insert cell
uniqueShape = {
return shape(seed);
}
Insert cell
function shape(seed, { width = 640, height = 400 } = {}) {
const w = width;
const h = height;
var initSeed = Math.floor(998487523 * seed);
function pseudoRandom() {
var x = Math.sin(initSeed++) * 10000;
return x - Math.floor(x);
}

const spokeCount = Math.floor(pseudoRandom() * 8 + 3);
let d = "";
const r = Math.min(w, h) / 4;
const TAU = Math.PI * 2;
let points = [];
for (let i = 0; i < spokeCount + 1; i++) {
const angle = (i / spokeCount) * TAU;
const x = w / 2 + Math.cos(angle) * r;
const y = h / 2 + Math.sin(angle) * r;
let c = "L";
if (i === 0) {
c = "M";
}
d += `${c} ${x} ${y} `;
points.push({ x, y });
}

const shuffledPoints = points.sort(() => pseudoRandom() - 0.5);

// random chunks of 3
lodash
.chunk(shuffledPoints, 3)
.filter((c) => c.length === 3)
.forEach((chunk) => {
const [a, b, c] = chunk;
d += `C ${a.x} ${a.y} ${b.x} ${b.y} ${c.x} ${c.y} `;
});

// pairs of points
for (let i = 0; i < spokeCount; i++) {
const a = shuffledPoints[i];
const b = shuffledPoints[(i + 1) % shuffledPoints.length];
d += `C ${a.x} ${a.y} ${b.x} ${b.y} ${b.x} ${b.y} `;
}

const color = `hsl(${pseudoRandom() * 360}, 100%, 50%)`;

const strokeWidth = Math.floor(pseudoRandom() * 4 + 1) * 2 + 1;

const rotation = pseudoRandom() * 360;

return html`<svg style="width: ${w}px; height: ${h}px; background-color: #212121; overflow: hidden; border-radius: 8px;" viewBox="0 0 ${w} ${h}">
<path d="${d}"
transform="rotate(${rotation}deg ${w / 2} ${h / 2})"
style="filter: drop-shadow(0px 0px ${strokeWidth}px ${color});" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" />
/>
</svg>`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// To be continued
Insert cell
Insert cell
Insert cell
bibliography
Insert cell
Insert cell
Insert cell
import { icon } from "@mateh/icon"
Insert cell
lodash = require("lodash")
Insert cell
import { bib } from "@stardisblue/citations"
Insert cell
viewof bibliography = bib({
Wikipedia2022: `Identity function. (2022, March 14). In _Wikipedia._ https://en.wikipedia.org/wiki/Identity_function`,
Gatys2015: `Gatys, Leon A. and Ecker, Alexander S. and Bethge, Matthias "A Neural Algorithm of Artistic Style" https://arxiv.org/abs/1508.06576`,
Ramesh2022: `Ramesh, Aditya and Dhariwal, Prafulla and Nichol, Alex and Chu, Casey and Chen, Mark "Hierarchical Text-Conditional Image Generation with CLIP Latents" In _DALL-E 2: OpenAI Research_ https://arxiv.org/abs/2204.06125`,
Carrier2018: `Carrier, Etienne "Procedural World Generation of Far Cry 5" In _Game Developers Conference (2018)_ https://youtu.be/JBp8zvLVsgg`,
Wikipedia2022b: `Design computing (2021, December 1). In _Wikipedia._ https://en.wikipedia.org/wiki/Design_computing`,
Wikipedia2022c: `Generative art (2022, April 20). In _Wikipedia._ https://en.wikipedia.org/wiki/Generative_art`
})
Insert cell
cite = viewof bibliography
Insert cell
Insert cell

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.
Learn more