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

**URL:** <https://discourse.processing.org/t/moving-from-processing-to-p5-for-loop-and-scattering-pixels-from-image/19325>\
**Category:** p5.js\
**Created:** [April 2, 2020, 4:37am UTC](https://discourse.processing.org/t/moving-from-processing-to-p5-for-loop-and-scattering-pixels-from-image/19325 "2020-04-02T04:37:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ehv](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ehv](https://discourse.processing.org/u/ehv)\
**Post date:** [April 2, 2020, 4:37am UTC](https://discourse.processing.org/t/moving-from-processing-to-p5-for-loop-and-scattering-pixels-from-image/19325/1 "2020-04-02T04:37:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 2, 2020, 8:00am UTC](https://discourse.processing.org/t/moving-from-processing-to-p5-for-loop-and-scattering-pixels-from-image/19325/2 "2020-04-02T08:00:52Z")

</div>

Hello,

There may be something here:

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

`:)`

---

<div class="post-metadata">

**Author:** ![ehv](https://avatars.discourse-cdn.com/v4/letter/e/22d042/32.png) [@ehv](https://discourse.processing.org/u/ehv)\
**Post date:** [April 2, 2020, 10:07pm UTC](https://discourse.processing.org/t/moving-from-processing-to-p5-for-loop-and-scattering-pixels-from-image/19325/3 "2020-04-02T22:07:06Z")

</div>

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