# Storing points to create gradient of shapes

**URL:** <https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635>\
**Category:** Coding Questions\
**Created:** [June 6, 2020, 11:34pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635 "2020-06-06T23:34:47Z")\
**Posts on this page:** 9\
**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 6, 2020, 11:34pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/1 "2020-06-06T23:34:47Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6d22c4efad41ef6509d08bb52f68bf9136afa1e0.jpeg)

Hi There!  
So I am trying to create a smooth gradation of polygons using **storing**.  
I need to dynamically change the amount of points and store them to fade consequently.  
However, the code changes all the polygons at the same time…

Bellow is the full code, underneeth it - I highlighted the key moments:

```auto
int num = 60; // amnt of storing data
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;
}

```

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.  
The num here is the amount of stored data.

Now I need to fill each index of the array with different amount 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 as I previously mentioned, it changes all the geometries at once, and does not store the old shapes :C  
Could someone please please advice on what am I doing wrong?

p.s. Thank you @ [slow\_izzm](https://discourse.processing.org/u/slow_izzm) for previously helping with the storing radiuses!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [June 7, 2020, 1:45am UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/2 "2020-06-07T01:45:15Z")

</div>

I got your code to run, but I don’t think I understand what you’re trying to achieve; can you provide a bit more explanation of the behavior you’re going for?

---

<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 7, 2020, 1:59am UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/3 "2020-06-07T01:59:28Z")

</div>

hi Tony!

Sure.  
I build the polygon geometry based on amnt of points.  
I need to change the point numbers dynamically.  
So I want it to gradually fade into infinity constantly changing the geometry.  
Right now I have a “tunnel” of polygons that are being changed simultaneously.  
However, I need to change them consequently.  
To make a sort of gradual and organic change of shape.

Sorry if my English isnt perfect, I am trying my best 🙂

---

<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 7, 2020, 4:29pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/4 "2020-06-07T16:29:40Z")

</div>

Any thoughts? :((  
Maybe I need to store the polygons somehow

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [June 8, 2020, 6:39pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/5 "2020-06-08T18:39:42Z")

</div>

I think you’re right.

It sounds like you want each polygon to fade independent of the others.

Right now, “a” is being applied to all the polygons. So you might have to creat a Polygon Object each with their own alpha. They will have to individually be created and then updated consecutively.

---

<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 9, 2020, 8:30pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/6 "2020-06-09T20:30:51Z")

</div>

Thank you for your reply!

Can you give me any hint on how could I do that? I am not very profound…yet 🙂  
Should I create some new class?  
Meantime, I will try to make it by my own, and post here if I succseed 🙂

---

<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:** [July 31, 2020, 5:58pm UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/7 "2020-07-31T17:58:25Z")

</div>

Here is my attempt to create a Polygon Object…  
I have just started to understand how to write object-oriented stuff, but my code has a lot of issues…  
Can I, please, get some help with that?

```auto
//DECLARE OBJECTS
Obj myObj1;

int num = 60; // amnt of storing data
int a = 0;
float mouse[] = new float[num]; 
int numbers[] = new int[num]; //the array has "num" length, filled entirely with zeros 0

void setup() {
  size(600,600);
  background(255);
}

void draw() {
  stroke(200, a);
  background(3, 7, 11);
  
  //CREATE OBJECTS WITH PARAMETERS:
  myObj1 = new Obj(a,ptx[pts],pty[pts]); //color, num of polygons X, num of polygons Y
  
  int numPoints = round(random(3,6)); //dynamically change the numPoints for each object
  
  //CALL THE OBJECT FUNCTIONS
  myObj1.drive();
  myObj1.display();
  
  a -= 2; //dynamically fade each object
}

class Obj { 
  //DATA:
  float c;
  int number;
  
  //CONSTRUCTOR + ARGUMENTS(temp):
  Obj(color tempC, int tempNumber) { //color, num of polygons
    c = tempC;
    number = tempNumber;
  }
  
  //FUCTIONALITY:
  void display() {
    noFill();
    stroke(c);
    
      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();
      }
  }
  
  void drive() {
    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;
  }
}
  

```

Basically I need to create a **num** amount of objects, that will fade just like before, but each object will have a unique amount of polygons.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 2, 2020, 1:27am UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/8 "2020-08-02T01:27:00Z")

</div>

> [@mrbro](#):
>
> Can I, please, get some help with that?

https://www.youtube.com/embed/videoseries?list=PLRqwX-V7Uu6bb7z2IJaTlzwzIg_5yvL4i&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1

> **[Objects](https://processing.org/tutorials/objects/)**
>
> The basics of object-oriented programming.

> **[class / Reference](https://processing.org/reference/class.html)**
>
> Keyword used to indicate the declaration of a class. A class is a composite of fields (data) and methods (functions that are a part of the class) which may be instantiated as objects. The first lette…

> **[Object / Reference](https://processing.org/reference/object)**
>
> Objects are instances of classes. A class is a grouping of related methods (functions) and fields (variables and constants).

`:)`

---

<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:** [August 2, 2020, 9:14am UTC](https://discourse.processing.org/t/storing-points-to-create-gradient-of-shapes/21635/9 "2020-08-02T09:14:18Z")

</div>

i saw all of those, thank you