The goal is to complete a constantly evolving generative piece - I am attaching image, which does not show movement.

JavaScript, p5,js libraries (p5.min.js, p5,sound.min.js) noisyGrid, VS code, extension brackets

Below are the steps that requires completion and which is code that requires completion.

Question: please add code required to code pices I am adding below.

Steps to complete

1. Creating a colorful grid

Step 1: Amend the colorGrid() function and create a 25x25 grid of rectangles. The rectangles should be of width and height equal to stepSize, the global variable already provided. Set the fill to white and the stroke to black, to make sure the grid is correctly setup.

Step 2:

For each of the tiles generate a 3D noise value, using the tiles x and y coordinate as well as the frameCount so that the noise values change over time. Make sure you scale the input parameters of the noise function appropriately so that you get organic values out of it. Use that noise value to lerp (aka interpolate) between red and green.

Use the lerpColor() function (see p5.js examples) to do so. Remove the rectangles stroke and use color returned from the lerpColor() function to fill the rectangle. If youve done things right you should see a grid of tiles with slowly changing colors.

If the color of your rectangles are changing rapidly or are not smooth like the gif above, double check how you have scaled the input parameters for noise().

Step 3: Make the grid color change speed be dependent on the x coordinate of the mouse (ie small mouseX, faster color changes).

2. Compass Grid

Step 4: Amend the compassGrid() function to create a grid of 25x25 lines of length stepSize. Make sure each compass is at the center of each tile. By default they should all be pointing up. You should use translate() to move to the center of each grid.

Step 5: For each of the compasses generate a 3D noise value, using the compass x and y coordinate as well as the frameCount so that the noise values change over time. Make sure you scale the input parameters of the noise function appropriately so that you get organic values out of it. Use that noise value with map() to generate an angle between 0 and 720 degrees. Use that value to rotate the compass. If youve done things right your compasses should be rotating while the sketch is running.

If your lines are not rotating in the pattern seen above check how you are scaling the input parameters of noise(). Also study how each line rotates in the gif above.

Step 6: Make the compass movement speed be dependent on the x coordinate of the mouse (ie small mouseX, faster compass rotations).

Step 7:

- Change the colors and style.

- Use the noise to change the color and length of the compass lines.

Thank you - I am a starter learner and need a lot of assistance with the actual code required

------------------------------------------------------------------------

sketch.js

>>>>>>>

var stepSize = 20;

function setup() {

createCanvas(500, 500);

}

///////////////////////////////////////////////////////////////////////

function draw() {

background(125);

colorGrid();

compassGrid();

}

///////////////////////////////////////////////////////////////////////

function colorGrid(){

// your code here

}

///////////////////////////////////////////////////////////////////////

function compassGrid(){

// your code here

}

--------------------------------------------------------

index.html

>>>>>>>