offcircle

JavaScript Generative Art

A recreation of the Matplotlib Ellipse Demo in JavaScript

Installation

npm install offcircle

API

The offCircle function operates on the Canvas API (node & browser).

1. ctx = 2D canvas context to render on
2. ellipseCount = Number of ellipses to render on the canvas (defaults to 120)

returns Void

offCircle(ctx,ellipseCount)

Usage

Node

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)
})

Web (React)

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;
 

License

MIT

Original Matplotlib Python Demo

Ellipse Demo