“Everything flows” and “It is not possible to step into the same river twice” These phrases of Heraclitus have stuck in my mind since I went to school and have somehow conditioned my way of working. He viewed the world as constantly in flux, always “becoming” but never “being”. This work represents this constant and incessant movement of becoming through an endless animation in which different kinds of noises mix at different scales. The movement comes from the use of a 3D noise field in which time flows along the third coordinate. This contributes to the feeling of a flowing organic form in constant motion.
Technical specs: Real time endless generative animation HTML, VanillaJS, WebGL (no external libraries) | Resolution agnostic, it can render at any resolution and aspect ratio | 10 KB | 100% on-chain
Traits: Palette: 20 palettes; Grid: 0, 1, 2 (no grid, grid A, grid B) | Scale: 1 – 4 | Detail: 0, 1, 2 (kind of noise at finer scale) | Shading: 0, 1 (false, true)
In physics plasticity refer to irreversible deformation, in biology plasticity refer to adaptiveness to varying condition i.e. the capacity of the nervous system to modify itself in response to experience.
Plastica is a real time endless generative animation of a periodic surface continuously deformed by noise (FBM) with ray-marching rendering that gives a plastic look and behavior.
The shapes formed by maximum and minimum of the rendered surfaces, even if completely abstract, can be viewed as something halfway between synthetic and organic matter. The variety of the 23 palettes contributes to this synthetic / organic vision.
The rendering is implemented in vanilla Javascript WebGL with GLSL shader. The hash of the blockchain transaction is used to seed the PRNG (Pseudo Random Number generator) giving rise to features variation in the minted pieces.
Requires a WebGL compatible browser and a recent PC with GPU.
Technical specs:
Endless generative animation | HTML, VanillaJS, WebGL (no external libraries) | 11.1 KB | 100% on-chain | 5 features/traits: [Palette (23 palettes); Surface (8 kind of different surfaces); FOV (in arbitrary unit); Angle; Scale]
A real time endless generative animation in vanilla Javascript WebGL GLSL.
The GLSL shader generates a warped FBM noise and applies convolution kernels for the Unsharpen and Sobel operators. The Sobel operator provides both the magnitude and direction of the gradient, one is used to highlight edges, the other to achieve a shading effect.
The main parameters for the animation can be chosen with the fx(params) interface. The minted iterations will differ as the noise generation is seeded via fxrand().
The animation can be rendered in fullscreen at 16/9, 9/16, or 1/1 aspect ratio.
Requires WebGl compatible browsers.
Parameters ———- Palette – select palette Noise Scale – zoom in the noise field FBM Octaves – choose how much octaves in the FBM [4, 5, 6, 7] Speed – speed of animation Warp Kind – select the warping method [five kind] Coeff. Noise – amount of the main noise field Coeff. Unsharp – amount of unsharp filter Coeff. Sobel – amount of edge highlight Coeff. Gradient – amount of shading effect Grain – amount of added grain noise
About the previous work (YANF) and during the development of this new one some people told me that it looks like carved in wood or metal or made of silk or felt, that they would like to touch it. From these considerations I decided to call this new work ‘Materia’.
This new abstract work follows the lines of the previous work (YANF) going further in the direction of conveying a material sensation.
Here in contrast to YANF the main field-generating functions are semi-random combinations of transcendental, polynomial and irrational functions instead of noise.
The field generated by the randomly chosen function is perturbed with different kinds of noise at different scales to obtain variety and more natural look at the same time.
The gradient orientation of the field is used to modulate luminosity to give the impression of lights and shadows even if all is drawn with bi-dimensional object (no 3D).
The final step of adding flow lines along the contour, together with previous step for lights and shadows, leads us to the final result which gives us the feeling of a material object that could be touched.
Function names were generated by ChatGPT after reading this description, I don’t know why all those divine, celestial, mystic, …
The palettes used are a subset of the Studio Yorktown Color Town Hall MIT licensed palettes with two exceptions (‘ABBA’ and ‘BAAB’).
Default resolution: 2000×2000
[2] to redraw at double resolution (4000×4000 – it takes four times then default) [1] to redraw at default resolution [s] to save a png at current resolution
Sources of variations are: – 36 palettes – 32 field generating functions – 2 phase parameters each with 8 possible values – 2 types of noise – 2 values for scale (high, low) – added noise at fine scale (True, False) – colors banding (True, False)
Developed with p5.js, FastNoiseLite.js and chroma.js libraries.
Created by Andrea Belloni, fxhash: anbello, twitter: @Waterflowing0. Licensed under CC BY-NC-SA 4.0, see License.txt for more information.
After three works on landscapes I returned to an abstract work in which I used several kinds of noise fields and a different approach to flow lines.
In this work I use three intermediate images to generate the final image: – on the first image to each pixels is assigned a color related to the value of the noise field in that point using the main color palette – on the second image the gradient orientation (angle) of the field is used to assign colors using a secondary palette with the purpose of giving lights and shadows to the final image – on the third image flow lines are drawn using the direction perpendicular to the gradient, in this way the flows are aligned to the contour lines
After the second and third step the new generated image is blended with the previous giving rise to the final image.
[2] to redraw at double resolution (it takes four times then default) [1] to redraw at default resolution [s] to save a png at current resolution
Sources of variations are: – 14 palettes – 6 kinds of combinations of noise type and fractal type – 8 kinds of cuts – 3 kinds of aspect ratio – 3 border thickness
This Generative Token uses the FastNoiseLite.js and chroma.js libraries.
Created by Andrea Belloni, fxhash: anbello, twitter: @Waterflowing0. Licensed under CC BY-NC-SA 4.0, see LICENSE.txt for more information.
In this work, the third in the series of landscapes, I tried to achieve greater realism without abandoning those elements, also characteristic of the other works, which lead out of reality such as the shapes of the ground and trees and the choice of palettes.
Lands and Clouds are rendered using a mix of simplex noise and FBM (Fractional Brownian Motion), trees are generated with space colonization algorithm an placed using Poisson Disk Sampling distribution. The distribution density is driven by the land heightmap.
Developed with three.js using WebGLRenderer. Rendering is faster with chrome browser.
[s] to save a png at 2048×1536, 1536×2048, 2048×2048 (4/3, 3/4, 4/4 aspect ratio) [d] to save a png at 4096×3072, 3072×4096, 4096×4096 (4/3, 3/4, 4/4 aspect ratio)
In this work I tried to convey the idea of a landscape (many landscapes) with hills, trees, grass, bushes, skies and clouds. As is normal on fxhash I have accomplished all this by writing the code that generates the elements in a scene. While writing the code to obtain these landscapes I did not try to reproduce landscapes seen in reality or in photography, rather I followed from time to time ideas of landscapes that came to my mind as a sort of lucid dream. I hope I managed to convey this idea of a landscape that is halfway between reality and fantasy.
Lands and Clouds are rendered using a mix of simplex noise and FBM (Fractional Brownian Motion), trees are generated with recursive functions an placed using Poisson Disk Sampling distribution. The distribution density could be homogeneous (land heightmap drive the density) or biased to have more density towards the top, bottom, left or right of the land.
Developed with p5.js using WEBGL renderer. Rendering is faster with chrome browser.
In this work I used the tools I learned in developing precedent works to generate a landscape with hills, flowers, streams, ruins, sky and clouds. The generated landscape gives the impression of a natural one but at the same time it has some “abstract” traits that reveal the geometrical properties of the noise generation process. This noise is used both for the morphological aspect and for colors assignment.
Developed with p5.js using WEBGL renderer. Rendering is faster with chrome browser.
