# Processing to p5.js sketch

**URL:** https://discourse.processing.org/t/processing-to-p5-js-sketch/25449
**Category:** Coding Questions
**Created:** [November 15, 2020, 10:09pm UTC](https://discourse.processing.org/t/processing-to-p5-js-sketch/25449 "2020-11-15T22:09:00Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![femke](https://avatars.discourse-cdn.com/v4/letter/f/7993a0/32.png) [@femke](https://discourse.processing.org/u/femke)
#### Post date: [November 15, 2020, 10:09pm UTC](https://discourse.processing.org/t/processing-to-p5-js-sketch/25449/1 "2020-11-15T22:09:00Z")

</div>

Hi all,

I’m pretty new to coding and I’m trying to convert a processing file to a p5.js file but it keeps giving me an error. I know there’s something wrong wrong about the PVector but not sure what.

Can somebody help me out?

> > > > > This is the p5.js file now\<\<\<\<\<

var points;  
var d;

function setup() {  
initializeFields();  
createCanvas(600, 800);  
for (var i = 0; i \< points.length; i++) {  
points[i] = new PVector(random(width), random(height), random(width));  
}  
}

function draw() {  
loadPixels();  
for (var x = 0; x \< width; x++) {  
for (var y = 0; y \< height; y++) {  
var distances = new Array(points.length);  
for (var i = 0; i \< points.length; i++) {  
var v = points[i];  
var z = frameCount % height;  
var d = dist(x, y, z, v.x, v.y, v.z);  
distances[i] = d;  
}  
var sorted = sort(distances);  
var r = map(sorted[0], 10, 150, 0, 185);  
var g = map(sorted[1], 220, 50, 255, 110);  
var b = map(sorted[2], 0, 200, 255, 10);  
var index = x + y \* width;  
pixels[index] = color(r, g, b);  
}  
}  
updatePixels();  
}

function initializeFields() {  
points = new Array(100);  
d = “hello”;  
}

> > > > > and this was the origin \<\<\<\<\<

PVector points = new PVector[100];  
String d = “hello”;

void setup() {  
size(600, 800);  
for (int i = 0; i \< points.length; i++) {  
points[i] = new PVector(random(width), random(height), random(width));  
}  
}

void draw() {  
loadPixels();  
for (int x = 0; x \< width; x++) {  
for (int y = 0; y \< height; y++) {

```
  float[] distances = new float[points.length];
  for (int i = 0; i < points.length; i++) {
    PVector v = points[i];
    float z = frameCount % height;
    float d = dist(x, y, z, v.x, v.y, v.z);
    distances[i] = d;
  }
  float[] sorted = sort(distances);
  float r = map(sorted[0], 10, 150, 0, 185);
  float g = map(sorted[1], 220, 50, 255, 110);
  float b = map(sorted[2], 0, 200, 255, 10);
  int index = x + y * width;
  pixels[index] = color(r, g, b);
}

```

}  
updatePixels();

}

> > > > Many thanks!!

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [November 15, 2020, 10:54pm UTC](https://discourse.processing.org/t/processing-to-p5-js-sketch/25449/2 "2020-11-15T22:54:06Z")

</div>

Hi,

Welcome to the forum! 🙂

Remember to format your code by using the `</>` button in the message editor on the forum.

> [@femke](#):
>
> I know there’s something wrong wrong about the PVector but not sure what.

You are right, the `PVector` class is in Processing Java not in p5.js, the equivalent is :

- [p5.Vector](https://p5js.org/reference/#/p5.Vector)