Processing code into p5.js code

p5.js Coding Questions
1

hi guys!
I am having the same problem but otherway around.
From java processing to p5js. (accutaly in both ways with different projects lol)
But here goes my latest…
From Processing to p5js.
please have a go on java with any photo /image…
Do not know how the people, once its working if* … How the people will up load theyer iamge/photo.
java code:

// Original: http://www.openprocessing.org/sketch/145401
// adaptation to images, Tomasz Sulej, generateme.blog@gmail.com
// Licence CC-BY-SA 3.0
 
// put image filename here:
String filename = "test";
String fileext = ".jpg";
String foldername = "/";
 
// choose channel  
int channel = SATURATION; 
 
// run, after 30 iterations result will be saved automatically
// or press SPACE

int max_display_size = 800; // viewing window size (regardless image size)
 
/////////////////////////////////////

// channels to work with
final static int RED = 0;
final static int GREEN = 1;
final static int BLUE = 2;
final static int HUE = 3;
final static int SATURATION = 4;
final static int BRIGHTNESS = 5;
final static int NRED = 6;
final static int NGREEN = 7;
final static int NBLUE = 8;
final static int NHUE = 9;
final static int NSATURATION = 10;
final static int NBRIGHTNESS = 11;

int n=2000;
float [] cx=new float[n];
float [] cy=new float[n];
 
PImage img;
int len;
 
// working buffer
PGraphics buffer; 
 
String sessionid; 
 
void setup() {
  size(400,200,P2D);
  sessionid = hex((int)random(0xffff),4);
  img = loadImage("eu2.jpg");
  img.resize(350,600);
  buffer = createGraphics(img.width, img.height);
  buffer.smooth();
  buffer.beginDraw();

  buffer.noFill();
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();
  
  // calculate window size
  float ratio = (float)img.width/(float)img.height;
  int neww, newh;
  if(ratio < 1.0) {
    neww = (int)(max_display_size * ratio);
    newh = max_display_size;
  } else {
    neww = max_display_size;
    newh = (int)(max_display_size / ratio);
  }

  surface.setSize(neww,newh);
  
  len = (img.width<img.height?img.width:img.height)/6;
  
  background(0);
  for (int i=0;i<n;i++) {
    cx[i]=random(img.width);
    cy[i]=random(img.height);
  }

}
 
int tick = 0;
 
void draw() {  
 // size(156,156, P2D); // Try a smaller value to see why I chose these numbers for size
  buffer.beginDraw();
  for (int i=1;i<n;i++) {
    color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    buffer.point(cx[i], cy[i]);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    cy[i]+=sin(map(getChannel(c),0,255,0,TWO_PI));
    cx[i]+=cos(map(getChannel(c),0,255,0,TWO_PI));
  }
 
  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    for (int i=0;i<n;i++) {
      cx[i]=random(img.width);
      cy[i]=random(img.height);
    }
    
  }
  
  buffer.endDraw();
  if (tick == 30) keyPressed();
  
  image(buffer,0,0,width,height);
}
 
float getChannel(color c) {
  int ch = channel>5?channel-6:channel;
  float cc;
  
  switch(ch) {
    case RED: cc = red(c); break;
    case GREEN: cc = green(c); break;
    case BLUE: cc = blue(c); break;
    case HUE: cc = hue(c); break;
    case SATURATION: cc = saturation(c); break;
    default: cc= brightness(c); break;
  }
  
  return channel>5?255-cc:cc;

}
  
void keyPressed() {
  buffer.save(foldername + filename + "/res_" + sessionid +"_"+filename+fileext);
  println("image saved");

}

and here is what i got in p5js till now:

// Original: http://www.openprocessing.org/sketch/145401
// adaptation to images, Tomasz Sulej, generateme.blog@gmail.com
// Licence CC-BY-SA 3.0
 
// put image filename here:
String. filename = "test";
String .fileext = ".jpg";
String .foldername = "/";
var random;
let img;
// choose channel  
var  channel = SATURATION; 
 var color = c;
// run, after 30 iterations result will be saved automatically
// or press SPACE

var max_display_size = 800; // viewing window size (regardless image size)
 
/////////////////////////////////////

// channels to work with
final .static .let, RED = 0;
final. static. let, GREEN = 1;
final .static .let,BLUE = 2;
final .static .let , HUE = 3;
final .static .let  ,SATURATION = 4;
final. static. let , BRIGHTNESS = 5;
final .static .let  ,NRED = 6;
final. static .var ,NGREEN = 7;
final .static .let , NBLUE = 8;
final .static .let  ,NHUE = 9;
final .static .let , NSATURATION = 10;
final .static .let  ,NBRIGHTNESS = 11;

var n=2000;
float , cx=new float[n];
float , cy=new float[n];
 
PImage =img;
var len;
 
// working buffer
PGraphics= buffer; 
 
String= sessionid; 
 
function  setup() {
  size(400,200,P2D);
  sessionid = hex((let)(0xffff),4);
  img = loadImage("FK.jpg");
  img.resize(350,600);
  buffer = createGraphics(img.width, img.height);
  buffer.smooth();
  buffer.beginDraw();

  buffer.noFill();
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();
  
  // calculate window size
  //var ratio = (float),img width(float)img.height;
  var neww, newh;
  if(ratio < 1.0) {
    neww = (int)(max_display_size * ratio);
    newh = max_display_size;
  } else {
    neww = max_display_size;
    newh = (int)(max_display_size / ratio);
  }

  surface.setSize(neww,newh);
  
  len = (img.width<img.height?img.width:img.height)/6;
  
  background(0);
  for (let i=0;i<n;i++) {
   { cx[i]=random(img.width);
    cy[i]=random(img.height);
  }

}
 
 var tick = 0;
 
function draw() {  
 // size(156,156, P2D); // Try a smaller value to see why I chose these numbers for size
  buffer.beginDraw();
  for (let i=1;i<n;i++) {
    //color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    buffer.point(cx[i], cy[i]);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    cy[i]+=sin(map(getChannel(c),0,255,0,TWO_PI));
    cx[i]+=cos(map(getChannel(c),0,255,0,TWO_PI));
  }
 
  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    for (let i=0;i<n;i++) {
      cx[i]=random(img.width);
      cy[i]=random(img.height);
    }
    
  }
  
  buffer.endDraw();
  if (tick == 30) keyPressed();
  
  image(buffer,0,0,width,height);
}
 
var getChannel(color, c) 
  let ch = channel>5?channel-6:channel;
  var cc;
  
  switch(ch) {
    case RED: cc = red(c); break;
    case GREEN: cc = green(c); break;
    case BLUE: cc = blue(c); break;
    case HUE: cc = hue(c); break;
    case SATURATION: cc = saturation(c); break;
    default: cc= brightness(c); break;
  }
  
  return channel>5?255-cc:cc;


/*  
void keyPressed() {
  buffer.save(foldername + filename + "/res_" + sessionid +"_"+filename+fileext);
  println("image saved");
*/

this was the best online trasnlator…
https://pde2js.herokuapp.com/

off line has about 3 weeks

2

i there… i found this:

https://codepen.io/

3

This question is different from the one in the original topic. I moved these messages to a new topic.

4

Here are some examples of sketches originally written in Processing that have been adapted for p5.js. This may help you better understand the differences between the two:

1 Like
5

Hi

1 Like