Converting a PVector Animation

meowsus

I have this source (Processing) animation:

ArrayList<PVector> stars = new ArrayList<PVector>();
float h2;//=height/2
float w2;//=width/2
float d2;//=diagonal/2

void setup() {
  size(600, 600);
  w2=width/2;
  h2= height/2;
  d2 = dist(0, 0, w2, h2);
  noStroke();
}
void draw() {
  fill(0, map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5));
  rect(0, 0, width, height);
  fill(255);

  for (int i = 0; i<20; i++) {   // star init
    stars.add(new PVector(random(width), random(height), random(1, 3)));}

  for (int i = 0; i<stars.size(); i++) {
    float x =stars.get(i).x;//local vars
    float y =stars.get(i).y;
    float d =stars.get(i).z;

    /* movement+"glitter"*/
    stars.set(i, new PVector(x-map(mouseX, 0, width, -0.05, 0.05)*(w2-x), y-map(mouseY, 0, height, -0.05, 0.05)*(h2-y), d+0.2-0.6*noise(x, y, frameCount)));

    if (d>3||d<-3) stars.set(i, new PVector(x, y, 3));
    if (x<0||x>width||y<0||y>height) stars.remove(i);
    if (stars.size()>9999) stars.remove(1);
    ellipse(x, y, d, d);//draw stars
  }
}

And I am trying to convert it into p5. Here's what I have:

var stars = new p5.Vector(),
    h2,
    w2,
    d2;

function setup() {
  createCanvas(600, 600);
  w2=width/2;
  h2= height/2;
  d2 = dist(0, 0, w2, h2);
  noStroke();
}

function draw() {
  fill(0, map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5));
  rect(0, 0, width, height);
  fill(255);

  for (var i = 0; i<20; i++) {   // star init
    stars.add(createVector(random(width), random(height), random(1, 3)));}

  for (var i = 0; i<stars.length; i++) {
    var x =stars.get(i).x;//local vars
    var y =stars.get(i).y;
    var d =stars.get(i).z;

    /* movement+"glitter"*/
    stars.set(i, createVector(x-map(mouseX, 0, width, -0.05, 0.05)*(w2-x), y-map(mouseY, 0, height, -0.05, 0.05)*(h2-y), d+0.2-0.6*noise(x, y, frameCount)));

    if (d>3||d<-3) stars.set(i, createVector(x, y, 3));
    if (x<0||x>width||y<0||y>height) stars.remove(i);
    if (stars.size()>9999) stars.remove(1);
    ellipse(x, y, d, d);//draw stars
  }
}

It doesn't work. I assume its because the first line of the source is an Array of PVectors, and I am just missing how to convert this into JS.

Any help would be very, very appreciated.

GoToLoop

You should read about JS's arrays, especially method push(): :-B
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Take a look at P5.JS's available functions too: :-bd
http://p5js.org/reference/ & http://p5js.org/reference/#/libraries/p5.dom

GoToLoop

Some sketches converted from Java Mode to both CS Mode & P5.JS:

• http://forum.processing.org/two/discussion/5615/coding-noob-needs-help-how-do-i-draw-an-expanding-circle-that-triggers-with-a-mouse-click
• http://forum.processing.org/two/discussion/7294/why-doesnt-my-sketch-run-in-javascript-mode

meowsus

Thanks GoToLoop. I went back and paid more specific attention to what the intended animation was. I was thrown off by the p5.Vector API having an 'add' method, and I didn't exactly realize that the ArrayList was just that... a fairly regular array.

Here's the modified code if it will help anyone:

var stars = [],
    h2,
    w2,
    d2;

function setup () {
    createCanvas(600, 600);

    w2 = width/2;
    h2 = height/2;
    d2 = dist(0, 0, w2, h2);

    noStroke();
}

function draw () {
    fill(0, map(dist(mouseX, mouseY, w2, h2), 0, d2, 255, 5));
    rect(0, 0, width, height);
    fill(255);

    for (var i = 0; i < 20; i++) {
        stars.push(new p5.Vector(random(width), random(height), random(1, 3)));
    }

    for (var j = 0; j < stars.length; j++) {
        var x = Math.abs(stars[j].x),
            y = Math.abs(stars[j].y),
            d = Math.abs(stars[j].z);

        stars[j] = new p5.Vector(x-map(mouseX, 0, width, -0.05, 0.05)*(w2-x), y-map(mouseY, 0, height, -0.05, 0.05)*(h2-y), d+0.2-0.6*noise(x, y, frameCount));

        if (d > 3 || d < -3) {
            stars[j] = new p5.Vector(x, y, 3);
        }

        if (x < 0 || x > width || y < 0 || y > height) {
            stars.splice(j, 1);
        }

        if (stars.length > 9999) {
            stars.splice(j, 1);
        }

        ellipse(x, y, d, d);
    }
}