c2.js is written in TypeScript and released as a JavaScript library. It provides many useful algorithms that can be applied to generative design, data visualization, and sound visualization.
c2.js is computationally focused, and generates geometric data through the algorithm module provided. Currently it provides a simple Renderer class based on Canvas for rendering. You can implement your own renderer based on Canvas, SVG, or WebGL according to your needs, or use existing libraries.
Setting up a c2.js project and making your first program. You can install and use c2.js in two different ways.
script
index.html
<html>
<head>
<style>body{margin:0;padding:0;}</style>
<script src='c2.js'></script>
</head>
<body>
<canvas id='c2'/>
<script src='main.js'></script>
</body>
</html>
main.js
let canvas = document.getElementById('c2');
let renderer = new c2.Renderer(canvas);
renderer.size(480, 480);
renderer.background('#cccccc');
let rect = new c2.Rect(0, 0, 480, 480);
let rects = rect.split([1,2,3,5,8], 'squarify');
renderer.draw(() => {
renderer.clear();
let mouse = renderer.mouse;
let point = new c2.Point(mouse.x, mouse.y);
for (let rect of rects){
if(rect.contains(point)) renderer.fill('#ff0000');
else renderer.fill(false);
renderer.rect(rect);
}
});
npm
npm install c2.js
let c2 = require("c2.js");
let rect = new c2.Rect(0, 0, 480, 480);
let rects = rect.split([1,2,3,5,8], 'squarify');