ArtGen

  

ArtGen is a library that's meant to provide an easy way for both developers and artists create visual generative art on the web by taking a declarative and partly functional approach that abstracts away the messy of the code.

The goal of ArtGen is to provide a lightweight and fast library. No dependencies were used to keep the final build as small as possible.

!Sample animation

Note: this project is currently still in development so the current release may be broken.

What it looks like (in code)

``javascript

const example = ({unwrap, rgba}) => {
// define constants
const constants = [
2.553308700841444,
1.3112688558630707,
1.781073930670376,
1.2974055728293994
]
/*const constants = [
unwrap([1,3]),
unwrap([1,3]),
unwrap([1,3]),
unwrap([1,3])
]*/
console.log(constants)

// define helper functions
const calcX = (x, y, c) =>
Math.sin(2 Math.sin(x) Math.cos(c[0] x - y c[2])) +
c[2] Math.sin(1 Math.cos(c[0] x c[3]))
const calcY = (x, y, c) =>
Math.sin(Math.PI Math.cos(c[1] x)) +
c[3] Math.sin((1 / Math.E) c[1] * y)

// init x,y values
let x = 0.1, y = -0.1

// Run every frame for animation
const draw = value =>
[...Array(1000)].map((_, i) => {
x = calcX(x, y, constants)
y = calcY(x, y, constants)
const fill = rgba(
Math.max(200 - x / 2, 0), // red
(i / 1000) * 250, // green
y * 200, // blue
0.1 // alpha
)

return ArtGen.utils.GenPoint(x 150, y 150, {
fill,
zIndex: i,
radius: 1
})
})

return {
draw,
iterate: value => value + 1,
endIf: duration => duration >= 10000
}
}
`

Installation

If you’re using npm:

`bash
npm install artgenjs
`

or include it as a script in your HTML file:

`javascript

``