📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Urpflanze = require('urpflanze@0.3.3/build/urpflanze.js')
{
const output = html``;
yield output;
const scene = new Urpflanze.Scene()
const rect = new Urpflanze.Rect()
scene.add(rect) // Add the rectangle to the scene
const drawer = new Urpflanze.DrawerCanvas(scene, output)
drawer.draw() // Draw the scene on canvas
}
{
const output2 = html``;
yield output2;
const scene2 = new Urpflanze.Scene()
const rect2 = new Urpflanze.Rect({
repetitions: 8, // With a number we will have a ring repetitions
distance: 100,
sideLength: 25 // Size of the radius of the rectangle
})
// Adds the rectangle to the scene
scene2.add(rect2)
const drawer2 = new Urpflanze.DrawerCanvas(scene2, output2)
drawer2.draw() // Draw the scene on canvas
}
{
const output3 = html``;
yield output3;
const scene3 = new Urpflanze.Scene()
const shape = new Urpflanze.Rect({
repetitions: 10,
sideLength: 20,
distance: () => Math.sin(scene3.currentTime / 1000) * 100,
})
scene3.add(shape)
const drawer3 = new Urpflanze.DrawerCanvas(scene3, output3)
drawer3.startAnimation() // <- change draw() to startAnimation()
}
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.
