We tested video capture in class. I want to manipulate existing pictures or photographs, since photograph is one of my hobbies. Here I used one of the images I took during halloween as the tested image.

I change the size to fit with the window size.

Test 1 (all three of them using slide bars to manipulate the image)

https://editor.p5js.org/LunaChen/full/MrYFQkgmB

s1 = createSlider(0, 255, 150);
s2 = createSlider(0, 255, 150);
s3 = createSlider(0, 255, 10);

sliders always start like this, since I like the blue and purple tone in it.

let widthRound = floor(img.width / pixelWidth);
let heightRound = floor(img.height / pixelHeight);
noStroke();

img.loadPixels();

for (let j = 0; j < (pixelHeight+50); j++) {
for (let i = 0; i < pixelWidth; i++) {
let imageI = i * widthRound;
let imageJ = j * heightRound;
let index = (imageI + imageJ * img.width) * 4;
  let r = img.pixels[index];
  let g = img.pixels[index + 1];
  let b = img.pixels[index + 2];

  if (r > s1.value()) {
    r = 255;
  }
  if (g > s2.value()) {
    g = 255;
  }
  if (b > s3.value()) {
    b = 255;
  }

  img.pixels[index] = r;
  img.pixels[index + 1] = g;
  img.pixels[index + 2] = b;

  fill(r, g, b);
  ellipse(i * width / pixelWidth, j * height / pixelHeight, pixelWidth, pixelHeight);
}
}

use pixel to draw the ellipse pattern of slider color. floor is caculate how many ellipse there are.

stroke(0);
strokeWeight(3);
for (let x = 0; x < width; x += 5) {
let noiseValue = noise(x * 0.3, noiseOffset) * height;
let lineStartY = noiseValue * 5*s1.value()/height;
let lineEndY = noiseValue *s2.value()/height*6;
line(x, lineStartY, x, img.height);
line(x-3, 0, x-3, lineEndY);
}
noiseOffset += 0.02;

Use noise to control the jumping lines.

Test 2

https://editor.p5js.org/LunaChen/full/RihV4pEsJ

function checkChanged() {
if (gap !== s3.value()) {
dotGrid();
}
if (offset !== s2.value()) {
dotGrid();
}
}
function dotGrid() {
noStroke();
fill(r,g,b);

// Get the current gap and offset values from the sliders
gap = s3.value();
offset = s2.value();

// Loop through x and y coordinates, at increments set by gap
for (let x = gap / 2-50; x < width; x += gap) {
for (let y = gap / 2-50; y < height; y += gap) {
// Calculate noise value using scaled and offset coordinates
let noiseValue = noise((x + offset) * xScale, (y + offset) * yScale);
  // Since noiseValue will be 0-1, multiply it by gap to set diameter to
  // between 0 and the size of the gap between circles
  let diameter = noiseValue * gap;
  rect(x, y, diameter,diameter*noiseValue*2);
}
}
}