Live Coding Blog

video link: https://youtu.be/vsMz0GNc0NY

p5.js code:

tidalcycles code:

Hydra Code:

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

// No need for setup
p5.noFill()
p5.strokeWeight(10)
p5.stroke(255)

// Shape positions
let shapePositions = [
  { x: p5.width / 4, y: p5.height / 2, size: 200 },
  { x: (p5.width / 4) * 3, y: p5.height / 2, size: 200 }
]

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

  // First triangle
  p5.triangle(
    shapePositions[0].x, shapePositions[0].y - shapePositions[0].size / 2,
    shapePositions[0].x - shapePositions[0].size / 2, shapePositions[0].y + shapePositions[0].size / 2,
    shapePositions[0].x + shapePositions[0].size / 2, shapePositions[0].y + shapePositions[0].size / 2
  )

  // Second square
  p5.rectMode(p5.CENTER);
  p5.square(shapePositions[1].x, shapePositions[1].y, shapePositions[1].size);

  if (cc[1] == 1) {
    p5.triangle(
      p5.width / 2, p5.height / 2 - (400 * cc[0] + 200 * p5.noise(cc[0])) / 2,
      p5.width / 2 - (400 * cc[0] + 200 * p5.noise(cc[0])) / 2, p5.height / 2 + (400 * cc[0] + 200 * p5.noise(cc[0])) / 2,
      p5.width / 2 + (400 * cc[0] + 200 * p5.noise(cc[0])) / 2, p5.height / 2 + (400 * cc[0] + 200 * p5.noise(cc[0])) / 2
    )
  } else {
    p5.square(
      p5.noise(cc[0] * 2) * p5.width,
      cc[0] * p5.height,
      200
    )
  }
}


src(s0).modulate(osc(15, 0.3, 1.2), 0.1).mult(noise(2, 0.8)).diff(src(o1)).out();
src(s0).modulate(gradient().rotate(1.5), 0.5).mult(osc(8, 0.2, 2)).diff(src(o1)).out();
src(s0).modulate(noise(150, 1.2), 0.7).mult(osc(25, 5, 30)).diff(src(o1)).out();

// Feedback effects
src(s0).modulate(noise(4, 1.5), 0.6).mult(osc(1, 5, 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()

Tidal Code:

-- Sound
d1 $ s "bleep" # room 0.6 # gain 1
d2 $ s "~cp" # gain 1.2 # room 0.3

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

d4 $ s "superpiano" >| note (scale "major" ("[1 3 2 8 9 6]") + "8") # room 0.4 #gain 2 

-- CC
d5 $ whenmod 32 12 (# ccn ("<t(4,8) t t(4,8,1) t>"))
    $ ccn "0*64" # ccv (slow 3 (range 10 127 tri))
    # s "midi"

d6 $ whenmod 32 12 (# ccv "127") $ ccn "1*128" # ccv 0 # s "midi"





hush

Also Hi,

Apologies for uploading this late. Laptop was not cooperating.

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"

Here is the demo for p5js with tidal cycles:

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