https://github.com/steren/attractors

Generates nice attractor-based graphics
https://github.com/steren/attractors

canvas javascript

Last synced: 7 days ago
JSON representation

Generates nice attractor-based graphics

• Host: GitHub
• URL: https://github.com/steren/attractors
• Owner: steren
• License: apache-2.0
• Created: 2016-03-28T13:28:46.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-06-01T03:47:44.000Z (6 months ago)
• Last Synced: 2024-10-05T11:41:21.876Z (about 1 month ago)
• Topics: canvas, javascript
• Language: JavaScript
• Homepage: https://attractors.steren.fr/
• Size: 415 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Attractors



See this [playlist of examples on Youtube](https://www.youtube.com/watch?v=8Xckh9zVzU4&list=PL7Bq7_PxIAiCJ3yCgzGKgErZpBk7ipZ0I).

## Using as a dependency

Install with `npm install attractors` or just clone this repository.

Add a canvas to your page: ``

Configure the library with a global `config` object (sorry)

```

var config = {

  id: 'paint-canvas',

  init_scale: 1,

  text: 'A T T R A C T O R S',

  text_position_x: 50,

  text_position_y: 33,

  text_width_ratio: 12,

  background_color: '#57A3BD',

  nb_attractors: 25,

  particule_density: 900,

  line_width: 0.35,

  nogo_zone: false,

  color1: '#DBCEC1',

  color2: '#F7F6F5',

  pixelratio: window.devicePixelRatio,

  root: 'node_modules/attractors/'

}

	

```

If you use the `text` attribute, load the `opentype` library: ``

Load the module: ``

## Configuration

These describe the attributes of the  `config` object that is expected from the library.

### Setup 

`id`: ID of the DOM canvas on which to paint

### Particles

`background_color`: Color to be used as background color. Expects a Canvas compatible color (example: `#57A3BD`)

`line_width`: Width of the particle strokes, in pixel.

`color1`: Color to be used for particle trails (example: '#DBCEC1')

`color2`: Secondary color to be used for particle trails (example: '#F7F6F5')

`shadow_scale`: Scale of the shadow, defaults to `1`. 

`nb_attractors`: Number of attractors in the piece

`particule_density`: Density of particle to create, for a square of 1000 * 1000.

`init_scale`:  The scale at which particles are initialized. 

1 means they will spread on an area the size of the screen. 

2 twice the size of the screen.

0.5 half the size of the screen.

 

### Text

`text`: String of text to display that will interact with particles

`text_position_x`

`text_position_y`

`text_width_ratio`

### Advanced rendering parameters 

`pixelratio`: Number of points in a screen pixel (example: Set to 2 on Retina screens). Defaults to `window.devicePixelRatio`

### No Go zones

`nogo_zone`: Boolean, if set to true, will instanciate areas without particles.

`nogoCircles` : Array of objects contaning data for empty circles.

### SVG Export

`svg`: If set to true, will keep an SVG version of the render in memory

`one_path`: If set to true, the created SVG will be stored into one single path.