Category: Spring 25

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

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:

This is the link for the video

This is the 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(10);
p5.angleMode(p5.DEGREES);
p5.stroke(255);
p5.noiseDetail(2,1)
// with tidal
let start = 10
p5.draw = ()=>{
  p5.background(0);
  p5.translate(p5.width/2, p5.height/2)
  let space = 10;
  for (let i = 0; i < 360; i+= space){
    let xoff = p5.map(p5.cos(i), -1, 1, 0, 10)
    let yoff = p5.map(p5.sin(i), -1,1, 0, 10)
    let n = p5.noise(xoff + start, yoff + start);
    var h = p5.map(n, 0, 1, -150, 200)
    p5.rotate(space)
    p5.rect(200 + cc[0] * 5, ccActual[0],h,1)
  }
  start += 0.01
}
src(s0).rotate(ccActual[0], 0.5).out(o1) //rotate(10, 0.5).
osc(24,0.5,3.5).mult(o1).out()

TidalCycles:

d1 $ whenmod 16 8 (# note (scale "major" ("[0,2,4] [1,3,5] [5,7,9]") + "c5")) $ s "[hh*8?, <superhammond:5(3,8) gtr(5,8)>, <clubkick(5,8) [drumtraks:6(3,8), bd(5,8,1)]>]" # room 0.95 # gain 1.4 # speed (slow 4 (range 1 2 square))
d2 $ whenmod 16 8 (# ccv ((segment 128 (range 0 127 saw)))) $ struct "<t(3,8) t(5,8)>" $ ccv ((segment 128 (range 40 120 rand))) # ccn "0" # s "midi"

(The full visual appears at around 55 second)