JavaScript Generative Art
A recreation of the Matplotlib Ellipse Demo in JavaScript
npm install offcircle
The offCircle function operates on the Canvas API (node & browser).
ctx
= 2D canvas context to render onellipseCount
= Number of ellipses to render on the canvas (defaults to 120)
returns Void
offCircle(ctx,ellipseCount)
import fs from 'fs'
import path from 'path'
import Canvas from 'canvas'
import offCircle from 'offcircle'
// or common js
var fs = require('fs')
var path = require('path')
var Canvas = require('canvas')
var offCircle = require('offcircle')
var canvas = Canvas.createCanvas(500, 500)
var ctx = canvas.getContext('2d')
offCircle(ctx, 120)
var out = fs.createWriteStream(path.join(__dirname, '/example.png'))
var stream = canvas.createPNGStream()
stream.on('data', function (chunk) {
out.write(chunk)
})
import React, { useEffect } from 'react';
import './App.css';
import offCircle from "offcircle";
function App() {
const canvasRef = React.useRef(null);
useEffect(()=> {
const canvas = canvasRef.current
const ctx = canvas.getContext('2d')
offCircle(ctx,1000)
})
return (
<div className="App">
<canvas
ref={canvasRef}
width={window.innerWidth}
height={window.innerHeight}
/>
</div>
);
}
export default App;
MIT