This is the idea of Caitlin and I, a self-made Paint software, for ICM week_02’s homework, making something animated and designed an UI. At first, we were ambitious and made a ideal Paint with multiple function, and even a fancy UI. BUT, it’s just too hard to accomplish 😉  Process of bloody stumbling is as followed:

1. made 3 floating cubes to choose colors from.
2. frustrated to find out that the color of every cube’s rim changed when I choose different stroke color.
3. same thing happened in stroke width.
4. P A N I C .
5. Struggling for hours.
6. thought object-orientation program might be the answer of this puzzle, so started learning OOP from scratch.
7. excited to have a workable class of drifting clouds.
8. frustrated to find out that problem still existed.
9. P A N I C .
10. Struggling for hours.
11. so desperate that I started googling my problem.
12. found out the existence of pushStyle()/popStyle()!
13. had a bitter(FXCK!)-yet-sweet(YAH!) moment for a while.
14. added stroke width, eraser, and new paper function to finish my mini-Paint.
15. L E A R N E D    A    L O T .

And here’s my bloody baby!(click me click me click me)

And below are my bloody baby’s organs(codes).

class DriftC{
  float x, y, scaleC;
  color c;

  DriftC(float _x, float _y, float _scaleC, color _c) {
    x = _x;
    y = _y;
    c = _c;
    scaleC = random((_scaleC-0.05), (_scaleC+0.05));
  }

  void drawCloud() {
    drifting();
    render();
  }

  void drifting() {
    x ++;
    y += random(-0.5,0.5);

    if(x > width + 90) {
      x = 0 - 90;
    }
  }

  void render() {
    cloud(x,y,scaleC,c);    
  }

  void cloud(float x, float y, float sz, color c) {
  //cloud made by bezier curves 
  //translate(120,145);
  //cloud's width=220, height=120
  pushMatrix();
  pushStyle();

  translate(x,y);
  noStroke();
  fill(c);
  scale(sz);

  float xA=30, yA=-40;
  bezier(30+xA,20+yA,90+xA,5+yA,110+xA,100+yA,30+xA,75+yA);
  bezier(30+xA,75+yA,50+xA,110+yA,-10+xA,120+yA,-5+xA,80+yA);
  bezier(-5+xA,80+yA,-10+xA,120+yA,-80+xA,110+yA,-60+xA,80+yA);
  bezier(-60+xA,80+yA,-70+xA,110+yA,-100+xA,90+yA,-80+xA,80+yA);
  bezier(-80+xA,80+yA,-140+xA,100+yA,-160+xA,20+yA,-110+xA,30+yA);
  bezier(-110+xA,30+yA,-120+xA,10+yA,-100+xA,0+yA,-90+xA,20+yA);
  bezier(-90+xA,20+yA,-95+xA,0+yA,-60+xA,-30+yA,-40+xA,5+yA);
  bezier(-40+xA,5+yA,-35+xA,-30+yA,60+xA,-10+yA,30+xA,20+yA);

  //fill cloud with color
  beginShape();
  vertex(31+xA,19+yA);
  vertex(31+xA,76+yA);
  vertex(-5+xA,81+yA);
  vertex(-60+xA,81+yA);
  vertex(-80+xA,81+yA);
  vertex(-111+xA,29+yA);
  vertex(-91+xA,19+yA);
  vertex(-40+xA,4+yA);
  endShape(CLOSE);

  popStyle();
  popMatrix();
  }

  float getX() {
    return x;
  }

  float getY() {
    return y;
  }

  color getC() {
    return c;
  }

  float getS() {
    return scaleC;
  }
}

//variables for Drifting Colors
color R = color(255,0,0);
color G = color(0,255,0);
color B = color(0,0,255);
color Y = color(255,240,0);
color GG = color(0,245,230);
color PN = color(255,77,163);
color PR = color(164,0,247);

float xRectR, xRectG, xRectB, xRectY, xRectGG, xRectPN, xRectPR;
float yRectR, yRectG, yRectB, yRectY, yRectGG, yRectPN, yRectPR;
float sizeRect;

//variables for StrokeWeight
float sw1, sw3, sw6, sw10;
float x1, x3, x6, x10, y, h;
float penX, penY, ppenX, ppenY;

//declare arrays for drifting colors
DriftC[] driftingColor = new DriftC[7];

void setup() {
  size(640,320);
  smooth();
  background(255);

  //for stroke
  sw1 = 1;
  sw3 = 3;
  sw6 = 6;
  sw10 = 10;
  x1 = 33;
  x3 = 43;
  x6 = 56;
  x10 = 73;
  y = 205;
  h = 70;

  pushStyle();
  fill(0);
  noStroke();
  rect(x1,y,sw1,h);
  rect(x3,y,sw3,h);
  rect(x6,y,sw6,h);
  rect(x10,y,sw10,h);
  popStyle();

  //for color
  xRectR = 30;
  xRectG = 170;
  xRectB = 270;
  xRectY = 350;
  xRectGG = 470;
  xRectPN = 600;
  xRectPR = 700;

  yRectR = 50;
  yRectG = 60;
  yRectB = 90;
  yRectY = 60;
  yRectGG = 75;
  yRectPN = 85;
  yRectPR = 65;
  sizeRect = 0.5;

  driftingColor[0] = new DriftC(xRectR, yRectR, sizeRect, R);
  driftingColor[1] = new DriftC(xRectG, yRectG, sizeRect, G);
  driftingColor[2] = new DriftC(xRectB, yRectB, sizeRect, B);
  driftingColor[3] = new DriftC(xRectY, yRectY, sizeRect, Y);
  driftingColor[4] = new DriftC(xRectGG, yRectGG, sizeRect, GG);
  driftingColor[5] = new DriftC(xRectPN, yRectPN, sizeRect, PN);
  driftingColor[6] = new DriftC(xRectPR, yRectPR, sizeRect, PR);
}

void draw() {

  //stroke & newPaper
  pushStyle();
  //BG
  noStroke();
  fill(200);
  rect(0,160,120,160);
  rect(520,160,120,160);
  fill(255);
  rect(10,175,97,130);
  ellipse(580,250,70,70);
  //Bars
  fill(0);  
  rect(x1,y,sw1,h);
  rect(x3,y,sw3,h);
  rect(x6,y,sw6,h);
  rect(x10,y,sw10,h);
  popStyle();

  //color
  //BG
  pushStyle();
  noStroke();
  fill(200);
  rect(0,0,width,175);
  fill(255);
  rect(0,0,width,155);
  popStyle();
  //Drifting Colors
  for(int i=0; i<driftingColor.length; i++) {
    driftingColor[i].drawCloud();
  }
}

void mousePressed() {
  //choose color from cloud
  for(int i=0; i<driftingColor.length; i++) {
    if(mouseX>(driftingColor[i].getX()-driftingColor[i].getS()*115) && mouseX<(driftingColor[i].getX()+driftingColor[i].getS()*115) && 
        mouseY>(driftingColor[i].getY()-driftingColor[i].getS()*65) && mouseY<(driftingColor[i].getY()+driftingColor[i].getS()*65)) {
      stroke(driftingColor[i].getC());
    }
  }

  //choose stroke width
  if(mouseX>(x1-2) && mouseX<(x1+sw1+2) && mouseY>y && mouseY<(y+h)) {
    strokeWeight(1);
  }
  if(mouseX>(x3-2) && mouseX<(x3+sw3+2) && mouseY>y && mouseY<(y+h)) {
    strokeWeight(3);
  }
  if(mouseX>x6 && mouseX<(x6+sw6) && mouseY>y && mouseY<(y+h)) {
    strokeWeight(6);
  }
  if(mouseX>x10 && mouseX<(x10+sw10) && mouseY>y && mouseY<(y+h)) {
    strokeWeight(10);
  }

  //make new paper
  if(mouseX>545 && mouseX<615 && mouseY>215 && mouseY<285) {
    background(255);

    fill(0);
    noStroke();
    rect(x1,y,sw1,h);
    rect(x3,y,sw3,h);
    rect(x6,y,sw6,h);
    rect(x10,y,sw10,h);
  }
}

void mouseDragged() {
  line(pmouseX, pmouseY, mouseX, mouseY);
}

void keyPressed() {
  stroke(255);
}