Convert p5js to Processing

could anyone help me converting this code into Processing please?

thanks

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)

1 Like

read this

1 Like

and this

1 Like

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.

thankyou!
this is the p5js coded by the author:

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:

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<LineSystem> line_system = new ArrayList<LineSystem>();
  line_system = new LineSystem ();
}
void mouseReleased () {
  drawing = false;
}


class LineSystem {
  ArrayList<LineCreate> line_create = new ArrayList<LineCreate>();
  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

@micuat this is the code I’ve been working on which doesn’t work right

It may take me a few hours. But I am working on it now. Thats a good idea you had.

2 Likes

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” :slight_smile:

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<LineCreate> line_create = new ArrayList<LineCreate>();
  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;
  }
}
3 Likes

great work and nice too

1 Like

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.

1 Like

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));
});