Computer Graphics & Visualization @ufrj.br
Published
Edited
May 30, 2022
4 stars
Canvas primerCanvas primer IISVG IntroMinimal WebGL ProgramWebGL primer with reglShadertoy style drawingTransformation demoModelview DemoModel, View and Projection DemoWebGL CubeCatmull Clark SubdivisionThree.js basicsPhong Illumination modelHalf-edge data structureIterated Function SystemsRaytracingTextured sphereEnvironment mappingPhysical animation with shape matchingShape matching2D GJK and EPA algorithmsOmohundro balltree construction algorithmsPlatonic Solids PlaygroundElliptic billiards 3-periodics in space-time3D LabyrinthBrush drawingBump mappingFractal TerrainModel viewerKeyframe animationTextured planeSimple Adaptive Mosaic EffectsRay marchingVolume rendering with slice compositingDisplaying 3D RBFs with ray marchingFunções 2D úteisRandom space-filling curvesGPU-IO3D Apollonian Sphere PackingsCircle inversion fractalsApollonian gasket construction by inversionSmooth PolygonDocument image segmentationB-SplinesStencil bufferNoise LoopsSimplex noise exerciserDeformation with RBFsRandom shapes in a gridHobby curvesLane-Riesenfeld subdivision
Wallpaper Groups
Also listed in…
Generative Art
//
// Returns one of the 52 doodles in https://github.com/googlecreativelab/quickdraw-dataset/raw/master/preview.jpg
//
getDoodle = {
let d = await FileAttachment("doodlepreview.jpg").image();
let ctx = DOM.context2d(d.width, d.height, 1);
ctx.drawImage(d, 0, 0);
let src = ctx.getImageData(0, 0, d.width, d.height);
const [rows, cols] = [4, 13];
return function (imgIndex) {
let ctx = DOM.context2d(128, 128, 1);
let dst = ctx.createImageData(128, 128);
imgIndex = imgIndex % (rows * cols);
let row = Math.trunc(imgIndex / cols);
let col = imgIndex % cols;
for (let y = 0; y < 128; y++) {
let srcOffset = ((y + row * 128) * d.width + col * 128) * 4;
let dstOffset = y * 128 * 4;
for (let x = 0; x < 128; x++) {
let white = (dst.data[dstOffset++] = src.data[srcOffset++]);
dst.data[dstOffset++] = src.data[srcOffset++];
dst.data[dstOffset++] = src.data[srcOffset++];
dst.data[dstOffset++] = (white < 200) * src.data[srcOffset++];
}
}
ctx.putImageData(dst, 0, 0);
return ctx.canvas;
};
}
getDoodle(~~(Math.random()*52))
//
// A Diagram is a drawing comprising points and vectors. This is
// used to implement coordinate frames that can be adjusted with the mouse
//
class Diagram {
constructor() {
this.points = [];
this.rays = [];
}
clone() {
let d = new Diagram();
for (let p of this.points) d.addPoint(p.clone());
for (let { ipoint, v } of this.rays) d.addRay(ipoint, v.clone());
return d;
}
transform(m) {
const d = new Diagram();
for (let p of this.points) d.addPoint(m.applyPoint(p));
for (let { ipoint, v } of this.rays) d.addRay(ipoint, m.applyVector(v));
return d;
}
addPoint(p) {
const n = this.points.length;
this.points.push(p);
return n;
}
addRay(ipoint, v) {
const n = this.rays.length;
this.rays.push({ ipoint, v });
return n;
}
mouseDown(event) {
this.selectedRay = null;
this.selectedPoint = null;
let mouse = Vec(event.offsetX, event.offsetY);
this.mouse = mouse;
for (let ray of this.rays) {
let { ipoint, v } = ray;
const p = this.points[ipoint];
const q = p.add(v);
if (q.dist(mouse) < 8) {
this.selectedRay = ray;
return true;
}
}
for (let p of this.points) {
if (p.dist(mouse) < 8) {
this.selectedPoint = p;
return true;
}
}
return false;
}
mouseMove(event) {
let ray = this.selectedRay;
let mouse = Vec(event.offsetX, event.offsetY);
let u = mouse.sub(this.mouse);
this.mouse = mouse;
if (ray) {
ray.v = ray.v.add(u);
return true;
} else {
let point = this.selectedPoint;
if (point) {
point.set(point.add(u));
return true;
}
}
return false;
}
mouseUp(event) {
this.selectedRay = null;
this.selectedPoint = null;
}
draw(ctx, options = {}) {
const {
pointSize = 8,
arrowSize = 10,
alternateArrowTypes = true
} = options;
let even = false;
for (let { ipoint, v } of this.rays) {
even = !even;
const p = this.points[ipoint];
const q = p.add(v);
ctx.beginPath();
if (even || !alternateArrowTypes)
ctx.arc(q.x, q.y, pointSize / 2, 0, Math.PI * 2);
ctx.moveTo(p.x, p.y);
ctx.lineTo(q.x, q.y);
if (!even || !alternateArrowTypes) {
const u = v.normalize();
const u1 = u.rotate(Math.PI * 0.9).scale(arrowSize);
ctx.lineTo(...q.add(u1).array());
const u2 = u.rotate(-Math.PI * 0.9).scale(arrowSize);
ctx.moveTo(q.x, q.y);
ctx.lineTo(...q.add(u2).array());
}
ctx.stroke();
}
for (let p of this.points) {
ctx.beginPath();
for (let [dx, dy] of [
[-1, 1],
[1, 1],
[1, -1],
[-1, -1]
]) {
ctx.lineTo(p.x + (dx * pointSize) / 2, p.y + (dy * pointSize) / 2);
}
ctx.closePath();
ctx.stroke();
}
}
}
//
// Builds a diagram with one point and two vectors
//
function makeDiagramFromFrame(p, u, v) {
const d = new Diagram();
const o = d.addPoint(p);
d.addRay(0, u);
d.addRay(0, v);
return d;
}
//
// Builds a diagram from a Matrix
//
function makeDiagramFromMatrix(M) {
return makeDiagramFromFrame(Vec(M.e, M.f), Vec(M.a, M.b), Vec(M.c, M.d));
}
//
// Builds a Matrix from a frame diagram
//
function makeMatrixFromDiagram(d) {
return makeMatrix(d.points[0], d.rays[0].v, d.rays[1].v);
}
function makeFrame(x0, y0, sz) {
return makeDiagramFromFrame(Vec(x0, y0), Vec(sz, 0), Vec(0, sz));
}
//
// Returns a Matrix where the columns are u, v and p respectively
//
function makeMatrix (p, u, v) {
return new Matrix(u.x, u.y, v.x, v.y, p.x, p.y);
}
//
// Returns a Matrix that transforms point p0, vectors u0 and v0 into
// point p1, vectors u1 and v1
//
function makeTransform(p0, u0, v0, p1, u1, v1) {
let A = makeMatrix(p0, u0, v0);
let B = makeMatrix(p1, u1, v1);
return B.mult(A.inverse());
}
//
// Assuming src and dst are diagrams with one point for the origin and two vectors
// for the two axes, returns a transformation thant maps src into dst
//
function makeTransformFromDiagrams(src, dst) {
return makeTransform(
src.points[0],
src.rays[0].v,
src.rays[1].v,
dst.points[0],
dst.rays[0].v,
dst.rays[1].v
);
}
//
// A n matrix that effects a translation by vector v
//
function makeTranslation(v) {
return Matrix.translate(v.x, v.y);
}
//
// A rotation matrix around a point
//
function makeRotation(p, degrees) {
const ang = (degrees / 180) * Math.PI;
return Matrix.translate(p.x, p.y)
.mult(Matrix.rotate(ang))
.mult(Matrix.translate(-p.x, -p.y));
}
//
// A reflection matrix with p as a fixed point and mapping
// vector axis to -axis
//
function makeReflection(p, axis) {
let axis2 = Vec(-axis.y, axis.x);
return makeTransform(p, axis, axis2, p, axis.scale(-1), axis2);
}
//
// A glide reflection matrix, i.e, a composition of a reflection about an axis
// and a translation
function makeGlide(p, q, axis) {
let axis2 = Vec(-axis.y, axis.x);
return makeTransform(p, axis, axis2, q, axis, axis2.scale(-1));
}
//
// A hash map of points
//
class PointMap extends Map {
constructor(...args) {
super(...args);
}
static hash(point) {
return Math.round(point.x * 1000) + "," + Math.round(point.y * 1000);
}
has(point) {
return super.has(PointMap.hash(point));
}
set(point, value) {
return super.set(PointMap.hash(point), value);
}
get(point) {
return super.get(PointMap.hash(point));
}
}
//mutable debug = []
//
// Creates a collection of frame diagrams starting from the master
// diagram and 'flood filling' the plane with copies transformed by
// transforms. The process is repeated iteration times at most, but
// frames lying outside the rectangle [xmin, ymin, xmax, ymax] are discarded
//
function makeTiling(master, transforms, iterations, xmin, ymin, xmax, ymax) {
let canonical = makeFrame(0, 0, 1);
let instancing = makeTransformFromDiagrams(canonical, master);
let grid = new PointMap();
let tiles = [master];
const add = (batch) => {
let nextBatch = [];
for (let t0 of batch) {
for (let t1 of transforms) {
let t = t1.mult(t0);
let d = makeDiagramFromMatrix(t).transform(instancing);
let p = d.points[0]
.add(d.points[0].add(d.rays[0].v))
.add(d.points[0].add(d.rays[1].v))
.scale(1 / 3);
if (!grid.has(p)) {
if (p.x >= xmin && p.x <= xmax && p.y >= ymin && p.y <= ymax) {
tiles.push(d);
nextBatch.push(t);
grid.set(p, d);
}
}
}
}
return nextBatch;
};
let batch = [new Matrix()];
for (let i = 0; i < iterations && batch.length > 0; i++) {
batch = add(batch);
}
return tiles;
}
//
// Wallpaper group transformation sets
//
wg = ({
p1: [
makeTranslation(Vec(1, 0)),
makeTranslation(Vec(0, 1)),
makeTranslation(Vec(-1, 0)),
makeTranslation(Vec(0, -1))
],
p2: [
makeRotation(Vec(0.5, 0), 180),
makeRotation(Vec(0.5, 1), 180),
makeRotation(Vec(0, 0.5), 180),
makeRotation(Vec(1, 0.5), 180)
],
pm: [
makeTranslation(Vec(0, 1)),
makeTranslation(Vec(0, -1)),
makeReflection(Vec(0, 0), Vec(1, 0)),
makeReflection(Vec(1, 0), Vec(1, 0))
],
pg: [
makeTranslation(Vec(0, 1)),
makeTranslation(Vec(0, -1)),
makeGlide(Vec(0, 0.5), Vec(1, 0.5), Vec(1, 0)),
makeGlide(Vec(0, 0.5), Vec(-1, 0.5), Vec(1, 0))
],
cm: [
makeReflection(Vec(0, 0), Vec(0, 1)),
makeReflection(Vec(0, 1), Vec(0, 1)),
makeGlide(Vec(0, 0.5), Vec(1, 0.5), Vec(1, 0)),
makeGlide(Vec(0, 0.5), Vec(-1, 0.5), Vec(1, 0))
],
pmm: [
makeRotation(Vec(0, 0), 180),
makeRotation(Vec(1, 0), 180),
makeRotation(Vec(0, 1), 180),
makeRotation(Vec(1, 1), 180),
makeReflection(Vec(0, 0), Vec(0, 1)),
makeReflection(Vec(0, 0), Vec(1, 0)),
makeReflection(Vec(0, 1), Vec(0, 1)),
makeReflection(Vec(1, 0), Vec(1, 0))
],
pmg: [
makeRotation(Vec(0, 0.5), 180),
makeRotation(Vec(1, 0.5), 180),
makeReflection(Vec(0, 0), Vec(0, 1)),
makeReflection(Vec(0, 1), Vec(0, 1))
],
pgg: [
makeRotation(Vec(1.5, 0.5), 180),
makeRotation(Vec(-0.5, 0.5), 180),
makeRotation(Vec(0.5, 1.5), 180),
makeRotation(Vec(0.5, -0.5), 180),
makeGlide(Vec(0, 0), Vec(1, 0), Vec(1, 0)),
makeGlide(Vec(0, 1), Vec(1, 1), Vec(1, 0)),
makeGlide(Vec(0, 0), Vec(0, 1), Vec(0, 1)),
makeGlide(Vec(1, 0), Vec(1, 1), Vec(0, 1))
],
cmm: [
makeRotation(Vec(0, 0), 180),
makeRotation(Vec(0.5, 0.5), 180),
makeReflection(Vec(0, 0), Vec(1, 0)),
makeReflection(Vec(0, 0), Vec(0, 1))
],
p4: [
makeRotation(Vec(0, 0), 90),
makeRotation(Vec(1, 1), 90),
makeRotation(Vec(1, 0), 180),
makeRotation(Vec(0, 1), 180)
],
p4m: [
makeRotation(Vec(0, 1), 90),
makeRotation(Vec(1, 0), 90),
makeReflection(Vec(0.5, 0.5), Vec(1, 1))
],
p4g: [makeReflection(Vec(0.5, 0.5), Vec(1, 1)), makeRotation(Vec(0, 0), 90)],
p3: [
makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120),
makeRotation(Vec(0, 0), 120)
],
p3m1: [
makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120),
makeRotation(Vec(0, 0), 120),
makeReflection(Vec(0.5, 0), Vec(1, 0))
],
p31m: [
makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120),
makeRotation(Vec(0, 0), 120),
makeReflection(Vec(0.5, 0), Vec(0, 1))
],
p6: [
makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120),
makeRotation(Vec(0, 0), 60)
],
p6m: [
makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120),
makeRotation(Vec(0, 0), 60),
makeReflection(Vec(0.5, 0), Vec(1, 0)),
makeReflection(Vec(0.5, 0), Vec(0, 1))
]
})
import { Vec, Matrix } from "@esperanc/2d-geometry-utils"
import { miniDraw } from "@esperanc/mini-draw"
import { HideInput } from "@esperanc/range-input-variations"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.