The noise examples

[villares]

So, this is a port of Shiffman's original 2D noise example that came from Processing Python mode, comes from a Processing Java example:

"""
Noise2D by Daniel Shiffman.

Using 2D noise to create simple texture.
"""
increment = 0.02

def setup():
    size(640, 360)

def draw():
    load_pixels()
    xoff = 0.0  # Start xoff at 0
    detail = remap(mouse_x, 0, width, 0.1, 0.6)
    noise_detail(8, detail)

    # For every x,y coordinate in a 2D space, calculate a noise value and
    # produce a brightness value
    for x in range(width):
        xoff += increment     # Increment xoff
        yoff = 0.0     # For every xoff, start yoff at 0
        for y in range(height):
            yoff += increment  # Increment yoff

            # Calculate noise and scale by 255
            bright = noise(xoff, yoff) * 255
            # Try using this line instead
            # float bright = random(0,255)

            # Set each pixel onscreen to a grayscale value
            pixels[x + y * width] = color(bright)
    update_pixels()

So, this is too slow, but the challenge is: how to improve this with the new py5 capabilities in a way that a beginner can understand?

I think that the np.mgrid + vectorized noise approach is a bit steep for beginners, can you think of something in between?

Calling @TomLarrow to think of something together 😃

PS: I'm slowly going through all the Processing Python mode examples again (but I should be working on my PhD...):
https://github.com/villares/py5examples/tree/processing-python-mode-examples/examples-from-Processing-Python-mode

[hx2A]

Hi, @TomLarrow!

Maybe you could use this as a way to introduce the idea of vectorizing? You could do this with the nested for loops and then show that it is slow, then do one row at a time in a for loop and show that it is somewhat faster, then do all of it in one shot with numpy's grid tools. Actually, you might get much of the performance gain from doing one row at a time, without having to to do the grid stuff. It would go from O(N^2) to O(N).

There is a tutorial on generating noise.

The thing you have to be careful about here is that noise() is making a call to Java and you don't want to do that a million times to get one noise value at a time.

[villares]

I have also discussed this with him: https://ixora.io/blog/vectorization-and-numpy/

[hx2A]

Yes, that post was a precursor for the tutorial.

[TomLarrow]

I wrote something up here: https://codeberg.org/TomLarrow/creative-coding-experiments/src/branch/main/x_0057/x_0057.py

Much of it is from the noise tutorial, but for me, coming from using other forms of Processing, the big change was switching defining the arrays with numpy.arange, rather than numpy.linspace

When doing things in for loops, I'm used to scaling the noise by something like 0.02, or 0.005, so thinking about the numbers incrementing by this noise scaling made sense to me. I'm used to thinking, oh, these values are 0.02 apart as I go across horizontally

so:
np.arange(0, screen_width * noise_increment, noise_increment)

somehow feel more intuitive than
np.linspace(0, screen_width * noise_increment, num=screen_width)

because with the first it was easier for me to mentally "see" that one number was noise_increment away from the next one

Yes, linspace gives the exact same result, but the numeric difference in the noise value from one pixel to the next felt more abstract

(Maybe this is just me being relatively new to numpy and scientific Python in general, but that's kind of the target audience for this exercise)

[villares]

Wonderful! Thank you @TomLarrow!

If you don't mind I'll add an imported mode version of it to my fork of py5examples with Processing Python mode ports... I hope to make a PR some day 🤣 https://github.com/villares/py5examples/tree/processing-python-mode-examples/examples-from-Processing-Python-mode

"""
Adapted for imported mode from Tom Larrow's example: 
https://codeberg.org/TomLarrow/creative-coding-experiments/raw/branch/main/x_0057/x_0057.py

«An exploration into using numpy to speed up noise in py5
A recreation of https://github.com/jdf/processing.py/blob/master/mode/examples/Basics/Math/Noise3D/Noise3D.pyde
using numpy examples from https://py5coding.org/how_tos/generate_noise_values.html»
"""

import numpy as np

# How far apart the noise values will be. Lower numbers are more gradual
noise_increment = 0.02

def setup():
    global img, mesh_x, mesh_y
    size(640, 360)
    # Pre generating the img, so that it can be re-used for each frame, and
    # not have a new one created each frame
    img = create_image(width, height, RGB)
    # Builds two 2D arrays, mesh_x and mesh_y which have the dimensions of width x height
    # mesh_x has the values of the x position * noise_increment in the x direction, and is duplicated for every y row
    # mesh_y has the values of the y position * noise_increment in the y
    # direction, and is duplicated for every x column
    mesh_x, mesh_y = np.meshgrid(
        np.arange(0, width * noise_increment, noise_increment),
        np.arange(0, height * noise_increment, noise_increment)
    )

def draw():
    # The next line essentially loops through screen width and the screen height
    # and generates a value between 0 and 255 for each point
    # However because we're passing in the arrays mesh_x and mesh_y, it is generating an array output all at once
    # instead of calling os_noise over and over in a loop. This dramatically
    # improves performance
    
    out = remap(os_noise(mesh_x, mesh_y, frame_count * noise_increment), -1, 1, 0, 255)
    # Now that we have an array with the output, save it to the img object we created earlier
    # bands = "L" is for a greyscale image since r,g,and b would all be the
    # same value
    create_image_from_numpy(out, bands="L", dst=img)

    # Draw the image back to the screen buffer starting at point 0, 0 in the
    # upper left hand corner, and do not rescale
    image(img, 0, 0)

    # Write the framerate to the window tile to see the effect of the
    # optimization
    window_title(str(round(get_frame_rate(), 1)))

[villares]

There is this other option, what do you think, of setting the array directly to the canvas?

"""
Adapted for imported mode from Tom Larrow's example: 
https://codeberg.org/TomLarrow/creative-coding-experiments/raw/branch/main/x_0057/x_0057.py

«An exploration into using numpy to speed up noise in py5
A recreation of https://github.com/jdf/processing.py/blob/master/mode/examples/Basics/Math/Noise3D/Noise3D.pyde
using numpy examples from https://py5coding.org/how_tos/generate_noise_values.html»
"""

import numpy as np

# How far apart the noise values will be. Lower numbers are more gradual
noise_increment = 0.02

def setup():
    global mesh_x, mesh_y
    size(640, 360)
    # Builds two 2D arrays, mesh_x and mesh_y which have the dimensions of width x height
    # mesh_x has the values of the x position * noise_increment in the x direction, and is
    # duplicated for every y row, mesh_y has the values of the y position * noise_increment in the y
    # direction, and is duplicated for every x column
    mesh_x, mesh_y = np.meshgrid(
        np.arange(0, width * noise_increment, noise_increment),
        np.arange(0, height * noise_increment, noise_increment)
    )

def draw():
    # The next line essentially loops through screen width and the screen height and
    # generates a value between 0 and 255 for each point. However because  we're passing
    # in the arrays mesh_x and mesh_y, it is generating an array output all at once instead
    # of calling os_noise over and over in a loop. This dramatically improves performance
    
    out = remap(os_noise(mesh_x, mesh_y, frame_count * noise_increment), -1, 1, 0, 255)
    # Now that we have an array with the output, set the sketch canvas with it.
    # bands = "L" is for a greyscale image since r,g, and b would all be the same value
    set_np_pixels(out, bands="L")

    # Write the framerate to the window tile to see the effect of the optimization
    window_title(str(round(get_frame_rate(), 1)))

[TomLarrow]

I really like setting the pixels directly. It is one less step, and you save the problem with creating images over and over if you don't use the dst= option to set it to an already created image

[hx2A]

@TomLarrow , that is a fine example of how to use py5's noise functionality with numpy. Good job!

Yes, linspace gives the exact same result, but the numeric difference in the noise value from one pixel to the next felt more abstract

That make sense. Numpy's linspace() and arange() functions can both achieve the same result, but depending on the situation, one is usually easier to code than the other one. I tend to use linspace() when I know the start and end points and arange() otherwise. I recommend using whichever one is easier to conceptualize for the given situation.

I really like setting the pixels directly. It is one less step, and you save the problem with creating images over and over if you don't use the dst= option to set it to an already created image

I think setting the pixels directly has one less memory copy? I believe the performance will be slightly faster for this one.