ScrollingRects20

For this week's Creative Code Challenge by @sableraph: "Scrolling Or Rhythm”, ScrollingRects20 is coded in P5JS, Hydra, SonicPi.

Scrolling Process

It takes scrolling rects and once again base20 numbers through P5JS and have continous augmented scrolling effects done with Hydra.

Rhythm Process

For the Rhythm Process, we remix a previous SonicPi Composition to give the piece a rhythm

Poem

Scrolling
With Words, With Shapes
Scrolling in and out of Place
Phasing the Angles
Placing as the Letters Dangles
As They are Scrolling
And Strolling

Video

Code

Hydra

s0.initScreen()

src(s0).scale(0.75).scrollX([0.5,0.25,0.75,-0.5,-0.25].smooth()).blend(src(s0).scale(1.75)).out()

s0.initScreen()
s1.initScreen()


src(s0).scrollX([0.5,0.25,0.75,-0.5,-0.25].smooth()).blend(src(s1).repeat(3,3)).out()

P5JS

let pos = 10;

function setup() {
  createCanvas(windowWidth, windowHeight);
}


    let usedFont = ["fantasy", "monospace", "georgia", "Courier New"];

function draw() {

  background('white');
  frameRate(3);
  for (let x = 0; x < width; x += 50) {
    fill(random(255), random(255), random(255));
    rect(x, Math.hypot(second() % 4, pos / 15), pos, 50);
  }

   for (let x = 0; x < width; x += 50) {
    fill(random(255), random(255), random(255));
    rect(Math.hypot(second() % 4,x, pos / 15), pos, 50);
  }

  for (let x = 0; x < width; x += 50) {
    fill(random(255), random(255), random(255));
    rect(Math.hypot(second() % 4,pos / 15),x, pos, 50);
  }

    for (let x = 0; x < width; x += 50) {
    fill(random(255), random(255), random(255));
    rect(Math.hypot(second() % 4,pos / 15,x),x, pos, 50);
  }

  for (let x = 0; x < width; x += 50) {
    fill(random(255), random(255), random(255));
    rect(Math.hypot(second() % 4,pos / 15), pos,x, 50);
    textFont(random(usedFont));
    textSize(pos*2.7)
    text(based_multi(pos * x, 20),x, x+50 )
  }
}

function mouseWheel(event) {
  print(event.delta);
  //move the square according to the vertical scroll amount
  pos += event.delta / 5 + random(-1, 1);
  //uncomment to block page scrolling
  //return false;
}

function based_multi(i, b) {
  return Math.abs(i).toString(b);
}

SonicPi

#Colors pair 1
Aqua = [0,255,255]
Coral = [255,127,80]

#Colors Pair 2
Lavender = [230, 230, 250]
Gold = [255,215,0]

#Colors Pair 3
MidnightBlue = [25,25,112]
DarkOrange = [255,140,0]

#Colors Pair 4
SlateGray = [112, 128, 144]
Crimson = [220,20,60]


def linear_transform(matrixA,vectorA)

  #this is the first row of the matrix
  row1 = matrixA[0]
  #this is the second row of the matrix
  row2 = matrixA[1]
  #this is the third row of the matrix
  row3 = matrixA[2]

  #this is the first val of the vector
  vec_x = vectorA[0]
  #this is the second val of the vector
  vec_y = vectorA[1]
  #this is the third val of the vector
  vec_z = vectorA[2]


  #this is the first value of the new vector
  vec_x_formed = [row1[0]*vec_x + row1[1]*vec_y + row1[2]*vec_z]
  #this is the second value of the new vector
  vec_y_formed= [row2[0]*vec_x + row2[1]*vec_y + row2[2]*vec_z]
  #this is the third value of the new vector
  vec_z_formed = [row3[0]*vec_x + row3[1]*vec_y + row3[2]*vec_z]

  #new vector
  vec_change = [vec_x_formed[0],vec_y_formed[0],vec_z_formed[0]]
end

def color_det2(loop,row1,row2,spread1,spread2)
  #Cramers Rule with Colors

  x1a = row1[0]
  x2a = row1[1]
  b_a = row1[2]

  x1b = row2[0]
  x2b = row2[1]
  b_b = row2[2]

  #determinant of main matrix [x1a,x2a,x1b,x2b]
  det_a = ((x1a * x2b) - (x2a * x1b)).to_f

  #determinant of main matrix but first column replace by b_a & b_B
  det_b = (b_a * x2b) - (x2a * b_b)

  #determinant of main matrix but second column replace by b_a & b_B
  det_c = (x1a * b_b) - (b_a * x1b)

  #the solving of the above equations

  det_1 = det_b/det_a
  det_2 = det_c/det_a

  puts det_1
  puts det_2

  #a ring of halves (120 60 30 15 7.5) then ticks
  #line does the same with steps, using it for the sleep chase
  bpm_chase = (halves 120, 5)
  sleep_chase = (line 0, 4, steps: 4)

  live_loop loop do
    use_bpm bpm_chase.choose
    use_random_seed Time.now.to_i
    with_fx :ping_pong, mix: rrand(0.4,0.65) do
      sample [:ambi_choir,:drum_snare_hard,:drum_tom_mid_soft].choose, rate: det_1,beat_stretch: (det_2).abs, pitch: det_1/det_2 if spread(spread1,spread2).tick
      sleep [(det_1+det_2).abs, (spread1/spread2) + sleep_chase.tick].choose
    end


    with_fx :echo do
      use_synth [:piano,:chiplead,:dull_bell,:piano].choose
      play det_2/det_1
    end

  end
end

def color_det(loop,row1,row2)


  #Cramers Rule with Colors

  x1a = row1[0]
  x2a = row1[1]
  b_a = row1[2]

  x1b = row2[0]
  x2b = row2[1]
  b_b = row2[2]

  #determinant of main matrix [x1a,x2a,x1b,x2b]
  det_a = ((x1a * x2b) - (x2a * x1b)).to_f

  #determinant of main matrix but first column replace by b_a & b_B
  det_b = (b_a * x2b) - (x2a * b_b)

  #determinant of main matrix but second column replace by b_a & b_B
  det_c = (x1a * b_b) - (b_a * x1b)

  #the solving of the above equations

  det_1 = det_b/det_a
  det_2 = det_c/det_a

  puts det_1
  puts det_2

  sample

  live_loop loop do
    use_random_seed Time.now.to_i
    with_fx :ping_pong, mix: rrand(0.4,0.65) do

      sample [:ambi_choir,:glitch_perc3,:bass_woodsy_c].choose, rate: [det_1,det_2].choose,beat_stretch: [(det_2).abs,(det_1).abs].tick, pitch: [det_1/det_2,det_2/det_1].choose
      sleep (det_1+det_2).abs

      use_synth :piano
      play (det_1/det_2).abs

      with_fx :krush do
        use_synth :prophet
        play (det_2/det_1).abs
      end
    end
  end
end


#this mathematical sections turns the combo of Aqua, Lavender, Gold into Cyber Neon Green
#R,G,B(0,250,40)

color_matrix1 = [Aqua, Lavender, Gold]
first_vector = [1,-1,1]

CyberNeonGreen = linear_transform(color_matrix1,first_vector) #0,250, 40

#this mathematical sections turns the combo of SlateGray, DarkOrange, MidnightBLue into SoftPink
color_matrix2 = [SlateGray, DarkOrange, MidnightBlue]
second_vector = [1,-1,1.75]

SoftPink = linear_transform(color_matrix2,second_vector) #236,115,196


color_matrix3 = [Crimson, SlateGray, Coral]
third_vector = [0.5,1,2]

CucumberIce  = linear_transform(color_matrix3,third_vector) #210,216,160.5 https://icolorpalette.com/color/d2d8a1

#getting the traces
color_mx1_trace = color_matrix1[0][0] + color_matrix1[1][1] + color_matrix2[2][2]
color_mx2_trace = color_matrix2[0][0] + color_matrix2[1][1] + color_matrix2[2][2]
color_mx3_trace = color_matrix3[0][0] + color_matrix3[1][1] + color_matrix3[2][2]


live_loop :ColorBending do
  use_random_seed Time.now.to_i / 2

  with_fx :whammy, mix: 0.25 do
    color_det(:aquaVcoral,Aqua,Coral)
    sleep [0.5,1,4].choose
    color_det(:LavenderVgold, Lavender, Gold)
    sleep [0.5,1,2].choose
    color_det(:MidnightvsOrange,MidnightBlue, DarkOrange)
    sleep 2
    color_det(:GrayvCrimson,SlateGray, Crimson)
    sleep [1,2].choose
  end

  with_fx :hpf do
    with_fx [:wobble,:ping_pong].choose, mix: rrand(0.2,0.6) do
      with_fx [:ping_pong,:vowel].choose,  mix: rrand(0.25,0.75) do
        color_det(:aquaVGold,Aqua,Gold)
        sleep [2,4,8].choose
        color_det(:CrimsonVcoral,Crimson,Coral)
        sleep [2,4,8].choose
        color_det(:LavenderVOrange,DarkOrange, Lavender)
        color_det(:GrayvBlue,SlateGray, MidnightBlue)
      end
    end
  end


  sleep [0.5,1,2,4].choose
end

live_loop :colortwisting do
  with_fx :echo, mix: 0.65 do
    with_fx :ping_pong do
      color_det2(:CybervsSoft,CyberNeonGreen,SoftPink,color_mx1_trace,color_mx2_trace)
      sleep [2,4,8].choose
      color_det2(:IcevsWarmth,SoftPink,CucumberIce,color_mx2_trace,color_mx3_trace)
      sleep [2,4,8].choose
      color_det2(:IcevsCyber,CucumberIce,CyberNeonGreen,color_mx3_trace,color_mx1_trace)
      sleep [3,6,9].choose
    end
  end
  sleep [0.5,1,2].choose
end


#//3 x 3 matrix sound by random numbers between 0  & 30
live_loop :choirflow do
  use_random_seed Time.now.to_i

  #using the halves with a random integer
  bpm_chase = (halves 120, rrand_i(4,9))
  use_bpm bpm_chase.reverse.tick

  y = rrand(0,30)
  puts y

  pos = [y*2,y-21,y,y+3,(y-7).abs,y+5,y/4, y/5+2, y-14]

  a = pos[0]
  b = pos[1]
  c = pos[2]
  d = pos[3]
  e = pos[4]
  f = pos[5]
  g = pos[6]
  h = pos[7]
  i = pos[8]

  #//recoding into Matrix Coordinates

  A11 = a
  A12 = b
  A13 = c
  A21 = d
  A22 = e
  A23 = f
  A31 = g
  A32 = h
  A33 = i


  #//determinant formula
  det_a = a*(e*i - f*h) - b*(d*i - f*g) + c*(d*h - e*g)
  trace = a + e +  i
  normal = Math.sqrt(a*a + b*b + c*c + d*d + e*e + f*f + g*g + h*h +  i*i)

  #//Adjoint Formula

  Adj_a = (A22*A33 - A23*A32)
  Adj_b = -1 * (A12 * A33 - A13 * A32)
  Adj_c = A12 * A23 - A13 * A22
  Adj_d = -1 * (A21 * A33 - A23 * A31)
  Adj_e = (A11 * A33 - A13 * A31)
  Adj_f = -1 * (A11 * A23 - A13 * A21)
  Adj_g = (A21 * A32 - A22 * A31)
  Adj_h = -1 *(A11 * A32 - A12 * A31)
  Adj_i = (A11 * A22 - A12 * A21)

  #inverse formula
  #*A-1 = (adj A)/(det A)*/

  inv_a = Adj_a/det_a
  inv_b = Adj_b/det_a
  inv_c = Adj_c/det_a
  inv_d = Adj_d/det_a
  inv_e = Adj_e/det_a
  inv_f = Adj_f/det_a
  inv_g = Adj_g/det_a
  inv_h = Adj_h/det_a
  inv_i = Adj_i/det_a


  counter_tick = (line 0, 14, steps: 7)


  sample :ambi_choir, decay: Adj_a.abs, rate: inv_a if spread(5,12).tick
  sample [:ambi_choir,:loop_breakbeat].choose , decay: Adj_b.abs, rate: inv_b
  sample :ambi_choir , decay: Adj_c.abs, rate: inv_c if spread(19,39).tick
  sleep [1,2,4,8].choose
  sample [:ambi_choir,:tabla_ghe3].tick , decay: Adj_d.abs, rate: inv_d
  sample :ambi_choir , decay: Adj_e.abs, rate: inv_e
  sample [:ambi_choir,:loop_weirdo].choose , decay: Adj_f.abs, rate: inv_f if spread(27 - counter_tick.tick,195).tick
  sleep [4,8,16].choose
  puts inv_i

  sleep [0.5,1,2,4].choose

end

WCCChallenge_ScrollingOrRhythm

Comments

WCCChallenge

More from this blog

WCCC_Clock

CodeJourney_HtmlDay2026

WCCC_Sunset

WCCC_Tunnels

GameDev_MicroFiction

ScrollingRects20

Scrolling Process

Rhythm Process

Poem

Video

Code

Hydra

P5JS

SonicPi

Command Palette

Comments

WCCChallenge

More from this blog

ScrollingRects20

Scrolling Process

Rhythm Process

Poem

Video

Code

Hydra

P5JS

SonicPi