What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseWhite NoiseCar ArrivingMaurer RoseRegular NumbersBell CurveRandom GrowthASCII TextNormal Distribution CirclesClover 🌟Bouncing BallFollow MeBatonSine WaveBatonsSnake WaveSpringOscillatesOscillateDoneMoverDraggable SpringCar SeekingCar WanderingCar FlowingFalling Polygons, Matter.jsFailling Grid, ToxiclibsjsClusterClustersCluster, ShapesCluster, RepellerLiquidFalling BallsAttractorDancing BallsAttractorsWaltz of Circles, CanvasGenuary#16: Draw 10000 of something.Waltz of Circles, WebGLBarShader ArtCharacter MatrixGenuary#9: ASCII.Bar Chart, TerminalCharming StatsCharming SharedRainbow DragonBroken HeartGenuary#17: Inspired by Islamic art.Genuary#1: Particles, lots of them.Genuary#18: Bauhaus.Genuary#19: Flocking.Genuary#25: Recreate Image with Code.
Falling Boxes, Matter.js
{
replay;
const w = 600,
h = 200,
engine = matter.Engine.create(),
boxes = [],
boundaries = [
createBoundary(engine.world, w / 4, h - 5, w / 2 - 50, 10),
createBoundary(engine.world, (3 * w) / 4, h - 50, w / 2 - 50, 10)
];
function update(app) {
if (cm.random(1) < 0.1) boxes.push(createBox(engine.world, w / 2, 50));
app.append(cm.clear, { fill: "#fff" });
app.data(boxes).process(cm.eachRight, checkBox).call(appendMatterRect);
app.data(boundaries).call(appendMatterRect);
matter.Engine.update(engine);
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width: w, height: h })
.on("update", update)
.call(dispose)
.start()
.node();
}
function appendMatterRect(flow, options) {
flow.append(cm.rect, {
x: (d) => d.body.position.x,
y: (d) => d.body.position.y,
width: (d) => d.width,
height: (d) => d.height,
rotate: (d) => d.body.angle,
fill: cm.rgb(127),
stroke: cm.rgb(0),
strokeWeight: 2,
anchor: "center",
...options
});
}
function createBoundary(parent, x, y, width, height) {
const body = matter.Bodies.rectangle(x, y, width, height, { isStatic: true });
matter.Composite.add(parent, body);
return { body, width, height };
}
function createBox(parent, x, y) {
const width = cm.random(8, 16);
const height = cm.random(8, 16);
const body = matter.Bodies.rectangle(x, y, width, height, { restitution: 0.6 });
matter.Body.setVelocity(body, matter.Vector.create(cm.random(-5, 5), 0));
matter.Body.setAngularVelocity(body, 0.1);
matter.Composite.add(parent, body);
return { body, width, height };
}
function checkBox(d, i, array, flow) {
const { body } = d;
const app = flow.app();
if (body.bounds.min.y > app.prop("height")) {
array.splice(i, 1);
matter.Composite.remove(body.parent, d);
}
}
cm = require("@charming-art/charming@0.0.6")
matter = require("matter-js")
import { quote } from "@pearmini/charming-shared"
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.
