Tag: p5js

Materia

Materia

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.

https://www.fxhash.xyz/generative/slug/materia

Hamiltonian Chaos Rug

Hamiltonian Chaos Rug

For my contribution to the #genuary32nd event I decided to mint a generative token based on my #genuary21 (Persian Rug) interpretation.

The images are generated iterating a discrete map on the plane obtaining the Poincaré section of an higher dimensional dynamical system. In this case the dynamical system is a simple periodically kicked harmonic oscillator.

The symmetry in the generated images in some way resembles those seen in middle eastern tapestry.

The palettes used are a subset of the Studio Yorktown Color Town Hall MIT licensed palettes.

It is possible to explore the map zooming in and out and saving the results in 2K and 4K resolutions.

Interactivity:
[z] to zoom in
[x] to zoom out

Default resolution: 2000×2000

[2] to redraw at double resolution (4000×4000)
[1] to redraw at default resolution
[s] to save a png at current resolution

It is possible to interact and save only when iterations stop.

Sources of variations:

  • 28 palettes
  • 4 kinds of symmetries (4, 5, 6, 7-fold)
  • Several values for scale factor (20 – 80)

Developed with p5.js and chroma.js library

Created by Andrea Belloni, fxhash: anbello, twitter: @Waterflowing0. Licensed under CC BY-NC-SA 4.0, see License.txt for more information.

https://www.fxhash.xyz/generative/slug/hamiltonian-chaos-rug

YANF

YANF

Yet Another Noises and Flows

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.

Developed with p5.js

Default resolution: 2400×1600, 1600×2400, 2000×2000 (3/2, 2/3, 1/1 aspect ratio)

[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.

https://www.fxhash.xyz/generative/slug/yanf

Landscapes in my mind

Landscapes in my mind

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.

Features:
“LandPalette”: 20 colormaps
“TreePalette”: 20 colormaps
“Light”: Morning, Evening, Night
“SkyColor”: Blue, Azure, Turquoise, Gray, VioletRed
“Haze”: True, False
“Rainbow”: True, False
“Grayscale”: True, False
“TreeDensity”: Homogeneous, Top, Bottom, Left, Right

Created by Andrea Belloni, fxhash: anbello, twitter: @Waterflowing0. Licensed under CC BY-NC-SA 4.0, see LICENSE.txt for more information.

Paesaggio

Paesaggio

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.

[s] to save a 1600×1600 png.

Features:
“Palette”: 12 colormap
“Sky”: Day, Night, Gray – 15% Gray, 20% Night, 65% Day
“Ruins”: True, False – 33% True
“Streams”: True, False – 33% True
“Flower”: Red-Blue, Fuchsia-Yellow, Rose-Violet
“Border”: True, False – 25% True

https://www.fxhash.xyz/generative/slug/paesaggio

Boids

Boids

Boids is a Generative Token that represent the flocking of birds over a landscape. The name ‘Boids’ comes from a famous computer animation / simulation program.

The landscape is rendered as a surface using a kind of warped noise as height map. A noise of the same kind is used as texture for the sky.

The boids are disposed along the flow lines obtained from the noise gradient. This gives the sensation that the Boids follow the undulations of the landscape.

It is possible to save a 1600×1600 png with key ‘s’.

If the token has the feature EsterEgg = True then other keys are activated:

  • ‘2’ to visualize the 2D version of the token (then ‘s’ to save the png of 2D version)
  • ‘3’ to visualize the 3D version of the token (then ‘s’ to save the png of 3D version)

Sources of variations are:

  • Noise warping control parameters generating different grade of complexity and different shape an the landscape and Boids flock (combined on a single number on the features).
  • 21 color mapping for landscape and Boids.
  • Two method of surface rendering for the landscape, wireframe and blocks.
  • Two possible resolution for surface rendering.

Features:
Palette: color palette name (21 different palettes)
SurfaceRendering: surface can be rendered as wireframe or as a grid of blocks
SurfaceResolution: both wireframe and blocks can be at different resolution (Low, High)
NoiseControl: noise control parameter (0 – 15)
Border: the border can be in solid color or negative color (Solid, Negative)
EsterEgg: with 20% of probability a 2D version of the same token can be visualized and saved

https://www.fxhash.xyz/generative/11369

Boids 2D

Everything flows

The Generative Token is obtained in two stages: in the first stage warped noise is generated using the method explained by Inigo Quilez (see Licence.txt for reference); in the second stage, using Sobel method for edge detection, the noise gradient orientation is used to generate flow lines.

The first stage generate an image colored using the values of warped noise.
The second stage generate another image using gradient orientations both for shapes (the flow lines) and for coloring.
The two images are blended together to obtain the final result.

In both stages the color-maps are generated using a sinusoidal function of the gradient orientation angle with a random phases. There are 52 possible combinations of random phases.
Some palette used in the second stage are re-mixed using simplex noise with 20% of probability.

The user can save a 1200×1200 png with ‘s’.

Sources of variations are:

  • Four noise warping control parameters generating different grade of complexity and different shape (combined on a single number on the features)
  • 38 generated color mapping for warped noise
  • 38 generated color mapping for flow lines
  • Blending of the two intermediate images

Features:
Grays: 25% of probability to have a grays palette, (True, False)
Color Palette: one of the 38 possible combinations of random phases
Color Mixing: 20% of probabilty to have a re-mixed palette
NoiseControl: noise control parameter, (0 – 15)
Rare: when Grays = True and NoiseControl < 4

https://www.fxhash.xyz/generative/10850

Variations on Tribble Fur

The Generative Token is obtained in two stages: in the first stage warped noise is generated using the method explained by Inigo Quilez (see Licence.txt for reference); in the second stage, using Sobel method for edge detection, the noise gradient orientation is used to generate flow lines for the “Fur”.

The first stage generate an image colored using the values of warped noise.
The second stage generate another image using gradient orientations both for shapes (the fur) and for coloring.
The two images are blended together to obtain the final result.

In both stages color-map can be a precalculated palette or a generated one. There are four precalculated palettes read from files and many more generated with random phases.

The user can save a 1200×1200 png with ‘s’.

Sources of variations are:

– Four noise warping control parameters generating different grade of complexity and different shape
– One flattening control parameter
– Blending of the two intermediate images
– precalculated (four) or generated (many) color mapping for warped noise
– precalculated (four) or generated (many) color mapping for flow furry lines

Features:
– Color Palette: the kind of color palette used in the two stages, (Gen + Gen | Gen + Map | Map + Gen | Map + Map)
– ColorGen: the color scheme for generated palette, can be “Grays” (one) or “Colors” (many)
– ColorMap: the precalculated color palette (the name)
– NoiseControl: noise control parameter, 0 – 15
– FlatControl: flattening control parameter, 1 – 19
– Rare: when “Color Palette” = “Gen + Gen” and “ColorGen” = “Grays”, each event has 25% probability so should be 6.25%

https://www.fxhash.xyz/generative/10667

Zaratan II

As for the first Zaratan, the Generative Token chooses between three primitives (cubes, spheres, triangle stripes) and places it along a new kind of parametric curve with parameters varying with noise() function as source of smooth motion.

New shapes are added layer after layer with new forms and colors.

At any time the user can pause the generation by pressing ‘p’, resume it with ‘r’ and save a 1600×1600 png with ‘s’.

Sources of variations are:
– primitives choice (3)
– initial conditions
– shapes evolution
– colors evolution (only 10% will be bi-chromatic)

https://www.fxhash.xyz/generative/9659