# Processing code into p5.js code

**URL:** <https://discourse.processing.org/t/processing-code-into-p5-js-code/40105>\
**Category:** Coding Questions\
**Created:** [December 10, 2022, 3:44am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105 "2022-12-10T03:44:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 10, 2022, 3:44am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105/1 "2022-12-10T03:44:34Z")

</div>

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:

```auto
// 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:

```auto
// 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/](https://pde2js.herokuapp.com/)

off line has about 3 weeks

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 10, 2022, 4:36am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105/2 "2022-12-10T04:36:07Z")

</div>

i there… i found this:

[https://codepen.io/](https://codepen.io/)

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 10, 2022, 10:59am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105/3 "2022-12-10T10:59:30Z")

</div>

This question is different from the one in the [original topic](https://discourse.processing.org/t/pj-5s-code-into-processing-code/40088). I moved these messages to a new topic.

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 10, 2022, 11:14am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105/4 "2022-12-10T11:14:47Z")

</div>

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:

> **[r/processing - OpenProcessing: converting code written in Java to JavaScript](https://www.reddit.com/r/processing/comments/7dqqvh/comment/dq0ecac/)**
>
> 8 votes and 14 comments so far on Reddit

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 10, 2022, 11:22am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105/5 "2022-12-10T11:22:36Z")

</div>

Hi

> **[Processing transition · processing/p5.js Wiki](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...