CODEWITHSUNDEEP
javascriptjavaprocessingp5.js
Arkadelic
Arkadelic

Reputation: 105

moving from processing to p5.js

I am doing some simple experiments with the processing library, and would like to port one of these sketches to P5.js so it may be placed on the web. Below is the code in processing (java):

float t;

void setup() {
  background(20);
  size(500, 500);
}

void draw(){
  stroke(random(0,255), random(0,255), random(0,255));

  translate(width/2, height/2);
  rotate(radians(45));
  line(x(t), y(t), y(t), x(t));
  println(x(t));
  println(y(t));
  t++;


}

float x(float t) {
  return cos(t / 10) * 200;
}

float y(float t) {
  return sin(t / 100) * 200;
}

I am printing the values of x(t) and y(t) for reference, and they appear fine in the processing console. I have tried to rewrite this to be accepted by P5.js(javascript):

var t;

function setup() {
  background(20);
  createCanvas(500, 500);
}

function draw(){
  stroke(random(0,255), random(0,255), random(0,255));

  translate(width/2, height/2);
  rotate(radians(45));
  line(x(t), y(t), y(t), x(t));
  print(x(t));
  print(y(t));
  t++;
}

function x(t) {
  return cos(t / 10) * 200;
}

function y(t) {
  return sin(t / 100) * 200;
}

When I run this in the P5.js development environment, the console returns null for every value, and nothing is drawn onscreen. Hopefully someone can help, thanks!

Upvotes: 1

Views: 605

Answers (2)

Cobain Ambrose
Cobain Ambrose

Reputation: 91

Try saying: var t = 0; at the top instead of:var t;

Upvotes: 0

Kevin Workman
Kevin Workman

Reputation: 42176

In Processing (which is built on Java), your t variable gets the default float value of 0.0.

In P5.js (which is built on JavaScript), your t variable get the default value of undefined. You then try to use that value with other operations, which is why none of them work how you expect.

The simple fix to your problem is to just manually set the default value to 0.

Upvotes: 3

Related Questions