Need help with other assigned variables

Bakoje · April 23, 2021, 12:14am

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.

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

micuat · April 23, 2021, 9:12am

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.

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?

Bakoje · April 23, 2021, 12:29pm

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

glv · April 23, 2021, 3:37pm

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

:)

Bakoje · April 23, 2021, 3:54pm

Done. Again sorry about the inconvenience

micuat · April 23, 2021, 6:03pm

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.

you want four buttons
the buttons separate or align the rectangles
the rectangles have different colors and form a grid (which is already in the code)
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:

Bakoje · April 23, 2021, 6:08pm

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.

micuat · April 23, 2021, 7:07pm

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/

Bakoje · April 23, 2021, 8:46pm

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.

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

micuat · April 24, 2021, 11:02am

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)

Bakoje · April 27, 2021, 9:21pm

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

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.

Topic		Replies	Views
P5 COLOR GRIDS but how? Coding Questions	3	226	April 9, 2022
Help with grid game Coding Questions	2	445	November 27, 2019
Trouble on array's [COMPLICATED] Coding Questions homework	27	823	November 25, 2019
I need help with filling in a grid Coding Questions	17	745	December 9, 2020
Applying Specific Colors to Grid Array Coding Questions homework	4	855	December 1, 2020

Need help with other assigned variables

Related Topics