How to manipulate one shape or other p5 objects in another place

p5.js Beginners
1

I have checked out the Reference and Examples roundly, now I find that it is difficult to manipulate p5 objects in another place(only can manipulate them in where they are be defined).
For example:

function draw() {
  stroke("red");
  fill("blue");
  ellipse(100,100,100,100);
}

after 1000 rows codes, I want to change the fillColor and strokeColor of the ellipse, how can I do that? And another question is that if the ellipse is defined in the setup() function, how can I manipulate it in other functions?

Looking forward reply.

2

You’re not defining anything. You’re simply drawing one.

You could define them by using some variables. Consider:

color ellipse_0_stroke_color = color(255,0,0);
color ellipse_0_fill_color = color(0,0,255);
int ellipse_0_size = 100;

void setup(){
  size(600,400);
}

void draw(){
  background(0);
  stroke(ellipse_0_stroke_color);
  fill(ellipse_0_fill_color);
  ellipse(100,100,ellipse_0_size,ellipse_0_size);
}
1 Like
3

You can make a class to represent it, so you can easily change its properties:

class ColorBall {
  constructor(x = 100, y = 100, diam = 100, border = 'red', paint = 'blue') {
    this.x = x, this.y = y, this.diam = diam;
    this.border = border, this.paint = paint;
  }

  display() {
    const { x, y, diam, border, paint } = this;
    stroke(border).fill(paint).circle(x, y, diam);
  }
}
2 Likes