Moving from processing to p5 - for loop and scattering pixels from image

p5.js
1

I’m looking to move my processing sketch into p5 so it can be shared on the web.
It runs great in processing - it’s an interactive sketch that takes in mouseX and increases the digital noise of the image by scattering the pixels of a video. Right now, I’m just trying to get it to work on p5 with a still image.

This is the original processing sketch (a portion of it as I’ve omitted the lines about sound, etc):



int margin = 7;
float noiseVar = .0002;
float waves = 0.1;

int offset = 0;

void essence () {
 
  offset = int(map(dialVal, 0, 100, 0, 500));

  for (int x = 0; x < width; x += random(margin)) {
    for (int y = 0; y < height; y += random(margin)) {
      if (boolean(int((noise(x * noiseVar, y * noiseVar, frameCount * waves) * 100) % 2))) { 
        int xx = int(map(x, 0, width, 0, vid.width)); 
        int yy = int(map(y, 0, height, 0, vid.height));
        color c = (vid.get(xx, yy)); 
        if (c != #ffffff) { 
          set(int(random(x - offset, x + offset)), int(random(y - offset, y + offset)), color(c)); 
        }
      }
    }
  }
}

and what I’ve written in p5 (right now, when I run it with the if statement in, it only shows the background, and when I take the if statement out, it’s incredibly slow, like 1 frame every 5 seconds):



let img;
let margin = 2; 
let noiseVar = 0.002;
let waves = 0.1;
let offset = 0;

function preload() {
  img = loadImage('Kitchen_STILL.jpg');
}

function setup() {
  createCanvas(1600, 900);
  pixelDensity(1);
 
}


function draw() {
  background(0);

  loadPixels(); 
  img.loadPixels();

  offset = map(mouseX, 0, width, 0, 500);

  for (let x = 0; x < width; x += (margin)) {
    for (let y = 0; y < height; y += (margin)) {
      if ((noise(x * noiseVar, y * noiseVar, frameCount * waves) * 100) % 2 === 0) {
        let c = (img.get(x, y)); 
        set(random(x - offset, x + offset), random(y - offset, y + offset), c);
      }
    }
  }

  updatePixels();
}

Any insight would be super helpful! Thanks so much

2

Hello,

There may be something here:

:)

3

hey, yea I’ve looked into this! it wasn’t able to lead me in the right direction at all unfortunately; I think this issue is more specific