# Help translating p3 to p5js

**URL:** <https://discourse.processing.org/t/help-translating-p3-to-p5js/33199>\
**Category:** Coding Questions\
**Created:** [October 31, 2021, 9:32pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199 "2021-10-31T21:32:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 31, 2021, 9:32pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/1 "2021-10-31T21:32:36Z")

</div>

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

p5js code:

```auto
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>

```

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 31, 2021, 11:06pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/2 "2021-10-31T23:06:26Z")

</div>

> [@MoonAlien822](#):
>
> What did i do wrong?

> **[reference | p5.js](https://p5js.org/reference/#/p5/preload)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [November 1, 2021, 6:53am UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/3 "2021-11-01T06:53:19Z")

</div>

it still isn’t working

new p5js code:

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 1, 2021, 8:14am UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/4 "2021-11-01T08:14:44Z")

</div>

> [@MoonAlien822](#):
>
> `var trashi = int(random(0, 18));`

- Don’t access [p5js API](https://p5js.org/reference/) 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);`

> [@MoonAlien822](#):
>
> ```auto
> let trash = [18];
> 
> let boat = [3];
> 
> ```

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

```auto
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:

```auto
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:

> **[for...of - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)**
>
> The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), as well...

```javascript
function setup() {
  // ...

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

  // ...
}

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [November 2, 2021, 9:45pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/5 "2021-11-02T21:45:12Z")

</div>

> [@GoToLoop](#):
>
> ```auto
> for (const boat of boats) boat.loadPixels();
> for (const trash of trashes) trash.loadPixels();
> 
> ```

did i do it properly?

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 2, 2021, 10:43pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/6 "2021-11-02T22:43:04Z")

</div>

> [@MoonAlien822](#):
>
> ```auto
> boats = Array[BOATS.length].fill(), 
> trashes = Array[TRASHES.length].fill();
> 
> ```

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

> **[Array() constructor - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array)**
>
> The Array() constructor creates Array objects.

Fixed it already in my post btW: 😌

> [@GoToLoop](#):
>
> ```auto
> boats = Array(BOATS.length).fill(),
> trashes = Array(TRASHES.length).fill();
> 
> ```

> [@MoonAlien822](#):
>
> Did I do it properly?

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

> **[My Sketch - Guest User - OpenProcessing](https://openprocessing.org/sketch/create)**

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [November 3, 2021, 5:23pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/7 "2021-11-03T17:23:55Z")

</div>

it still does not work as intended.

https://openprocessing.org/sketch/1335702/embed/?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 3, 2021, 6:19pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/8 "2021-11-03T18:19:41Z")

</div>

> [@MoonAlien822](#):
>
> It still does not work as intended.

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

> [@GoToLoop](#):
>
> Also arrays should have plural names or at least a collective word.

So these code lines are referring to wrong array names:

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

```

Instead they need to refer to trashes & boats arrays:

```auto
  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_:

```javascript
  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:

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

```

Do the same within **keyPressed()** callback:

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

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [November 3, 2021, 6:28pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/9 "2021-11-03T18:28:48Z")

</div>

it’s still not working, did i miss somethign?  
https://openprocessing.org/sketch/1335702/embed/?

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [November 10, 2021, 3:49pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/10 "2021-11-10T15:49:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 10, 2021, 4:16pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199/11 "2021-11-10T16:16:26Z")

</div>

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