Transforming PVectors into p5.vector (or createVector?)

paul_young1984

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

GoToLoop

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

paul_young1984

Whooops. Soz about that just updated it now.

paul_young1984

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

23: Uncaught TypeError: number is not a function

GoToLoop

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/

paul_young1984

Hi GoToLoop,

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

GoToLoop

• 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

GoToLoop

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

paul_young1984

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 :)

paul_young1984

Here's the image for the sketch btw :)

paul_young1984

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

GoToLoop

• Processing's API got lotsa methods which are named get() as well! @-)
• However, that particular method get() you refer to now belongs to class PApplet! #-o
• Obviously, it's not the same method get() from Java's interface List: :-@
  http://Docs.Oracle.com/javase/8/docs/api/java/util/List.html#get-int-
• BtW, corresponding Processing's PApplet class in p5.js is p5 class. ;;) https://p5js.org/reference/

paul_young1984

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

GoToLoop

... 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

paul_young1984

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?

GoToLoop

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

GoToLoop

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! :)>-

paul_young1984

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

GoToLoop

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

Clickable Balls:

Java: http://Studio.ProcessingTogether.com/sp/pad/export/ro.9NGjx94YMTtlu
JS: http://p5js.SketchPad.cc/sp/pad/view/ro.CaQVvhrEKxAeXd/latest

Conglomerate of Points:

Java: http://Studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
JS: http://p5js.SketchPad.cc/sp/pad/view/ro.CYuAGs4xyhzhKu/latest

Repetitive Bezier Curve Patterns:

Java: https://OpenProcessing.org/sketch/400921
JS: https://OpenProcessing.org/sketch/400949

Hoppy Beaver:

Java: http://Studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza
JS: http://p5js.SketchPad.cc/sp/pad/view/ro.Cp2G$x5ApiPI5r/latest

GoToLoop

Haven't got it working yet, ...

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

paul_young1984

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

paul_young1984

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

GoToLoop

http://ProcessingJS.org/reference/pjs directive/
http://ProcessingJS.org/reference/preload/

paul_young1984

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

GoToLoop

• I've noticed you're using P3D renderer in your Java sketch. size(500, 500, P3D);
• Removing it was much faster for my computer though: size(500, 500);
• PImage::get() method is very slow: https://Processing.org/reference/get_.html
• Use PImage::pixels[] instead: https://Processing.org/reference/loadPixels_.html

GoToLoop

• /* @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