Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
singleCanvas(patchData)
patch = (
width,
height,
f0,
f1,
xoff = 32,
yoff = 16,
extra1 = false,
extra2 = false
) => {
let rc;
switch (currentTexture) {
case "texture0":
rc = new TG.Texture(width, height)
.add(new TG.XOR().tint(...tint0))
.add(new TG.SinX().frequency(f0))
.add(new TG.SinY().frequency(f0))
.mul(new TG.SinX().offset(32).frequency(f1).tint(2, 2, 2))
.mul(
new TG.SinY()
.offset(16)
.frequency(f1)
.tint(...tint0)
)
.sub(new TG.Number().tint(...tint1))
.add(new TG.XOR().tint(...tint0))
.add(new TG.Noise().tint(...tint0))
.toCanvas();
break;
case "texture1":
rc = new TG.Texture(width, height)
.add(new TG.SinX().frequency(f0))
.add(new TG.SinY().frequency(f0))
.mul(new TG.SinX().offset(32).frequency(f1).tint(2, 2, 2))
.mul(new TG.SinY().offset(16).frequency(f1).tint(2, 2, 2))
.sub(new TG.Number().tint(0.5, 2, 4))
.add(new TG.Noise().tint(...tint0))
.add(new TG.SinX().frequency(f0))
.sub(new TG.SinY().frequency(f1))
.toCanvas();
break;
case "texture2":
rc = new TG.Texture(width, height)
.add(new TG.XOR().tint(1, 0.5, 0.7))
.add(new TG.SinX().frequency(f0).tint(...tint0))
.sub(new TG.SinY().frequency(f0).tint(...tint0))
.add(new TG.SinX().frequency(f1).tint(...tint1))
.add(new TG.SinY().frequency(f1).tint(...tint1))
.add(new TG.Noise().tint(0.1, 0.1, 0.2))
.toCanvas();
break;
case "texture3":
rc = new TG.Texture(width, height)
.add(
new TG.SinX()
.offset(xoff)
.frequency(f0)
.tint(...tint0)
)
.add(
new TG.SinY()
.offset(yoff)
.frequency(f0)
.tint(...tint0)
)
.add(new TG.Number().tint(0.75, 0.5, 0.5))
.add(new TG.SinX().frequency(f1).tint(...tint1))
.add(new TG.SinY().frequency(f1).tint(...tint1))
.add(new TG.Noise().tint(0.1, 0, 0))
.add(new TG.Noise().tint(0, 0.1, 0))
.add(new TG.Noise().tint(0, 0, 0.1))
.toCanvas();
break;
case "texture4":
rc = new TG.Texture(width, height)
.add(new TG.SinX().frequency(f0))
.mul(new TG.SinX().frequency(f0 / 2))
.mul(new TG.SinX().frequency(f0 / 4))
.mul(new TG.SinY().frequency(f1))
.mul(new TG.SinY().frequency(f1 / 2))
.mul(new TG.SinY().frequency(f1 / 4))
.add(new TG.SinX().frequency(0.004).tint(...tint1))
.toCanvas();
break;
case "texture5":
rc = new TG.Texture(width, height)
.add(new TG.XOR())
.mul(new TG.OR().tint(...tint0))
.mul(new TG.SinX().frequency(f0))
.div(new TG.SinY().frequency(f1))
.add(new TG.SinX().frequency(f1).tint(0.5, 0, 0))
.add(new TG.Noise().tint(0.1, 0.1, 0.2))
.toCanvas();
break;
case "texture6":
rc = new TG.Texture(width, height)
.add(new TG.SinX().frequency(f0))
.mul(new TG.SinY().frequency(f0 * 0.75))
.add(new TG.SinX().frequency(f1))
.mul(new TG.SinY().frequency(f1 / 2))
.add(new TG.Noise().tint(...tint0))
.toCanvas();
break;
case "texture7":
rc = new TG.Texture(width, height)
.add(new TG.SinX().frequency(f0))
.mul(new TG.SinX().frequency(f1))
.add(new TG.SinY().frequency(f0))
.mul(new TG.SinY().frequency(f1))
.div(new TG.Number().tint(...tint1))
.add(new TG.SinX().frequency(0.003).tint(0.5, 0, 0))
.toCanvas();
break;
case "texture8":
rc = new TG.Texture(width, height)
.add(new TG.SinX().frequency(f0))
.add(new TG.SinY().frequency(f0))
.mul(new TG.SinX().offset(xoff).frequency(f1).tint(2, 2, 1))
.mul(new TG.SinY().offset(yoff).frequency(f1).tint(2, 2, 2))
.sub(new TG.Number().tint(...tint1))
.add(new TG.Noise().tint(...tint0))
.toCanvas();
break;
}
return scaleImage(rc, canvasScale);
}
patchData = {
const rc = [];
stdlib.linspace(genf0, genf1, rows).forEach((row) =>
stdlib.linspace(genf2, genf3, columns).forEach((column) =>
rc.push({
f1: row,
f0: column,
texture: patch(width, height, column, row)
})
)
);
return rc;
}
scaleImage = (image, scaleFactor) => {
const canvas = document.createElement("canvas");
canvas.width = image.width * scaleFactor;
canvas.height = image.height * scaleFactor;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
return canvas;
}
singleCanvas = (patchData) => {
const canvas = document.createElement("canvas");
canvas.width = (width * canvasScale + 2 * margin) * columns;
canvas.height = (height * canvasScale + 2 * margin) * rows;
const ctx = canvas.getContext("2d");
const dstWidth = width * canvasScale;
const dstHeight = height * canvasScale;
d3.range(rows).forEach((row) =>
d3
.range(columns)
.forEach((column) =>
ctx.drawImage(
patchData[row * columns + column].texture,
dstWidth * column,
dstHeight * row,
dstWidth,
dstHeight
)
)
);
return canvas;
}
tint = (color) => {
const c = d3.color(color);
return [c.r / 255, c.g / 255, c.b / 255];
}
tint0 = tint(col0)
tint1 = tint(col1)
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.
