# Converted Processing to P5.js but its still not working

**URL:** <https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521>\
**Category:** Coding Questions\
**Created:** [August 10, 2018, 1:49am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521 "2018-08-10T01:49:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnganeko](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dnganeko](https://discourse.processing.org/u/dnganeko)\
**Post date:** [August 10, 2018, 1:49am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/1 "2018-08-10T01:49:26Z")

</div>

Hi there,

I have tried to convert these two sketches to P5.js but it still doesn’t seem to work.

I’m new to it all so can figure out what else needs to be changed.

Can someone please help. 🙂

Sketch 1.

```auto
var location; // Location of shape
var velocity; // Velocity of shape
var gravity; // Gravity acts at the shape's acceleration

function setup() {
  createCanvas(640,360);
  location = createVector(100,100);
  velocity = (1.5,2.1);
  gravity = (0,0.2);

}

function draw() {
  background(0);
  
  // Add velocity to the location.
  location.add(velocity);
  // Add gravity to velocity
  velocity.add(gravity);
  
  // Bounce off edges
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
    // We're reducing velocity ever so slightly 
    // when it hits the bottom of the window
    velocity.y = velocity.y * -0.95; 
    location.y = height;
  }

  // Display circle at location vector
  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x,location.y,48,48);
}

```

Sketch 2.

```auto
var message = "dddddddddddddddddddddddddddddddddddddddddddd";
char[] messageAsvars = message.tovarArray();
var charCount = messageAsvars.length;
var charCountToStep = 1.0 / var(charCount);

var ap0x, ap0y, 
  cp0x, cp0y, 
  cp1x, cp1y, 
  ap1x, ap1y;

function setup() {
  createCanvas(1024, 512);
  smooth(8);
  randomizePovars();
  textSize(10);
  textAlign(CENTER, CENTER);
  textMode(MODEL);
}

function draw() {
  background(#2E3B97);
  noFill();
  stroke(#2E3B97);
  bezier(ap0x, ap0y, 
    cp0x, cp0y, 
    cp1x, cp1y, 
    ap1x, ap1y);

  noStroke();
  fill(#FBE44D);
  
  var step0 = frameCount * 0.0;
  
  for (var i = 0; i < charCount; ++i) {
    var step1 = i * charCountToStep;
    var step2 = (step0 + step1) % 2.0;
    
    var x = bezierPovar(ap0x, cp0x, cp1x, ap1x, step2);
    var y = bezierPovar(ap0y, cp0y, cp1y, ap1y, step2);
    
    var tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2);
    var tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2);
    
    var angle = atan2(tany, tanx);

    push();
    translate(x, y);
    rotate(angle);
    text(messageAsvars[i], 0.0, 0.0);
    pop();
  }
}

function mouseMoved() {
  randomizePovars();
}

function randomizePovars() {
  var halfw = width * 0.5;
  var halfh = height * 0.5;
  ap0x = random(0.0, halfw);
  cp0x = random(0.0, width);
  cp1x = random(0.0, width);
  ap1x = random(halfw, width);

  ap0y = random(0.0, halfh);
  cp0y = random(0.0, height);
  cp1y = random(0.0, height);
  ap1y = random(halfh, height);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 10, 2018, 1:57am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/2 "2018-08-10T01:57:02Z")

</div>

> [@dnganeko](#):
>
> I have tried to convert these two sketches to P5.js…

Where are those Java Mode sketches? Do you have them? Do they actually work? 🙄

---

<div class="post-metadata">

**Author:** ![dnganeko](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dnganeko](https://discourse.processing.org/u/dnganeko)\
**Post date:** [August 10, 2018, 2:16am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/3 "2018-08-10T02:16:27Z")

</div>

Hey mate,

Yeah they work…?

These are the original Processing Sketches…

Thanks for the help!

Sketch 1.

```auto
PVector location;  
PVector velocity;  
PVector gravity;   

void setup() {
  size(640,360);
  location = new PVector(100,100);
  velocity = new PVector(1.5,2.1);
  gravity = new PVector(0,0.2);

}

void draw() {
  background(0);
  
 
  location.add(velocity);
 
  velocity.add(gravity);
  
 
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
   
    velocity.y = velocity.y * -0.95; 
    location.y = height;
  }

  
  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x,location.y,48,48);
}

```

Sketch 2.

```auto
String message = "Lorem ipsum dolor sit amet,"
  + "consectetur adipiscing elit.";
char[] messageAsChars = message.toCharArray();
int charCount = messageAsChars.length;
float charCountToStep = 1/ float(charCount);

float ap0x, ap0y, 
  cp0x, cp0y, 
  cp1x, cp1y, 
  ap1x, ap1y;

void setup() {
  size(1024, 512);
  smooth(8);
  randomizePoints();
  textSize(10);
  textAlign(CENTER, CENTER);
  textMode(MODEL);
}

void draw() {
  background(255);
  noFill();
  stroke(0xff007fff);
  bezier(ap0x, ap0y, 
    cp0x, cp0y, 
    cp1x, cp1y, 
    ap1x, ap1y);

  noStroke();
  fill(0xff000000);
  
  float step0 = frameCount-1 * 0.0;
  
  for (int i = 0; i < charCount; ++i) {
    float step1 = i * charCountToStep;
    float step2 = (step0 + step1) % 1.0;
    
    float x = bezierPoint(ap0x, cp0x, cp1x, ap1x, step2);
    float y = bezierPoint(ap0y, cp0y, cp1y, ap1y, step2);
    
    float tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2);
    float tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2);
    
    float angle = atan2(tany, tanx);

    pushMatrix();
    translate(x, y);
    rotate(angle);
    text(messageAsChars[i], 0.0, 0.0);
    popMatrix();
  }
}

void mouseMoved() {
  randomizePoints();
}

void randomizePoints() {
  float halfw = width * 0.5;
  float halfh = height * 0.5;
  ap0x = random(0.0, halfw);
  cp0x = random(0.0, width);
  cp1x = random(0.0, width);
  ap1x = random(halfw, width);

  ap0y = random(0.0, halfh);
  cp0y = random(0.0, height);
  cp1y = random(0.0, height);
  ap1y = random(halfh, height);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 10, 2018, 4:09am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/4 "2018-08-10T04:09:24Z")

</div>

Found 2 problems on the 1st sketch:

1. You forgot to use createVector for _velocity_ & _gravity_: 🤨

```auto
location = createVector(100,100);
velocity = (1.5,2.1);
gravity = (0,0.2);

```

Should be:

```auto
location = createVector(100,100);
velocity = createVector(1.5,2.1);
gravity = createVector(0,0.2);

```

1. Browsers already got property _location_. So we can’t use it: 😮  
[Developer.Mozilla.org/en-US/docs/Web/API/Window/location](http://Developer.Mozilla.org/en-US/docs/Web/API/Window/location)

So I simply renamed it to _loc_. Here’s your fixed converted 1st sketch: 🤠

```auto
"use strict";

let loc; // Location of shape
let vel; // Velocity of shape
let grav; // Gravity acts at the shape's acceleration

function setup() {
  createCanvas(640, 360);

  loc = createVector(100, 100);
  vel = createVector(1.5, 2.1);
  grav = createVector(0, 0.2);

  stroke(255);
  strokeWeight(2);
  fill(127);
}

function draw() {
  background(0);

  // Add velocity to the location.
  loc.add(vel);
  // Add gravity to velocity
  vel.add(grav);

  // Bounce off edges
  if ((loc.x > width) || (loc.x < 0)) {
    vel.x = vel.x * -1;
  }

  if (loc.y > height) {
    // We're reducing velocity ever so slightly
    // when it hits the bottom of the window
    vel.y = vel.y * -0.95;
    loc.y = height;
  }

  // Display circle at location vector
  ellipse(loc.x, loc.y, 48, 48);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 10, 2018, 4:16am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/5 "2018-08-10T04:16:58Z")

</div>

> [@dnganeko](#):
>
> ```auto
> String message = "Lorem ipsum dolor sit amet," + "consectetur adipiscing elit.";
> char[] messageAsChars = message.toCharArray();
> 
> ```

No need to convert a String to an array in JS, b/c we can access strings using the `[]` operator there! 🤩

---

<div class="post-metadata">

**Author:** ![dnganeko](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dnganeko](https://discourse.processing.org/u/dnganeko)\
**Post date:** [August 10, 2018, 4:19am UTC](https://discourse.processing.org/t/converted-processing-to-p5-js-but-its-still-not-working/2521/6 "2018-08-10T04:19:26Z")

</div>

> [@dnganeko](#):
>
> String message = “Lorem ipsum dolor sit amet,” + “consectetur adipiscing elit.”; char messageAsChars = message.toCharArray(); int charCount = messageAsChars.length; float charCountToStep = 1/ float(charCount); float ap0x, ap0y, cp0x, cp0y, cp1x, cp1y, ap1x, ap1y; void setup() { size(1024, 512); smooth(8); randomizePoints(); textSize(10); textAlign(CENTER, CENTER); textMode(MODEL); } void draw() { background(255); noFill(); stroke(0xff007fff); bezier(ap0x, ap0y, cp0x, cp0y, cp1x, cp1y, ap1x, ap1y); noStroke(); fill(0xff000000); float step0 = frameCount-1 \* 0.0; for (int i = 0; i \< charCount; ++i) { float step1 = i \* charCountToStep; float step2 = (step0 + step1) % 1.0; float x = bezierPoint(ap0x, cp0x, cp1x, ap1x, step2); float y = bezierPoint(ap0y, cp0y, cp1y, ap1y, step2); float tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2); float tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2); float angle = atan2(tany, tanx); pushMatrix(); translate(x, y); rotate(angle); text(messageAsChars[i], 0.0, 0.0); popMatrix(); } } void mouseMoved() { randomizePoints(); } void randomizePoints() { float halfw = width \* 0.5; float halfh = height \* 0.5; ap0x = random(0.0, halfw); cp0x = random(0.0, width); cp1x = random(0.0, width); ap1x = random(halfw, width); ap0y = random(0.0, halfh); cp0y = random(0.0, height); cp1y = random(0.0, height); ap1y = random(halfh, height); }

```auto
type or paste code here

```

Hey, thanks for the help!

Sorry to be a pain, but can you explain a bit more what you mean by this ?