Drawing Watermelons in a repeating pattern

kalpugo

Hi, it's my first time using Processing and code to create images and despite the wealth of information out there (to which I am grateful!) I am having a difficult time tracking down the right code for certain things.

Below is the image I mocked up to know what I want my final code to look like.

This is what I have so far in terms of my code:

     int numCols=10; 
     int numRows=10; 

    void setup () { 
     size(1000,1000); 
     background(175,191,183);
     noStroke(); } 

     void draw () { 
       for (float x=width/numCols; x<width;x+=(width/numCols)) { 
       for (float y=height/numCols; y<height;y+=(height/numCols)) {

       stroke(112,138,144);
       arc(-100,-100, 150, 155, 0, PI);  
       strokeWeight(5); 
       strokeCap(SQUARE);

        pushMatrix(); 
        translate(x,y);   
        if (mousePressed) { 
        fill(random(255),random(255));  } 

        beginShape(); 
        arc(0, 0, 80, 85, 0, PI);
        endShape();
        popMatrix(); }
     } } 

Which is progressing nicely I'd like to think (?? lol) I'd just like some help in figuring out how to:

1) Randomise the colours between 5 set shades (needed colours are below)

bright red(188,66,57) / dark grey(93,93,93) / offwhite(240,240,230) / yellow(226,172,75) / midpink(250,128,114)

2) How to shift every second row slightly to the left to create a motif-like pattern

3) How to make the arcs on every second column upside down

You don't necessarily have to write the code for me. I do kind of want to figure it out and manipulate it by myself as a learning experience. I just can't for the life of me find the needed code/commands.

Thank you

PhiLho

1. Put the colors in an array, take a random number between 0 and 5 (excluded): int(random(5)), take the color at that index.
2. Redraw everything at a different position. Don't forget background() at the start of draw().
3. Perhaps look again at the reference of the arc() function. That's what I would do to answer more precisely... :-)

kalpugo

Put the colors in an array, take a random number between 0 and 5 (excluded): int(random(5)), take the color at that index.

Thank you PhiLho! Had no idea I was supposed to use an array, and now I've discovered them as really useful! :)

So far I've managed to figure out that every time I click the mouse, all the arcs looped in my rows and columns will randomly change into one of my five colors. How do I make it so that it's a random color per arc (aka more individualised)?

This is what I was able to create so far.

    int numCols=10; 
    int numRows=10; 

    int [] suikaColor = new int [5];     
      {
      suikaColor[0]=color(188,66,57); 
      suikaColor[1]=color(93,93,93); 
      suikaColor[2]=color(240,240,230);
      suikaColor[3]=color(226,172,75);
      suikaColor[4]=color(250,128,114);
      }

    void setup () { 
    size(1000,1000); 
    background(175,191,183); 
    noStroke(); 
    smooth(); 
    println(suikaColor.length);
    } 

    void draw () { 
    for (float x=width/numCols; x<width;x+=(width/numCols)) { 
      for (float y=height/numCols; y<height;y+=(height/numCols)) {

        //drawing watermelon      
         stroke(112,138,144);
         arc(-100,-100, 150, 155, 0, PI);  
         strokeWeight(4); 
         strokeCap(SQUARE);

         pushMatrix(); // position of melons
         translate(x,y);  //draw at x & y location 
         ellipse(0,0,50,50);
         popMatrix();
      } 

    void mousePressed () {
      fill(suikaColor[int(random(suikaColor.length))]); 
    } 

GoToLoop

How do I make it so that it's a random color per arc (aka more individualized)?

You're gonna need to create a class to represent your WaterMelon w/ all its desired properties like: location, dimension, color, etc. :-B

https://processing.org/reference/class.html

TfGuy44

int numCols=10; 
int numRows=10; 

int [] suikaColor = {
  color(188, 66, 57), color(93, 93, 93), color(240, 240, 230), color(226, 172, 75), color(250, 128, 114)
};

class Melon {
  float px,py;
  boolean b; // Is it flipped?
  color c, r;
  Melon(float ipx, float ipy, boolean ib, color ic){
    px=ipx;
    py=ipy;
    b=ib;
    c=ic;
    r = color(112, 138, 144);
}
  void draw(){      
      stroke(r);
      strokeWeight(4); 
      strokeCap(SQUARE);
      fill(c);
      pushMatrix();
      translate(px,py);
      if(b){ rotate(PI); translate(0,20); }
      scale(.6);
      arc(0,0, 150, 155, 0, PI);
      popMatrix();
  }
}

ArrayList<Melon> melons;

void setup () { 
  size(1000,1000);  
  smooth();
  melons = new ArrayList();
  int row = 0;
  for (float x=width/numCols; x<width; x+= (width/numCols)) {
    for (float y=height/numCols; y<height; y+= (height/numCols)) {
      melons.add( new Melon( x-(row%2==1?40:0), y, row%2==1, suikaColor[int(random(suikaColor.length))] ) ); 
    }
    row++;
  }
} 

void draw () {
  background(175, 191, 183);
  for(int i=0;i<melons.size();i++)melons.get(i).draw();
}

Progress for you. Keep at it.

kalpugo

Ah! Thank you everyone! I'll use all the information you've given me so far and play around with it.

Thank you so much :) :) :) :)

kalpugo

Ok just an update on to how I'm progressing. I haven't gotten the hang of refining boolean or the way TfGuy44 has shown how to reverse shapes at every interval. This is ok, I'm still experimenting with it and am satisfied with the information I've received regarding that topic so far.

What I'd like to know how to do now is, in regards to my watermelon pattern, I do have some finicky seeds to put in. What is the best way to draw them in? As points?

This is my code so far again, now with random color ~

int numCols=10; 
int numRows=10; 

int [] melonColor = new int [5];     
{
  melonColor[0]=color(188, 66, 57); 
  melonColor[1]=color(93, 93, 93); 
  melonColor[2]=color(240, 240, 230);
  melonColor[3]=color(226, 172, 75);
  melonColor[4]=color(250, 128, 114);
}

void setup () { 
  size(1000, 800); 
  background(175, 191, 183); 
  noStroke(); 
  smooth(); 
  println(melonColor.length);
} 

void draw () { 
  for (float x=width/numCols; x<width; x+= (width/numCols)) { 
    for (float y=height/numCols; y<height; y+= (height/numCols)) {
      fill(melonColor[int(random(melonColor.length))]);
      stroke(112, 138, 144);
      strokeWeight(4); 
      strokeCap(SQUARE);

      pushMatrix(); // position of melons
      translate(x, y);  //draw at x & y location 
      //arc(0, 0, 50, 55, 0, PI);
      arc(0, 0, 80, 85, 0, PI);  
      popMatrix();
    }
  }
//Loop = always drawing new colors/shapes, looks really crazy.. 
  noLoop();
}

void mousePressed () {
  //call loop once here to run through draw again and generate a new
  //random composition
  loop();
} 

kalpugo

Sorry to double post but after a bit more tweaking, I've abandoned the use of intCols and Rows and floats to create a grid with my watermelons.

I feel like this is a better approach for what I want? Or should I go back to what I had before?

int [] melonColor = new int [5];     
{
  melonColor[0]=color(188, 66, 57); 
  melonColor[1]=color(93, 93, 93); 
  melonColor[2]=color(240, 240, 230);
  melonColor[3]=color(226, 172, 75);
  melonColor[4]=color(250, 128, 114);
}

void setup () { 
  size(1000, 800); 
  background(175, 191, 183); 
  noStroke(); 
  smooth(); 
  println(melonColor.length);

} 

void draw () { 
  background(175, 191, 183); 

  for (int k=0; k<100; k++) { 
   for (int i=0; i<100; i++){

     arc(-5 + i*100,-10 + k*65,80,85, 0, PI);

      fill(melonColor[int(random(melonColor.length))]);
      stroke(112, 138, 144);
      strokeWeight(4); 
      strokeCap(SQUARE);
  }
  }
  noLoop();
}
void mousePressed ()  {
 loop(); 
 }