# WCCC_SpaceFilling # 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 ```ocaml 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 ```javascript /* 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 ```javascript 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() ``` ```javascript 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** ```ruby 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 ```javascript // 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) ```