Computer Graphics & Visualization @ufrj.br
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 Playground3D LabyrinthBrush drawingBump mappingFractal TerrainModel viewerKeyframe animationTextured planeSimple Adaptive Mosaic EffectsWallpaper GroupsRay 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
Elliptic billiards 3-periodics in space-time
defaults = {
let def = {
ellipseAspect: 1.5,
sweepAxis: 0,
nSamples: 100,
length: 10,
tubeScale: 1,
sweep: "circular",
sampling: "natural",
show: ["surface", "triangle vertices", "caustic touch points"],
coloring: "torsion",
illumination: "yes",
cameraPosition: [0.1, 8, 0],
cameraRotation: [
-1.570796326794897,
0.012499349019361497,
1.570796326794897,
"XYZ"
],
cameraUp: [0, 1, 0],
color1: "#0000ff",
color2: "#00ff00",
color3: "#ff0000",
colorBkg: "#cccccc"
};
let search = new URL(decodeURI(location)).searchParams;
let cast = (x) => {
let n = parseFloat(x);
if (isNaN(n)) return x;
return n;
};
return (key) => {
let val = (search.get(key) || "" + def[key]).split(",");
if (val.length > 1) {
return val.map(cast);
}
return cast(val[0]);
};
}
viewof ellipseAspect = Range([1.01, 3], {
label: "a/b",
value: defaults("ellipseAspect"),
step: 0.001,
format: (x) => x.toFixed(3)
})
viewof sweepAxis = Range([0, 360], {
label: "Sweep axis angle",
value: defaults("sweepAxis"),
step: 1
})
viewof nSamples = new Range([2, 600], {
label: "Samples",
step: 1,
value: defaults("nSamples")
})
viewof length = new Range([1, 30], {
label: "Length",
step: 0.01,
value: defaults("length")
})
viewof tubeScale = new Range([1, 20], {
label: "Tube scale",
value: defaults("tubeScale"),
step: 0.1
})
viewof sweep = Radio(["linear", "circular"], {
label: "Sweep",
value: defaults("sweep")
})
viewof sampling = Radio(["natural", "arc length", "Jacobi"], {
label: "Sampling",
value: defaults("sampling")
})
viewof show = Checkbox(
[
"surface",
"triangle vertices",
"caustic touch points",
"origin",
"X1",
"X2",
"X3",
"X4",
"X11",
"X59"
],
{
label: "Show",
value: defaults("show")
}
)
viewof coloring = Radio(
["single", "triangle face", "torsion", "tangent", "gaussian", "mean"],
{ label: "Surface Coloring", value: defaults("coloring") }
)
colors = {
let c = viewof sampling.className.split(" ")[0];
return html`<form class=${c} style="width:800px"><label>Colors</label>
<span style="width:2em;text-align:right;">1:</span>${viewof color1}
<span style="width:2em;text-align:right;">2:</span>${viewof color2}
<span style="width:2em;text-align:right;">3:</span>${viewof color3}
<span style="width:8em;text-align:right;">background:</span>${viewof colorBkg}</form>`;
}
viewof illumination = Radio(["yes", "no"], {
label: "Illumination",
value: "yes"
})
renderWidth = width * 0.66
renderHeight = (renderWidth * 3) / 4
mutable debug = []
periodic = {
let h = 2;
let ry = h / 3;
let rx = ry * ellipseAspect;
let f = Math.sqrt(rx * rx - ry * ry);
let pts = [Vec(-f, 0), Vec(+f, 0), Vec(0, (-2 * h) / 6)];
let ang = (sweepAxis * Math.PI) / 180;
pts = pts.map((p) => p.rotate(ang));
let tp = three_periodic(...pts);
let samples;
if (sampling == "natural") samples = naturalSample(tp.outer, nSamples);
else if (sampling == "arc length")
samples = arclenSample(tp.outer, nSamples + 1);
else samples = jacobiSample(tp.outer, nSamples);
let { vtx, touch } = tp.triangle(samples[0]);
let centers = { 0: [], 1: [], 2: [], 3: [], 4: [], 11: [], 59: [] };
const computeCenters = function (vtx) {
for (let i of Object.keys(centers)) {
centers[i] = i == 0 ? Vec(0, 0) : X(+i, ...vtx);
}
};
computeCenters(vtx);
const displace = (vtx, touch) => {
for (let i = 0; i < 3; i++) {
let { x, y } = vtx[(i + 1) % 3].sub(vtx[(i + 5) % 3]);
let n = Vec(-y, x).normalize();
touch[i] = touch[i].add(n.scale(0.05));
}
};
displace(vtx, touch);
const linearRing = (pts, iSample) =>
pts.map(({ x, y }) => [x, y, (iSample / nSamples) * length]);
const R = length / 2 / Math.PI;
const torusRing = (pts, iSample) => {
const theta = (iSample / nSamples) * Math.PI * 2;
const [sin, cos] = [Math.sin(theta), Math.cos(theta)];
return pts.map(({ x, y }) => [cos * (x + R), y, sin * (x + R)]);
};
const ring = sweep == "circular" ? torusRing : linearRing;
let positions = [...ring(vtx, 0)];
let lpositions = [...linearRing(vtx, 0)];
let touchCurves = [...ring(touch, 0)];
computeCenters(vtx);
let centerCurves = {};
[...Object.keys(centers)].map((i) => {
centerCurves[i] = [ring([centers[i]], 0)[0]];
});
let faces = [];
let faceAngles = [];
let tangentAngles = [];
let meanCurvs = [];
let gaussianCurvs = [];
const vec3Sub = (a, b) => a.map((x, i) => x - b[i]);
const vec3Norm = (v) => {
const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
return [v[0] / len, v[1] / len, v[2] / len];
};
const vec3Dot = (u, v) => u[0] * v[0] + u[1] * v[1] + u[2] * v[2];
const faceAngle = (a, b, c, d) =>
(Math.acos(
vec3Dot(
vec3Norm(vec3Sub(lpositions[a], lpositions[b])),
vec3Norm(vec3Sub(lpositions[c], lpositions[d]))
)
) /
Math.PI) *
180;
const tangentAngle = (a, b, c, d) => {
let u = Vec(...lpositions[a])
.sub(Vec(...lpositions[c]))
.normalize();
let v = Vec(...lpositions[b])
.sub(Vec(...lpositions[d]))
.normalize();
return (Math.acos(u.dot(v)) / Math.PI) * 180;
};
for (let i = 1; i <= nSamples; i++) {
let { vtx, touch } = tp.triangle(samples[i % nSamples]);
displace(vtx, touch);
positions.push(...ring(vtx, i));
lpositions.push(...linearRing(vtx, i));
touchCurves.push(...ring(touch, i));
computeCenters(vtx);
Object.keys(centers).forEach((icenter) => {
centerCurves[icenter].push(ring([centers[icenter]], i)[0]);
});
for (let j of [0, 1, 2]) {
let a = i * 3 + j,
b = a - 3,
c = i * 3 + ((j + 1) % 3),
d = c - 3;
faces.push([b, a, c, d]);
faceAngles.push(faceAngle(a, b, c, d));
tangentAngles.push(tangentAngle(a, b, c, d));
}
}
return {
samples,
tp,
positions,
faces,
touchCurves,
centerCurves,
faceAngles,
tangentAngles
};
}
curvatureTexture = new THREE.CanvasTexture(curvatureMap)
mutable colorScale = null
tubes = {
const { positions, faces, touchCurves, centerCurves } = periodic;
const matClass =
illumination == "yes"
? THREE.MeshStandardMaterial
: THREE.MeshBasicMaterial;
let material = new matClass({
color: 0x0000ff,
side: THREE.DoubleSide
});
const tubes = new THREE.Group();
for (let i = 0; i < 3; i++) {
const geometry = threeTubeGeometry(
positions.filter((p, j) => j % 3 == i),
0.03 * tubeScale
);
geometry.computeVertexNormals();
let mesh = new THREE.Mesh(geometry, material);
mesh.name = "positionTube";
tubes.add(mesh);
}
material = new matClass({
color: 0xaaaaaa,
side: THREE.DoubleSide
});
for (let i = 0; i < 3; i++) {
const geometry = threeTubeGeometry(
touchCurves.filter((p, j) => j % 3 == i),
0.03 * tubeScale
);
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, material);
mesh.name = "touchTube";
tubes.add(mesh);
}
const centerColors = {
0: "black",
1: "green",
2: "brown",
3: "purple",
4: "cyan",
11: "#80471C",
59: "yellow"
};
Object.keys(centerCurves).forEach((i) => {
material = new matClass({
color: +toHex(centerColors[i]).replace("#", "0x"),
side: THREE.DoubleSide
});
const geometry = threeTubeGeometry(centerCurves[i], 0.03 * tubeScale);
geometry.computeVertexNormals();
const mesh = new THREE.Mesh(geometry, material);
mesh.name = i == 0 ? "origin" : "X" + i;
tubes.add(mesh);
});
return tubes;
}
visibleElements = {
for (let mesh of tubes.children) {
for (let name of ["origin", "X1", "X2", "X3", "X4", "X11", "X59"]) {
if (mesh.name == name) {
mesh.visible = show.includes(name);
}
}
if (mesh.name == "positionTube")
mesh.visible = show.indexOf("triangle vertices") != -1;
else if (mesh.name == "touchTube")
mesh.visible = show.indexOf("caustic touch points") != -1;
}
mesh.visible = show.indexOf("surface") != -1;
}
light = {
let light1 = new THREE.PointLight(0xffffff, 0.7);
light1.position.set(-10, -10, -10);
let light2 = new THREE.PointLight(0xffffff, 0.7);
light2.position.set(0, 0, 0);
let group = new THREE.Group();
group.add(light1);
group.add(light2);
group.add(new THREE.AmbientLight(0xffffff, 0.4));
return group;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(colorBkg);
const group = new THREE.Group();
group.add(mesh);
group.add(tubes);
let bsphere = mesh.geometry.boundingSphere;
const { x, y, z } = bsphere.center;
group.position.set(-x, -y, -z);
scene.add(group);
scene.add(camera);
//scene.add(light);
return scene;
}
{
for (let frame = 0; ; frame++) {
controls.update();
// light.position.copy(camera.position);
renderer.render(scene, camera);
yield frame; // Observable way of creating an animation...
}
}
md`## Color stuff`
viewof color1 = html`<input type=color value='${defaults("color1")}' >`
viewof color2 = html`<input type=color value='${defaults("color2")}' >`
viewof color3 = html`<input type=color value='${defaults("color3")}' >`
viewof colorBkg = html`<input type=color value='${defaults("colorBkg")}'>`
toRgb = color => {
color = d3.color(color);
return [color.r / 255, color.g / 255, color.b / 255];
}
toHex = (color) => {
color = d3.color(color);
return color.hex();
}
function interpolateColors(domain, ...colors) {
return d3
.scaleLinear()
.domain([domain[0], (domain[0] + domain[1]) / 2, domain[1]])
.range(colors)
.interpolate(d3.interpolateHcl);
}
import {
X,
three_periodic,
naturalSample,
arclenSample,
jacobiSample
} from "@esperanc/elliptic-3-periodic-billiards"
import { Vec } from "@esperanc/2d-geometry-utils"
import { Range, Radio, Checkbox } from "@observablehq/inputs"
THREE = {
const THREE = (window.THREE = await require('three@0.128'));
await require('three@0.128/examples/js/controls/TrackballControls.js').catch(
() => {}
);
return THREE;
}
d3 = require("d3@5")
import { legend } from "@d3/color-legend"
import { jacobi_curvature } from "@dan-reznik/spatiotemporal-curvature"
import { canvasRecord } from "@esperanc/canvas-recording"
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.