Public
Edited
Oct 20, 2022
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
const n = 8;

// adds
ctx.fillStyle = color; // "rgba(0,0,200,0.5)";
ctx.fillRect(WIDTH * 0.4, HEIGHT * 0.4, 50, 50);
return canvas;
}
Insert cell
Insert cell
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
const n = 8;

// adds
ctx.fillStyle = color; // "rgba(0,0,200,0.5)";

for (let i = 0; i < n * 4; i++) {
for (let j = 0; j < n; j++) {
ctx.fillRect(30 * i, 30 * j, 25, 25);
}
}
return canvas;
}
Insert cell
Insert cell
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");

// adds
ctx.fillStyle = "rgba(0,0,200,0.5)";

for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
ctx.fillRect(Math.random() * WIDTH, Math.random() * HEIGHT, 25, 25);
}
}
return canvas;
}
Insert cell
Insert cell
{

const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");

// adds

for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
var clr =
"rgba(" +
255 * Math.random() +
"," +
255 * Math.random() +
"," +
255 * Math.random() +
",0.5)";
ctx.fillStyle = clr;
ctx.fillRect(Math.random() * WIDTH, Math.random() * HEIGHT, 25, 25);
}
}
return canvas;
}
Insert cell
Insert cell
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
// Creates the rectangle vides
const rects = (ctx, x, y, w, h, diff) => {
ctx.fillStyle = color;
for (let i = 0; i < w; i += diff) {
for (let j = 0; j < h; j += diff) {
ctx.fillRect(x + i, y + j, 1, 1);
}
}
};

for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
rects(
ctx,
(WIDTH * i) / 10.0,
(j / 10.0) * HEIGHT,
Math.random() * 50,
20,
1
);
}
}
return canvas;
}
Insert cell
Insert cell
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
// Creates the rectangle vides

for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
rects(
ctx,
(WIDTH * i) / 10.0,
(j / 10.0) * HEIGHT,
Math.random() * 50,
20,
1
);
}
}
return ctx.canvas;
}
Insert cell
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
// Creates the rectangle vides

for (let i = 0; i < 1000; i++) {
const ln = 1 + 10 * Math.random();
circle(
ctx,
Math.random() * WIDTH,
Math.random() * HEIGHT,
ln,
ln,
Math.PI / 2,
0,
2 * Math.PI,
1,
form.color
);
}
return ctx.canvas;
}
Insert cell
Insert cell
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
// Creates the rectangle vides

let draw = () => {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < 1000; i++) {
const ln = 1 + 10 * Math.random();
circle(
ctx,
Math.random() * WIDTH,
Math.random() * HEIGHT + 10 * Math.sin(Date.now() / 1000),
ln,
ln,
Math.PI / 2,
0,
2 * Math.PI,
1,
form.color
);
}
};

(function tick() {
if (on_off) {
draw();
frame = requestAnimationFrame(tick);
} else {
draw();
}
})();

invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}
Insert cell
Insert cell
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
// Creates the rectangle vides
let circles = (x, y, r, t) => {
return { x: x, y: y, r: r, t: t };
};

// Create our objects
let cir = [];
let t = Math.random() < 0.5 ? 1 : 2;
for (let i = 0; i < NUM; i++) {
t = Math.random() < 0.5 ? 1 : 2;
cir[i] = circles(
Math.random() * WIDTH,
Math.random() * HEIGHT,
1 + 10 * Math.random(),
t
);
}

(function tick() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < cir.length; i++) {
circle(
ctx,
cir[i].x,
cir[i].y,
cir[i].r,
cir[i].r,
Math.PI / 2,
0,
2 * Math.PI,
cir[i].t,
form.color
);
}
frame = requestAnimationFrame(tick);
})();

invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}
Insert cell
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
// Creates the rectangle vides
let circles = (x, y, r, t, clr) => {
return { x: x, y: y, r: r, t: t, clr: clr };
};

// Create our objects
let cir = [];
let t = Math.random() < 0.5 ? 1 : 2;
for (let i = 0; i < NUM; i++) {
t = Math.random() < 0.5 ? 1 : 2;
cir[i] = circles(
Math.random() * WIDTH,
Math.random() * HEIGHT,
1 + 10 * Math.random(),
t,
get_color()
);
}

(function tick() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < cir.length; i++) {
circle(
ctx,
cir[i].x,
cir[i].y,
cir[i].r,
cir[i].r,
Math.PI / 2,
0,
2 * Math.PI,
cir[i].t,
cir[i].clr
);
}
frame = requestAnimationFrame(tick);
})();

invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}
Insert cell
Insert cell
viewof on_off_b = Inputs.toggle({ label: "On / Off", value: true })

Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
// Creates the rectangle vides
let circles = (x, y, r, t, clr) => {
return { x: x, y: y, r: r, t: t, clr: clr };
};

// Create our objects
let cir = [];
let t = Math.random() < 0.5 ? 1 : 2;
for (let i = 0; i < NUM; i++) {
t = Math.random() < 0.5 ? 1 : 2;
cir[i] = circles(
Math.random() * WIDTH,
Math.random() * HEIGHT,
1 + 10 * Math.random(),
t,
get_color()
);
}

let draw = () => {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < cir.length; i++) {
circle(
ctx,
cir[i].x,
cir[i].y,
cir[i].r,
cir[i].r,
Math.PI / 2,
0,
2 * Math.PI,
cir[i].t,
cir[i].clr
);
}
};

let update = () => {
for (let i = 0; i < cir.length; i++) {
cir[i].x += Math.sin(Date.now() * Math.random());
cir[i].y += Math.sin(Date.now() * Math.random());
}
};

(function tick() {
if (on_off_b) {
draw();
update();
frame = requestAnimationFrame(tick);
} else {
draw();
}
})();

invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}
Insert cell
Insert cell
viewof on_off_c = Inputs.toggle({ label: "On / Off", value: true })
Insert cell
{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
// Creates the rectangle vides
let circles = (x, y, r, t, clr) => {
return { x: x, y: y, r: r, t: t, clr: clr };
};

// Create our objects
let cir = [];
let t = Math.random() < 0.5 ? 1 : 2;
for (let i = 0; i < NUM; i++) {
t = Math.random() < 0.5 ? 1 : 2;
cir[i] = circles(
Math.random() * WIDTH,
Math.random() * HEIGHT,
1 + 10 * Math.random(),
t,
get_color()
);
}

let draw = () => {
ctx.fillStyle = "white";
// ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < cir.length; i++) {
circle(
ctx,
cir[i].x,
cir[i].y,
cir[i].r,
cir[i].r,
Math.PI / 2,
0,
2 * Math.PI,
cir[i].t,
cir[i].clr
);
}
};

let update = () => {
for (let i = 0; i < cir.length; i++) {
cir[i].x += Math.sin(Date.now() * Math.random());
cir[i].y += Math.sin(Date.now() * Math.random());
}
};

(function tick() {
if (on_off_c) {
draw();
update();
frame = requestAnimationFrame(tick);
} else {
draw();
}
})();

invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
HEIGHT = 250
Insert cell
rn = Math.random()
Insert cell
color_palette = ["#db5461", "#686963", "#8aa29e", "#3d5467", "#f1edee"]
Insert cell
get_color = () => {
var rand = color_palette[(Math.random() * color_palette.length) | 0]
return rand
}
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