#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Transforming PVectors into p5.vector (or createVector?)

edited September 2017

Hi Folks,

I've been reading through every 'convert Processing into P5' document I can get a hold of, and I still can't figure out how to translate PVector's (processing) into p5.vector syntax.

Beneath is code in Processing (working). Beneath that is my code for p5 (not working) I'm pretty sure it's my Vector syntax that is out of wack. Can someone please provide direction? Saying that, there might be other things wrong, and I'm open to suggestions.

PROCESSING:

``````PImage img;
ArrayList pts;

void setup() {
img = loadImage("ASKEW A.jpg");

size(500, 500, P3D);

pts = new ArrayList();
findPoints();
}

void draw () {
background(255);

for (int i = pts.size()-1; i >= 0; i --){
PVector pt = (PVector)pts.get(i);

fill(pt.z);

noStroke();

stroke(0, 30);
for (int j = pts.size()-1; j >= 0; j --){
if(i>1){
PVector pt2 = (PVector)pts.get(j);
if (pt.dist(pt2) < 20){

int r = 10;
float x = r * tan(radians(i*(360.0/ (mouseX * tan(3)) )));
float y = r * sin(radians(i*(360.0/ (mouseY*  tan(3)) )));

int r1 = 2;
float x1 = r1 * tan(radians(i*(360.0 / (mouseX* tan(3)))));
float y1 = r1 * sin(radians(i*(360.0 / (mouseY* tan(3)))));

stroke(0, 30);
line(pt.x + x, pt.y + y,
pt2.x + x1, pt2.y + y1);
}
}
}
}
}

void findPoints(){

img.loadPixels();
for (int i = img.width-1; i >= 0; i -= 3){
for (int j = img.height; j >=0; j -= 3){

color c = img.get(i, j);
if (brightness(c) < 255){
pts.add(new PVector(i, j, brightness(c)));
}
}
}
}
``````

p5 :

``````var img;
var pts = [];
var i, j;

function setup() {

createCanvas(500, 500);

img = loadImage("ASKEW A.jpg");
findPoints();
}

function draw () {
background(255);

for (i = pts.length()-1; i >= 0; i --){
var pt = new p5.Vector.pts.get(i);
fill(pt.z);

noStroke();

stroke(0, 30);
for (j = pts.length()-1; j >= 0; j --){
if(i>1){
var pt2 = new p5.Vector.pts.get(j);
if (pt.dist(pt2) < 20){

var r = 20;
var x = r * tan(radians(i*(360.0/ (mouseX) )));
var y = r * sin(radians(i*(360.0/ (mouseY) )));

var r1 = 2;
var x1 = r1 * tan(radians(i*(360.0 / (mouseX))));
var y1 = r1 * sin(radians(i*(360.0 / (mouseY))));

stroke(0, 30);
line(pt.x + x, pt.y,
pt2.x + x1, pt2.y + y1);
}
}
}
}
}

function findPoints(){

img.loadPixels();
for (var i = img.width-1; i >= 0; i -= 3){
for (var j = img.height; j >=0; j -= 3){

var c = img.get(i, j);
if (brightness(c) < 255){
pts.push(new p5.Vector(i, j, brightness(c)));
}
}
}
}
``````
Tagged:

## Answers

• Please edit your post and fix your markdown code formatting for this forum. It's very unreadable: 8-|

# https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

• Whooops. Soz about that just updated it now.

• Also, the main error I'm getting at the moment is

23: Uncaught TypeError: number is not a function

• For starters, I feel the need to point out an " ugliness" at the Java version itself: `ArrayList pts;`! 3:-O

When we use a Java container, it's strongly advisable to specify the datatype it's gonna store:
https://Processing.org/reference/ArrayList.html

Besides providing datatype safety, it also avoids boilerplate `(casts)` like this 1: `(PVector)pts.get(i);`

Here's how to properly declare an ArrayList container variable which stores PVector instances in Processing: ~O)

``````import java.util.List;
final List<PVector> pts = new ArrayList<PVector>();
``````

Now you can remove all of those ugly `(PVector)` casts: `PVector pt = pts.get(i);` \m/

• Hi GoToLoop,

Thanks for the future info. Any tips on how I would translate that to the Javascript sketch?

• Since no 1 but you have "ASKEW A.jpg", we can't run neither versions. =;
• So I'll just deal w/ the most obvious: `var pt = new p5.Vector.pts.get(i);` :-SS
• Here's the original in Java syntax w/ `(PVector)` casting already removed: `PVector pt = pts.get(i);`
• There are many errors in your conversion though. :-<
• For example: Why have you used operator `new` when there's none in the Java version? :-/
• Do you understand what List's get() method does in Java?
• Recall that variable pts is of datatype List.
• And each datatype got its own members. Most important of them are methods.
• Below's the reference for Java's List::get() method: :-B
http://Docs.Oracle.com/javase/8/docs/api/java/util/List.html#get-int-
• Thus what `pts.get(i);` does is getting the object element from List pts whose index is the current value of iterator i.
• But how do you convert Java's `pts.get(i);` to JS then? :-??
• Well, you've assigned a JS array to pts at the beginning of your sketch: `var pts = [];`
• So what's the corresponding action to get an indexed element from a JS array?
• It's simple, we use the access operator `[]` syntax: https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Accessing_array_elements
• Therefore Java's `final PVector pt = pts.get(i);` corresponds to JS' `const pt = pts[i];` :-bd
• `pts.push(new p5.Vector(i, j, brightness(c)));`

Avoiding directly using operator `new` for class p5.Vector in p5.js! [-X

p5.js' API got its own special builder function for it: :ar!
https://p5js.org/reference/#/p5/createVector

• yikes. Ok, a lot to take in. I'll try and go over this and get back to you. Cheers again for all the help :)

• Here's the image for the sketch btw :)

• Oh, and this was the reference I was using for the get() function : https://processing.org/reference/get_.html

• Riiiiiight. Is there anyway for a newbie to see what the difference is between the get() methods just by looking at them? Context I'm guessing?

With your suggestion of `const pt = pts[i];` doesn't that mean that 'pt' is no longer defined as a PVector as it is in Processing?

This is what I now have in my draw function.

``````function draw () {
background(255);

for (i = pts.length-1; i >= 0; i --){

const pt = pts[i];;

for (j = pts.length-1; j >= 0; j --){
if(i>1){
const pt2 = pts[j];
if (pt.dist(pt2) < 20){

var r = 20;
var x = r * tan(radians(i*(360.0/ (mouseX) )));
var y = r * sin(radians(i*(360.0/ (mouseY) )));

var r1 = 2;
var x1 = r1 * tan(radians(i*(360.0 / (mouseX))));
var y1 = r1 * sin(radians(i*(360.0 / (mouseY))));

stroke(0, 30);
line(pt.x + x, pt.y,
pt2.x + x1, pt2.y + y1);
}
}
}
}
``````
• ... doesn't that mean that pt is no longer defined as a PVector...

In JS (Python as well), variables, parameters & properties can store any datatype value.

In Java (C as well), we have to specify the datatype value a variable, parameter or field is allowed to store.

pt in your JS sketch is simply a variable. It is typeless.
However, the value stored in pt has a datatype indeed. :>

In this case, that stored value is of datatype p5.Vector: L-)
https://p5js.org/reference/#/p5.Vector

• And because I said that pts adds a p5.Vector to it in the `findPoints()` function this means that the pt variables have a vector assigned to them?

• edited September 2017 Answer ✓

The JS' version of the value stored in variable pts is of datatype Array: `const pts = [];`
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

A JS' Array container can store any datatype value in it though.

However, b/c within findPoints(), the only values being push()ed into pts' Array are of datatype p5.Vector, when we later access them again via operator `[]`, we can rest assured it's gonna grab a value of datatype p5.Vector too. B-)

• You should consider hosting your sketch at: :bz https://OpenProcessing.org/sketch/create

So others can run your attempt as well. You can even upload the image there! :)>-

• Ok, will do. Haven't got it working yet, but I"ll pick it up tomorrow. Thanks for the education :)!

• Some online sketches w/ both Java & JS versions, so you can check out how the conversion works: O:-)

## Hoppy Beaver:

• Haven't got it working yet, ...

Host it even it's not working yet so others can test it as well more easily. :\">

• Ok Cool, I have been doing the whole 'comparison thing', but will check these sketches out. Thanks a tone :)

• soooo, I've been trying to load my Processing sketch up on processing.org to show people. And while it works on my computer just fine, it is not working on processing.org. I've switched to the processing.js setting and have uploaded the picture. While I didn't think a processing sketch should work in a processing.js setting, other sketches I've come across do. Any ideas what the hell I'm doing wrong?

https://www.openprocessing.org/sketch/446793

• Great, thanks for that. Have uploaded both sketches. Processing is working, javascript is not. https://openprocessing.org/user/82646/#sketches

• `/* @pjs preload=""; */` is only valid for Pjs library, not p5.js. L-)
• Instead use preload() in order to load any resources under p5.js: https://p5js.org/reference/#/p5/preload
• You're activating lotsa libraries which your sketch isn't using at all! :-\"
• Like p5.dom, p5.sound, p5.collide2d, p5.serial.
• It's better to activate each 1 if your sketch actually need them. :-bd
Sign In or Register to comment.