# Center to mouseX,Y with storing

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?

``````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();

}
}
``````
1 Like

So far like this:

``````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();
}
}
``````

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

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.

2 Likes

could you show me how?

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

2 Likes

woah looks good! thank you! ^^,

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

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

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

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

1 Like

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

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

``````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;
}
``````
1 Like

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

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

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