Circle Noise Grid Edit

This is another variation on my previous project, but with circles instead of straight lines. It's a variation of the noise grid with some added sliders and color variations. One major update in this version is that the circles should (nearly) run off the page so you can get a good full-length column without gaps at the top/bottom (you can see this best in the cover photo - although certain settings will make the gap reappear; and some of the screenshots are from before I edited the code for that. This is done in the first pair of context.translate() lines and modifying the grid width/height).

Personally I find this one less aesthetically pleasing than my project with the line grid, but it was fun to play with a different shape on the noise map.

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: true,
cols: 20,
rows: 20,
scaleMin: 1,
scaleMax: 40,
lineLength: 0.5,
multiplier: 1,
radius: 1,
clockwiseOff: true,
freq: 0.001,
amp: 0.5,
animate: true,
frame:0,
speed:10,
lineCap: "butt",
red: 0.25,
green: -1,
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);
context.translate(-width*0.5,-height*0.1);
context.translate(params.radius*-5,params.radius*-2);

const cols = params.cols;
const rows = params.rows;
const numCells = cols*rows;
const gridw = width *1.8;
const gridh = height *1.3;
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.strokeStyle=`rgb(${r},${g},${b})`;
context.lineWidth=scale;
context.lineCap=params.lineCap;

const c = params.clockwiseOff ? true : false;

context.beginPath();
context.arc(0,0, w*params.radius, 0, angle*params.lineLength*params.multiplier, c)//arc(x, y, radius, startAngle, endAngle, counterclockwise)

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.05, max:5, step:0.05});
folder.addInput(params, 'multiplier', {min:0.1, max:5, step:0.05});
folder.addInput(params, 'radius', {min:0.05, max:2, step:0.01});
folder.addInput(params, "clockwiseOff");

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);