Press the top part (or the up arrow) or the bottom part (or the down arrow) to alter the visualization. Press the left and right arrows or sides to skip forward or backward.
xxxxxxxxxx
const speed = 10;
const tOffset = 5;
var freqDivider = 50;
const amplitudeMagnifier = 8;
const nBars = 80;
const nDots = 80; // Per bar
var baseDiameter;
var t = 0;
function setup() {
createCanvas(800, 800);
pixelDensity(displayDensity());
noStroke();
background(0);
baseDiameter = height / nDots * 0.1;
}
function draw() {
fill(0, 100);
rect(0, 0, width, height);
//fill(255);
for (var i = 0; i < nBars; i++) {
for (var j = 0; j < nDots; j++) {
var scale = baseDiameter + constrain(sin((t - tOffset * j) / freqDivider), 0, 100) * amplitudeMagnifier;
fill(map(scale, baseDiameter, baseDiameter * amplitudeMagnifier, 50, 255));
ellipse(width / nBars * (i+0.5), height / nDots * (j+0.5), scale, scale);
}
}
t += speed;
//saveFrame("####.png");
}
const freqDividerModifier = 10;
const tModifier = 10;
// Interaction with keyboard
function keyPressed() {
if (keyCode == UP_ARROW) {
freqDivider += freqDividerModifier;
if (freqDivider == 0) freqDivider = freqDividerModifier;
} else if (keyCode == DOWN_ARROW) {
freqDivider -= freqDividerModifier;
if (freqDivider == 0) freqDivider = 1;
if (freqDivider <= 1) freqDivider *= 0.1;
} else if (keyCode == RIGHT_ARROW) {
t += speed*tModifier;
} else if (keyCode == LEFT_ARROW) {
t -= speed*tModifier;
}
}
// Interaction with mouse/touch
function touchStarted() {
if (mouseY < height/3) {
freqDivider += freqDividerModifier;
if (freqDivider == 0) freqDivider = freqDividerModifier;
} else if (mouseY > height/3*2) {
freqDivider -= freqDividerModifier;
if (freqDivider == 0) freqDivider = 1;
if (freqDivider <= 1) freqDivider *= 0.1;
} else if (mouseY > height/3 && mouseY < height/3*2 && mouseX > width/2) {
t += speed*tModifier;
} else if (mouseY > height/3 && mouseY < height/3*2 && mouseX < width/2) {
t -= speed*tModifier;
}
}