BlurryPatchesSeek

For the 3rd day of #MinaCoding2024 : "Image" , BlurryPatchesSeek is coded in P5js, Hydra & SonicPi.

BlurryPatchesSeek manipulates images through P5js by adding shapes and filters through the colour contained in coordinates chosen. Further manipulated by Hydra and sounds coded in SonicPi.

Poetry

The Colors have redefined their scope
As they merge and formed for hope
To be seen
In the ever flowing river of mental streams
They edit to be shown
For their reasons to be flown

Video

Code

Hydra

s0.initScreen()

src(s0).scale(2).kaleid(2).repeat(()=> (time % 15 +1)/5,()=> (time % 15 +1)/5).out()

speed = 0.25

P5.JS

// https://happycoding.io/examples/p5js/images/pixel-painter

let img;

function preload() {

  // taking images that I have and remixing them

img = loadImage('https://cdn.hashnode.com/res/hashnode/image/upload/v1711300272534/b456c196-8b6d-4f6c-8df9-c31298cc548a.webp?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp');

img2 = loadImage('https://cdn.hashnode.com/res/hashnode/image/upload/v1708305810735/de809035-f0e4-471d-93df-a580ce39146b.webp?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp')

img3 = loadImage('https://cdn.hashnode.com/res/hashnode/image/upload/v1706416274757/e6370d53-ebc8-47ba-a5a4-04e228b136ce.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp')

}


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

  // Resize the image so it fits on the screen.
  img.resize(width, height);

  background(32);
  noStroke();
}

let pos = 25;

function draw() {

  if(second() % 10 > 5)
    {
    filter(BLUR, 3);
    }
  else
    {
    filter(DILATE); 
    }

  if(second() % 16 > 8)
    {
     filter(ERODE); 
    }
  else
    {
    filter(OPAQUE);
    }


  // Get the color of a random pixel.
  img.loadPixels();
  img2.loadPixels();
  img3.loadPixels();

  const pixelX = random(width);
  const pixelY = random(height);
  const pixelColor = img.get(pixelX - pos, pixelY);

  const pixelX2 = random(width);
  const pixelY2 = random(height);
  const pixelColor2 = img2.get(pixelX2, pixelY2);

  const pixelX3 = random(width);
  const pixelY3 = random(height);
  const pixelColor3 = img3.get(pixelX3 + pos, pixelY3);

  const pixelX4 = random(width);
  const pixelY4 = random(height);
  const pixelColor4 = img2.get(pixelX4, pixelY4);

  const pixelX5 = random(width);
  const pixelY5 = random(height);
  const pixelColor5 = img3.get(pixelX5, pixelY5);


  const pixelX6 = random(width);
  const pixelY6 = random(height);
  const pixelColor6 = img.get(pixelX6, pixelY6);

  // Paint the first image with a rect
  fill(pixelColor);
  rect(pixelX, pixelY, 20,20);

  fill(pixelColor2);
  circle(pixelX2,pixelY2,20);

  fill(pixelColor3);
  rect(pixelX3, pixelY3, 20,20);

  fill(pixelColor4);
  circle(pixelX4,pixelY4,20);

  fill(pixelColor5);
  rect(pixelX5, pixelY5, 30,30);

  fill(pixelColor6);
  circle(pixelX6,pixelY6,35);

  fill(pixelColor)
  rect(pixelX,pixelY,12)

  fill(pixelColor3);
  rect(pixelX3, pixelY3, 9);
}

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;
}

SonicPi

live_loop :noise do
  use_random_seed Time.now.to_i
  with_fx :distortion,amp: 1 do
    sample [:ambi_piano, :ambi_drone].choose, beat_stretch: dice(4), rate: [0.5,1,2].choose
    sleep [0.5,1,2,4].choose
  end
end

with_fx :ixi_techno, mix: 0.2 do
  live_loop :bell do
    use_random_seed Time.now.to_i/2
    use_bpm [120,80,220].choose
    sample :perc_bell, rate: (rrand 0.125,1.5)
    sleep rrand(0.2,2)
  end
end

with_fx :flanger do
  live_loop :synth do
    use_random_seed Time.now.to_i/3
    sync :bell
    use_synth :piano
    play 50 , release: 0.1, cutoff: rrand(60, 120) if spread(7,8).tick
    sleep [0.125,0.250,0.375].choose
  end
end