Creative Technologist, Data Scientist, Generative Artist (generatecoll)
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.drawImage(imge, 0, 0, 1000, 750);
switch (select) {
case "Sepai":
sepai(canvas, ctx);
break;
case "Grayscale":
grayscale(canvas, ctx);
break;
case "Original":
break;
case "Invert":
invert(canvas, ctx);
break;
case "Weird":
weird(canvas, ctx);
break;
}
return canvas;
}
weird = (canvas, ctx) => {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
let red = data[i],
green = data[i + 1],
blue = data[i + 2];
if (red > 150) {
data[i] = 0;
data[i + 1] = 0;
data[i + 2] = 150;
} else {
data[i] = Math.min(
Math.round(0.393 * red + Math.random() * green + 0.189 * blue),
255
);
data[i + 1] = Math.min(
Math.round(0.349 * red + 0.686 * green + 0.168 * blue),
255
);
data[i + 2] = Math.min(
Math.round(0.272 * red + 0.534 * green + 0.131 * blue),
255
);
}
}
ctx.putImageData(imageData, 0, 0);
return ctx;
}
HEIGHT = 750
WIDTH = 1000
imge = FileAttachment("download-this-canvas (82).jpeg").image()
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.
