Perlin Noise Project

Processing Coding Questions
1

Hi!

I found this code on openprocessing.org but I can’t get it to work in Processing. I would like to make my own version of it an be able to change it later on but I can’t start experimenting because I don’t know how to change many things so they work in Processing.

I would really appreciate the help!

var particles_a = [];
var particles_b = [];
var particles_c = [];
var nums =200;
var noiseScale = 800;

function setup(){
	createCanvas(windowWidth, windowHeight);
	background(21, 8, 50);
	for(var i = 0; i < nums; i++){
		particles_a[i] = new Particle(random(0, width),random(0,height));
		particles_b[i] = new Particle(random(0, width),random(0,height));
		particles_c[i] = new Particle(random(0, width),random(0,height));
	}
}

function draw(){
	noStroke();
	smooth();
		for(var i = 0; i < nums; i++){
		var radius = map(i,0,nums,1,2);
		var alpha = map(i,0,nums,0,250);

		fill(69,33,124,alpha);
		particles_a[i].move();
		particles_a[i].display(radius);
		particles_a[i].checkEdge();

		fill(7,153,242,alpha);
		particles_b[i].move();
		particles_b[i].display(radius);
		particles_b[i].checkEdge();

		fill(255,255,255,alpha);
		particles_c[i].move();
		particles_c[i].display(radius);
		particles_c[i].checkEdge();
	}  
}


function Particle(x, y){
	this.dir = createVector(0, 0);
	this.vel = createVector(0, 0);
	this.pos = createVector(x, y);
	this.speed = 0.4;

	this.move = function(){
		var angle = noise(this.pos.x/noiseScale, this.pos.y/noiseScale)*TWO_PI*noiseScale;
		this.dir.x = cos(angle);
		this.dir.y = sin(angle);
		this.vel = this.dir.copy();
		this.vel.mult(this.speed);
		this.pos.add(this.vel);
	}

	this.checkEdge = function(){
		if(this.pos.x > width || this.pos.x < 0 || this.pos.y > height || this.pos.y < 0){
			this.pos.x = random(50, width);
			this.pos.y = random(50, height);
		}
	}

	this.display = function(r){
		ellipse(this.pos.x, this.pos.y, r, r);
	}
}

this is the link to the original and what I would need it to look like: https://www.openprocessing.org/sketch/494102#

Edit:
this is my code so far:

ArrayList<Particle> particles_a = new ArrayList<Particle>();
ArrayList<Particle> particles_b = new ArrayList<Particle>();
ArrayList<Particle> particles_c = new ArrayList<Particle>();
int nums = 200;
int noiseScale = 800;



void setup() {
  fullScreen();
  background(21, 8, 50);
  for(int i = 0; i < nums; i++){
  particles_a.add(new Particle(random(0,width),random(0,height)));
  particles_b.add(new Particle(random(0,width),random(0,height)));
  particles_c.add(new Particle(random(0,width),random(0,height)));
  }
}
 
void draw() {
  noStroke();
  smooth();
    for(int i = 0; i < particles_a.size(); i++){
    float alpha = map(i,0,nums,0,250);
    
    fill(69,33,124, alpha);
    Particle part_a = particles_a.get(i);
    part_a.display();
    part_a.bewegen();
    part_a.checkEdge();
    
    fill(7,153,242, alpha);
    Particle part_b = particles_b.get(i);
    part_b.display();
    part_b.bewegen();
    part_b.checkEdge();
    
    fill(255,255,255, alpha);
    Particle part_c = particles_c.get(i);
    part_c.display();
    part_c.bewegen();
    part_c.checkEdge();
  }
}

class Particle {
  PVector richtung;
  PVector geschwindigkeit;
  PVector ort;
  float tempo;
  
  Particle(float x, float y) {
    richtung = new PVector(0,0);
    geschwindigkeit = new PVector(0,0);
    ort = new PVector(x,y);
    tempo = 1;
  } 
  

  void bewegen() {
    float angle = noise(ort.x/noiseScale, ort.y/noiseScale)*TWO_PI*noiseScale;
    richtung.x = cos(angle);
    richtung.y = sin(angle);
    geschwindigkeit = richtung.copy();
    geschwindigkeit.mult(tempo);
    ort.add(geschwindigkeit);
  }
  
  void checkEdge() {
    if(ort.x > width || ort.x < 0 || ort.y > height || ort.y < 0){
      ort.x = random(50,width);
      ort.y = random(50,height);
    }
  }
  
  void display() {
    for(int i = 0; i < nums; i++){
    float radius = map(i, 0, nums, 1,2);
    ellipse(ort.x, ort.y, 5, 5);
    } 
  }
}

I don’t know how to make the .display(radius) works or what that does and in the display void in the original code it says “r” for the height and width of the ellipse and idk what that does or how I can make it work.

2

Okay, so you know that the openprocessing version is p5.js, and that you are adapting it to Processing(Java).

In your particle class, the original takes an argument, r, and draws a single ellipse:

    this.display = function(r){
		ellipse(this.pos.x, this.pos.y, r, r);
	}

Your version does not take an argument, and contains a loop for some reason:

  void display() {
    for(int i = 0; i < nums; i++){
    float radius = map(i, 0, nums, 1,2);
    ellipse(ort.x, ort.y, 5, 5);
    } 
  }

…so if you are trying to adapt the first into the second, the second needs to take a radius argument and draw one ellipse. Does that help?

If you are not familiar with classes and how instance and its methods represent a single object (a single particle) then you might want to check out:

https://processing.org/tutorials/objects/

and

https://processing.org/examples/simpleparticlesystem.html

1 Like
3

Thank you very much for your help!

Yes i have seen that but i don’t quite understand what this argument does and how i can achieve the same thing in processing.

Could you tell me how I can make it take a radius argument?

Thanks so much again!

Michael

4

It seems like you don’t know what functions or method are, or how they take arguments.

If you haven’t gone through the basic tutorials, I just want to warn you that this is a quite advanced project to start with.

https://processing.org/examples/functions.html

https://processing.org/reference/parentheses.html

in both JavaScript p5.js and Java Processing, a function or method may be defined with arguments. Those arguments may be typed – in Java they must be:

returntype functionname ( type name, type name, type name...) {
  // do something
  // and if you have a return type
  return returnname;
}

so:

void display(float r) {
   // do something -- one of our variables is "r"
   // no return, because our return type is "void" (nothing)
}

// call this function:
myr = 1.23;
display(myr);
display(3.14);
// call this method:
Particle p = new Particle();
p.display(4.56);
1 Like