Skip to content

glumb/punktjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

punktjs travis ci travis ci

Draw Shapes in the Terminal

Usage

import { Circle, Path, Point, Group } from './index'
import { TerminalRenderer as Renderer } from './TerminalRenderer'

// create a new Path 
var path = new Path([[3, 5], [10, 12], [20, 12], [40, 42]])

// create a new Circle at x:10, y:5, r:10
var circle = new Circle([10, 5], 10)
circle.center = [10, 10]

// create Groups at position x:15, y:15; x:20, y:20
var group1 = new Group([15, 15])
var group2 = new Group([20, 20])

group1.addChild(circle)
group2.addChild(group1)

//create renderer and attach shapes
var renderer = new Renderer()
renderer.attach(group1, {color: [122, 222, 56]})
renderer.attach(circle, {color: [200, 30, 23]})

// or attach all elements in a group
renderer.attachAll(group2)

// listen for keyboard input
renderer.handleInput()

// move the Path
renderer.on('key.left', () => {
    path.position.x += 1
})

//rotating the circle group
setInterval(() => {
    group1.rotation += 1
    renderer.render()
}, 150)

See /examples for more examples 😅

Examples

bildschirmfoto 2017-10-23 um 10 43 55

Show Path and Handles

bildschirmfoto 2017-10-23 um 10 50 16

Rotate Path

bildschirmfoto 2017-10-23 um 10 52 22

Display Intersections

bildschirmfoto 2017-10-23 um 10 52 42