My project for course: Creative Coding: Making Visuals with JavaScript - Noise Grid Edits

I added more controls to the noise grid project, including color sliders. The color is dependent on the angle of the lines; essentially you get a positive and negative value. I added the ability to extend the lines so they overlap, and you can create some cool op art with it.

Below is the code which can be run as instructed in the course:

const canvasSketch = require('canvas-sketch');
const random = require('canvas-sketch-util/random');
const math = require('canvas-sketch-util/math');
const Tweakpane = require('tweakpane');

const settings = {
dimensions: [ 5000,2400 ],
animate: true
};

const params = {
darkMode: false,
cols: 10,
rows: 10,
scaleMin: 1,
scaleMax: 40,
lineLength: 0.5,
centerOn: true,
freq: 0.001,
amp: 0.5,
animate: true,
frame:0,
speed:10,
lineCap: "butt",
red: 0,
green: 0.7,
blue: 0.3,
};

const sketch = () => {
return ({ context, width, height, frame }) => {
const bg = params.darkMode ? 'black' : 'white';

context.fillStyle = `${bg}`;
context.fillRect(0, 0, width, height);

const cols = params.cols;
const rows = params.rows;
const numCells = cols*rows;
const gridw = width *0.99;
const gridh = height *0.99;
const cellw = gridw/cols;
const cellh = gridh/rows;
const margx = (width-gridw)*0.5;
const margy = (height-gridh)*0.5;

for (let i=0; i<numCells; i++){
const col = i%cols;
const row = Math.floor(i/cols);

const x = col*cellw;
const y = row*cellh;
const w = cellw*0.8;
const h = cellh*0.8;

const f = params.animate ? frame : params.frame;
const n=random.noise3D(x,y,f*params.speed,params.freq);

const angle=n*Math.PI*params.amp;
const scale = math.mapRange(n, -1, 1, params.scaleMin, params.scaleMax);

const r = angle*255*params.red;
const g = angle*255*params.green;
const b = angle*255*params.blue;
/*try alternating between n and angle (angle control calibrated to +-1.7)
- both of these numbers control the rotation of the lines, so the color will naturally vary depending on the angle of the line.
//console.log(r,g,b);
*/

context.save();
context.translate(x,y);
context.translate(margx,margy);
context.translate(cellw*0.5, cellh*0.5);
context.rotate(angle);

context.strokeStyle=`rgb(${r},${g},${b})`;
context.lineWidth=scale;
context.lineCap=params.lineCap;

const c = params.centerOn ? params.lineLength : 0.5;

context.beginPath();
context.moveTo(w*-c, 0); /* the - and + being equal make the line is centered*/
context.lineTo(w*params.lineLength, 0);
context.stroke();

context.restore();
}
};
};

const createPane = () => {
const pane = new Tweakpane.Pane();
let folder;

folder=pane.addFolder({title:'Grid'});
folder.addInput(params, 'lineCap', {options: {Butt:'butt', Round:"round", Square:"square"}});
folder.addInput(params, 'cols', {min:2, max:100, step:1});
folder.addInput(params, 'rows', {min:2, max:100, step:1});
folder.addInput(params, 'scaleMin', {min:1, max:100}); // "scale at Minimum Rotation"
folder.addInput(params, 'scaleMax', {min:1, max:100}); // "scale at Maximum Rotation"
folder.addInput(params, 'lineLength', {min:0.1, max:20, step:0.1});
folder.addInput(params, "centerOn");

folder=pane.addFolder({title:"Noise"});
folder.addInput(params, 'freq', {min:0, max: 0.01});
folder.addInput(params, 'amp', {min:0, max: 1});
folder.addInput(params, "animate");
folder.addInput(params, "frame", {min:0, max:999});
folder.addInput(params, "speed", {min:0, max:250});

folder=pane.addFolder({title:'Color'});
folder.addInput(params, 'red', {min:-1.7, max:1.7, step:0.05});
folder.addInput(params, 'green', {min:-1.7, max:1.7, step:0.05});
folder.addInput(params, 'blue', {min:-1.7, max:1.7, step:0.05});
folder.addInput(params, 'darkMode');

};

createPane();
canvasSketch(sketch, settings);