https://github.com/rubenafo/chalks

A set of methods to manipulate data in p5js
https://github.com/rubenafo/chalks

art design generative-art graphics javascript nodejs p5js processing

Last synced: about 2 months ago
JSON representation

A set of methods to manipulate data in p5js

• Host: GitHub
• URL: https://github.com/rubenafo/chalks
• Owner: rubenafo
• License: apache-2.0
• Created: 2018-08-20T05:48:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T09:33:12.000Z (9 months ago)
• Last Synced: 2024-10-08T13:39:57.788Z (3 months ago)
• Topics: art, design, generative-art, graphics, javascript, nodejs, p5js, processing
• Language: JavaScript
• Homepage:
• Size: 1.71 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chalks

A thin, independent library on top of p5js containing methods to manipulate points and draw figures.   

Chalks is fully compatible with p5js and just provides some handy tools to simplify the creation process by accessing the p5js _canvas2d_ object.

Some of the components:

* Simplified path object to define styles and curves in a functional, declarative way.

* Generative:

    * Butterfly curve

    * Hypocycloid

    * Rose

    * Rossler

    * Lorentz

    * Dejon

    * Voronoi points (thanks to [voronoi](https://npmjs.com/package/voronoi))

* Points manipulation (subdivide, subchunks)

* Layout functions: column, rows, masonry

* Grammars

* Color handling using [Chromajs](https://www.npmjs.com/package/chroma-js)

* Particle System: integrates [node-particles](https://github.com/rubenafo/node-particles)

 

## Installation

```

npm i chalks

```

Keep in mind that _chalks_ requires [p5js](https://www.npmjs.com/package/p5) to be present.   

You can reference the _chalks.min.js_ library contained in the node_modules folder in your index.html:

```html

```

Alternatively you can simply clone this repo and add _chalks.min.js_, e.g.   

Copy the file _chalks.min.js_ from /lib and add it to your _index.html_ after your p5js import.

Example:   

```html

```

## Example

```javascript

function setup() {

    ch = new Chalks({width: 1000, height: 1000, seed:4}, {fill:"c8c8c8"})

    points = ch.Parametrics.dejon({x:500, y:900}, -2.24, 0.43, -3.266, -8.23, 250, 6200)

    console.log(points)

}

function draw() {

    points.forEach(p => ch.path({fill:"red", alpha:random(), stroke:"black", strokeWidth:12}, 10).m(p).l(p, p.cadd(150, 50)).draw())

    noLoop()

}

```