# WCCChallenge_ScrollingOrRhythm

# 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

```ocaml
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

<iframe width="560" height="315" src="https://www.youtube.com/embed/T1k6pQ-068E?si=AFT3a9PcmSPWYxSK"></iframe>

## Code

### Hydra

```javascript
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()
```

```javascript
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

```javascript
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**

```ruby
#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
```