Get Started
Graphity is a plain script — no build step, no bundler. Drop it in a page alongside p5.js and you have a Cartesian plane to draw on.
01
Include p5.js, then graphity.js, in that order.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="graphity.js"></script>02
Give it a container element to live in.
<div id="graph"></div>03
Create a Graphity instance, plot something in setup, animate it in draw.
let gr = new Graphity({
parent: "graph",
canvasSize: [600, 600],
rangeX: [-4, 4],
rangeY: [-4, 4]
});
gr.setup(() => {
let plot = gr.addPlot((x) => x ** 2);
plot.color = gr.sketch.color(235, 195, 52);
});
gr.draw(() => {
// runs every frame
});Documentation
The core surface area — enough to plot, animate, and make things draggable. Pick something on the left to see it explained and running.
Playground
Nothing hidden here — the whole instance, setup, and draw loop are yours. Edit and click away (or hit Run) to see it live.