Originally, I had gone for one of the visuals from tgh wesbite that was shared with us. However, Pulsar afterwards, crashed towards the end so I decided to use a simple visual I had made during my Intro to IM class. It’s a little over 2 mins (sorry :/ )

https://youtu.be/XYRRBaNS35w

Here is my Tidal code!

d2 $ struct "<t(3,8) t(5,8)>" $ s "casio" # n (run 8)

d4 $ struct "<t(3,8) t(5,8)>" $ ccv "<169 109 120 127>" 
  # ccn "0" 
  # s "midi"


d1 $ n ("e4 d c a b a b c7" |+ "<2 2 7 12>") # s "[superpiano, cp, bd, arpy, bd]"  # room 1

d3 $ struct "<t(3,8) t(5,8)>" $ ccv "<127 115 66 107>" 
  # ccn "0" 
  # s "midi"

d2 silence


hush

Hydra:

let p5 = new P5(); 
s0.init({ src: p5.canvas }); 
src(s0).out(); 

p5.hide(); 

let bubbles = [];

p5.draw = () => {
  if (bubbles.length === 0) {
    p5.createCanvas(window.innerWidth, window.innerHeight);
    for (let i = 0; i < 30; i++) {
      bubbles.push(new Bubble(p5.random(p5.width), p5.random(p5.height), p5.random(20, 100)));
    }
  }
  
  p5.background(137, 207, 240, 50);

  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].move();
    bubbles[i].display();
  }

  if (p5.frameCount % 15 === 0) {
    bubbles.push(new Bubble(p5.random(p5.width), p5.height, p5.random(20, 100)));
  }
};

class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.speed = p5.map(this.r, 20, 100, 2, 0.5);
    this.color = p5.color(p5.random(100, 255), p5.random(100, 255), p5.random(255), p5.random(100, 200));
  }

  move() {
    this.y -= this.speed;
    this.x += p5.random(-1, 1);
  }

  display() {
    p5.fill(this.color);
    p5.noStroke();
    p5.ellipse(this.x, this.y, this.r);
  }
}

src(s0)
    .mult(osc(2, () => cc[0] * 2, 3))
    .modulate(noise(() => cc[1] * 0.5))  
    .rotate( () => cc[0] * 0.5 )        
    .colorama(() => cc[0] * 1)       
    .out();

src(o2)
  .modulate(src(o1)
  .modulate(noise(() => cc[1] * 0.05))  
  .rotate( () => cc[2] * 0.2 ))
  .colorama(() => cc[0] * 2)       
  .blend(src(o0))
  .out(o2)

  
render(o2)

hush()

p5.js/Hydra code:

let p5 = new P5()
s0.init({src: p5.canvas})
p5.hide();

let particles = [];
let numParticles = 50;
let mode = 2;

for (let i = 0; i < numParticles; i++) {
  particles.push({
    x: p5.random(p5.width),
    y: p5.random(p5.height),
    size: p5.random(5, 20),
    speedX: p5.random(-2, 2),
    speedY: p5.random(-2, 2),
    color: p5.color(p5.random(255), p5.random(255), p5.random(255))
  });
}

p5.draw = () => {
  p5.background(0); 

  if (ccActual[0] < 20) {
    mode = 0; // Particles mode
  } else if (ccActual[0] < 40) {
    mode = 1; // Spiral mode
  } else if (ccActual[0] < 60) {
    mode = 2; // Grid mode
  } else if (ccActual[0] < 80) {
    mode = 3; // Starburst mode
  } else if (ccActual[0] < 110) {
    mode = 4; // Waveform mode
  } else {
    mode = 5; // Fractal mode
  }

  // Draw based on current mode
  switch(mode) {
    case 0: // Particles
      drawParticles();
      break;
    case 1: // Spiral
      drawSpiral();
      break;
    case 2: // Grid
      drawGrid();
      break;
    case 3: // Starburst
      drawStarburst();
      break;
    case 4: // Waveform
      drawWaveform();
      break;
    case 5: // Fractal
      drawFractal();
      break;
  }
}

function drawParticles() {
  p5.noStroke();
  for (let i = 0; i < particles.length; i++) {
    let p = particles[i];
    p5.fill(p.color);
    p5.ellipse(p.x, p.y, p.size, p.size);

    p.x += p.speedX;
    p.y += p.speedY;

    if (p.x < 0 || p.x > p5.width) p.speedX *= -1;
    if (p.y < 0 || p.y > p5.height) p.speedY *= -1;
  }
}

function drawSpiral() {
  p5.stroke(255, 0, 100);
  p5.strokeWeight(3);
  p5.noFill();
  p5.translate(p5.width/2, p5.height/2);

  for (let i = 0; i < 200; i++) {
    let r = i * 0.5;
    let angle = i * 0.1 + time * 0.2;
    let x = r * p5.cos(angle);
    let y = r * p5.sin(angle);
    p5.point(x, y);
    if (i > 0) {
      let prevX = (i-1) * 0.5 * p5.cos((i-1) * 0.1 + time * 0.2);
      let prevY = (i-1) * 0.5 * p5.sin((i-1) * 0.1 + time * 0.2);
      p5.line(prevX, prevY, x, y);
    }
  }
}

function drawGrid() {
  p5.stroke(0, 255, 255);
  p5.strokeWeight(2);
  let cellSize = 50;

  for (let x = 0; x < p5.width; x += cellSize) {
    for (let y = 0; y < p5.height; y += cellSize) {
      let distFromCenter = p5.dist(x, y, p5.width/2, p5.height/2);
      let size = p5.map(p5.sin(distFromCenter * 0.01 + time), -1, 1, 10, cellSize-5);
      p5.rect(x, y, size, size);
    }
  }
}

function drawStarburst() {
  p5.stroke(255, 255, 0);
  p5.strokeWeight(2);
  p5.translate(p5.width/2, p5.height/2);

  for (let i = 0; i < 36; i++) {
    let angle = i * p5.TWO_PI / 36;
    let x1 = 100 * p5.cos(angle);
    let y1 = 100 * p5.sin(angle);
    let x2 = 300 * p5.cos(angle + time * 0.5);
    let y2 = 300 * p5.sin(angle + time * 0.5);
    p5.line(x1, y1, x2, y2);
  }
}

function drawWaveform() {
  p5.stroke(0, 255, 0);
  p5.strokeWeight(3);
  p5.noFill();
  p5.beginShape();

  for (let x = 0; x < p5.width; x += 10) {
    let y = p5.height/2 + p5.sin(x * 0.02 + time) * 100 +
            p5.cos(x * 0.01 - time * 0.5) * 50;
    p5.vertex(x, y);
  }

  p5.endShape();
}

function drawFractal() {
  p5.stroke(255);
  p5.noFill();
  p5.translate(p5.width/2, p5.height/2);
  drawBranch(100, 0, 8);
}

function drawBranch(len, angle, depth) {
  if (depth <= 0) return;

  p5.strokeWeight(depth);
  p5.stroke(255 - depth * 30, depth * 30, 150);

  p5.push();
  p5.rotate(angle);
  p5.line(0, 0, 0, -len);
  p5.translate(0, -len);

  let t = time * 0.5;
  drawBranch(len * 0.7, angle + p5.sin(t) * 0.5, depth - 1);
  drawBranch(len * 0.7, angle - p5.cos(t) * 0.5, depth - 1);
  p5.pop();
}
src(s0).modulate(noise(5,0.1),0.1).blend(osc(15,0.2,()=>ccActual[0]/127).hue(()=>ccActual[0]/20),0.3).out()

TidalCycles code:


d1 $ ccv (slow 4 "0 25 50 75 100 127")
  # ccn "0"
  # s "midi"

d2 $ stack [
  n (arp "<up down diverge>" (slow 4 $ "a'min7 c'maj7 e'min7 g'maj7"))
    # s "arpy"
    # gain (slow 4 $ range 0.5 0.9 $ "0 25 50 75 100 127" / 127)
    # room 0.3 # size 0.5,
  n (slow 4 $ "a2 c3 e3 g3 c4 e4")
    # s "jvbass"
    # lpf (slow 4 $ range 300 2000 $ "0 25 50 75 100 127")
    # gain 0.8,
    
  every 3 (fast 2) $ n (slow 2 $ scramble 8 $ run 8)
    # s "east"
    # gain 0.7
    # pan (slow 8 $ sine)
]

d3 $ slow 8 $ s "padlong"
    # gain 0.6
    # lpf (slow 4 $ range 500 5000 $ "0 25 50 75 100 127")
    # hpf 300

d4 $ every 4 (jux rev) $ whenmod 8 6 (fast 2) $
    n (slow 2 $ "0 [~ 1] 2 [3 4]")
    # s "feel"
    # gain 0.75
    # room 0.2
    # orbit 1

d5 $ every 2 (# gain 1.5) $
    s "glitch:5*8"
    # gain (slow 2 $ range 0 0.8 $ "0 25 50 75 100 127" / 127)
    # speed (range 0.5 1.5 $ slow 16 sine)
    # pan (slow 3 $ rand)
    # cut 1

d2 silence 
d3 silence
d5 silence
hush

Link to demo video (apologies for the keystrokes, my supercollider/pulsar has been very laggy and buggy and I was not able to record from supercollider so I had to rely on Quicktime recording)

Thank you!

Here’s the YouTube link to my demo.

Here’s also my Hydra code…

//hydra

let p5 = new P5()
s0.init({src: p5.canvas})
// in a browser you'll want to hide the canvas
p5.hide();

// no need for setup
p5.noFill()
p5.strokeWeight(20);
p5.stroke(255);

let circlePositions = [
  { x: p5.width / 4, y: p5.height / 2, size: 300 }, // First circle
  { x: (p5.width / 4) * 3, y: p5.height / 2, size: 300 } // Second circle
];

p5.draw = () => {
  p5.background(0);

  // first circle
  p5.ellipse(circlePositions[0].x, circlePositions[0].y, circlePositions[0].size, circlePositions[0].size);

  // second circle
  p5.ellipse(circlePositions[1].x, circlePositions[1].y, circlePositions[1].size, circlePositions[1].size);
}
p5.draw = ()=>{
  p5.background(0);
  if (cc[1]==1){
    p5.ellipse(p5.width/2,p5.height/2,600*cc[0]+300*p5.noise(cc[0]),600*cc[0]+300*p5.noise(cc[0]));
  } else {
    p5.ellipse(p5.noise(cc[0]*2)*p5.width,cc[0]*p5.height,300,300);
  }
}

src(s0).modulate(noise(3, 0.6), 0.03).mult(osc(1, 0, 1)).diff(src(o1)).out()
src(s0).modulate(noise(2, 0.9), .3).mult(osc(10, 0, 1)).diff(src(o1)).out()
src(s0).modulate(noise(5, 5), .9).mult(osc(80, 30, 100)).diff(src(o1)).out()

// feedback effects --> .1 - .6, osc 0 - 10
src(s0).modulate(noise (4, 1.5), .6).mult(osc(0, 10, 1)).out(o2)
src(o2)
  .modulate(src(o1).add(solid(0, 0), -0.5), 0.005)
  .blend(src(o0).add(o0).add(o0).add(o0), 0.1)
  .out(o2)
  render(o2)

hush()

…and my Tidal!

//tidal

d3 $ s "superpiano" >| note (scale "major" ("[7 11 2 4 7 21 4 2]") + "15") # room 0.4
d1 $ juxBy 0.6 (slow 8) $ sound "bd cp sn hh:3" # gain 1.5
d4 $ juxBy 0.6 (slow 3) $ s "blip" # gain 1.7

-- 1 to 4, then to 8
d2 $ whenmod 16 8 (# ccv ((segment 128 (range 0 127 saw)))) $ struct "<t(8,8)>" $ ccv ((segment 128 (range 40 120 rand))) # ccn "0" # s "midi"

Hydra code:

let p5 = new P5()
s0.init({src: p5.canvas})
src(s0).
repeat(()=>ccActual[3],()=>ccActual[3]).
//here
scrollX(1,1).
luma(0.9).
mult(osc(3,2,2),0.9).
// rotate(1,1).
kaleid(()=>ccActual[3]).
rotate(1,1).
out()
p5.hide();
p5.strokeWeight(4);
p5.fill(20);
p5.textSize(200);
p5.background(0);
let parameter=p5.random(1);
p5.draw = ()=>{
  p5.stroke(p5.map(cc[2],0,1,0,255),p5.map((1-cc[2]),0,1,0,255)*parameter,p5.noise(time)*255*parameter);
  //p5.background(0);//comment this line
  let v = p5.noise(time);
    p5.push();
    p5.translate(p5.width / 2, p5.height / 2);
    p5.noFill();
    p5.fill(255);//uncomment this line
    var radius = v*p5.width*cc[0]*5;
    var angle = p5.TAU / (ccActual[0]);
    p5.beginShape();
    for (var i = 0; i <= (ccActual[0]); i++) {
      var x = p5.cos(angle * i) * radius;
      var y = p5.sin(angle * i) * radius;
      p5.vertex(x, y);
        p5.rotate(p5.sin(time));
    }
    p5.endShape();
    p5.pop();
    //p5.blendMode(p5.MULTIPLY)
}
render(o0)


src(o0).scale(1.01).blend(o1,.1).out(o0)


hush()

let p5 = new P5()
s1.init({src: p5.canvas})
//here
src(s1).
repeat(()=>ccActual[0],()=>ccActual[0]).
luma(0.08).
mult(osc(4,2,2)).
out(o1)
p5.hide();
p5.noStroke();
// p5.strokeWeight(4);
p5.fill(255);
p5.textSize(200);
p5.draw = ()=>{
  p5.background(0);
  let v = p5.noise(time);
    p5.push();
    p5.translate(p5.width / 2, p5.height / 2);
    p5.text(ccActual[0],0,0);
    p5.pop();
}
render(o1)

let p5 = new P5()
s1.init({src: p5.canvas})
//here
src(s1).
luma(0.08).
mult(osc(4,2,2)).
pixelate(()=>ccActual[4],()=>ccActual[4]*2).
blend(solid(0,0,0),()=>ccActual[5]).
out(o1)
p5.hide();
p5.noStroke();
// p5.strokeWeight(4);
p5.fill(255);
p5.textSize(200);
p5.draw = ()=>{
  p5.background(0);
  let v = p5.noise(time);
    p5.push();
    p5.translate(p5.width / 2, p5.height / 2);
    p5.text(ccActual[0],0,0);
    p5.pop();
}
render(o1)

hush()

Tidal code:

p 104 $ ccv "1" # ccn "5" # s "midi"

do
d2 $ s "cp cp cp cp "  #gain 3 #krush 9
d3 $ s  "sn*4" # gain 4
d4 $ qtrigger $ filterWhen (>=0) $ slow 1 $ s "supersaw*8" # note(scale "major" ("[6, 4] [8,6] [6,4] [5,3][6, 4] [6,4] [8,6] ~")) #gain 10
p 101 $ ccv "2" # ccn "1" # s "midi"
p 102 $ ccv (segment 64 (slow 4 (range 0 127 saw))) # ccn "2" # s "midi"
p 103 $ fast 2 $ ccv "8 4 <5 3> <6 7>" # ccn "0" # s "midi"
p 104 $ ccv "4 2 3 5" # ccn "3" # s "midi"
p 105 $ ccv (segment 64 (slow 2 (range 20 127 saw))) # ccn "4" # s "midi"
p 106 $ ccv "0" # ccn "5" # s "midi"


hush

do
d3 $ s  "sn*4" # gain (range 2 6 $ slow 4 $ saw) # room (range 0 1 $ slow 4 $ saw) # krush "<0 9>" # speed (range 1 6 $ slow 4 $ saw)
d4  $ qtrigger $ filterWhen (>=0) $slow 1
  $ every 2 (const $ s "supersaw*8"
                  # note(scale "major" ("[0,2,4] [5,7,9] [4,6,8] [3,5,7]")))
  $ s "supersaw*8"
  # note(scale "major" ("[6, 4] [8,6] [6,4] [5,3][6, 4] [6,4] [8,6] ~"))
  # gain 10
--d5$ qtrigger $ filterWhen (>=0) $ slow 1 $ s "supersaw*8" # note(scale "major" ("[6, 4] [8,6] [6,4] [5,3][6, 4] [6,4] [8,6] ~")-21) #gain 10
p 101 $ ccv "2" # ccn "2" # s "midi"
p 104 $ fast 2 $ ccv "4 2 3 5" # ccn "3" # s "midi"

do
d6 $ s "bd*8" #gain 2 #krush 20 #room 0.2 # speed (range 1 6 $ slow 4 $ saw)
d3 $ s  "sn*4" # gain (range 2 6 $ slow 4 $ saw) # room (range 0 0.2 $ slow 4 $ saw) # krush "<0 9>" # speed (range 6 12 $ slow 4 $ saw)



hush

Hydra code:

let p5 = new P5();
let maxCount = 5000; // max count of the circles
let currentCount = 1;
let x = [];
let y = [];
let r = [];
s0.init({ src: p5.canvas });
src(s0).out();
p5.hide();
  p5.strokeWeight(0.5);
  x[0] = p5.width / 2;
  y[0] = p5.height / 2;
  r[0] = 10;
p5.draw = () => {
  p5.clear();
  let newR = p5.random(1, 7);
  let newX = p5.random(newR, p5.width - newR);
  let newY = p5.random(newR, p5.height - newR);
  let closestDist = Number.MAX_VALUE;
  let closestIndex = 0;
  for (let i = 0; i < currentCount; i++) {
    let newDist = p5.dist(newX, newY, x[i], y[i]);
    if (newDist < closestDist) {
      closestDist = newDist;
      closestIndex = i;
    }
  }
  let angle = p5.atan2(newY - y[closestIndex], newX - x[closestIndex]);
  x[currentCount] = x[closestIndex] + p5.cos(angle) * (r[closestIndex] + newR);
  y[currentCount] = y[closestIndex] + p5.sin(angle) * (r[closestIndex] + newR);
  r[currentCount] = newR;
  currentCount++;
  for (let i = 0; i < currentCount; i++) {
    p5.fill(255, 255, 0);
    p5.ellipse(x[i], y[i], r[i] * 2, r[i] * 2);
  }
  if (currentCount >= maxCount) p5.noLoop();
};
render(o0);

src(s0).mult(osc(10,1,1)).out()

src(s0).modulate(voronoi(()=>(cc[1])*15,.9)).mult(osc(9,1.1,2)).out()

src(s0).modulate(voronoi(()=>(cc[1])*15,1)).mult(osc(9,1.1,2)).scale(1.5,1,1).out()

src(s0).modulate(voronoi(()=>(cc[1])*15,1)).mult(osc(9,10,6)).scale(1.5,1,1).saturate(({time}) => Math.sin(time) * 4).out()

TidalCycles code:

hush

d1 $ someCycles(degradeBy 0.1) $ jux rev $ struct "t(4,8,3)" $ sometimes (# octave 7) $ n (scale "major" (sometimes rev $ "[0 2 3 4 7]")) # s "superpiano" # speed "[1,2]" # room 0.2
d6 $ ccv "0 10 20 50 80 100 127" # ccn "1" # s "midi"


d2 $ s "bassdm:14*4" # gain 2.5 # room 0.09
d5 $ ccv "0 40 80" # ccn "1" # s "midi"


d4 $ s "[reverbkick]" # room 0.5
d5 $ ccv "0 20 40 80" # ccn "1" # s "midi"


d3 $ sometimes (# velocity 0.6) $ iter 4 $ struct "<t(4,8) t(4,8,1)>" $ s "cp"

Design P_2_2_1_01 (Herman Schmidt et al., 2018) from the generative design book caught my eye and I decided that it would be a good base for the work I was planning to make with p5. I felt that abstract patterns like the one seen below were a great start to the project. I took the algorithm of how the patterns were drawn and then I customized the code to be able to respond to midi events instead of mouse position. 

There are 4 patterns on tidal. One is a pattern of higher sounds and the other is a bit lower sounding pattern where I experimented with distortion using the someCycles function. The other two patterns control the midi output.

Here is the demo of the visuals controlled by tidalCycles: