Translating processing into P5.js

wjsandbe

I'm having trouble converting my processing sketch into a P5.js sketch. I thought I had it, but I just get a blank screen when I play my P5 version.

here is my processing sketch:

import processing.sound.*;

SoundFile pianoc;
SoundFile pianod;
SoundFile pianoe;
SoundFile pianof;
SoundFile pianog;
SoundFile pianoa;
SoundFile pianob;
int value = 0;
int value2 = 0;

ArrayList<Shape> shapes = new ArrayList<Shape>();

void setup() {
  fullScreen();
  //size(300, 300);
  pianoc = new SoundFile(this, "pianoc.wav");;
  pianod = new SoundFile(this, "pianod.wav");;
  pianoe = new SoundFile(this, "pianoe.wav");;
  pianof = new SoundFile(this, "pianof.wav");;
  pianog = new SoundFile(this, "pianog.wav");;
  pianoa = new SoundFile(this, "pianoa.wav");;
  pianob = new SoundFile(this, "pianob.wav");;
}

void mousePressed(){

  if (mouseY > (height/2 + 40)  || ( mouseY < ( height/2 - 20))){
  for(int i = 0; i < 1; i++){
    shapes.add(new Shape(mouseX, mouseY));  }

    if (shapes.size() > 8) {
    shapes.remove(0);
println(shapes.size());
  }
}
}

void draw() {
  background(200);

  fill(#F2E118);
  rect(value2, (height/2), 60, 20);
  fill(0, 0, 0);
  text ("- Speed +",  (value2 + 31), (height/2 + 16));


  for (int i = shapes.size()-1; i >= 0; i--) {
    shapes.get(i).move();
    shapes.get(i).display();


    if(shapes.get(i).isOffScreen()){
      shapes.remove(i);
 pianoc.play();     
    }

  }
  fill(0, 0, 0);
   textAlign(CENTER);
text ("TOUCH anywhere to make new balls",  width /2, height/3);
 text ("New balls replace old balls",  width /2, (height/3 + 50));
 text ("DRAG the slider to change the speed of new balls", width/2, (height/3 + 100));
text ("The Sound of Gravity in C", width/2, (height/3 + height/3)); 
//Name your song above
}

void mouseDragged() {
  if (mouseY < (height/2 + 40)  && ( mouseY > ( height/2 - 20))) {
  value = mouseX/160;}
  if (mouseY < (height/2 + 40)  && ( mouseY > ( height/2 - 20)) 
  && (mouseX > 0) && (mouseX < width - 45)) {
 value2 = mouseX;
  }
}

//

class Shape {

  float x;
  float y;
  float xSpeed = random ((value * -1), value);
  float ySpeed = random ((value * -1), value);

  Shape(float x, float y){
    this.x = x;
    this.y = y;
  }

  void move() {
    x += xSpeed;
    y += ySpeed;
      if ((x > (width - 25)) || (x < 25)) {
    xSpeed = xSpeed * -1;
  }
  if ((y > (height - 25)) || (y < 25)) {
    ySpeed = ySpeed * -1;
  }
        if ((x > (width - 25) && y > 25 && y < (height - (height/3 + (height/3)))) || (x > (width/3 + (width/3))) && y < 25 )    {
    pianoc.play();
  }
  if ((x < 25 && y > (height/3 + (height/3))) || ((x < (width/3)) && ( y > (height - 25) )) )   {
    pianoc.play();
  }
  if ((x > (width - 25) && y < (height/3 + (height/3)) && y > (height/3)))  {
    pianod.play();
  }
  if ((x > (width - 25) && y > (height/3 + (height/3)) || (y > (height - 25)) && (x > (width/3 + (width/3))))) {
  pianoe.play();
}
if (( y > (height - 25) && x > (width/3)) && x < (width/3 + (width/3))) {
  pianof.play();
}
if (( x < 25  && y > (height/3) && y < (height/3 + (height/3)))) {
  pianoa.play();
}
if (( x < 25  && y < (height/3) && y > 25) || (y < 25 ) && (x > 25 ) && (x < (width/3))) {
  pianog.play();
}
if (( y < 25  && x > (width/3) && x < (width/3 + (width/3)))) {
  pianob.play();
}
  }

  void display() {
    fill(200, 0, 0);
    ellipse(x, y, 50, 50);
  }

  boolean isOffScreen(){
    return x < 0 || x > width || y < 0 || y > height;
  }
}

//

and Here is my P5 translation:

    var Shape = [];

function preload() {
pianoc = loadSound('pianoc.wav');
pianod = loadSound('pianod.wav');
pianoe = loadSound('pianoe.wav');
pianof = loadSound('pianof.wav');
pianog = loadSound('pianog.wav');
pianoa = loadSound('pianoa.wav');
pianob = loadSound('pianob.wav');
}

function setup() {
createCanvas(windowWidth, windowHeight); 

var value = 0;
var value2 = 0;



  pianoc = new SoundFile(this, "pianoc.wav");
  pianod = new SoundFile(this, "pianod.wav");
  pianoe = new SoundFile(this, "pianoe.wav");
  pianof = new SoundFile(this, "pianof.wav");
  pianog = new SoundFile(this, "pianog.wav");
  pianoa = new SoundFile(this, "pianoa.wav");
  pianob = new SoundFile(this, "pianob.wav");
}

function mouseIsPressed(){

  if (mouseY > (height/2 + 40)  || ( mouseY < ( height/2 - 20))){
  for(var i = 0; i < 1; i++){
    shapes.add(new Shape(mouseX, mouseY));  }

    if (shapes.size() > 8) {
    shapes.remove(0);
println(shapes.size());
  }
}
}

function draw() {
  background(200, 200, 100);

  fill(200, 200, 100);
  rect(value2, (height/2), 60, 20);
  fill(0, 0, 0);
  text ("- Speed +",  (value2 + 31), (height/2 + 16));


  for (var i = shapes.size()-1; i >= 0; i--) {
    shapes.get(i).move();
    shapes.get(i).display();


    if(shapes.get(i).isOffScreen()){
      shapes.remove(i);
 pianoc.play();     
    }

  }
  fill(0, 0, 0);
   textAlign(CENTER);
text ("TOUCH anywhere to make new balls",  width /2, height/3);
 text ("New balls replace old balls",  width /2, (height/3 + 50));
 text ("DRAG the slider to change the speed of new balls", width/2, (height/3 + 100));
text ("The Sound of Gravity in C", width/2, (height/3 + height/3)); 
//Name your song above
}

function touchMoved() {
  if (mouseY < (height/2 + 40)  && ( mouseY > ( height/2 - 20))) {
  value = mouseX/160;}
  if (mouseY < (height/2 + 40)  && ( mouseY > ( height/2 - 20)) 
  && (mouseX > 0) && (mouseX < width - 45)) {
 value2 = mouseX;
  }
}

//

function Shape() {

  this.x; 
  this.y;
  this.xSpeed = random ((value * -1), value);
  this.ySpeed = random ((value * -1), value);


  }

  this.move = function () {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
      if ((this.x > (width - 25)) || (this.x < 25)) {
    this.xSpeed = this.xSpeed * -1;
  }
  if ((this.y > (height - 25)) || (this.y < 25)) {
    this.ySpeed = this.ySpeed * -1;
  }
        if ((this.x > (width - 25) && this.y > 25 && this.y < (height - (height/3 + (height/3)))) || (this.x > (width/3 + (width/3))) && this.y < 25 )    {
    pianoc.play();
  }
  if ((this.x < 25 && this.y > (height/3 + (height/3))) || ((this.x < (width/3)) && ( this.y > (height - 25) )) )   {
    pianoc.play();
  }
  if ((this.x > (width - 25) && this.y < (height/3 + (height/3)) && this.y > (height/3)))  {
    pianod.play();
  }
  if ((this.x > (width - 25) && this.y > (height/3 + (height/3)) || (this.y > (height - 25)) && (this.x > (width/3 + (width/3))))) {
  pianoe.play();
}
if (( this.y > (height - 25) && this.x > (width/3)) && this.x < (width/3 + (width/3))) {
  pianof.play();
}
if (( this.x < 25  && this.y > (height/3) && this.y < (height/3 + (height/3)))) {
  pianoa.play();
}
if (( this.x < 25  && this.y < (height/3) && this.y > 25) || (this.y < 25 ) && (this.x > 25 ) && (this.x < (width/3))) {
  pianog.play();
}
if (( this.y < 25  && this.x > (width/3) && this.x < (width/3 + (width/3)))) {
  pianob.play();
}
  }

  function display() {
    fill(200, 0, 0);
    ellipse(this.x, this.y, 50, 50);
  }

  function isOffScreen(){
    return x < 0 || x > width || y < 0 || y > height;
  }

jeremydouglass

To help people respond to this, format the code so it can be easily read / copy / pasted.

Edit your post, highlight your code, and then press CNTR-O to indent it. Then others will be able to copy-paste it in order to see if they can help with the issue.

KevinWorkman

Can you link to a page running this code, or to a jsfiddle? Chances are you have an error in the JavaScript console.

Generally, you shouldn't try to translate entire programs from one language to another. Instead, take the program in smaller chunks: ask yourself what a particular chunk in the first program is doing, then ask yourself how you'd do that same thing in the target language. It's not a direct translation of code. It's a reimplementation of the original goals of the code.

Which chunk of code isn't working? Figuring this out will involve creating much smaller programs: can you get just the draw code working? Can you load a single sound file? At what point do you get stuck? Do you see any errors in the JavaScript console?

Lord_of_the_Galaxy

Excellent advice from @KevinWorkman , have you had any progress?

wjsandbe

Well I tried to get shorten to work, but with no success and so I put it aside for a bit. I'm not sure why shorten doesn't work. I'm guessing I've put it in the wrong place.

    var balls = [];
    var n = 0;

     function setup() {
    createCanvas(windowWidth, windowHeight);
    }

    function draw() {
       if (n > 7){
       balls = shorten(balls);} 
     for (n = 0; n < balls.length; n++) {
        balls[n].display();}


    }

    function mousePressed() {
      if (n < 8){
      append(balls, new Ball(mouseX, mouseY));
    }}    

    function Ball(x, y) {

      this.x = x;
      this.y = y;

      this.display = function() {
        fill(252, 0, 0);
        ellipse(this.x, this.y, 50, 50);
      }
    }

KevinWorkman

What exactly do you expect this code to do? What exactly do you mean when you say it doesn't work?

What is the purpose of the n variable? Can't you just use balls.length?

wjsandbe

Okay this code allows me to add up to 8 mousePressed ellipses. What I am trying to do is remove ellipses (balls) once there are 8 balls on the screen. I want to remove a ball so that there is room to add another ball. In processing I used the remove function The nvariable keeps count of the balls. It is basically the for (var i = 0; i < balls.length; i++){, but I created a variable n that is declared globally so that I can refer to that variable in any function.

GoToLoop

http://p5js.SketchPad.cc/sp/pad/view/ro.CxS6E9WWAMC$EO/latest

KevinWorkman

Note that the shorten() function removes the last index of the array.

If you're trying to remove the oldest ball, then you either need to rearrange your array so the oldest ball is the last index, or you could use the subset() function to remove the first index instead.

Also note that you're never clearing out old frames, so even if you remove a ball from the array, you still aren't removing it from the screen. You can use the background() function to clear out old frames.

wjsandbe

Thank you

wjsandbe

goodness, that was a simple fix, but also very revealing...thank you again

Lord_of_the_Galaxy

So the problem is solved and your entire program works? Good job then.

wjsandbe

yes that was my hang up. thanks.