Creative Technologist, Data Scientist, Generative Artist (generatecoll)
Public
Edited
Nov 2, 2022
3 stars
Getting to know canvas (A Tutorial)(Day 1 of 30) Implementing Noise in Vanilla Javascript(Day 2 of 30) Implementing SimplexNoise in Vanilla Javascript(Day 3 of 30) Canvas and Copilot Experiments in Vanilla Javascript(Day 4 of 30) Plain Squares in Vanilla Javascript(Day 5 of 30) Playing with Images in Vanilla Javascript(Day 7 of 30) Building Spirals in Vanilla Javascript(Day 8 of 30) Seamless Patterns in P5.js
(Day 6 of 30) Drawing Pictures with Custom Pixels in Vanilla Javascript
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
let x, y, w, h, t, alp, px, px_num, px_all;
let p_x, p_y;
let r, g, b, a;
let img_width = 256;
let n = form.num;
px = img_width / n;
px_all = [];
let diff = WIDTH / n;
for (let j = 0; j < n; j++) {
for (let k = 0; k < n; k++) {
p_x = parseInt(px * j);
p_y = parseInt(px * k);
px_num = img_data[p_y * (img_width * 4) + p_x * 4];
r = px_num;
g = px_num + 1;
b = px_num + 2;
t = parseInt(scale(px_num, 0, img_width, 0, 3));
x = j * diff;
y = k * diff;
w = (j + 1) * diff;
h = (k + 1) * diff;
if (!form.color) {
ctx.stroke();
ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ",1)";
}
switch (t) {
case 0:
if (form.color) {
ctx.strokeStyle = "pink";
}
rect_wiggle_x_lines(ctx, x, y, w, h);
break;
case 1:
if (form.color) {
ctx.strokeStyle = "blue";
}
rect_wiggle_lines(ctx, x, y, w, h);
break;
case 2:
if (form.color) {
ctx.strokeStyle = "green";
}
rect_lines(ctx, x, y, w, h);
break;
case 3:
if (form.color) {
ctx.strokeStyle = "pink";
}
rect_backforth_lines(ctx, x, y, w, h);
break;
case 4:
// rect_noise(ctx, x, y, w, h);
break;
}
}
}
return canvas;
}
img = FileAttachment("download.png").image()
scale = (number, inMin, inMax, outMin, outMax) => {
return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
HEIGHT = form.size
WIDTH = form.size
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.
