Painting with pixels using PVector

Hi people, I want ths image to be drawn by the forms i created. So they all will start at one point and then expand to all directions. The PVector function gives me the curvature i like them to have while i’m hoping the For loop option and the rotate transformation will make the particle to expand towards the whole sketch.I know there’s an issue with the two last ones but im not sure where to put it.What would you recommend me to do?

Particle[] particles;

PImage frog;
void setup() {
  size(858, 536,P2D);
  frog = loadImage("frog.jpg");

  particles = new Particle [700];
  for (int i = 0; i < particles.length; i++) {
    particles[i] = new Particle();
  }
  background(0);
}

void draw() {
  translate(width/2, height/2);
  for (int i = 0; i < particles.length; i++) {
      //for (int e = 0; e < 5; e++) {
        pushMatrix();
        rotate(i);
    particles[i].display();
    particles[i].move();
    popMatrix();
      }
  }

Here’s my class

class Particle {
  PVector location;
  PVector velocity;
  PVector acceleration;

  Particle() {
 
    location = new PVector(0,0);
    velocity = new PVector(random(0,3),random(0,3));
    acceleration = new PVector(random(0.02),0);    
  }

  void display() {

    noStroke();
    color c = frog.get(int(location.x),int(location.y));
    fill(c,25);
    ellipse(location.x, location.y, 10, 10);
  }

  void move() {
    location.add(velocity);
    velocity.add(acceleration);
  }
  
  void edges() {
    if (location.y < 0) {
      location.y = height;
    } 

    if (location.y > height) {
      location.y = 0;
    }
    if (location.x < 0) {
      location.x = width;
    } 

    if (location.x > width) {
      location.x = 0;
    }
  }
}
1 Like

What is the issue?

What happens falsely and what do you want to happen instead?

What are the 2 last ones? Particles?

1 Like

i changed

  • the for-loop in draw() and
  • the display method in the class
Particle[] particles = new Particle [700];
PImage frog;

void setup() {
  size(858, 536, P2D);
  frog = loadImage("frog.jpg");

  for (int i = 0; i < particles.length; i++) {
    particles[i] = new Particle();
  }
  background(0);
}

void draw() {

  translate(width/2, height/2);
  for (int i = 0; i < particles.length; i++) {
    //for (int e = 0; e < 5; e++) {
    //
    particles[i].display(i);
    particles[i].move();
  }
}

// =================================================

class Particle {
  PVector location;
  PVector velocity;
  PVector acceleration;

  Particle() {
    location = new PVector(0, 0);
    velocity = new PVector(random(0, 3), random(0, 3));
    acceleration = new PVector(random(0.02), 0);
  }

  void display( float angle ) {
    noStroke();
    color c = frog.get(int(location.x), int(location.y));
    fill(c, 25);
    pushMatrix();
    translate(location.x, location.y);
    rotate(angle );
    ellipse(0, 0, 
      10, 10);
    popMatrix();
  }

  void move() {
    location.add(velocity);
    velocity.add(acceleration);
  }

  void edges() {
    if (location.y < 0) {
      location.y = height;
    } 

    if (location.y > height) {
      location.y = 0;
    }
    if (location.x < 0) {
      location.x = width;
    } 

    if (location.x > width) {
      location.x = 0;
    }
  }
}
2 Likes

the issue is that the ellipses in the array arent’ showing the image that i intend to so they aren’t working properly. Therefore, i think the issue comes with the For loop function and the Rotate transformation property which are the two things i was referring to.

i want to make appear the image with the particle of ellipses which starts at one location and then expand to the whole sketch

Ok! let me check this one by the way! Thanks

Yeah, mine is definitely an improvement

You should use translate before rotate and then put ellipse as 0,0

I did that

2 Likes