UnFinishedPixelation

For MinaCoding2025 Prompt 25 & 29: Unfinished & Colorful*, UnFinishedPixelation is a unfinished sketch that contains colorful pixels exploring the screen. Coded in **Hydravideosynth & P5js*

Poem

Pixels comibing
To create
An unknown Entity
An Unknown Project
Whole new identity
Through the form of pixelate
They are always Reminding
About new pixels to collect

Images

Code

HydraVideoSynth

s0.initScreen()

src(s0).scale(2).pixelate([50,100,500,5,15].smooth(),[50,500,1000].smooth()).modulateRotate(src(s0).repeat([1,2,3],[2,1]).pixelate(50,50)).out()

speed = 0.75

P5js

// https://happycoding.io/examples/p5js/images/pixel-painter used as a based code

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