What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseCar ArrivingMaurer RoseRegular NumbersBell CurveRandom GrowthASCII TextNormal Distribution CirclesClover 🌟Bouncing BallFollow MeBatonSine WaveBatonsSnake WaveSpringOscillatesOscillateDoneMoverDraggable 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.
White Noise
{
const app = cm.app({
renderer: await cm.terminal(),
fontWeight: "bold",
frameRate: 20
});
const width = app.prop("width"),
height = app.prop("height"),
characters = cm
.cross(cm.range(width), cm.range(height))
.map((d) => ({ x: d[0], y: d[1] }));
const textOptions = {
text: cm.figlet("Charming"),
x: width / 2,
y: height / 2,
textAlign: "center",
textBaseline: "middle",
fill: cm.gradientRainBowX()
},
bbox = app.textBBox(textOptions),
outside = ({ x, y }) => {
const { x: tx, y: ty, width: tw, height: th } = bbox;
return x < tx || x > tx + tw || y < ty || y > ty + th;
};
function update() {
app.append(cm.clear, { fill: "black" });
app.append(cm.text, textOptions);
app
.data(characters)
.process(cm.each, (d) => {
if (d.lifespan) return d.lifespan--;
const seed = cm.random(32, 127);
const ch = String.fromCharCode(seed);
d.stroke = cm.cfb(ch);
d.lifespan = cm.random(3, 10) | 0;
})
.process(cm.filter, (d) => {
if (outside(d)) return true;
const p = cm.random(10);
if (p < 0.5) return true;
return false;
})
.append(cm.point, {
x: (d) => d.x,
y: (d) => d.y,
stroke: (d) => d.stroke
});
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return app.on("update", update).call(dispose).start().node();
}
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.
