# P5 code into Java + help in understanding (artwork)

**URL:** <https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 7, 2022, 8:02pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145 "2022-10-07T20:02:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 7, 2022, 8:02pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/1 "2022-10-07T20:02:01Z")

</div>

Hi everyone,  
for a project I am trying to implement a movement similar to this example in my code.: [Shark - OpenProcessing](https://openprocessing.org/sketch/1342287)

Unfortunately, the code is written in P5 and I work in Java. Can someone help me to rewrite the code for Java and maybe explain which part of the code is for which purpose?

So I can understand which parameters I can change to change the code and the look.

I am still very new and inexperienced in the program and appreciate any help.

Thanks a lot

> let angle = 0;  
> let changeangle = 0.01;

p5.disableFriendlyErrors = true;

var img,  
particles = ;

const pixelStep = 10;

var x=0  
var y=0

function preload(){  
img = loadImage(“HADTODELETTHELINK”);  
}

function setup(){

```
createCanvas(1200,800);

img.resize(width, height);
for(let x = 0; x < img.width; x += pixelStep){
	for(let y = 0; y < img.height; y += pixelStep){
		particles.push(new Particle(x+(width-img.width)/2,y+(height-img.height)/4,img.get(x,y)));
	}
}
noStroke();

```

}

function draw(){  
angleMode(DEGREES);  
background(0,0,0,3)  
for (let i=0; i\<9999; i++){  
x+=5  
if (x\>width) {  
y+=5;x=0  
}  
if (y\>height) {  
y=0;x=0  
}  
}

```
for(let particle of particles){

	particle.draw();
	particle.pos.add(particle.vel);
	particle.vel.div(1.1);
	particle.vel.add(p5.Vector.sub(particle.target,particle.pos).div(20));
	const d = dist(particle.pos.x,particle.pos.y,x,y);
	particle.vel.x += (particle.pos.x - x) / d;
	particle.vel.y += (particle.pos.y - y) / d;
}

```

}

class Particle {  
constructor(x,y,color){  
this.col = color;  
this.pos = new p5.Vector(x,y);  
this.vel = new p5.Vector();  
this.target = this.pos.copy();  
}

```
draw(){
	fill(this.col);
	ellipse(this.pos.x,this.pos.y,pixelStep,pixelStep);
}	

```

} \<

---

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 7, 2022, 8:03pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/2 "2022-10-07T20:03:09Z")

</div>

![Moving_Sand_Still_Shark](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/e/ae66209b5ff9606d28f4ea5b3dbd5b2e741d86f3.png)  
 ![Download (7)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/e/4e1fdebe8afbac48f22c1d97a8059d2426fcb4b7.jpeg)

I only need the movement of the shark

---

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 7, 2022, 8:39pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/3 "2022-10-07T20:39:25Z")

</div>

Or is there a simple way to create a similar effect?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 7, 2022, 8:45pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/4 "2022-10-07T20:45:46Z")

</div>

Your 3rd post, copying someone else’s code

- Without showing YOUR attempt

- Without correct formatting of code lines

Is this homework of sort?

Please try it yourself first

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 7, 2022, 10:13pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/5 "2022-10-07T22:13:10Z")

</div>

Hi

Read this

> [@Convert p5js to Processing](https://discourse.processing.org/t/convert-p5js-to-processing/29893):
>
> could anyone help me converting this code into Processing please? thanks

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 7, 2022, 10:16pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/6 "2022-10-07T22:16:23Z")

</div>

@Hanna  
To format your code use preformatted text

 ![Screenshot_2022-10-06-21-58-07-752](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/b/6bcf98af246fb323b199ea5ecb5bcbcf9bddaa71.jpeg)

---

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 8, 2022, 11:30am UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/7 "2022-10-08T11:30:37Z")

</div>

```auto
float f, t;
float W, H;
PImage shark;
int ang = 0;
int cang = 0.01;

float shark,
    particles = [];

float pixelStep = 10;

var x=0
var y=0

void setup () {
  size(1000, 1000);
  W=width;
  H=height;
  stroke(#A08447);
  f=2;
  strokeWeight(f);
  shark = loadImage("shark_smal.png");
  
  for(int ang = 0; x < shark.width; x += pixelStep){
    for(int cang = 0; y < shark.height; y += pixelStep){
      particles.push(new Particle(x+(width-shark.width)/2,y+(height-shark.height)/4,shark.get(x,y)));
    }
  }
}

void draw () {
  clear();
  background(#766132);
  
  //SAND BACKGROUND FUNCTION NOTHING CHANGED
  t=map(sin((f+=0.01)), -1, 1, 60, 200);
  float TAU=TWO_PI;
  for (int y=0; y<H; y+=3) {
    for (int x=0; x<W; x+=3) {
      float r=noise(x/W, y/H - f) *t;
      point(cos(r)*TAU+x, sin(r)*TAU+y);
      
    }
  }

//PLACEMENT OF THE IMAGE IN THE FRAME
  image(shark, 270, 200
  
// HERE THE EFFECT SHOULD BE ADDED TO THE IMAGE

  degrees();
  for (int i=0; i<9999; i++){
      x+=5
  if (x>width) {
    y+=5;x=0
  }
  if (y>height) {
    y=0;x=0
  } 
}

  
  for(let particle of particles){

    particle.draw();
    particle.pos.add(particle.vel);
    particle.vel.div(1.1);
    particle.vel.add(PVector.sub(particle.target,particle.pos).div(20));
    const d = dist(particle.pos.x,particle.pos.y,x,y);
    particle.vel.x += (particle.pos.x - x) / d;
    particle.vel.y += (particle.pos.y - y) / d;
  }
  
}

class Particle {
  constructor(x,y,color){
    this.col = color;
    this.pos = new PVector(x,y);
    this.vel = new PVector();
    this.target = this.pos.copy();
  }
  
  draw(){
    fill(this.col);
    ellipse(this.pos.x,this.pos.y,pixelStep,pixelStep);
  }  
}
}

```

Yes, that’s right. I have not shown how I try. Maybe because I’m a bit embarrassed. So at the moment I’m trying it like this. However, I only get error messages and it doesn’t really work. I would also be happy with a simpler solution that lets the image of the shark do something. I just haven’t come across anything yet that could help me.

---

<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 8, 2022, 11:35am UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/8 "2022-10-08T11:35:33Z")

</div>

> [@Convert p5.js to Processing](https://discourse.processing.org/t/convert-p5-js-to-processing/944):
>
> Is there any easy way to convert p5.js code to processing (java)?

---

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 8, 2022, 11:45am UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/9 "2022-10-08T11:45:36Z")

</div>

I’m trying to work with that right now, but I can’t really figure it out. Unfortunately, I don’t really understand the connections between the individual code components at the moment.

---

<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 8, 2022, 12:32pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/11 "2022-10-08T12:32:36Z")

</div>

> [@Hanna](#):
>
> I don’t really understand the connections between the individual code components at the moment.

I suspect your main issue is understanding how to convert JS arrays to Java 1s.

As an example, take a look at this Java flavor sketch: [“Conglomerate of Points (Java)”](http://studio.processingtogether.com/sp/pad/export/ro.9lMOG-RZX8JDk)

That sketch declares & initializes 2 arrays of datatype [PVector[]](https://processing.org/reference/PVector.html):

```auto
final PVector[] points = new PVector[QTY], tPoints = new PVector[QTY];

```

And then fill those up using a [`for ( ; ; )`](https://processing.org/reference/for.html) loop:

```auto
  for (int i = 0; i < QTY; ++i) {
    points[i] = new PVector(random(width), random(height));
    tPoints[i] = new PVector(random(width), random(height));
  }

```

Now let’s take a look at its corresponding p5js flavor conversion: “Conglomerate of Points (p5js)”  
`http://p5js.SketchPad.cc/sp/pad/view/ro.$V3VWYDTmRb/latest`

And the syntax being used for declaring & initializing those 2 arrays in JS:

```auto
const points = Array(QTY).fill(), tPoints = Array(QTY).fill();

```

Usually in JS we create arrays using the [`[]`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#array_literal_notation) syntax, which is empty by default.

But JS also offers the Array constructor, where we can specify its initial _length_:

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

Method **fill()** merely solidifies the array by filling it up w/ an optional specified value:

> **[Array.prototype.fill() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)**
>
> The fill() method of Array instances changes all elements within a range of indices in an array to a static value. It returns the modified array.

And its corresponding [`for ( ; ; )`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) loop is very similar to the Java version:

```auto
  for (let i = 0; i < QTY; ++i) {
    points[i] = createVector(random(width), random(height));
    tPoints[i] = createVector(random(width), random(height));
  }

```

For a more complete tutorial about Java arrays please read this:

> **[Arrays](https://processing.org/tutorials/arrays/#array-of-objects)**
>
> How to store and access data in array structures.

---

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 8, 2022, 1:25pm UTC](https://discourse.processing.org/t/p5-code-into-java-help-in-understanding-artwork/39145/12 "2022-10-08T13:25:40Z")

</div>

Thank you very much! That helped me a lot. I’m keeping the functions a bit simpler now to try to understand the basis. to do this, I’ve adapted some new code. I will mark this topic as solved and open my new question ( since it is new code) in a new topic.

Thank you very much!