https://github.com/artcom/generative-graphics

Generative and animated graphics. The basic motion is controlled by a Perlin Noise RGB texture.
https://github.com/artcom/generative-graphics

Last synced: about 1 month ago
JSON representation

Generative and animated graphics. The basic motion is controlled by a Perlin Noise RGB texture.

• Host: GitHub
• URL: https://github.com/artcom/generative-graphics
• Owner: artcom
• License: mit
• Created: 2017-10-18T14:37:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T08:28:27.000Z (about 2 years ago)
• Last Synced: 2024-11-07T06:36:37.549Z (3 months ago)
• Language: JavaScript
• Size: 1.83 MB
• Stars: 1
• Watchers: 13
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Generative Graphics

Generative and animated graphic. The basic motion of the graphic is controlled by a Perlin Noise RGB texture.

## Development setup

### Requirements

* [Node](https://nodejs.org/en/download/)

### Run

```bash

npm install

npm run watch

Open http://localhost:5000/webpack-dev-server/

```

### Change textures

* Noise texture:

  * A perlin noise textures can be generated with Gimp and the [Solid Noise Plugin](https://docs.gimp.org/en/plug-in-solid-noise.html)

    * Use the sample assets/texture_sample.xcf

    * For each layer:

      * Filter -> Render -> Clouds -> Solid Noise...

        * Check "Tilable"

        * Cick "New Seed"

      * Colors -> Colorize... -> Red/Green/Blue (One color for each layer)

      * Layer Mode: Difference

    * Export as png

  * 512x512

  * Directory: public/textures/noise

* Color texture:

  * 512x512

  * Directory: public/textures/color

* Background texture:

  * 1920x1080

  * Directory: public/textures/background

Add filenames in model.js constants:

```

export const noiseTextures = [

  ...,

  

]

export const colorTextures = [

  ...,

  

]

export const backgroundTextures = [

  ...,

  

]

```

### Change parameters

Open http://localhost:5000/webpack-dev-server/?debug=true to show the UI to change graphic parameters. Changes can be exported as presets. Presets can be added to the presets.json to make them available.