Tag Search: Procedural

Generative Illustrations
, ,

Created in Processing. Fully procedural illustrations using a map system to detect shapes. A line wanders around the canvas and detects collisions. When collisions are found, a map graph is used to detect the polygon that was formed and generative algorithms are used to create fill patterns.

PolyDraw15 PolyDraw07 PolyDraw01 PolyDraw18 PolyDraw17 PolyDraw16 PolyDraw19 PolyDraw12 PolyDraw11 PolyDraw10 PolyDraw04 PolyDraw05 PolyDraw03 PolyDraw09 PolyDraw08 PolyDraw06 PolyDraw13 PolyDraw02

Procedural Planets
, , ,

Written in WebGL using three.js. Planet, nebulae, and stars are all generated procedurally using shaders. Textures are generated for a height map, moisture map, texture map, normal map, and roughness map. A biome lookup image is generated to control the distribution of colors. Unique names are generated and used as the random seed, which is then added to the URL string. If you find a cool planet, you can just share the link, and the planet you made will be shared.

View Project

Planet24 Planet22 Planet21 Planet20 Planet19 Planet18 Planet16 Planet15 Planet14 Planet13 Planet12 Planet11 Planet10 Planet09 Planet08 Planet07 Planet05 Planet04 Planet03 Planet02 Planet01

Procedural City
, , , ,

Fly through a cityscape built entirely from algorithms. Each building is randomly generated by manipulating cube geometry. The position, size, and color of the buildings are generated from simplex noise maps. This was built for WebGL using the Three.js library.

View Experiment

Cityscape-1 Cityscape-3 Cityscape-4 Cityscape-5 Cityscape-8 Cityscape-7 Cityscape-6