Converting Processing to P5.js

erwi

Hello,

I'm a beginner in the world of Processing so like p5.js, and I have an issue to convert my sketch. It's running well in p5.js but not like when it was under Processing. I think I've missed something

This is my sketch in Processing :

PImage img = null;
float sw = 2;

void setup() {
  size(1200, 720, P2D);
  smooth();
  img = loadImage("bato.jpg");
}
void draw () {   
  stroke(0);
  int steps = 3;
  int y = 2;
  while (y < height) {
    int x = 0;
    while (x < height) {
      color c = img.get(x, y);
      float angle = map (brightness(c), 0, 255, 2, PI/1.3);
      float sw = map(brightness(c), 0, 255, 0.1, 1);
      strokeWeight (sw);
      triangle (x, y, x, y+tan(angle*random(-0.5, 0.2))*steps, x+(angle)*steps, y+(angle)*steps);
      x = x + steps;
    }
    y = y + steps;
  }

And this is my sketch in P5

var img = null;
var sw = 2;
function setup() {
  createCanvas(1200, 800);
  smooth();
  img = loadImage("bato.jpg");
}
function draw() {
  stroke(0);
  var steps = 3;
  var y = 2;
  while (y < height) {
    var x = 0;
    while (x < height) {
      var c = img.get(x, y);
      var angle = map(brightness(c), 0, 255, 2, PI / 1.3);
      var sw = map(brightness(c), 0, 255, 0.1, 1);
      strokeWeight(sw);
      var random1 = Math.random() * ((Math.random() > 0.5) ? -1 : 1);
      triangle(x, y, x, y + tan(angle * random1) * steps, x + (angle) * steps, y + (angle) * steps);
      x = x + steps;
    }
    y = y + steps;
  }
}

Thanks you for your help

erwi

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

erwi

thanks

blindfish

It's running well in p5.js but not like when it was under Processing.

If you mean in terms of performance then this is to be expected: p5js runs way slower than Processing. Using WebGL mode will speed things up on suitable hardware; but for the best 2d performance I'd look elsewhere.

erwi

Actually, the problem is not caused by the performance. There is a difference in the rendering with p5.js. I can't get what processing displays when I run it