Help: what am I missing?

hello everyone.

I’ve been asking a lot of questions lately, I’m learning to code by copying. Last night I found a sketch in openprocessing that I liked that it was created with P5, I thought translating was a good exercise.

So far, the sketch works in processing but I’m getting geometry created with the same color as the background so it doesn’t look as good (I’m getting single colored squares, instead of a triangle, ellipse or arc inside the square).

here’s the original sketch

Here’s my processing (java) sketch

/*
Processing version of sketch https://www.openprocessing.org/sketch/678744 by Andrea Diotallevi  .
The code shouldn't be generating single colored squares, and yet I'm getting them. What's the problem?

 */

color[][] colorPalettes = {
                            {#152A3B, #0D809C, #F5C03E, #D63826, #EBEBD6, #152A3B},
                            {#0F4155, #5399A1, #8CA96B, #CB5548, #E7E6F5, #0F4155},
                            {#E8614F, #F3F2DB, #79C3A7, #668065, #4B3331, #E8614F},
                            {#DBE5EC, #336B87, #2A3132, #E94D35, #EFAC55, #DBE5EC},
                            {#8A867F, #FFE8B7, #FFBE87, #E38A74, #BF5967, #8A867F},
                            {#507A4A, #C0C480, #FFEAA4, #FFCDA4, #FF938D, #507A4A},
                            {#234D51, #9DD3D9, #59C6D1, #3B4F51, #FF513F, #234D51},
                            {#FF4858, #1B7F79, #00CCC0, #72F2EB, #747F7F, #FF4858},
                            {#2A5A26, #3E742F, #568D3B, #6DA850, #89C15F, #2A5A26},
                            {#0B1C26, #234459, #7AA5BF, #A0C3D9, #BF7950, #0B1C26},
                            {#A6BF5B, #E85C34, #699748, #2D411E, #FF5A2B, #A6BF5B},
                          };


int num = 10;
int i = 0;
int l;

          
void setup(){
  size(1080,1080);
  background(25);
}

void draw(){
  noStroke();
  int l = width/num;
  int h = height/num;
  
  for (int x = 0; x < width; x += l) {
    for (int y = 0; y < height; y += h) {
      //Generates a random number between 0 and 4 for the background
      int colorIndex = int(random(5));
      //Generates a random number between 0 and 4 for the geometry
      int colorIndex2 = int(random(5));
      //Compares both colors, if they are the same then the second number changes to the next in the array
      if(colorIndex==colorIndex2){
        colorIndex2 = colorIndex2+1;
      }
      //fill color and shape for the background
      fill(colorPalettes[i][colorIndex]);
      rect(x, y, x + l, y + h);
      //fill color for the geometry
      fill(colorPalettes[i][colorIndex2]);
      //geometry selector, 9 different shapes
      switch(int(random(1,10))) {             
          case 1: triangle(x, y, x + l, y, x, y + h); break;
          case 2: triangle(x, y, x + l, y, x + l, y + h); break;
          case 3: triangle(x + l, y + h, x + l, y, x, y + h); break;
          case 4: triangle(x, y, x, y + h, x + l, y + h); break;
          case 5: arc(x + l/2, y + h/2, l, h, 0, 180); break;
          case 6: arc(x + l/2, y + h/2, l, h, 90, 270); break;
          case 7: arc(x + l/2, y + h/2, l, h, 180, 0); break;
          case 8: arc(x + l/2, y + h/2, l, h, 270, 90); break;
          case 9: ellipse(x + l/2, y + h/2, l, h); break;
      }
    }
  }
  
  noLoop();
}
                     


void mouseClicked() {
  i =  (i + 1) % 11;
  redraw();
}

void keyPressed() {
  if (keyPressed) {
    if (key == '1' ) {
      num = 1;
    }
    else if (key == '2' ) {
      num = 2;
    }
    else if (key == '3' ) {
      num = 3;
    }
    else if (key == '4' ) {
      num = 4;
    }
    else if (key == '4' ) {
      num = 4;
    }
    else if (key == '5' ) {
      num = 5;
    }
    else if (key == '6' ) {
      num = 6;
    }
    else if (key == '7' ) {
      num = 7;
    }
    else if (key == '8' ) {
      num = 8;
    }
    redraw();
  }
}


1 Like

I think the error is that I’m using degrees instead of radians…I fixed this by modifying the code like this

case 5: arc(x + l/2, y + h/2, l, h, radians(0), radians(180)); break;
          case 6: arc(x + l/2, y + h/2, l, h, radians(90), radians(270)); break;
          case 7: arc(x + l/2, y + h/2, l, h, radians(180), radians(0)); break;
          case 8: arc(x + l/2, y + h/2, l, h, radians(270), radians(90)); break;

2 of out of 4 work, I’ll continue tweaking…thanks.

Fixed it!
changed the degree values from 0 to 360 when it started at 180 and the same logic with case 8.

3 Likes

Thanks PixelMx – and glad you got it working! – you should consider sharing a link to your final translation on openprocessing or the p5.js web editor.