DNA by @allamwithm: My project for course: Creative Coding: Making Visuals with JavaScript

My inspiration for this project was the universes we all become in the microscopic scale. Not only cells, DNA, RNA, etc., but all the microbiota throughout the human body; dancing in the same way planets, moons and stars do.

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: [ 1080, 1920 ],
animate: true
};

const params = {
cols: 3,
rows: 120,
scaleMin: 4.181,
scaleMax: 10.946,
freq: 0.001,
amp: 0.89,
animate: true,
frame: 0,

}

const sketch = () => {
return ({ context, width, height, frame }) => {
context.fillStyle = '#210813';
context.fillRect(0, 0, width, height);

const cols = params.cols;
const rows = params.rows;
const numCells = cols * rows;

const gridw = width;
const gridh = height;
const cellw = gridw / cols;
const cellh = gridh / rows;

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;
const h = cellh;

const f = params.animate ? frame : params.frame;

const n = random.noise3D(x, y, f, params.freq * 2);
const angle = -n * Math.PI * params.amp;
const scale = math.mapRange(n, 0, 1, params.scaleMin, params.scaleMax);

context.save();
context.translate(x, y);
context.translate(cellw, cellh);
context.rotate(angle);

context.lineWidth = 4 * scale + n;
context.strokeStyle = '#ff8934';

context.beginPath();
context.arc(-cellw * 2 , -cellh * 2, cellh * 0.1, 0, Math.PI * 2);
context.stroke()

context.restore();

context.save();
context.translate(x, y);
context.translate(cellw, cellh);
context.rotate(angle);

context.lineWidth = 4 * scale + n;
context.strokeStyle = '#ffeeba';

context.beginPath();
context.arc(-cellw * 0.5 , -cellh * 0.5, cellh * 0.1, 0, Math.PI * 2);
context.stroke()

context.restore();

context.save();
context.translate(x, y);
context.translate(cellw, cellh);
context.rotate(angle);

context.lineWidth = 4 * scale + n;
context.strokeStyle = '#ff2108';

context.beginPath();
context.arc(cellw, cellh, cellh * 0.1, 0, Math.PI * 2);
context.stroke()

context.restore();
};
}
};

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

//folder = pane.addFolder ( { title: 'Line'});
//folder.addInput(params, 'lineCap', { options: { butt: 'butt', round: 'round', square: 'square' }});

folder = pane.addFolder ( { title: 'Grid'});
folder.addInput(params, 'cols', { min: 1, max: 90, step: 1 });
folder.addInput(params, 'rows', { min: 1, max: 160, step: 1 });
folder.addInput(params, 'scaleMin', { min: 0.987, max: 10.987, step: 0.001 });
folder.addInput(params, 'scaleMax', { min: 0.987, max: 10.987, step: 0.001 });

folder = pane.addFolder ( { title: 'Noise'});
folder.addInput(params, 'freq', { min: -0.021, max: 0.021, step: 0.001 });
folder.addInput(params, 'amp', { min: 0, max: 1 });

folder = pane.addFolder ( { title: 'Animation'});
folder.addInput(params, 'animate');
folder.addInput(params, 'frame', { min: 0, max: 240 });

}

createPane();
canvasSketch(sketch, settings);