Computer Graphics & Visualization @ufrj.br
Hobby curvesNoise plane partitionRandom shapes in a gridDeformation with RBFsShape-conforming fibersSynthetic texture algorithmsSimplex noise exerciserNoise LoopsThe Infinity ToyApollonian gasket construction by inversionCircle inversion fractals3D Apollonian Sphere PackingsGPU-IOColor HarmoniesRandom space-filling curvesStyle transfer with magenta-jsSpirographAnimação com bolasCheap mandalaTruchet Archimedean TilingsWallpaper GroupsSplotchifyColor palettes from one colorFlow fieldsFlow field variationsKinetic typographyDrifting squaresSketch MandalaGlobal mode p5Rosace 3Platonic Solids Playground
10 PRINT with SVG and <use>
viewof sz = Range([5, 100], { label: "Tile size", step: 1, value: 20 })
diag = svg`<svg width=${sz} height=${sz}>
<line x1=0 y1=0 x2=${sz} y2=${sz} id=diag stroke-width=2 stroke=black>
</svg>`
svg`<svg width=${sz} height=${sz}>
<line x1=0 y1=${sz} x2=${sz} y2=0 stroke-width=2 stroke=black>
</svg>`
svg`<svg width=${sz} height=${sz}> <use href=#diag>`
svg`<svg width=${sz} height=${sz}>
<defs>
<line x1=0 y1=0 x2=${sz} y2=${sz} id=diag stroke-width=2 stroke=black>
</defs>
<use href=#diag>`
svg`<svg width=${sz} height=${sz}>
<defs>
<line x1=0 y1=0 x2=${sz} y2=${sz} id=diag stroke-width=2 stroke=black>
</defs>
<use href=#diag
transform="translate(${sz / 2},${sz / 2}) rotate(90) translate(${-sz /
2},${-sz / 2})"
>`
function rot(angle) {
let d = sz / 2;
return `translate(${d},${d})rotate(${angle})translate(${-d},${-d})`;
}
{
let pic = svg`<svg width=${sz} height=${sz}>
<defs>
<line x1=0 y1=0 x2=${sz} y2=${sz} id=diag stroke-width=2 stroke=black>
</defs>`;
for (let ang = 0; ang <= 90; ang += 10)
pic.append(svg`<use href=#diag transform="${rot(ang)}">`);
return pic;
}
{
let pic = svg`<svg width=${sz * 10} height=${sz}>
<defs>
<line x1=0 y1=0 x2=${sz} y2=${sz} id=diag stroke-width=2 stroke=black>
</defs>`;
for (let ang = 0, x = 0; ang <= 90; ang += 10, x += sz)
pic.append(
svg`<use xlink:href=#diag transform="translate(${x},0)${rot(ang)}">`
);
return pic;
}
viewof picsz = Range([100, width], {
label: "Picture size",
step: 1,
value: 600
})
{
let pic = svg`<svg width=${picsz} height=${picsz}>
<defs>
<line id=diag x1=0 y1=0 x2=${sz} y2=${sz} stroke-width=2 stroke=black>
</defs>`;
for (let x = 0; x < picsz; x += sz)
for (let y = 0; y < picsz; y += sz)
pic.append(
svg`<use xlink:href=#diag transform="translate(${x},${y})${rot(
Math.random() < 0.5 ? 90 : 0
)}">`
);
return pic;
}
halfRect = svg`<svg width=${sz} height=${sz} >
<rect x=0 y=0 width=${sz / 2} height=${sz} id=half>
</svg>`
md`For this kind of tile, rotations by 90, 180 and 270 degrees yield different results:`
{
let pic = svg`<svg width=${picsz} height=${picsz}>
<defs>
<rect x=0 y=0 width=${sz / 2} height=${sz} id=half>
</defs>`;
for (let x = 0; x < picsz; x += sz)
for (let y = 0; y < picsz; y += sz)
pic.append(
svg`<use xlink:href=#half transform="translate(${x},${y})${rot(
Math.trunc(Math.random() * 4) * 90
)}">`
);
return pic;
}
tileFunctions = [
{ name: "add", f: (i, j) => i + j },
{ name: "add22", f: (i, j) => 2 * i + 2 * j },
{ name: "add21", f: (i, j) => 2 * i + j },
{ name: "add33", f: (i, j) => 3 * i + 3 * j },
{ name: "add/2/5", f: (i, j) => Math.round(i / 2 + j / 5) },
{ name: "sub/3/5", f: (i, j) => Math.abs(Math.round(i / 3 - j / 5)) },
{ name: "add45", f: (i, j) => 4 * i + 5 * j },
{ name: "multiply", f: (i, j) => i * j },
{ name: "or", f: (i, j) => i | j },
{ name: "and", f: (i, j) => i & j },
{ name: "xor", f: (i, j) => i ^ j }
]
{
let pic = svg`<svg width=${picsz} height=${picsz}>
<defs>
<rect x=0 y=0 width=${sz / 2} height=${sz} id=half>
</defs>`;
for (let i = 0, x = 0; x < picsz; i++, x += sz)
for (let j = 0, y = 0; y < picsz; j++, y += sz)
pic.append(
svg`<use xlink:href=#half transform="translate(${x},${y})${rot(
(rectTileFunction.f(i, j) % 4) * 90
)}">`
);
return pic;
}
{
let pic = svg`<svg width=${picsz} height=${picsz}><defs>${shapeDefs}</defs>`;
for (let i = 0, x = 0; x < picsz; i++, x += sz)
for (let j = 0, y = 0; y < picsz; j++, y += sz)
pic.append(
svg`<use xlink:href=#${
shapes[Math.trunc(Math.random() * shapes.length)]
}
transform="translate(${x},${y})${rot(
Math.trunc(Math.random() * 4) * 90
)}">`
);
return pic;
}
{
let pic = svg`<svg width=${picsz} height=${picsz}><defs>${shapeDefs}</defs>`;
let tileSet = tileSetOrder.map(i => shapes[i]);
for (let i = 0, x = 0; x < picsz; i++, x += sz)
for (let j = 0, y = 0; y < picsz; j++, y += sz)
pic.append(
svg`<use xlink:href=#${
tileSet[circleShapeFunction.f(i, j) % tileSet.length]
}
transform="translate(${x},${y})${rot(
(circleRotFunction.f(i, j) % 4) * 90
)}">`
);
return pic;
}
{
let pic = svg`<svg width=${picsz} height=${picsz}><defs>${shapeDefs}</defs>`;
let tileSet = tileSetOrder.map(i => shapes[i]);
for (let i = 0, x = 0; x < picsz; i++, x += sz)
for (let j = 0, y = 0; y < picsz; j++, y += sz)
pic.append(
svg`<use xlink:href=#${
tileSet[circleShapeFunction.f(i, j) % tileSet.length]
}
transform="translate(${x},${y})${rot(
(circleRotFunction.f(i, j) % 4) * 90
)}" fill=${colors[colorFunction.f(i, j) % colors.length]}
stroke-width=0.5 stroke=${colors[colorFunction.f(i, j) % colors.length]}
>`
);
return pic;
}
import { Range, Radio, Checkbox } from "@observablehq/inputs"
import { SortableList } from "@esperanc/sortable-list"
d3 = require("d3-scale-chromatic")
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.
