m0ss

offcircle

React
TypeScript
JavaScript
API

Project: offcircle

View on GitHub

offcircle

Logo
JavaScript Generative Art
A recreation of the Matplotlib Ellipse Demo in JavaScript

NPM Version

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


Explore the Code