🇧🇷 🇺🇸. Passionate about programming and building things.
Public
Edited
Jan 30, 2024
draw_board(0, 0, 2)
draw_board(1, 0, 2)
draw_board(0, 1, 2)
draw_board(1, 1, 2)
draw_board(1.4142135623730951, 1.4142135623730951, 2)
draw_board(0, 1, 1)
function draw_on_board(svg, x0, y0, r) {
let pts = points_in_circle(x0, y0, r);
console.log(pts);
let pts_img = pts.map(pt => inverse(pt[0], pt[1]));
draw_points(svg, pts, 50, "red");
draw_points(svg, pts_img, 50, "blue");
draw_line(svg, [0, -HEIGHT/2], [0, HEIGHT/2], 1, "black");
draw_line(svg, [-WIDTH/2, 0], [WIDTH/2, 0], 1, "black");
}
function draw_board(x0, y0, r) {
const [area, svg] = make_svg();
draw_on_board(svg, x0, y0, r);
return area.node();
}
function draw_points(svg, pts, scale, color) {
for (let i = 0; i < pts.length; i++) {
draw_line(svg, pts[i], pts[(i + 1) % pts.length], scale, color);
}
}
function draw_pixel(svg, x, y, color) {
let x2 = x + WIDTH / 2;
let y2 = y + HEIGHT / 2;
svg.append("rect")
.attr("x", x2)
.attr("y", y2)
.attr("width", 1)
.attr("height", 1)
.attr("fill", color);
}
function make_svg() {
const area = d3.create('div');
const header = area.append('div');
const svg = area.append('svg')
.attr('width', WIDTH)
.attr('height', HEIGHT);
return [area, svg];
}
WIDTH = 500
HEIGHT = 500
function draw_line(svg, p1, p2, scale, color) {
let [x1, y1] = normalize_pt(p1[0], p1[1], scale);
let [x2, y2] = normalize_pt(p2[0], p2[1], scale);
svg.append("line")
.attr("x1", x1)
.attr("x2", x2)
.attr("y1", y1)
.attr("y2", y2)
.attr("stroke-width", 1)
.attr("stroke", color);
}
function normalize_pt(x, y, scale) {
return [x * scale + WIDTH / 2, -y * scale + HEIGHT / 2];
}
function points_in_circle(x0, y0, r) {
let pts = [];
for (let i = 0; i < 100; i++) {
let theta = i / 100.0 * 2 * Math.PI;
pts.push([r * Math.cos(theta) + x0, r * Math.sin(theta) + y0]);
}
return pts;
}
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.
