Help with Pattern that uses Mouse input

McDugals · October 2014

**Hey guys so this is my first forum post so go easy on me. I'm currently working on a pattern that alternates the colors of the background and shapes respectfully using only black and white. But the objective of this is to have mouse input cause these changes to occur. More specifically I want it to change based on the location of the mouse. I want the shapes and background to change color only when the mouse enters the canvas(sorry if I'm not using the right term, spent a whole quarter painting) or I guess the output window would be a better term to use. But the moment the mouse leaves the canvas it stops reverting back to the original color set. Now for the record they are only changing from black to white, nothing else.

I hope I was able to explain this properly, if there is anything I might have left out please let me know. My main issue here is that I don't know where exactly to begin and nothing online is really helping me. Below is the code I have so far so I hope I hear from someone soon! **

    void setup() {
      size(500, 500);
      background(0);
      noStroke();
      shapes();
    }




    void shapes() {



      //---------------------------------White Shapes------------------  
      beginShape();
      vertex(245, 213);
      vertex(276, 244);
      vertex(245, 274);
      vertex(215, 245);
      endShape();//center square

        beginShape();
      vertex(246, 167);
      vertex(246, 139);
      vertex(141, 245);
      vertex(169, 245);
      endShape();

      beginShape();
      vertex(141, 245);
      vertex(169, 245);
      vertex(246, 322);
      vertex(246, 350);
      endShape();

      beginShape();
      vertex(246, 322);
      vertex(246, 350);
      vertex(352, 245);
      vertex(324, 245);
      endShape();

      beginShape();
      vertex(352, 245);
      vertex(324, 245);
      vertex(247, 167);
      vertex(247, 139);
      endShape();//These four make up the white shapes surrounding 
      //the center square

        beginShape();
      vertex(105, 247);
      vertex(105, 212);
      vertex(0, 107);
      vertex(0, 142);
      endShape();

      beginShape();
      vertex(105, 247);
      vertex(105, 212);
      vertex(211, 106);
      vertex(246, 106);
      endShape();

      beginShape();
      vertex(246, 106);
      vertex(211, 106);
      vertex(105, 0);
      vertex(140, 0);
      endShape();

      beginShape();
      vertex(105, 0);
      vertex(70, 0);
      vertex(0, 70);
      vertex(0, 105);
      endShape();//These 4 shapes make up the large white 
      //perimeter located in the top left region

      beginShape();
      vertex(74, 105);
      vertex(26, 105);
      vertex(104, 184);
      vertex(104, 136);
      endShape();

      beginShape();
      vertex(104, 184);
      vertex(104, 136);
      vertex(135, 106);
      vertex(183, 106);
      endShape();

      beginShape();
      vertex(135, 106);
      vertex(183, 106);
      vertex(105, 27);
      vertex(105, 75);
      endShape();

      beginShape();
      vertex(105, 27);
      vertex(105, 75);
      vertex(74, 105);
      vertex(26, 105);
      endShape();//These 4 make up the square surrounding the small 
      //black square

        beginShape();
      vertex(0, 49);
      vertex(0, 21);
      vertex(21, 0);
      vertex(49, 0);
      endShape();//Top left Corner

      beginShape();
      vertex(0, 167);
      vertex(0, 195);
      vertex(52, 247);
      vertex(80, 247);
      endShape();

      beginShape();
      vertex(52, 247);
      vertex(80, 247);
      vertex(0, 328);
      vertex(0, 300);
      endShape();

      triangle(0, 242, 4, 247, 0, 251);

      beginShape();
      vertex(0, 447);
      vertex(0, 475);
      vertex(24, 499);
      vertex(52, 499);
      endShape();

      beginShape();
      vertex(0, 425);
      vertex(0, 390);
      vertex(109, 499);
      vertex(74, 499);
      endShape();

      beginShape();
      vertex(0, 388);
      vertex(0, 353);
      vertex(105, 248);
      vertex(105, 283);
      endShape();

      beginShape();
      vertex(105, 248);
      vertex(105, 283);
      vertex(211, 389);
      vertex(246, 389);
      endShape();

      beginShape();
      vertex(211, 389);
      vertex(246, 389);
      vertex(140, 499);
      vertex(109, 499);
      endShape();

      beginShape();
      vertex(104, 467);
      vertex(104, 420);
      vertex(74, 388);
      vertex(26, 388);
      endShape();

      beginShape();
      vertex(74, 388);
      vertex(26, 388);
      vertex(104, 310);
      vertex(104, 357);
      endShape();

      beginShape();
      vertex(104, 310);
      vertex(104, 357);
      vertex(135, 388);
      vertex(183, 388);
      endShape();

      beginShape();
      vertex(135, 388);
      vertex(183, 388);
      vertex(104, 467);
      vertex(104, 419);
      endShape();

      beginShape();
      vertex(161, 499);
      vertex(189, 499);
      vertex(245, 443);
      vertex(245, 415);
      endShape();

      beginShape();
      vertex(245, 443);
      vertex(245, 415);
      vertex(330, 499);
      vertex(302, 499);
      endShape();

      triangle(255, 499, 245, 489, 234, 499); 

      beginShape();
      vertex(440, 499);
      vertex(468, 499);
      vertex(499, 467);
      vertex(499, 439);
      endShape();

      beginShape();
      vertex(499, 417);
      vertex(417, 499);
      vertex(386, 495);
      vertex(492, 389);
      endShape();

      triangle(418, 499, 387, 494, 355, 499);

      beginShape();
      vertex(386, 495);
      vertex(355, 499);
      vertex(245, 389);
      vertex(280, 389);
      endShape();

      beginShape();
      vertex(245, 389);
      vertex(280, 389);
      vertex(386, 283);
      vertex(386, 249);
      endShape();

      beginShape();
      vertex(386, 283);
      vertex(386, 249);
      vertex(499, 361);
      vertex(492, 389);
      endShape();

      triangle(499, 360, 491, 389, 499, 418);

      beginShape();
      vertex(464, 389);
      vertex(417, 389);
      vertex(385, 420);
      vertex(385, 467);
      endShape();

      beginShape();
      vertex(385, 420);
      vertex(385, 467);
      vertex(307, 388);
      vertex(354, 388);
      endShape();

      beginShape();
      vertex(307, 388);
      vertex(354, 388);
      vertex(385, 358);
      vertex(385, 310);
      endShape();

      beginShape();
      vertex(385, 358);
      vertex(385, 310);
      vertex(464, 389);
      vertex(416, 389);
      endShape();

      beginShape();
      vertex(499, 322);
      vertex(499, 304);
      vertex(443, 247);
      vertex(415, 247);
      endShape();

      beginShape();
      vertex(443, 247);
      vertex(415, 247);
      vertex(499, 163);
      vertex(499, 191);
      endShape();

      triangle(499, 236, 489, 246, 499, 257);

      beginShape();
      vertex(499, 29);
      vertex(499, 57);
      vertex(442, 0);
      vertex(471, 0);
      endShape();

      beginShape();
      vertex(388, 31);
      vertex(388, 78);
      vertex(355, 109);
      vertex(308, 109);
      endShape();

      beginShape();
      vertex(308, 109);
      vertex(355, 109);
      vertex(386, 141);
      vertex(386, 188);
      endShape();

      beginShape();
      vertex(386, 188);
      vertex(386, 141);
      vertex(418, 109);
      vertex(465, 109);
      endShape();

      beginShape();
      vertex(465, 109);
      vertex(418, 109);
      vertex(387, 78);
      vertex(387, 31);
      endShape();

      beginShape();
      vertex(282, 107);
      vertex(247, 107);
      vertex(386, 249);
      vertex(386, 215);
      endShape();

      beginShape();
      vertex(386, 249);
      vertex(386, 215);
      vertex(494, 111);
      vertex(499, 141);
      endShape();

      beginShape();
      vertex(494, 111);
      vertex(499, 80);
      vertex(422, 0);
      vertex(390, 3);
      endShape();

      beginShape();
      vertex(390, 3);
      vertex(357, 0);
      vertex(247, 107);
      vertex(282, 107);
      endShape();

      beginShape();
      vertex(250, 52);
      vertex(250, 80);
      vertex(169, 0);
      vertex(197, 0);
      endShape();

      beginShape();
      vertex(330, 0);
      vertex(302, 0);
      vertex(250, 52);
      vertex(250, 80);
      endShape();

      triangle(253, 0, 248, 4, 244, 0);
    }

McDugals · October 2014

Oh wow um how do I fix the code to make it more readable?

McDugals · October 2014

Never mind fixed it!

TfGuy44 · October 2014

Pheeeoiiw! That is a lot of lines of code to draw such a simple pattern. As for changing colors, just define a couple of colors and base their RGB values on the mouse's position:

color c1, c2;

void setup(){
  size(500,500);
  rectMode(CENTER);
  noStroke();
  smooth();
}
void draw(){
  c1 = color(map(mouseX,0,width,0,255),0,255);
  c2 = color(0,255-map(mouseY,0,height,0,255),0);
  background(c1);
  translate(width/2,height/2);
  rotate(QUARTER_PI);
  for(int i=-4;i<5;i++){
    for(int j=-4;j<5;j++){
      Rect((i+j)%2==0,175*i,175*j);
    }
  }
}

void Rect(boolean b, float x, float y){
  fill(b?c1:c2);
  rect(x,y,175,175);
  fill(b?c2:c1);
  rect(x,y,125,125);
  fill(b?c1:c2);
  rect(x,y,75,75);
  fill(b?c2:c1);
  rect(x,y,40,40);
}

Howdy, Stranger!

Categories

In this Discussion

Help with Pattern that uses Mouse input

Best Answer

Answers