FillingTheFill

For this week's Creative Code Challenge by @sableraph: "Space Filling",FillingtheFill is coded in P5JS, Hydra, LivecodingYoutube and SonicPi.

With extra aid from effects

Filling Process

• Treating the canvas as a space and having hydra fill the space of screen via stretching and different layering functions

• In the P5JS sketch, the function get() is used to trigger how and what colour gets implement in a particular area

• Time is also used to determined the size and location of certain object in the sketch

• The SonicPi code uses the space of an array and fills it up with 5535 iterations and then layered postcode, to “fill the sound”

Poem

Filling Spaces
Trading Pixels
Pixels exchanging through paces
Layering and Sprouting
Crowding and catering
To the pixels on the screens
Easing chaotically on this scene
Without any doubting
Pixels trading with pixels

Video

Code

P5js

/*

Treating the canvas as a space

It is being filled by three appraoches

-what pixel is being read by get
-what is the value of the time since the sketch has run
- how the squish function affects the growth
- Since we are playing with space,  I decided to have differerent growths


*/
function setup() {
  createCanvas(1200, 800);
  //background('black')
}

function draw() {
  frameRate(15 + second() % 10);

  pixel_color = get(200, 200);
  print(pixel_color);

  x = random(950);
  y = random(950);


  //to compare arrays you can them to string

  // base on the comparsion a certain color will fill the screen

  let c = get(x, y);

  if (c.toString() == pixel_color.toString()) {
    fill("blue");
    noStroke();
    square(x, y, 150);

    squishsquish("aqua", 84, 207, 91);
    squishsquish("blue", 114, 16, 82);
    squishsquish("maroon", 198, 423, 75);
    squishsquish("orange", 42, 600, 110);
    squishsquish("maroon", 84, 222, 411);
  } else if (c[3] == pixel_color[3]) {
    fill("red");
    strokeWeight(random(12, 30));
    stroke("blue");
    square(x, y, random(x - 50, x + 50));
  } else if (c[1] == pixel_color[1]) {
    squishsquish("yellow", 198, 123, 275);
    squishsquish("orange", 242, 16, 910);
    squishsquish("red", 184, 522, 211);
    fill("yellow");
    ellipse(
      x + random(second() % 40, (second() % 40) * -1),
      y,
      random(x - 50, x + 50)
    );
  } else {
    if (second()%2 == 0)
      {
            stroke("orange");
    strokeWeight(12);
      }
    else
      {
        stroke("black")
        strokeWeight(19)
      }

    fill(
      Math.hypot(second(), 9) % 255,
      second() * 123 - (Math.sqrt(second()) % 255),
      random(100, 255)
    );
    ellipse(x + 75, Math.cbrt((y * second()) % 120), random(x - 50, x + 50));
  }
}

//Mouse for Wildness

function mouseClicked() {
  fill("yellow");
  ellipse(mouseX, mouseY, y, random(x - 50, x + 50));
  filter(INVERT);
}

function mouseDragged() {
  strokeWeight(14);
  stroke("blue");
  fill(
    Math.hypot(Math.cbrt(second()), 19) % 255,
    second() * 123 - (Math.sqrt(second()) % 255),
    random(100, 255)
  );
  ellipse(x + 75, Math.cbrt((y * second()) % 120), random(x - 50, x + 50));
}

// function used to have more irregular curves filling the space

function squishsquish(hueing, x, y, z) {
  //noFill();
  noStroke();
  fill(hueing);
  beginShape();
  curveVertex(x - (second() % y) * 100, z);
  curveVertex(Math.hypot(x, second() % 10), z);
  curveVertex(68, x / 4 - 2);
  curveVertex(x / 4, 17 - (second() % y) * 3);
  curveVertex(x / 4 + 11 - (second() % y) * 17, z);
  curveVertex(x / 4 + 11, Math.cbrt(z * 10));
  endShape();
}

Hydra

s0.initScreen()


src(s0).
repeat(2,3).
diff(src(s0).scale(0.75)).
blend(s0).
blend(src(s0).scale([3,2,1,0.5,1,2,3].smooth())).
add(s0).
blend(src(s0).scale([3,2,1,0.5,1,2,3].smooth()).rotate(()=> Math.sin(time))).
blend(src(s0).rotate(90)).out()

s0.initScreen()


src(s0).
repeat(2,3).
diff(src(s0).scale(0.75)).
blend(s0).
blend(src(s0).scale([3,2,1,0.5,1,2,3].smooth())).
add(s0).
blend(src(s0).scale([3,2,1,0.5,1,2,3].smooth()).rotate(()=> Math.sin(time))).
blend(src(s0).rotate(90)).
modulateRepeat(osc(2).blend(s0),1, 2, 4, 3)
//.modulateKaleid(shape(12,0.05,0).diff(s0),1)
.out()

SonicPi

HeartBeatCounter = []

#Heartbeat variables
HB = 0
HB_2 = 0
HB_3 = 0

live_loop :heartbeat1 do

  use_random_seed Time.now.to_i #different random seeds

  with_fx :distortion, mix: 0.35 do
    with_fx [:ixi_techno,:vowel,:whammy].choose do
      use_bpm 25
      play [4,7,12].choose
      play [15,12,9].choose
      play [7,6,5,4,3].tick
    end
  end

  HB = HB + 3 #counter
  HeartBeatCounter.push(HB,HB,HB) #push the amount of beats in

  sleep [0.1,0.2,0.15,0.4,1,2].choose
end



live_loop :heartbeat2 do

  use_random_seed Math.sqrt(Time.now.to_i)

  use_bpm 25
  with_fx :ixi_techno, mix: rrand(0.45,0.67) do
    with_fx :flanger, mix: rrand(0.05,0.25) do
      with_fx :echo, decay: dice(5) do
        use_synth :pretty_bell
        play 12 #note
      end
    end
  end


  HB_2 = HB_2 + 1 #counter
  HeartBeatCounter.push(HB_2)


  sleep [0.2,0.3,0.25,0.5,0.75].choose

end



live_loop :heartbeat3 do

  use_random_seed Math.cbrt(Time.now.to_i)

  use_bpm [25,120,75].choose

  with_fx :ping_pong do
    use_synth :pretty_bell
    play [3,24,12].choose, sustain: Math.cbrt(dice(12))#note
    play 17, decay: dice(4)
    play 10
  end

  HB_3 = HB_3 + 3 #counter is 3 since there are two beats in this heart beat
  HeartBeatCounter.push(HB_3,HB_3,HB_3)

  sleep [0.1,0.2,0.3,0.5,0.75].choose

end

HB_4 = 0

live_loop :heartbeatcounter do

  use_random_seed Time.now.to_i


  with_fx :echo, mix: [0.5,0.6,0.7].choose do
    with_fx :ixi_techno, mix: rrand(0.45,0.67) do

      #playing based on the amount of heartbeats that previously were created
      play HeartBeatCounter.length() % [45,55,65].choose + 1
      play HeartBeatCounter.length() % [25,35,45].tick + 1
      play HeartBeatCounter.length() % [35,12,13,24].choose + 1

    end
  end


  #will have this counter till it reaches 10 000
  HB_4 = HB_4 + 3 #counter
  HeartBeatCounter.push(HB_4,HB_4,HB_4)
  puts HeartBeatCounter.length()


  sleep [0.1,0.2,0.15].tick

end

LiveCodingYoutube

// make usage of the time
const minute = 1000 * 60;const hour = minute * 60; const d = new Date(); minutes = Math.round(d.getTime() / minute);counter = d.getTime();

x = "WyiCJcEZGF4"
y = "m4jrI6lcL1U"

//if the minute calculated is greater than 4 when used with modulo, make a 2 x 2 grid but if lower, 3 x 3 grid
//minutes % 8 > 4 ? create(2,2, x) : create(3,3, x);

create(1,3,x); 
cue(1,y);

play(all)

counter % 16 >= 6 ? speed([0,2],0.5) : speed([0,2],2);

play(all)