P5 code into Java + help in understanding (artwork)

p5.js Coding Questions
1

Hi everyone,
for a project I am trying to implement a movement similar to this example in my code.: Shark - OpenProcessing

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

} <

2

Moving_Sand_Still_Shark
Moving_Sand_Still_Shark1920Ă—1038 314 KB

Download (7)
Download (7)1920Ă—1280 63.6 KB

I only need the movement of the shark

3

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

4

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

2 Likes
5

Hi

Read this

1 Like
6

@Hanna
To format your code use preformatted text

Screenshot_2022-10-06-21-58-07-752
Screenshot_2022-10-06-21-58-07-752785Ă—476 71.9 KB

2 Likes
7 
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.

8
1 Like
9

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.

11

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)”

That sketch declares & initializes 2 arrays of datatype PVector[]:

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

And then fill those up using a for ( ; ; ) loop:

  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:

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

Usually in JS we create arrays using the [] syntax, which is empty by default.

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

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

And its corresponding for ( ; ; ) loop is very similar to the Java version:

  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:

2 Likes
12

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!

2 Likes