# Center to mouseX,Y with storing

**URL:** <https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533>\
**Category:** Coding Questions\
**Created:** [June 3, 2020, 7:22pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533 "2020-06-03T19:22:48Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 3, 2020, 7:22pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/1 "2020-06-03T19:22:48Z")

</div>

Hi there! I am trying to draw a shape which starts from the center and expands the radius untill the mouse coursore. I am also storing the valuse so I can have it fading into the infinity.  
I managed to do everything, except that I cannot figure out how to make it stick to the center and expand from there to the coursore… Can anyone help?  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72d1e33be09972458cd31764c171b9de1c53a8ac.png)

```auto
int x;
int y;
int numPoints = 5;

int num = 60; // numbers
float mx[] = new float[num]; //array of numbers X
float my[] = new float[num]; //array of numbers Y

void setup() {
  size(640, 360);
  noFill();
  stroke(255,0,0); 
  
  x = width/2;
  y = height/2;
}

void draw() {
  background(51); 
  
    float angle = 0;
    float angleStep = 180.0/numPoints;
    
    
  int which = frameCount % num;
  mx[which] = x+mouseX; // here is the problem
  my[which] = y+mouseY; // how to expand it from the center to the mouseXY?
  
  for (int i = 0; i < num; i++) {
    int index = (which+1 + i) % num;
    
    beginShape(TRIANGLE_STRIP);
    for (int j = 0; j <= numPoints; j++) {
      float px = mx[index] + cos(radians(angle)) * i; 
      float py = my[index] + sin(radians(angle)) * i;
      angle += angleStep;      
      vertex(px,py);
    }
    endShape();
    
  }
}

```

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 3, 2020, 11:38pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/3 "2020-06-03T23:38:35Z")

</div>

So far like this:

```auto
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];

void setup() {
  size(640, 360);
  noFill();
  stroke(255, 153); 
}

void draw() {
  background(51); 
  
    int numPoints = 8;
    float angle = 0;
    float angleStep = 180.0/numPoints;
  
  // Cycle through the array, using a different entry on each frame. 
  // Using modulo (%) like this is faster than moving all the values over.
  int which = frameCount % num;
  mx[which] = mouseX;
  my[which] = mouseY;
  
  for (int i = 0; i < num; i++) {
    // which+1 is the smallest (the oldest in the array)
    int index = (which+1 + i) % num;
    //ellipse(width/2, height/2, mx[index], my[index]);
    
    beginShape(TRIANGLE_STRIP);
    for (int j = 0; j <= numPoints; j++) {
      float px = width/2 + cos(radians(angle)) * mx[index];
      float py = height/2 + sin(radians(angle)) * my[index];
      angle += angleStep;
      vertex(px,py);
    }
    endShape();
  }
}

```

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 4, 2020, 12:47am UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/4 "2020-06-04T00:47:46Z")

</div>

> [@mrbro](#):
>
> `numPoints`

How can I change numPoints so it smoothly changes with the gradient of stored shapes?

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 4, 2020, 1:23am UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/5 "2020-06-04T01:23:02Z")

</div>

I think to answer your original question, you want to consolidate `mx` and `my` into one array `m` and set it equal to `dist(mouseX,mouseY,width*0.5,height*0.5)`.

This will adjust the scale of your shape to be relative to the location of the mouse.

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 5, 2020, 12:59am UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/6 "2020-06-05T00:59:18Z")

</div>

could you show me how?

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 5, 2020, 1:57am UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/7 "2020-06-05T01:57:23Z")

</div>

> [@mrbro](#):
>
> could you show me how?

https://editor.p5js.org/slow_izzm/embed/3NA36AhA6

> **[p5.js Web Editor](https://editor.p5js.org/slow_izzm/sketches/3NA36AhA6)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 6, 2020, 6:46pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/8 "2020-06-06T18:46:12Z")

</div>

woah looks good! thank you! ^^,

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 6, 2020, 8:23pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/9 "2020-06-06T20:23:33Z")

</div>

> [@mrbro](#):
>
> `ch+1 is the smallest (the oldest in the array)`

So following your code, and tutorials on arrays, I am trying to make this topic more clear for myself…

In order to dynamically change the number of polygons (for example randomly), I am doing the following:

I create a new array before void setup

```auto
int numbers[] = new int[num];

```

Which means that I will have an array length = the num value.

Now I need to fill each index of the array with different amaount of polygons

in **void draw** :

```auto
int numPoints = round(random(3,6)); //dynamically change the numPoints
int idx = frameCount % num;
numbers[idx] = numPoints;

```

to cycle through the array indexes (each frame = each index = curren numPoints).

then build the shapes based on stored polygons:

```auto
  for (int i = 0; i < num; i++) {
    int n_idx = (idx + 1 + i) % num; // /idx+1 is the smallest (the oldest in the array)
    beginShape(TRIANGLE_STRIP);
    for (int j = 0; j <= numbers[n_idx]; j++) {
      float px = (width * 0.5) + cos(radians(angle)) * mouse[m_idx];
      float py = (height * 0.5) + sin(radians(angle)) * mouse[m_idx];
      angle += angleStep;
      vertex(px, py);
    }
    endShape();
  }

```

but, somehow, this does not work as I am intended :C  
it is still redrawing all the shapes at the same time, and does not store the old shapes…  
Could you please please advice on what am I doing wrong here?

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 6, 2020, 9:03pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/10 "2020-06-06T21:03:23Z")

</div>

> [@mrbro](#):
>
> `mouse[m_idx]`

At a glance … is this a typo? Should it be `n_idx`?

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 6, 2020, 9:30pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/11 "2020-06-06T21:30:00Z")

</div>

I still have m\_idx, I just didn’t include it in the post…  
here is a full code:

```auto
int num = 60;
int a = 0;

float mouse[] = new float[num];

int numbers[] = new int[num]; // type name[create array] =store= new type[how long is it]
//rn the array has "num" length, filled entirely with zeros 0
// numbers[4] = 100 - [index in the list] = now equals 100

//i need an array length = num, but filled with different numPoints values {5,6,7,4,3,8}
//so I dont need to create an array numPoints...

void setup() {
  size(640, 640);
  noFill();
}

void draw() {
  stroke(200, a);
  background(3, 7, 11);

int numPoints = round(random(3,6)); //dynamically change the numPoints
  float angle = 0;
  float angleStep = 180.0 / numPoints;
float ptx[] = new float[numPoints];
float pty[] = new float[numPoints];
  //cycle through the array (indexes), using a different entry on each frame
  int idx = frameCount % num; //array index = framecount % num (% - reminder of what is left after division)
  mouse[idx] = dist(mouseX, mouseY, width * 0.5, height * 0.5); //each frame = each index in the list = new values

numbers[idx] = numPoints; //each frame = each index = new value
int pts = frameCount % numPoints;
  for (int i = 0; i < num; i++) {
    int m_idx = (idx + 1 + i) % num; //idx+1 is the smallest (the oldest in the array)
    
int n_idx = (idx + 1 + i) % num;

    beginShape(TRIANGLE_STRIP);
    for (int j = 0; j <= numbers[n_idx]; j++) {
      float px = (width * 0.5) + cos(radians(angle)) * mouse[m_idx];
      float py = (height * 0.5) + sin(radians(angle)) * mouse[m_idx];
      angle += angleStep;
      ptx[pts] = px;
      pty[pts] = py;
      vertex(ptx[pts], pty[pts]);
    }
    endShape();
  }

  a -= 2;
}

void mouseMoved() {
  a = 150;
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 6, 2020, 10:47pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/12 "2020-06-06T22:47:46Z")

</div>

I’m not sure. In my mind I feel that this should work …

```auto
let idx = frameCount % 60;
    nums[idx] = int(random(8,32));

```

in your nested loop

```auto
for (let j = 0; j <= nums[i]; j++) {

```

doesn’t seem to be working either.

I tried storing each shape in an array of graphics buffers thinking that your shapes are too close together to see the difference in number of points, but they all seem to be the same. 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![mrbro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbro/32/8485_2.png) [@mrbro](https://discourse.processing.org/u/mrbro)\
**Post date:** [June 6, 2020, 11:35pm UTC](https://discourse.processing.org/t/center-to-mousex-y-with-storing/21533/13 "2020-06-06T23:35:32Z")

</div>

Thank you so much for your time! I think I need a new [topic](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635) for this issue.