# Need help with other assigned variables

**URL:** <https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 23, 2021, 12:14am UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569 "2021-04-23T00:14:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 23, 2021, 12:14am UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/1 "2021-04-23T00:14:30Z")

</div>

I really need help with this one. This is how it turned out so far but it would be very nice to add buttons that can align different colored cells according to X,Y,height and width . Also an option to save the grid as a jpeg with a button ,with an option to turn the grid around 90 degrees each time a new slider moves between the values (1-4). I couldn’t come up with a solution to implement all of variables. Any help is greatly appreciated.

```auto
import controlP5.*;
ControlP5 gui;
int cell = 4;
color col1;
color col2;
int[] Rand = new int[1000];

void setup()
{
  size(800,600);
  background(255);
  gui= new ControlP5(this);
  gui.addSlider("cell")
  .setPosition(640,50)
  .setRange(1,20)
  ;
  gui.addColorWheel("col1",640,100,120).setRGB(color(0,45,90));
  gui.addColorWheel("col2",640,260,120).setRGB(color(0,45,90));
  for(int i=0; i <1000;i++)
  {
    Rand[i] = int(random(2));
  }
}

void draw()
{
  noStroke();
  fill(200,50);
  rect(600,0,200,height);
  fill(255);
  rect(0,0,600,height);
  int counter=0;
  for(int j=0;j<cell;j++)
  {
    for(int i=0;i<cell;i++)
    {
      if (Rand [counter] >=1)
      { fill (col1);
        counter++;
   }
      else if(Rand[counter] <=1)
      {fill(col2);
       if (counter< 1000){ counter++;}
  }
      rect(i*(600/cell),j*(600/cell),(600/cell)-5,(600/cell)-5);
    } 
  }
  counter=0;
}``

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 23, 2021, 9:12am UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/2 "2021-04-23T09:12:22Z")

</div>

Hi! First of all please use `</>` button to format your code 🙂

> it would be very nice to add buttons that can align different colored cells according to X,Y,height and width .

I don’t quite get what you mean. How many buttons you need? Can you draw something to illustrate it?

> Also an option to save the grid as a jpeg with a button ,with an option to turn the grid around 90 degrees each time a new slider moves between the values (1-4).

I don’t get this either. I understand the first part, which you want to make a button to save the screen as an image. Perhaps you want to call `saveFrame` when the button is pressed.

> **[saveFrame() / Reference](https://processing.org/reference/saveFrame_.html)**
>
> Saves a numbered sequence of images, one image each time the function is run. To save an image that is identical to the display window, run the function at the end of draw() or within mouse and…

But I don’t get the second part. This is nothing to do with saving the image, isn’t it? If so you need to add another slider for that, and use the value to rotate the canvas.

I guess you have a big picture of how the program looks like, but you first need to break a task into smaller steps. How many buttons/sliders are needed? What does each slider do? Does it change color, or move the squares? Does that function have to do with a button, or are they independent of each other?

---

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 23, 2021, 12:29pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/3 "2021-04-23T12:29:24Z")

</div>

Hi! First of all please use `</>` button to format your code 🙂 ---- sorry for the inconvenience

I don’t quite get what you mean. How many buttons you need? Can you draw something to illustrate it?---- i need four other buttons that seperates and aligns the different colored rectangles in the grid structure by the axis defined by the button which will be left,right,up and down .

But I don’t get the second part. This is nothing to do with saving the image, isn’t it? If so you need add another slider for that, and use the value to rotate the canvas. ----- yes saving the canvas as a jpg and the rotation problem are not related. When i tried to rotate the screen. I could not come up with a solution that only rotates the grid area without rotating the part containing sliders.

Thank you for your response

---

<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:** [April 23, 2021, 3:37pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/4 "2021-04-23T15:37:05Z")

</div>

> [@Bakoje](#):
>
> Hi! First of all please use `</>` button to format your code 🙂 ---- sorry for the inconvenience

It only takes a moment to go back and edit the original post and format your code… as a courtesy to the community that you are asking for help from.

I generally do not assist with unformatted code so no inconvenience to me.

[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 23, 2021, 3:54pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/5 "2021-04-23T15:54:00Z")

</div>

Done. Again sorry about the inconvenience

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 23, 2021, 6:03pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/6 "2021-04-23T18:03:35Z")

</div>

> i need four other buttons that seperates and aligns the different colored rectangles in the grid structure by the axis defined by the button which will be left,right,up and down .

Again let’s break this into smaller steps.

1. you want four buttons
2. the buttons separate or align the rectangles
3. the rectangles have different colors and form a grid (which is already in the code)
4. _I’m completely lost about the last part - what are the axes? what do you mean by left/right/up/down?_

> yes saving the canvas as a jpg and the rotation problem are not related. When i tried to rotate the screen. I could not come up with a solution that only rotates the grid area without rotating the part containing sliders.

So you want to rotate the grid with rectangles but not the GUI, right? You should check out this awesome function:

> **[pushMatrix() / Reference](https://processing.org/reference/pushMatrix_.html)**
>
> Pushes the current transformation matrix onto the matrix stack. Understanding pushMatrix() and popMatrix() requires understanding the concept of a matrix stack. The pushMatrix() f…

---

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 23, 2021, 6:08pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/7 "2021-04-23T18:08:15Z")

</div>

thank you very much for your advices . I need to align the different colored rectangles on the left,right,up or down side the grid so they would appear as not randomly defined within the grid . All the rectangles who has the same color should group in the grid depending on the direction that i send them.I am afraid it is not possible to do so with a loop just like i tried at the first place.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 23, 2021, 7:07pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/8 "2021-04-23T19:07:36Z")

</div>

I see! I think it’s good to start with something small - like make just one button, and when pressed the colors will be “sorted” horizontally (which means they are pushed to either left or right). Perhaps you want to change the array to a 2D array to store the data:  
[https://processing.org/tutorials/2darray/](https://processing.org/tutorials/2darray/)

---

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 23, 2021, 8:46pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/9 "2021-04-23T20:46:24Z")

</div>

I worked on it a bit now i can rotate the rectangles but not the grid itself and also i can change the color of the rectangles with a slider but instead of filling random rectangles in the array it changes the color of all.

```auto
import controlP5.*;
ControlP5 gui;
float bolum = 15 ;
float bolum2 = 45;
float bolum3 = 50;
int bolum4 = 10;
color renk;
color renk2;
int w = 600;
int h = 600;
int scl = 50;

int cols = w/scl;
int rows = h/scl;

int index = cols*rows;

//Object data
Object[] thing = new Object[index];
int[] rastgele = new int[100];
void setup() 
{
  size(800, 600);
 colorMode(RGB);
  gui= new ControlP5(this);
  gui.addSlider("bolum")
  .setPosition(640,50)
  .setRange(15,40)
  ;
  gui.addSlider("bolum2")
  .setPosition(640,100)
  .setRange(1,90)
  ;
  
gui.addSlider("bolum3")
  .setPosition(640,150)
  .setRange(1,50)
  ;
  gui.addSlider("bolum4")
  .setPosition(640,500)
  .setRange(1,20)
  ;
 
gui.addColorWheel("renk",640,200,120).setRGB(color(255,255,0));
gui.addColorWheel("renk2",640,340,120).setRGB(color(0,45,90));
 for(int i=0; i <20;i++)
  {
    rastgele[i] = int(random(2));
  }
}

void draw() {
  background(0);
  int k = 0;
 for (int y = 0; y<rows; y++) 
 {
    for (int x = 0; x<cols; x++) 
    {
      thing[k] = new Object((scl/2)+(x*scl), (scl/2)+(y*scl), k*(bolum3/5), ((30/(600/(bolum)))*(x+y)), (bolum2));
      k++;
  
    }
  }
  for (int i = 0; i < index; i++)
  {
   
    thing[i].showObject();

}
}

class Object {
  float x;
  float y;
  float size;
  float col;
  float boost = 0.1;

  float rot = 1;

  PVector loc;
  PVector rotation;
  PVector center;

  Object(float _x, float _y, float _col, float _size, float _rot) {

    rot = _rot;
    x = _x;
    y = _y;
    size = _size;
    col = _col;
  }

  void showObject() {
    rectMode(CENTER);
    
    //stroke(255);
    noStroke();
    pushMatrix();
    translate(x,y);
    rotate(rot);
      int sayac=0;
  for(int j=0;j<bolum4;j++)
  {
    for(int i=0;i<bolum4;i++)
    {
      if (rastgele [sayac] >=1)
      { fill (renk,col);
        sayac++;
   }
      else if(rastgele [sayac] <=1)
      {fill(renk2,col);
       if (sayac< 20){ sayac++;}
  }
    rect(0, 0, size, size);
       } 
        sayac=0;
  }
 
    popMatrix();
  }
}

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 24, 2021, 11:02am UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/10 "2021-04-24T11:02:35Z")

</div>

I think it’s a good step that you started using a class! However, it may be problematic that you use `new Object` in `draw` loop. This means you delete the previous array and make a new array from scratch every frame. Meanwhile you have `rastgele` int array, which you initialize in `setup`. I think it makes sense to initialize `thing` array in the `setup` too! (in fact, you don’t need the int array anymore, because you can store that color information in the `Object` array)

---

<div class="post-metadata">

**Author:** ![Bakoje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bakoje/32/12957_2.png) [@Bakoje](https://discourse.processing.org/u/Bakoje)\
**Post date:** [April 27, 2021, 9:21pm UTC](https://discourse.processing.org/t/need-help-with-other-assigned-variables/29569/12 "2021-04-27T21:21:24Z")

</div>

So i worked on the code a little bit more and reached this point

```auto
import controlP5.*;
ControlP5 gui;
float Size = 15 ;
float Rotate = 45;
float Alpha1 = 50;
float Alpha2 = 50;
float Multiplier = 1;
int RotateScr = 1;
float col;
float boost;
color Color1;
color Color2;
int w = 600;
int h = 600;
int scl = 50;
int saveP ;
int cols = w/scl;
int rows = h/scl;

int index = cols;
int index2 =rows;
boolean toggleValue = false;
Object[][] thing;
int[] rastgele = new int[100];
void setup() 
{
  size(800, 600);

  colorMode(RGB, 50);

  gui= new ControlP5(this);
  gui.addToggle("toggle")
    .setPosition(600, 560)
    .setSize(180, 20)
    .setValue(false)
    .setMode(ControlP5.SWITCH)
    ;
  gui.addButton("SaveJpeg")
    .setValue(1)
    .setPosition(600, 530)
    .setSize(150, 20)
    .activateBy(ControlP5.RELEASE);
  ;

  gui.addSlider("Size")
    .setPosition(600, 20)
    .setSize(150, 20)
    .setRange(15, 40)
    ;
  gui.addSlider("Rotate")
    .setPosition(600, 60)
    .setSize(150, 20)
    .setRange(1, 90)
    ;

  gui.addSlider("Alpha1")
    .setPosition(600, 140)
    .setSize(150, 20)
    .setRange(1, 50)
    ;
  gui.addSlider("Alpha2")
    .setPosition(600, 180)
    .setSize(150, 20)
    .setRange(1, 50)
    ;
  gui.addSlider("Multiplier")
    .setPosition(600, 100)
    .setSize(150, 20)
    .setRange(0.5, 2)
    ;
  gui.addSlider("RotateScr")
    .setPosition(600, 500)
    .setSize(150, 20)
    .setNumberOfTickMarks(4)
    .setRange(1, 4)
    ;

  gui.addColorWheel("Color1", 620, 200, 120).setRGB(color(255, 255, 0));
  gui.addColorWheel("Color2", 620, 340, 120).setRGB(color(0, 45, 90));

  thing = new Object[index][index2];
}

void draw() {
  background(0);

  for (int y = 0; y<rows; y++) 
  {
    for (int x = 0; x<cols; x++) 
    {
      thing[x][y] = new Object((scl/2)+(x*scl), (scl/2)+(y*scl), (y)*(Alpha1/5), ((30/(600/(Size)))*((x+y)*(Multiplier))), (Rotate), x*(Alpha2/5));
    }
  }
  for (int k = 0; k < index; k++)
  {
    for (int z = 0; z < index2; z++)
    {
      if (k%3==0 || z%2 ==0)
      { 
        fill(Color1, boost);
      } else
      {
        fill (Color2, col);
      }
      if (RotateScr==1)
      {
        // pushMatrix();
        //translate(600,0);
        //rotate(PI/2);
        thing[k][z].showObject();
        //popMatrix();
      }
      if (RotateScr==2)
      {
        pushMatrix();
        translate(600, 0);
        rotate(PI/2);
        thing[k][z].showObject();
        popMatrix();
      }
      if (RotateScr==3)
      {
        pushMatrix();
        translate(600, 600);
        rotate(PI);
        thing[k][z].showObject();
        popMatrix();
      }
      if (RotateScr==4)
      {
        pushMatrix();
        translate(0, 600);
        rotate((3*PI)/2);
        thing[k][z].showObject();
        popMatrix();
      }
    }
  }
}

void SaveJpeg()
{
  PImage temp = get(0, 0, 600, 600);
  temp.save("image "+nf(saveP, 4)+".jpeg");
  saveP++;
  println("Jpeg Saved");
}

void toggle(boolean theFlag)
{
  if (theFlag==true) {
    fill(0, 0, 0);
    rect(300, 300, 600, 600);
    noLoop();
    println("Shut Down.");
  } else {
    loop();
    println("Open Again.");
  }
}  

class Object {
  float x;
  float y;
  float size;
  float rot = 1;
  Object(float _x, float _y, float _col, float _size, float _rot,float _boost) {

    rot = _rot;
    x = _x;
    y = _y;
    size = _size;
    col = _col;
    boost=_boost;
  }

  void showObject() {
    rectMode(CENTER);
    
    noStroke();
    pushMatrix();
    translate(x,y);
    rotate(rot);
    rect(0, 0, size, size);
 
    popMatrix();
  }
}

```

Only two things that can be considered as missing now .  
1)Assigning one of the two set colors to random objects in the array  
2) then sorting the randomly colored objects in the array either horizontally or vertically.  
Thanks in advance.