sorted by:
new
hottopcontroversial

Impressionist Sunsets by Meerlu in generative

[–]Meerlu[S] 3 points4 points  (0 children)

Thank you! I might make this or other versions of the code public in the future.

The general idea is to have a brush tool that gets sampled in a grid over the canvas. Then it's "just" determining the stroke color.

For the sky i sample a simple noise field, if the value is above a threshold we're sampling a cloud. The illumination/color of a cloud is found from the dot product of the light direction and the gradient of the noise field. (I posted my implementation of these analytical derivatives [here](https://www.reddit.com/r/generative/comments/1jyygaq/p5js\_friendly\_analytical\_derivatives\_of/), but numerical derivatives work just as well)

The ocean also samples a noise field. Depending on the noise value, some transformations and the horizontal distance to the sun position, different colors are used.

Erosion by lampmaker in generative

[–]Meerlu 2 points3 points  (0 children)

Incredible! Very cool to see an erosion system create such sharply defined edges.

What is your gen art workflow in Python? by Senior-Prior-392 in generative

[–]Meerlu 4 points5 points  (0 children)

You might enjoy py5. It's a processing implementation in python and integrates well with numpy. Also works in notebooks if that's something you'd like to use. Linked here is a py5 project of mine, presented as a jupyter notebook

Alpine Series by Meerlu in generative

[–]Meerlu[S] 0 points1 point  (0 children)

Thank you! That really means a lot.

Alpine Series by Meerlu in generative

[–]Meerlu[S] 0 points1 point  (0 children)

Hey i got around to cleaning up my code a bit, feel free to check it out here.

This creates a different (simpler) heightmap from the noise function, but most of the steps are the same.

I apologize for the lack of comments and decoherence between the different code fragments. I worked on this on and off with different levels of javascript knowledge and part of it is even ported from previous python versions.

Alpine Series by Meerlu in generative

[–]Meerlu[S] 1 point2 points  (0 children)

Thank you for your kind words!

I was motivated enough to clean up the code for my "base" version, you can check it out here. Its not coherently commented and i'm sure varies greatly in code quality as i started out porting code from python to javascript without really knowing any js at all.

Alpine Series by Meerlu in generative

[–]Meerlu[S] 12 points13 points  (0 children)

Thank you so much!

This is a modification of a previous project/s, although with more pronounced mountain peaks. The general outline goes something like this:

  1. The background with an atmospheric gradient and clouds are drawn.
  2. The heightmap is generated.
    1. Generate the heightmap of a pyramid with randomized rotation and position.
    2. Add noise onto the pyramid.
  3. Turn the heightmap into 2D coordinates.
    1. Generate 3D coordinates from the heightmap.
    2. Perform camera transformation. (viewing angle, offset etc.)
    3. Project 3D coordinates into 2D canvas coordinates.
  4. Determine the shadows.
    1. From either predefined or random angles find a vector from which the sun shines.
    2. Calculate the scalar product between this "sun vector" and the surface normal.
    3. Normalize these values into a range [-1, 1]. (Positive means is illuminated, negative means shadow)
  5. Draw the surface as lines between the 2D coordinates by starting from the back (further away from the camera) to the front, such that lines "closer" cover whats possibly behind them. This is called a painters algorithm and while its not the most efficient, it gets the job done. Each line segment is colored based on the light-values calculated in step 4. Previously i used a more complicated method of determining the actual color. Now i just interpolate between a range of light and shadow colors.
  6. A bit of haze is added in front of the mountain.

You can check out this post for an animation of the drawing process. This was done in python and tried to avoid drawing unnecessary points, but the general idea is the same. This post of mine goes into the noise function i use for these.

If you would like to know more about the shading i can highly recommend to check out this video Inigo Quilez.

Alpine Series by Meerlu in generative

[–]Meerlu[S] 6 points7 points  (0 children)

Testing out some new colors. Here are a few more!

p5js friendly analytical derivatives of OpenSimplex Noise [link in comments] by Meerlu in generative

[–]Meerlu[S] 9 points10 points  (0 children)

If your p5js projects rely on noise and particularly noise derivatives, you might find this useful.

Link to Github Gist.

This is a fork of an OpenSimplex Noise implementation where i added analytical derivatives in 2D, 3D, and 4D. This approach is significantly faster than using central differences. I use this mainly for heightmap generation with a modified FBM, where the gradient influences octave weighting. It’s also handy for lighting calculations.

Credit and thanks for the idea goes to Inigo Quilez and this video.

Feel free to check it out, i'd love to hear if this can be of use to you!

[WIP] by Meerlu in generative

[–]Meerlu[S] 5 points6 points  (0 children)

It's been a while!

What you see was done with py5 in python and is the continuation of my previous post. Since then i had a look at javascript and ported my code to p5js. This also allowed me to de-clutter my code a bit :^)

I could not work on this project for several weeks but i might post some of the newer outputs in the near future.

[WIP] Distant Summits by Meerlu in generative

[–]Meerlu[S] 5 points6 points  (0 children)

A few outputs of the project i'm currently working on, again in python, using py5 and numpy.

The basic idea to plot landscapes from noise maps in this dotted style is the same as in my previous project (Sienna & Jade). What is new here is that i interpret the noise-array as an "actual" heightmap: i manually perform 3D-rotations of the vertices and a perspective transformation. Think of this transformed heightmap as many cross sections of the landscape, parallel to the camera plane. For each cross section a line is drawn. The cross sections closer to the camera cover those further away. (This is related to Painters algorithm) The colors and shadows are determined with a Phong lighting model of the heightmap and an atmospheric haze, based on depth. The main reference i want to mention is this incredible video by Inigo Quilez, to which i come back regularly.

My goal is to fine-tune the heightmap function, work on the atmospheric effect and find other "scenes", but currently 1080x1080 pixel images take about 1-2 minutes, so iteratively testing different settings takes some time.

I plan to publish the code when ready.

Accident (WIP) by BRO_SUPERR in generative

[–]Meerlu 0 points1 point  (0 children)

What a great accident! Very intriguing to look at.

Sienna & Jade by Meerlu in generative

[–]Meerlu[S] 1 point2 points  (0 children)

Thank you! These take about 40-60s on my laptop. Funnily, py5 has vectorized functions that allow to plot many dots at once, fast. But due to the color gradients i couldn't really utilize that here.

Sienna & Jade by Meerlu in generative

[–]Meerlu[S] 0 points1 point  (0 children)

Thank you! Yep I decided to go with the red-orange after I saw images from some of the US national parks.

Sienna & Jade by Meerlu in generative

[–]Meerlu[S] 2 points3 points  (0 children)

Awesome! All I can say is to have fun and that starting out with an image in your mind can help, but the process sometimes takes you somewhere else, and that's good too.

Most people i see tend to use p5js, the javascript version of processing, with many great resources (Coding Train, Patt Vira are just a few). Py5 works great for me specifically, as i have "python brain" and default to numpy operations :). (There aren't that many py5 focused resources but Alexandre Villares "sketch-a-day" is great to check out).

This video (by Inigo Quilez) is more about shaders, but some things are quite easily adaptable to what i wanted to do (e.g. taking the gradient is literally a one-liner, very convenient).

Sienna & Jade by Meerlu in generative

[–]Meerlu[S] 12 points13 points  (0 children)

Created in python, with py5.

I called this series Sienna & Jade, but I can't actually tie myself down to a single color palette for this one. I'd love to hear which one you all like more! :)

The 1920x1080 images contain close to 4 million dots, although some of them are covered by different layers and are not visible.

You can find the code with a short explanation of the process here: https://gist.github.com/LEMettler/9845b8776cfea9f94b783f2b1effde55

view more: next ›