# Convert p5js to Processing
**URL:** https://discourse.processing.org/t/convert-p5js-to-processing/29893
**Category:** Coding Questions
**Created:** [May 5, 2021, 7:59pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893 "2021-05-05T19:59:37Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@l3ehfar](https://discourse.processing.org/u/l3ehfar)
#### Post date: [May 5, 2021, 7:59pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/1 "2021-05-05T19:59:37Z")
could anyone help me converting this code into Processing please?
https://openprocessing.org/sketch/609608/embed/?
thanks
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 5, 2021, 8:21pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/2 "2021-05-05T20:21:57Z")
what exactly do you mean by “help” ? It reads like you are asking someone to do it for you… it’s not a long code, and while converting the js “function” to java class may be a bit tricky but you can definitely start with drawing the axes as a starting point.
(by the way I’m a fan of the author, especially their collective - they make amazing visuals)
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 5, 2021, 8:30pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/3 "2021-05-05T20:30:08Z")
read this
> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> Processing-transition
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 5, 2021, 8:31pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/4 "2021-05-05T20:31:06Z")
and this
> [@Convert p5.js to Processing](https://discourse.processing.org/t/convert-p5-js-to-processing/944):
>
> Is there any easy way to convert p5.js code to processing (java)?
---
### Author:  [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)
#### Post date: [May 5, 2021, 8:55pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/5 "2021-05-05T20:55:56Z")
I program using my phone. I would like to help, but without the source code, it is very difficult. This sounds very fun. Please supply your source code and I will work on a tool to convert it.
---
### Author:  [@l3ehfar](https://discourse.processing.org/u/l3ehfar)
#### Post date: [May 5, 2021, 9:00pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/6 "2021-05-05T21:00:27Z")
thankyou!
this is the p5js coded by the author:
```auto
var rotx;
var roty;
var rotz;
var axisx;
var axisy;
var axisz;
var line_system;
function setup () {
pixelDensity (displayDensity ());
createCanvas (windowWidth, windowHeight, WEBGL);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
drawing = false;
line_system = new LineSystem ();
}
function draw () {
background (0);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
function mousePressed () {
drawing = true;
line_system = [];
line_system = new LineSystem ();
}
function mouseReleased () {
drawing = false;
}
function LineSystem () {
var line_create = [];
var x = (mouseX - (width / 2)) * cos (roty);
var y = (mouseY - (height / 2)) * cos (rotx);
var z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
line_create.push (new LineCreate (x, y, z));
var targetx = 0.0;
var targety = 0.0;
var targetz = 0.0;
easing = 0.1;
create = true;
this.update = function () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.push (new LineCreate (x, y, z));
}
}
this.render = function () {
for (var i = 0; i < line_create.length; i++) {
if (i > 0) {
var line_prev = line_create[i - 1];
var line_next = line_create[i];
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
function LineCreate (ax, ay, az) {
this.x = ax;
this.y = ay;
this.z = az;
}
```
and this is my attempt to convert it into a processing code:
```auto
float rotx;
float roty;
float rotz;
int axisx;
int axisy;
float axisz;
LineSystem line_system;
void setup () {
pixelDensity (displayDensity ());
createCanvas (windowWidth, windowHeight, WEBGL);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
drawing = false;
line_system = new LineSystem ();
}
void draw () {
background (0);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
void mousePressed () {
drawing = true;
ArrayList line_system = new ArrayList();
line_system = new LineSystem ();
}
void mouseReleased () {
drawing = false;
}
class LineSystem {
ArrayList line_create = new ArrayList();
float x = (mouseX - (width / 2)) * cos (roty);
float y = (mouseY - (height / 2)) * cos (rotx);
float z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
line_create = append(line_create, new LineCreate (x, y, z));
float targetx = 0.0;
float targety = 0.0;
float targetz = 0.0;
easing = 0.1;
create = true;
void update () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.push (new LineCreate (x, y, z));
}
}
void render () {
for (int i = 0; i < line_create.length; i++) {
if (i > 0) {
LineCreate line_prev = line_create[i - 1];
LineCreate line_next = line_create[i];
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
class LineCreate{
LineCreate (ax, ay, az){
this.ax = ax;
this.ay = ay;
this.az = az;
}
}
type or paste code here
```
---
### Author:  [@l3ehfar](https://discourse.processing.org/u/l3ehfar)
#### Post date: [May 5, 2021, 9:06pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/7 "2021-05-05T21:06:29Z")
@micuat this is the code I’ve been working on which doesn’t work right
---
### Author:  [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)
#### Post date: [May 5, 2021, 9:07pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/8 "2021-05-05T21:07:17Z")
It may take me a few hours. But I am working on it now. Thats a good idea you had.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 5, 2021, 10:03pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/9 "2021-05-05T22:03:56Z")
there are small points that had to be fixed and I thought it’s easier to show the fix rather than explaining each points so I just give you the “answer” 🙂
```auto
float rotx;
float roty;
float rotz;
int axisx;
int axisy;
float axisz;
LineSystem line_system;
boolean drawing = false;
void setup () {
size (800, 800, P3D);
colorMode (RGB, 256);
background (0);
rotx = 0.0;
roty = 0.0;
rotz = 0.0;
axisx = 0;
axisy = 0;
axisz = 0.0;
line_system = new LineSystem ();
}
void draw () {
background (0);
translate(width / 2, height / 2);
translate (axisx, axisy, axisz);
rotateX (rotx);
rotateY (roty);
rotateZ (rotz);
rotx += 0.06;
roty += 0.00;
rotz += 0.00;
line_system.update ();
line_system.render ();
strokeWeight (2);
stroke (255, 0, 0);
line (-960, 0, 0, 960, 0, 0);
stroke (0, 255, 0);
line (0, -540, 0, 0, 540, 0);
}
void mousePressed () {
drawing = true;
line_system = new LineSystem ();
}
void mouseReleased () {
drawing = false;
}
class LineSystem {
ArrayList line_create = new ArrayList();
float x = (mouseX - (width / 2)) * cos (roty);
float y = (mouseY - (height / 2)) * cos (rotx);
float z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
float targetx = 0.0;
float targety = 0.0;
float targetz = 0.0;
float easing = 0.1;
boolean create = true;
LineSystem () {
line_create.add(new LineCreate (x, y, z));
}
void update () {
targetx = (mouseX - (width / 2)) * cos (roty);
targety = (mouseY - (height / 2)) * cos (rotx);
targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
x += (targetx - x) * easing;
y += (targety - y) * easing;
z += (targetz - z) * easing;
if (drawing == true) {
line_create.add (new LineCreate (x, y, z));
}
}
void render () {
for (int i = 0; i < line_create.size(); i++) {
if (i > 0) {
LineCreate line_prev = line_create.get(i - 1);
LineCreate line_next = line_create.get(i);
stroke (255, 255, 255);
strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
}
}
}
}
class LineCreate {
float x, y, z;
LineCreate (float ax, float ay, float az) {
this.x = ax;
this.y = ay;
this.z = az;
}
}
```
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 5, 2021, 11:27pm UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/10 "2021-05-05T23:27:18Z")
> [@micuat](#):
>
> there are small points that had to be fixed and I thought it’s easier to show the fix rather than explaining each points s
great work and nice too
---
### Author:  [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)
#### Post date: [May 6, 2021, 5:59am UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/11 "2021-05-06T05:59:24Z")
I know someone already answered, but I am working on a program to do this automatically. I’ll post it tomorrow when I’m done.
---
### Author:  [@Success](https://discourse.processing.org/u/Success)
#### Post date: [February 26, 2022, 1:58am UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893/12 "2022-02-26T01:58:30Z")
Can you convert it to processing? Thank you very much
(z = 0),
(x = 99),
(draw = (a) =\> {
for (z || createCanvas((w = 400), w, WEBGL), background(0), i = 22; i–; )
(p = (-i \* w + (z % w) \* 2) / 290),
L(250 \* p, x + cos(p / 5) \* sin(z / 3e3) \* p \* 50),
(x = -x);
z += 15;
}),
(L = (p, a) =\> {
push(),
translate(a, 25, p),
circle(0, -200, 15),
spotLight(w, 220, 190, a, 1.8 \* -w, p, 0, 1, 0),
pop(box(w, 2, w, 50));
});