# Convert Processing to p5.js
**URL:** https://discourse.processing.org/t/convert-processing-to-p5-js/9291
**Category:** Coding Questions
**Created:** [March 14, 2019, 5:57am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291 "2019-03-14T05:57:30Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@julia\_v](https://discourse.processing.org/u/julia_v)
#### Post date: [March 14, 2019, 5:57am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/1 "2019-03-14T05:57:30Z")
Can’t figure out why some code doesn’t work… I highlighted what exactly doesn’t work in the code below…
Please please help me to make the code working\*
```auto
/* @pjs preload="emma.jpg", "obama.jpg", "clint.jpg"; */
var maxTime = 400;
var strokesPerFrame = 25;
// Add your image here and on line 1 to preload it properly.
// Works best with images that don't exceed 700px.
**String[] imgNames = {"emma.jpg","obama.jpg", "clint.jpg"};**
**PImage img;**
var imgIndex = -1;
let brightnessShift;
function setup() {
size(950, 700);
colorMode(HSB, 255);
nextImage();
}
function draw() {
translate(width/2, height/2);
for (int i = 0; i < strokesPerFrame; i++) {
// Pick a random pixel.
var index = int(random(img.width*img.height));
// Get pixel's color and coordinates.
color = img.pixels[index];
pixelColor = color(red(pixelColor), green(pixelColor), blue(pixelColor), 255);
var x = index%img.width;
var y = index/img.width;
// Move image to center canvas.
pushMatrix();
translate(x-img.width/2, y-img.height/2);
if (frameCount % 5 == 0) {
// Paint big dots once in a while.
```
**//this part doesn’t work**
```auto
paintDot(pixelColor, (int)random(2, 20)*map(frameCount, 0, maxTime, 1, 0.5));
}
else {
// Paint a stroke.
paintStroke(map(frameCount, 0, maxTime, 40, 5), pixelColor, (int)random(2, 8)*map(frameCount, 0, maxTime, 1, 0.1)); }
```
**//Until here**
```auto
popMatrix();
}
// Stop drawing once it exceeds the time.
if (frameCount > maxTime) {
noLoop();
}
}
function mousePressed() {
nextImage();
}
function nextImage() {
// Reset values.
background(255);
loop();
frameCount = 0;
// Make shift random so hues aren't always the same.
brightnessShift = random(255);
// Load the next image.
imgIndex++;
if (imgIndex >= imgNames.length) {
imgIndex = 0;
}
img = loadImage(imgNames[imgIndex]);
img.loadPixels();
}
function paintStroke(float strokeLength, color strokeColor, int strokeThickness) {
let b = brightness(strokeColor);
let bShift = b+brightnessShift;
if (bShift > 255) {
bShift -= 255;
}
pushMatrix();
// Map pixel's brightness to determine the stroke's direction.
rotate(radians(map(b, 0, 255, -180, 180)));
// Draw a dark stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 100), 50);
line(-strokeLength, 1, strokeLength, 1);
// Draw a normal stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 255));
strokeWeight(strokeThickness);
line(-strokeLength, 0, strokeLength, 0);
// Draw a lighter stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 150, 255), 20);
line(-strokeLength, 2, strokeLength, 2);
popMatrix();
}
function paintDot(color strokeColor, int strokeThickness) {
let b = brightness(strokeColor);
let bShift = b+brightnessShift;
if (bShift > 255) {
bShift -= 255;
}
pushMatrix();
// Map pixel's brightness to determine the stroke's direction.
rotate(radians(random(-180, 180)));
// Draw a stroke with short length.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 255));
strokeWeight(strokeThickness);
line(0, 0, 5, 0);
popMatrix();
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 14, 2019, 6:22am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/2 "2019-03-14T06:22:48Z")
p5.js comes with its own
[https://p5js.org/reference/](https://p5js.org/reference/)
pls find about array
[https://p5js.org/reference/#/p5/append](https://p5js.org/reference/#/p5/append)
and image loading
[https://p5js.org/reference/#/p5/loadImage](https://p5js.org/reference/#/p5/loadImage)
---
### Author:  [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [March 14, 2019, 6:25am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/3 "2019-03-14T06:25:44Z")
Please format your code. To do this, edit your post, click on edit, select the text that is _actually code_ and then click in the preformatted text button which looks like this ``. This will format your code for you. Then you need to save the changes in your post.
In the code above, you should not use _var_ but _let_ instead. Now, into your actual issue:
For this line: `String[] imgNames = {“emma.jpg”,“obama.jpg”, “clint.jpg”};` needs to be replaced for the p5.js version (aka. the js version) which it would be like this: `const imgNames = [“emma.jpg”,“obama.jpg”, “clint.jpg”];` as described [here](https://p5js.org/examples/arrays-array.html) and [here](https://www.w3schools.com/js/js_const.asp).
I just checked the beginning of your code. Please format it to review it deeper.
Kf
---
### Author:  [@julia\_v](https://discourse.processing.org/u/julia_v)
#### Post date: [March 14, 2019, 6:42am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/4 "2019-03-14T06:42:34Z")
I did formate my code… could you help me with the part that doesnt work please?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [March 14, 2019, 7:01am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/5 "2019-03-14T07:01:42Z")
Lotsa sketches available for both Java Mode & p5js versions: ☕
> **[r/processing - OpenProcessing: converting code written in Java to JavaScript](https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/)**
>
> 9 votes and 14 comments so far on Reddit
---
### Author:  [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [March 15, 2019, 6:02am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291/6 "2019-03-15T06:02:17Z")
```auto
**PImage img;**
```
Replace with
```auto
let img;
```
```auto
for (int i = 0; i < strokesPerFrame; i++)
```
Replace with:
```auto
for (let i = 0; i < strokesPerFrame; i++)
```
This is not recommended: `color = img.pixels[index];` Color is a reserved word in Processing. This will work but will make your code hard to read. I suggest to use some other name. For instance, **pixColor**.
pushMatrix and pop matrix needs to be replaced by push and pop resp.
```auto
function paintDot(color strokeColor, int strokeThickness)
```
replace with
```auto
function paintDot(let strokeColor, let strokeThickness)
```
Similarly you need to fix `paintStroke`.
Implement the changes and try it out to see if it works. If you get any error, check the proper reference. If something is not clear, just ask.
Kf