✳flâneur — a map of the web's best reading

What I've learned about flow fields so far.

damoonrashidi.me · 2,341 words · saved by 1 readers

This article will describe the methods and concepts I used to create the series of generated artworks pictured below. I've tried to visualize the algorithms and provide some code samples. The code samples are written in a Typescript with some simplifications so that the code is readable on mobile and to make them more concise and easy to follow. The general algorithms can easily be ported to any language though, I have for instance done some implementations using Rust. As a note, far more talented people than me have written articles on the subject upon which my work is very obviously based. I recommend reading that one too! The main driving force behind these flow field images is usually a noise function. Without regurgitating the wikipedia article, a noise function is a function that takes a coordinate in 2d space (higher dimension noise-functions also exist, but are irrelevant for the purpose of this article) and returns a value in the range -1..=1 such as points close together retu

What I've learned about flow fields so far. June 15, 2021, updated December 27, 2023. If you feel that this article is too wordy skip all the text and play with the illustrations, they get more and more fun as the articles rambles on! -- Me Table of contents Brief introduction Noise functions Drawing lines Alternatives to noise functions Collision detection Optimizing collision detection colors Conclusion Brief introduction. This article will describe the methods and concepts I used to create the series of generated artworks pictured below. I've tried to visualize the algorithms and provide so

Explore this link on the map →

saved by

related reading