Computer Graphics & Visualization @ufrj.br
Hobby curvesNoise plane partitionRandom shapes in a gridDeformation with RBFsShape-conforming fibersSynthetic texture algorithmsSimplex noise exerciserNoise LoopsThe Infinity ToyApollonian gasket construction by inversionCircle inversion fractals3D Apollonian Sphere PackingsGPU-IOColor HarmoniesRandom space-filling curvesStyle transfer with magenta-js10 PRINT with SVG and <use>SpirographAnimação com bolasCheap mandalaTruchet Archimedean TilingsWallpaper GroupsSplotchifyColor palettes from one colorFlow fieldsFlow field variationsKinetic typographyDrifting squaresSketch MandalaRosace 3Platonic Solids Playground
Global mode p5
(await visibility(),
p5iframe(`
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(100);
resetMatrix();
noStroke();
let deg = PI/180;
let ang = frameCount * deg/2;
let r = 2;
camera (r*cos(ang),-1,r*sin(ang),0,0,0,0,1,0);
perspective (PI/7, width/height, 0.01, 1000);
pointLight (200, 200, 200, 2, -2, 2);
pointLight (200, 200, 200, 0, -2, 0);
push();
for (let i=-5; i <= 5; i++) {
let x = i * 0.2;
for (let j=-5; j <= 5; j++) {
let z = j * 0.2;
pop(); push();
translate (x,0,z);
rotateX((ang%PI)*cos(ang)+i*deg*10);
rotateZ(ang+j*deg*5);
box (0.2,0.2,0.2)
}
}
pop();
}`))
p5iframe = function(sketch, options = {}) {
let { height = 600, title = "p5 sketch", style = "" } = options;
let iframe = html`<iframe class="p5frame" frameborder="0" width=${options.width ||
width}px height=${height}px title=${title} style=${style}
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms allow-modals allow-downloads"></iframe>`;
iframe.srcdoc = `<!DOCTYPE HTML>
<html lang="en"><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js" crossorigin=""></script>
<meta charset="utf-8">
<style>
canvas {
padding:0px;
margin:0px;
}
main {
height:${height}px;
}
</style>
</head>
<body style="margin:0;padding:0;"><script>${sketch}</script></body></html>`;
return iframe;
}
editor = ace(defaultSketch,
{ height: "20em" },
{ theme: "ace/theme/chrome", mode: "ace/mode/javascript" }
)
import {ace} from '@jobleonard/ace'
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.
