Inspired by a p5.js sketch I had created during Intro to IM:
P5 Code:
let baseSize = 40;
let p5 = new P5();
s0.init({ src: p5.canvas });
p5.hide();
p5.frameRate(30);
p5.setup = () => {
p5.createCanvas(400, 400);
};
p5.draw = () => {
p5.background(220, 220, 220, 40);
let cc0 = (typeof cc !== 'undefined' && cc[0] != null) ? cc[0] : 0;
let cc1 = (typeof cc !== 'undefined' && cc[1] != null) ? cc[1] : 0;
// determine mode:
// Mode 0: Grid of ellipses (cc0 < 0.33)
// Mode 1: Rotating lines (0.33 ≤ cc0 < 0.66)
// Mode 2: Central blob (cc0 ≥ 0.66)
let mode = cc0 < 0.33 ? 0 : cc0 < 0.66 ? 1 : 2;
// map cc1 to color values
let r = p5.map(cc1, 0, 1, 50, 255);
let g = p5.map(cc1, 0, 1, 100, 200);
let b = p5.map(cc1, 0, 1, 150, 255);
p5.noStroke();
if (mode === 0) {
// mode 0: Grid of ellipses
let spacing = p5.map(p5.mouseX, 0, p5.width, 20, 50);
let size = baseSize * (1 + cc1) + p5.map(p5.mouseY, 0, p5.height, 0, 20);
for (let x = 0; x < p5.width; x += spacing) {
for (let y = 0; y < p5.height; y += spacing) {
p5.fill(
p5.random(r - 20, r + 20),
p5.random(g - 20, g + 20),
p5.random(b - 20, b + 20),
120
);
p5.ellipse(x, y, size, size);
}
}
} else if (mode === 1) {
// mode 1: Rotating lines
p5.push();
p5.translate(p5.width / 2, p5.height / 2);
let numLines = 12 + Math.floor(cc1 * 12) + Math.floor(p5.map(p5.mouseX, 0, p5.width, 0, 6));
let step = p5.TWO_PI / numLines;
let speed = 0.02 + p5.map(p5.mouseY, 0, p5.height, 0, 0.05);
for (let i = 0; i < numLines; i++) {
let angle = i * step + p5.frameCount * speed;
let len = 100 + cc1 * 100;
p5.stroke(r, g, b, 150);
p5.strokeWeight(2);
p5.line(0, 0, len * p5.cos(angle), len * p5.sin(angle));
}
p5.pop();
} else if (mode === 2) {
// mode 2: Central blob multiple rotated polygons
p5.push();
p5.translate(p5.width / 2, p5.height / 2);
let copies = 6 + Math.floor(cc1 * 6) + Math.floor(p5.map(p5.mouseX, 0, p5.width, 0, 4));
let step = p5.TWO_PI / copies;
for (let i = 0; i < copies; i++) {
p5.push();
p5.rotate(i * step + p5.frameCount * 0.01 + p5.map(p5.mouseY, 0, p5.height, 0, 0.05));
p5.fill(r, g, b, 180);
let sides = 5 + Math.floor(cc1 * 5) + Math.floor(p5.map(p5.mouseY, 0, p5.height, 0, 3));
let radius = 50 + cc1 * 50;
p5.beginShape();
for (let j = 0; j < sides; j++) {
let a = p5.map(j, 0, sides, 0, p5.TWO_PI);
p5.vertex(radius * p5.cos(a), radius * p5.sin(a));
}
p5.endShape(p5.CLOSE);
p5.pop();
}
p5.pop();
}
};
src(s0)
.modulate(noise(3, 0.2), 0.05)
.blend(osc(10, 0, 1).rotate(0.1), 0.1)
.out(o0);
render(o0);
// hush()
Tidal:
d1 $ slow 2 $ s "house(4,8)" # gain 0.9
d2 $ stack [s "drum(4,8) realclaps(4,8)" # speed 4 ,ccv "<64 0 127 0>" # ccn "0" # s "midi"]
d3 $ stack [ s "popkick(8,16)" # speed 3 , ccv "<32 96 127 64>" # ccn "1" # s "midi" ]
d5 $ stack [ s "pad(4,8)" # speed 1.5, ccv "<127 64 32>" # ccn "2" # s "midi" ]
d5 silence
Output (please disregard the audio quality, my microphone was not working properly):
