Creative tools for Javascript and P5js library
Ongoing development of various creative tools made primarily for P5js and HTML canvas.
- Perlin circle
- Random distribution
- Sub-random distribution
- Displaced grid
- Fast Poisson Disc Sampling
- Non-overlapping circles
Usage
All tools are made as classes with state and can be initialised as objects with individualised settings. Settings to objects can be passed upon initialisation or anytime after using objects .setState() function.
Import relevant classes
;;;;
Initialise object parameters with constructor
const perlinCircle = size: roundness: 100 smoothnessA: position: x: y:
Initialise or modify object parameters with setState() method
perlinCircle
get parameters with getState() method
let size = perlinCircle
Perlin Circle
A circle like object modified by Perlin noise.
Example output and code below
const perlinCircle = size: 500 // size of circle roundness: 100 // roundness value from 100 round to 0 flat smoothnessA: 60 // smoothness on form value from 100 (smooth) to 0 rough smoothnessB: 30 // smoothness on details value from 100 (smooth) to 0 rough position: x:width/2 y:height/2 quality: 500 // number of vertices to create circleperlinCircle;perlinCircle; // perlinCircle.drawSeamless() method to draw circle on edge and continue on opposite side.
Random distribution
Basic random distribution for comparison with other solutions.
Example output and code below
const positionsArray = forlet i=0; i<2000; i++ positionsArray
Sub-random distribution
Splits area in cells and populates each cell with randomly distributed positions. Number of cells are determined by columns
and rows
in object. As number of cells are increased, randomness non-uniformity effect gets reduced.
Example output and code below
const subRandom = areaWidth: 2200 areaHeight: 1308 columns: 40 rows: 30 quantityOfPositionsInCell: 1;subRandompositionsArray; // export x and y positions in array
Displaced grid
Generates grid of positions and by adjusting displacementIntensity
creates appearance of random distribution. Value 0
creates grid with where each point is placed in middle of each cell, 100
adds displacement up to edge of the cell, values above 100
displaces points below their cell.
Example output and code below
const displacedGrid = areaWidth: 2200 areaHeight: 1308 columns: 33 rows: 20 displacementIntensity: 130;displacedGridpositionsArray; // export x and y positions in array
Fast Poisson Disk Sample
Fast poisson-disc sampling produces points that are tightly-packed, but no closer to each other than a specified minimum distance, resulting in a more natural pattern. This algorithm is fast and creates very uniform result, thought disadvantage is that it works best with circles/forms that are similar size, and as size variation increases algorithm produces less than satisfactory results.
Example output and code below
const poissonDisk = areaWidth: 2200 areaHeight: 1308 minimumDistance: 50 numberOfSamples: 30poissonDiskpositionsArray; // export x and y positions in array
Non-overlapping circles
Produces randomly placed circle area that other circles are forbiden to overlap. Circles get randomly placed until maximum defined quantity is reached or no more area is left to place new circle(reaching maximum failed attempts). This algorithm with quadtree support is relatively fast and fully accounts for various circle sizes. Thought with similar sizes will be less uniform that Fast Poisson Disk Sample.
Example output and code below
const nonOverlapping = areaWidth: 2200 areaHeight: 1308 quantityOfPositions: 1000 minimumSize: 5 maximumSize: 10 minimumMargin: 10 maximumMargin: 15;nonOverlappingpositionsArray; // export x and y positions in array
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
License
MIT license
Dependencies
This app is using P5.js library