Help translating p3 to p5js

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

p5js.org/reference/#/p5/preload

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

  // ...
}
2 Likes

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

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

Fixed it already in my post btW: :relieved:

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

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

1 Like

it still does not work as intended.

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;

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

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

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