Drawing Watermelons in a repeating pattern

edited April 2015 in How To...

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.

suika_1

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

Answers

  • edited April 2015 Answer ✓
    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... :-)
  • edited April 2015

    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))]); 
        } 
    
  • edited April 2015 Answer ✓

    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

  • Answer ✓
    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.

  • 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 :) :) :) :)

  • edited April 2015

    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();
    } 
    
  • edited April 2015

    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(); 
     }
    
Sign In or Register to comment.