Help translating p3 to p5js

MoonAlien822 · October 31, 2021, 9:32pm

i tried translating my processing 3 code into p5js code but it doesn’t work. what did i do wrong?

p5js code:

var trashX;
var trashY;

var boatX;
var boatY;

var ropelenght = 0;

var movingspeed = 10;

var time;

var score = 0;

let trash = [18];

let boat = [3];

var right = 1;
var left = 2;

var bag = 1;
var beer = 2;
var box = 3;
var coffee = 4;
var deodorant = 5;
var energy = 6;
var jar = 7;
var laundrydetergent = 8;
var milk = 9;
var milkshake = 10;
var paper = 11;
var pizza = 12;
var soda = 14;
var tin = 15;;
var tuna = 16;
var waterbottle = 17;

var boati = 1;

var trashi = int(random(0, 18));

let rope = false;

function setup() {
  fullScreen();


  trashX = random(0, width);
  trashY = ((height / 2) / 2) * 3;

  boatX = width / 2;
  boatY = (height / 2) / 2;

  trash[bag] = loadImage("bag.png");
  trash[beer] = loadImage("beer.png");
  trash[box] = loadImage("box.png");
  trash[coffee] = loadImage("coffee.png");
  trash[deodorant] = loadImage("deodorant.png");
  trash[energy] = loadImage("energy.png");
  trash[jar] = loadImage("jar.png");
  trash[laundrydetergent] = loadImage("laundry detergent.png");
  trash[milk] = loadImage("milk.png");
  trash[milkshake] = loadImage("milkshake.png");
  trash[paper] = loadImage("paper.png");
  trash[pizza] = loadImage("pizza.png");
  trash[soda] = loadImage("soda.png");
  trash[tin] = loadImage("tin.png");
  trash[tuna] = loadImage("tuna.png");
  trash[waterbottle] = loadImage("water bottle.png");



  boat[right] = loadImage("boatright.png");
  boat[left] = loadImage("boatleft.png");
}

function draw() {
    background(0, 105, 148);
  
  trashX= trashX - random(random(-3, -0.1), random(0.1, 3)); trashY = trashY - 1;


        image(trash[trashi], trashX, trashY, 20, 20);

        image(boat[boati], boatX, boatY, 50, 20);

        textSize(32); fill(0); // Fill color black
        text("score:" + score, 40, 80);


        if (rope == true) {
          time = millis();
          if (boati == right) {
            stroke(149, 125, 87);
          line(boatX + 10, boatY + 15, boatX + 10 + ropelenght, boatY + 15);
          ropelenght = ropelenght + 10;
              if (trashX < boatX + 10 + ropelenght && trashY <= boatY + 15 && trashY + 20 >= boatY + 15) {
                score++;
                trashX = random(0, width);
                trashY = ((height / 2) / 2) * 3;
                ropelenght = 0;
                time = 0;
                trashi = int(random(0, 18));
                rope = false;
              }

            }
            if (boati == left) {
              time = millis();
              stroke(149, 125, 87);
          line(boatX, boatY + 15, boatX - ropelenght, boatY + 15);
          ropelenght = ropelenght + 10;
                if (trashX > boatX - ropelenght && trashY <= boatY + 15 && trashY >= boatY + 15) {
                  score++;
                  trashX = random(0, width);
                  trashY = ((height / 2) / 2) * 3;
                  ropelenght = 0;
                  time = 0;
                  trashi = int(random(0, 18));
                  rope = false;
                }
              }
            }
            if (boatX - ropelenght <= 0 || boatX + 10 + ropelenght >= width) {
              ropelenght = 0;
              rope = false;

            }

            if (trashY <= 0) {
              score--;
              trashX = random(0, width);
              trashY = ((height / 2) / 2) * 3;
              ropelenght = 0;
              time = 0;
              trashi = int(random(0, 18));
              rope = false;

            }
  
    if(trashX<=0){
      trashX=0;
    }
  if(trashX>=width){
    trashX= width;
  }
      

          }



          function keyPressed() {
            if (key == 'a') {
              boati = left;
            }
            if (key == 'd') {
              boati = right;
            }
            if (key == ' ') {
              rope = true;
            }
          }

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-sketch_211031c3474139133367059777.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>
</body>
</html>

processing 3 code:
float trashX;
float trashY;

float boatX;
float boatY;

float ropelenght = 0;

float movingspeed = 10;

float time;

int score = 0;

PImage[] trash = new PImage[18];

PImage[] boat = new PImage[3];

int right = 1;
int left = 2;

int bag = 1;
int beer = 2;
int box = 3;
int coffee = 4;
int deodorant = 5;
int energy = 6;
int jar = 7;
int laundrydetergent = 8;
int milk = 9;
int milkshake = 10;
int paper = 11;
int pizza = 12;
int soda = 14;
int tin = 15;
int tuna = 16;
int waterbottle = 17;

int boati = 1;

int trashi = int(random(0, 18));

boolean rope = false;

void setup() {
	fullScreen();


	trashX = random(0, width);
	trashY = ((height / 2) / 2) * 3;

	boatX = width / 2;
	boatY = (height / 2) / 2;

	trash[bag] = loadImage("bag.png");
	trash[beer] = loadImage("beer.png");
	trash[box] = loadImage("box.png");
	trash[coffee] = loadImage("coffee.png");
	trash[deodorant] = loadImage("deodorant.png");
	trash[energy] = loadImage("energy.png");
	trash[jar] = loadImage("jar.png");
	trash[laundrydetergent] = loadImage("laundry detergent.png");
	trash[milk] = loadImage("milk.png");
	trash[milkshake] = loadImage("milkshake.png");
	trash[paper] = loadImage("paper.png");
	trash[pizza] = loadImage("pizza.png");
	trash[soda] = loadImage("soda.png");
	trash[tin] = loadImage("tin.png");
	trash[tuna] = loadImage("tuna.png");
	trash[waterbottle] = loadImage("water bottle.png");



	boat[right] = loadImage("boatright.png");
	boat[left] = loadImage("boatleft.png");
}

void draw() {
		background(#006994);
	
	trashX= trashX - random(random(-3, -0.1), random(0.1, 3)); trashY = trashY - 1;


				image(trash[trashi], trashX, trashY, 20, 20);

				image(boat[boati], boatX, boatY, 50, 20);

				textSize(32); fill(0); // Fill color black
				text("score:" + score, 40, 80);


				if (rope == true) {
					time = millis();
					if (boati == right) {
						stroke(#957D57);
					line(boatX + 10, boatY + 15, boatX + 10 + ropelenght, boatY + 15);
					ropelenght = ropelenght + 10;
							if (trashX < boatX + 10 + ropelenght && trashY <= boatY + 15 && trashY + 20 >= boatY + 15) {
								score++;
								trashX = random(0, width);
								trashY = ((height / 2) / 2) * 3;
								ropelenght = 0;
								time = 0;
								trashi = int(random(0, 18));
								rope = false;
							}

						}
						if (boati == left) {
							time = millis();
							stroke(#957D57);
					line(boatX, boatY + 15, boatX - ropelenght, boatY + 15);
					ropelenght = ropelenght + 10;
								if (trashX > boatX - ropelenght && trashY <= boatY + 15 && trashY >= boatY + 15) {
									score++;
									trashX = random(0, width);
									trashY = ((height / 2) / 2) * 3;
									ropelenght = 0;
									time = 0;
									trashi = int(random(0, 18));
									rope = false;
								}
							}
						}
						if (boatX - ropelenght <= 0 || boatX + 10 + ropelenght >= width) {
							ropelenght = 0;
							rope = false;

						}

						if (trashY <= 0) {
							score--;
							trashX = random(0, width);
							trashY = ((height / 2) / 2) * 3;
							ropelenght = 0;
							time = 0;
							trashi = int(random(0, 18));
							rope = false;

						}
	
	  if(trashX<=0){
			trashX=0;
		}
	if(trashX>=width){
		trashX= width;
	}
			

					}



					void keyPressed() {
						if (key == 'a') {
							boati = left;
						}
						if (key == 'd') {
							boati = right;
						}
						if (key == ' ') {
							rope = true;
						}
					}

GoToLoop · October 31, 2021, 11:06pm

MoonAlien822 · November 1, 2021, 6:53am

it still isn’t working

new p5js code:

var trashX;
var trashY;

var boatX;
var boatY;

var ropelenght = 0;

var movingspeed = 10;

var time;

var score = 0;

let trash = [18];

let boat = [3];

var right = 1;
var left = 2;

var bag = 1;
var beer = 2;
var box = 3;
var coffee = 4;
var deodorant = 5;
var energy = 6;
var jar = 7;
var laundrydetergent = 8;
var milk = 9;
var milkshake = 10;
var paper = 11;
var pizza = 12;
var soda = 14;
var tin = 15;
var tuna = 16;
var waterbottle = 17;

var boati = 1;

var trashi = int(random(0, 18));

let rope = false;

function preload(){
  trash[bag] = loadImage("bag.png");
  trash[beer] = loadImage("beer.png");
  trash[box] = loadImage("box.png");
  trash[coffee] = loadImage("coffee.png");
  trash[deodorant] = loadImage("deodorant.png");
  trash[energy] = loadImage("energy.png");
  trash[jar] = loadImage("jar.png");
  trash[laundrydetergent] = loadImage("laundry detergent.png");
  trash[milk] = loadImage("milk.png");
  trash[milkshake] = loadImage("milkshake.png");
  trash[paper] = loadImage("paper.png");
  trash[pizza] = loadImage("pizza.png");
  trash[soda] = loadImage("soda.png");
  trash[tin] = loadImage("tin.png");
  trash[tuna] = loadImage("tuna.png");
  trash[waterbottle] = loadImage("water bottle.png");



  boat[right] = loadImage("boatright.png");
  boat[left] = loadImage("boatleft.png");
  }

function setup() {
  fullScreen();

  trash[bag].loadPixels();
  trash[beer].loadPixels();
  trash[box].loadPixels();
  trash[coffee].loadPixels();
  trash[deodorant].loadPixels();
  trash[energy].loadPixels();
  trash[jar].loadPixels();
  trash[laundrydetergent].loadPixels();
  trash[milk].loadPixels();
  trash[milkshake].loadPixels();
  trash[paper].loadPixels();
  trash[pizza].loadPixels();
  trash[soda].loadPixels();
  trash[tin].loadPixels();
  trash[tuna].loadPixels();
  trash[waterbottle].loadPixels();
  
  boat[right].loadPixels();
  boat[left].loadPixels();

  trashX = random(0, width);
  trashY = ((height / 2) / 2) * 3;

  boatX = width / 2;
  boatY = (height / 2) / 2;

  
}

function draw() {
    background(0, 105, 148);
  
  trashX= trashX - random(random(-3, -0.1), random(0.1, 3)); trashY = trashY - 1;


        image(trash[trashi], trashX, trashY, 20, 20);

        image(boat[boati], boatX, boatY, 50, 20);

        textSize(32); fill(0); // Fill color black
        text("score:" + score, 40, 80);


        if (rope == true) {
          time = millis();
          if (boati == right) {
            stroke(149, 125, 87);
          line(boatX + 10, boatY + 15, boatX + 10 + ropelenght, boatY + 15);
          ropelenght = ropelenght + 10;
              if (trashX < boatX + 10 + ropelenght && trashY <= boatY + 15 && trashY + 20 >= boatY + 15) {
                score++;
                trashX = random(0, width);
                trashY = ((height / 2) / 2) * 3;
                ropelenght = 0;
                time = 0;
                trashi = int(random(0, 18));
                rope = false;
              }

            }
            if (boati == left) {
              time = millis();
              stroke(149, 125, 87);
          line(boatX, boatY + 15, boatX - ropelenght, boatY + 15);
          ropelenght = ropelenght + 10;
                if (trashX > boatX - ropelenght && trashY <= boatY + 15 && trashY >= boatY + 15) {
                  score++;
                  trashX = random(0, width);
                  trashY = ((height / 2) / 2) * 3;
                  ropelenght = 0;
                  time = 0;
                  trashi = int(random(0, 18));
                  rope = false;
                }
              }
            }
            if (boatX - ropelenght <= 0 || boatX + 10 + ropelenght >= width) {
              ropelenght = 0;
              rope = false;

            }

            if (trashY <= 0) {
              score--;
              trashX = random(0, width);
              trashY = ((height / 2) / 2) * 3;
              ropelenght = 0;
              time = 0;
              trashi = int(random(0, 18));
              rope = false;

            }
  
    if(trashX<=0){
      trashX=0;
    }
  if(trashX>=width){
    trashX= width;
  }
      

          }



          function keyPressed() {
            if (key == 'a') {
              boati = left;
            }
            if (key == 'd') {
              boati = right;
            }
            if (key == ' ') {
              rope = true;
            }
          }

GoToLoop · November 1, 2021, 8:14am

Don’t access p5js API outside functions like you’re doing w/ random().
Instead, just declare the trashi variable globally: var trashi;
And then later initialize it inside setup() callback: trashi = ~~random(18);

This is not how we create an array in JS w/ a pre-defined length.
Use this syntax instead: const trash = Array(18).fill(), boat = Array(3).fill();
Also arrays should have plural names or at least a collective word.
Array indices begin at 0 not 1.
Moreover it seems like your 1st array won’t be filled w/ 18 p5.Image objects but 16.
Same for the 2nd array which I can only spot 2 p5.Image objects being assigned to it.
Another point is that you’re using 18 variables as sorta indices for your 2 arrays.
How about storing them into 2 other arrays?

const
  BOATS = [ 'right', 'left' ],

  TRASHES = [
    'bag',
    'beer',
    'box',
    'coffee',
    'deodorant',
    'energy',
    'jar'.
    'laundry detergent',
    'milk',
    'milkshake',
    'paper',
    'pizza',
    'soda',
    'tin',
    'tuna',
    'water bottle'
  ],

  boats = Array(BOATS.length).fill(),
  trashes = Array(TRASHES.length).fill();

Now that we have all 4 arrays property created our preload() callback will be much shorter:

function preload() {
  const ext = '.png', boat = 'boat';
  var i;

  for (i = 0; i < BOATS.length; boats[i] = loadImage(boat + BOATS[i++] + ext));
  for (i = 0; i < TRASHES.length; trashes[i] = loadImage(TRASHES[i++] + ext));
}

Even within setup() callback you’ll be able to invoke p5.Image.loadPixels() method much easier using for ( of ) loops:

function setup() {
  // ...

  for (const boat of boats)  boat.loadPixels();
  for (const trash of trashes)  trash.loadPixels();

  // ...
}

MoonAlien822 · November 2, 2021, 9:45pm

did i do it properly?

var trashX;
var trashY;

var boatX;
var boatY;

var ropelenght = 0;

var movingspeed = 10;

var time;

var score = 0;

const trash = Array(18).fill(), boat = Array(3).fill();


const
  BOATS = [ 'right', 'left' ], 

  TRASHES = [
  'bag', 
  'beer', 
  'box', 
  'coffee', 
  'deodorant', 
  'energy', 
  'jar', 
  'laundry detergent', 
  'milk', 
  'milkshake', 
  'paper', 
  'pizza', 
  'soda', 
  'tin', 
  'tuna', 
  'water bottle'
  ], 

  boats = Array[BOATS.length].fill(), 
  trashes = Array[TRASHES.length].fill();

var boati = 1;

var trashi;

let rope = false;

function preload() {
  const ext = '.png', boat = 'boat';
  var i;

  for (i = 0; i < BOATS.length; boats[i] = loadImage(boat + BOATS[i++] + ext));
  for (i = 0; i < TRASHES.length; trashes[i] = loadImage(TRASHES[i++] + ext));
}

function setup() {
  fullScreen();
  trashi = ~~random(18);

  for (const boat of boats)  boat.loadPixels();
  for (const trash of trashes)  trash.loadPixels();

  trashX = random(0, width);
  trashY = ((height / 2) / 2) * 3;

  boatX = width / 2;
  boatY = (height / 2) / 2;
}

function draw() {
  background(0, 105, 148);

  trashX= trashX - random(random(-3, -0.1), random(0.1, 3)); 
  trashY = trashY - 1;


  image(trash[trashi], trashX, trashY, 20, 20);

  image(boat[boati], boatX, boatY, 50, 20);

  textSize(32); 
  fill(0); // Fill color black
  text("score:" + score, 40, 80);


  if (rope == true) {
    time = millis();
    if (boati == right) {
      stroke(149, 125, 87);
      line(boatX + 10, boatY + 15, boatX + 10 + ropelenght, boatY + 15);
      ropelenght = ropelenght + 10;
      if (trashX < boatX + 10 + ropelenght && trashY <= boatY + 15 && trashY + 20 >= boatY + 15) {
        score++;
        trashX = random(0, width);
        trashY = ((height / 2) / 2) * 3;
        ropelenght = 0;
        time = 0;
        trashi = int(random(0, 18));
        rope = false;
      }
    }
    if (boati == left) {
      time = millis();
      stroke(149, 125, 87);
      line(boatX, boatY + 15, boatX - ropelenght, boatY + 15);
      ropelenght = ropelenght + 10;
      if (trashX > boatX - ropelenght && trashY <= boatY + 15 && trashY >= boatY + 15) {
        score++;
        trashX = random(0, width);
        trashY = ((height / 2) / 2) * 3;
        ropelenght = 0;
        time = 0;
        trashi = int(random(0, 18));
        rope = false;
      }
    }
  }
  if (boatX - ropelenght <= 0 || boatX + 10 + ropelenght >= width) {
    ropelenght = 0;
    rope = false;
  }

  if (trashY <= 0) {
    score--;
    trashX = random(0, width);
    trashY = ((height / 2) / 2) * 3;
    ropelenght = 0;
    time = 0;
    trashi = int(random(0, 18));
    rope = false;
  }

  if (trashX<=0) {
    trashX=0;
  }
  if (trashX>=width) {
    trashX= width;
  }
}







function keyPressed() {
  if (key == 'a') {
    boati = left;
  }
  if (key == 'd') {
    boati = right;
  }
  if (key == ' ') {
    rope = true;
  }
}

GoToLoop · November 2, 2021, 10:43pm

Oh, so sorry! I’ve used wrong brackets. It’s () instead of [] b/c we’re invoking Array’s constructor:

Fixed it already in my post btW:

B/c we don’t have your 18 image files we can’t test your code and can only help you blindly.

It’d be much easier if you had your sketch and its image assets in some p5js sketch hosting site like this 1 so any1 can run it:

MoonAlien822 · November 3, 2021, 5:23pm

it still does not work as intended.

GoToLoop · November 3, 2021, 6:19pm

Do you remember 1 of the things that I said was:

So these code lines are referring to wrong array names:

  image(trash[trashi], trashX, trashY, 20, 20);
  image(boat[boati], boatX, boatY, 50, 20);

Instead they need to refer to trashes & boats arrays:

  image(trashes[trashi], trashX, trashY, 20, 20);
  image(boats[boati], boatX, boatY, 50, 20);

Also your variable trashi stores trashes[]'s current index.

Therefore you have to make sure to assign a random() value lesser than trashes[]'s length to it:
trashi = ~~random(18); → trashi = ~~random(trashes.length);

Another error, these 2 if () conditions refer to inexistent variables right & left:

  if (boati == right) {
  if (boati == left) {

Following same logic as trashi, variable boati refers to boats[]'s current index.

Given boats[]'s length is just 2, boati should be either 0 or 1:

  if (boati == 0) {
  if (boati == 1) {

Do the same within keyPressed() callback:

  if (key == 'a')       boati = 1;
  else if (key == 'd')  boati = 0;

MoonAlien822 · November 3, 2021, 6:28pm

it’s still not working, did i miss somethign?

MoonAlien822 · November 10, 2021, 3:49pm

I fixed it now. do you know how i can make more trash images appear when your score increases? @GoToLoop

GoToLoop · November 10, 2021, 4:16pm

When you need to have more than 1 object you just create a class to represent a unit of that object.

Topic		Replies	Views
Convert processing to p5js code Coding Questions	1	437	January 27, 2021
P5js to Processing p5.js	1	350	December 4, 2021
Does anyone know how to convert processing to p5.js? Coding Questions	1	249	August 3, 2022
Translate p5js code to processing code? Coding Questions	8	1255	December 11, 2018
Processing code to p5.js code Coding Questions	2	208	August 8, 2022

Help translating p3 to p5js

Related Topics