trying to convert a code from Processing to p5.js with pixels[]

omerpekin

Hi,

I am trying to use p5.js and insisting on learning javascript - which is harder than I thought!!

Below is the Processing script I wrote that basically smears an image.

It is a fairly simple script; It finds a random pixel It gets the color of that pixel matches the following 10-100 pixels color to the original random pixel.

So somehow this explanation on get() reference about doing the same operation with pixels[] confused me a bit. https://p5js.org/reference/#/p5/get

Now, when I wrote this script and tried it, what I see is basically the original earth image and nothing happens.

the most confusing part is var instead of color I don't understand how I should specify so that my program gets the color information of that pixel instead of whatever pixels[] array is providing as an information.

Here is the original Processing Script:

import processing.pdf.*;
import java.util.Calendar;

import processing.pdf.*;
import java.util.Calendar;

PImage img;
PGraphics pg; 
boolean drawn = false;
String naming;

void setup() {
  img = loadImage("http://" + "cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG");
  size(img.width, img.height);
  pg = createGraphics(width, height);
  pg.beginDraw();
  pg.image( img, 0, 0, width, height);
  pg.endDraw();
}

void draw() {
  pg.loadPixels();
  if(!drawn){
    int numberOfRands = 100;
  for(int i = 0; i < numberOfRands; i++){
    int r= int(random(height*width));
    color c = pg.pixels[r];
    for(int j = 0; j < random(10,100); j++){
      if(r+j < pg.pixels.length){
        pg.pixels[r+j] = c;
      }
    } 
  }
//  drawn = true;
  }
  pg.updatePixels();
  image(pg, 0, 0, width, height);
}

and here is the converted script: you can also see the same p5.js script here: https://www.openprocessing.org/sketch/438964

var img, pg;
var canvasOfset = 10;
var fillColor;
var drawn = false;

function preload() {
  img = loadImage('http://" + "cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG');
}



function setup() {
  createCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
  pg = createGraphics(width, height);
  pg.image(img, 0, 0, width, height);
}


function draw() {
  pg.loadPixels();
  var numberOfRands = 100;
  var d = pixelDensity();
  for (var j = 0; j < numberOfRands; j += 4) {
    var off = random(width * height);
    var fillColor = color(pg.pixels[off], pg.pixels[off + 1], pg.pixels[off + 2], pg.pixels[off + 3]);
    for (var i = 0; i < random(120, 1600); i += 4) {
      pg.pixels[off + i] = color(fillColor);
      pg.pixels[off + i + 1] = green(fillColor);
      pg.pixels[off + i + 2] = blue(fillColor);
      pg.pixels[off + i + 3] = alpha(fillColor);
    }
  }

  pg.updatePixels();
  image(pg, 0, 0, width, height);
}



function windowResized() {
  resizeCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
}

Janglee123

There no reference for PGraphics at https://p5js.org/reference/ . were you used PGraphics in p5.js before this? because I am still new to p5.js

omerpekin

https://p5js.org/reference/#/p5/createGraphics

omerpekin

It was kind of hidden :) But, I doubt that my problem is relying on PGraphics :-/