Processing using angles

Question

Hi: I'm trying to use angles in my code but am very unclear on how to use them as variables. I want to make this tree root-looking sketch and need this last piece to complete it.

The error occurs in this for loop in the draw function. I'd like the angle to change on each frame, as well as the color to provide dimension. Here is the for loop:

 for (int x=0; x<width; x++) {
      angle=0;
      pins (int p=>angle+=atan2(p.y-y, p.x-x));
      color=map(sin(angle), -1, 1, 0, 256);
      stroke(color);
      line(int x, int y, int x, int y+color);
    }

This is my full code below.

float[] pins= new float[0];
float pins_num= 150;
float y, x;

void setup (){
  size(1920, 1080);
  float y=0;
  for (int i=0; i<pins_num; i++ ) {
    pins[i]=createVector(random(width), random(height));
  }
}

void draw (){
  if (y<height) {
    for (int x=0; x<width; x++) {
      angle=0;
      pins (int p=>angle+=atan2(p.y-y, p.x-x));
      color=map(sin(angle), -1, 1, 0, 256);
      stroke(color);
      line(int x, int y, int x, int y+color);
    }
    y++
  }
}

Answer 1

It seems you've mixing p5.js (createVector , int p=>angle...) syntax and Processing syntax. If you're porting a p5.js sketch to Processing you should include the original p5.js code in your question as well.

A few things that stand out:

• float[] pins= new float[0]; looks like a static array storing a single float value, however pins[i]=createVector(random(width), random(height)); implies it should be a PVector array, for example: PVector[] pins= new PVector[pins_num];
• float pins_num= 150; is declared/initialsed after pins: I suspect the intention was to use this as size of the pins array and it should be added before the pins array.
• y,x are declared at the top as floats, however, incremented as a integers in draw(x++, y++).
• pins (int p=>angle+=atan2(p.y-y, p.x-x)); looks really confusing. Maybe the intension is to access each pin (maybe it was pins.forEach in js) and increment angle with the the rotation between each random PVector allocated in setup() and current x,y location (top to bottom) ? Something like: for(PVector p : pins) angle += atan2(p.y-y, p.x-x); in Processing (Java)
• color=map(sin(angle), -1, 1, 0, 256); this looks like p5.js, in Processing you need to use both a variable type and the name (not just the type) (and minor details, the range for colors is 0 to 255, not 0 to 256 (as that adds up to 256 values in to total, starting the count at 0, not at 1). In Processing this could look like: color mappedColor = color(map(sin(angle), -1.0, 1.0, 0, 255));
• line(int x, int y, int x, int y+color); looks like you tried to add variable types (as you do in Processing vs p5.js), however, you only need to specify the types when you declare a function, not when you call it. This should be line(x, y, x, y + color);

It's a bit of a wild guess, but inferring only from existing code, a fully ported Processing version of your code might look like this:

int numPins = 150;
PVector[] pins= new PVector[numPins];
int x, y;

void setup () {
  size(1920, 1080);
  for (int i = 0; i < numPins; i++ ) {
    pins[i] = new PVector(random(width), random(height));
  }
}

void draw () {
  float angle = 0;
  if (y < height) {
    for (int x = 0; x < width; x++) {
      for(PVector p : pins) angle += atan2(p.y-y, p.x-x);
      color mappedColor = color(map(sin(angle), -1.0, 1.0, 0, 255));
      stroke(mappedColor);
      line(x, y, x, y + mappedColor);
    }
    y++;
  }
}