What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseWhite NoiseCar ArrivingMaurer RoseRegular NumbersBell CurveRandom GrowthASCII TextNormal Distribution CirclesClover 🌟Bouncing BallFollow MeBatonSine WaveBatonsSnake WaveSpringOscillateDoneMoverDraggable SpringCar SeekingCar WanderingCar FlowingFalling Polygons, Matter.jsFalling Boxes, 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.
Oscillates
{
const width = 600,
height = 200,
oscillators = cm.range(20).map(() => ({
angle: cm.vec(),
velocity: cm.vec(cm.random(-0.05, 0.05), cm.random(-0.05, 0.05)),
amplitude: cm.vec(cm.random(width / 2), cm.random(height / 2))
}));
function clear(app) {
app.append(cm.clear, { fill: cm.rgb(255) });
}
function draw(app) {
const x = (d) => Math.sin(d.angle.x) * d.amplitude.x;
const y = (d) => Math.sin(d.angle.y) * d.amplitude.y;
const group = app.append(cm.group, { x: width / 2, y: height / 2 });
group
.data(oscillators)
.process(cm.each, (d) => d.angle.add(d.velocity))
.call((d) => d.append(cm.link, { x: 0, y: 0, x1: x, y1: y }))
.call((d) =>
d.append(cm.circle, {
x,
y,
r: 16,
stroke: "#000",
fill: cm.rgb(175),
fillOpacity: 0.5
})
);
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width, height })
.on("update", clear)
.on("update", draw)
.call(dispose)
.call(frame)
.start()
.node();
}
function frame(app) {
app.node().style.border = "solid #000 1px";
}
cm = require("@charming-art/charming@0.0.6")
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.
