# Painting with pixels using PVector

**URL:** <https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829>\
**Category:** Coding Questions\
**Created:** [October 20, 2019, 4:28pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829 "2019-10-20T16:28:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseBri93](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@JoseBri93](https://discourse.processing.org/u/JoseBri93)\
**Post date:** [October 20, 2019, 4:28pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/1 "2019-10-20T16:28:19Z")

</div>

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?

```auto
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

```auto
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;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 20, 2019, 6:53pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/2 "2019-10-20T18:53:02Z")

</div>

> [@JoseBri93](#):
>
> I know there’s an issue with the two last ones

What is the issue?

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

What are the 2 last ones? Particles?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 20, 2019, 7:02pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/3 "2019-10-20T19:02:58Z")

</div>

i changed

- the for-loop in draw() and
- the display method in the class

```auto
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;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![JoseBri93](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@JoseBri93](https://discourse.processing.org/u/JoseBri93)\
**Post date:** [October 20, 2019, 8:18pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/4 "2019-10-20T20:18:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JoseBri93](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@JoseBri93](https://discourse.processing.org/u/JoseBri93)\
**Post date:** [October 20, 2019, 8:20pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/5 "2019-10-20T20:20:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 20, 2019, 8:38pm UTC](https://discourse.processing.org/t/painting-with-pixels-using-pvector/14829/6 "2019-10-20T20:38:20Z")

</div>

Yeah, mine is definitely an improvement

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

I did that