Ske­t­c­h­P­a­d

by danlin feng

Design Brief

In order to create a sketchpad for people who are creative and willing to DIY to creating skateboard, I developed this program. Considering about the easy reach feature, I choose to embed the processing program in a website by using processing.js. Four brush are applied for more flexible creation. The function of Changing color allows users to create more vivid work with our tools. The color board provides more color choice.

Pen 1: Rainbow pen (Reference 3)

The normal pen has been provided, the color of the pen is automatically changed with the position of the mouse. Depending on the speed of writing, the stroke weight will change automatically to imitate the real world writing. In this case, I use the dist() function to judge how fast the writing speed is.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
}
 
void draw() {
 
  if ((keyPressed==true)&&(key=='a')) {
    shapeA();
  }
}
 
void shapeA() {
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  if (d <= 40) {
    float r = (mouseX + mouseY)/2;
    float g = max(mouseX, mouseY);
    float b = 255 - max(mouseX, mouseY);
    float s = constrain(10-d, 2, 10);
    stroke(r, g, b, 255-16);
    strokeWeight(s);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Pen2 : Rainbow Parallel Pen

Parallel pen is provided to users for them to writing calligraphy. Due to the limited of ability, I choose to use the parallel line to imitate the brush effect.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
 
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
}
 
void draw() {
 
  if ((keyPressed==true)&&(key=='b')) {
    shapeB();
  }
}
 
void shapeB() {
  strokeWeight(3);
  float r = (mouseX/4 + mouseY/4);
  float g = max(mouseX/4, mouseY/4);
  float b = 255 - max(mouseX/4, mouseY/4);
  stroke(r, g, b, 255-16);
  line(pmouseX, pmouseY, mouseX, mouseY);
  pushStyle();
  strokeWeight(5);
  pushMatrix();
  line(mouseX, mouseY, mouseX+10, mouseY-10);
  popStyle();
  popMatrix();
}

Pen3: Dot Pen

Dot pen aims to provide a background brush. Different with other brush, I use a lot random() function to make the effect more randomness.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
 
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
}
 
void draw() {
 
  if ((keyPressed==true)&&(key=='c')) {
    shapeC();
  }
}
 
void shapeC() {
  pushStyle();
  fill(0, 50);
  noStroke();
  ellipse(mouseX+random(-13, 13), mouseY+random(-23, 23), random(12), random(12));
  popStyle();
  pushStyle();
  stroke(0, 50);
  strokeWeight(1);
  popStyle();
}

Pen 4: Web Pen (reference 2)

Web pen is a powerful tool for users to create a beautiful graph. By using the array, I’m able to store the previous mouse position into the database, When the distance between current position and one previous dot are smaller than the connectInterval, The line will be the draw between this two position.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
 
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
}
 
void draw() {
 
  if ((keyPressed==true)&&(key=='d')) {
   WebLine();
  }
}
 
void WebLine() {
  if (pos.length == 0 || dist(mouseX, mouseY, pos[pos.length-1].x, pos[pos.length-1].y) > brushInterval) {
    pos = (PVector [])append(pos, new PVector(mouseX, mouseY));
  }
  for (int i = 0; i < pos.length; i++) {
    float r = dist(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
    if (r < connectInterval) {
      pushStyle();
      strokeWeight(1);
      stroke(0, map(r, 0, connectInterval, 10, 5));
      line(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
      popStyle();
    }
  }
}

Sketch Board

My idea is to provide a tool for drawing skateboard. In order to help the users get the optic feedback, I choose to illustrate the wireframe of the skateboard. By using the rect() function.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
 
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
    Skateboard();
}
 
void draw() {
 
 
}
 
void Skateboard() {
  pushStyle();
  fill(255);
  stroke(200);
  strokeWeight(2);
  pushMatrix();
  rectMode(CENTER);
  rect(width/2-25, height/2, 900, 200, 100);
  popMatrix();
  popStyle();
}

Color Selector

Color board is the essential function of every sketchpad. In order to achieve the mouse operation, I use the colorBoard() function to draw the color board at the right side of the screen. And the selectColor() function is use to read the position and action of the mouse, and allocate different color value to the brush. However, considering the final effect of rainbow brush, I choose to apply the color function to only dot and web pen and keep the rainbow effect of Rainbow pen and Rainbow parallel pen.

  • Show Code
/** @peep sketch */
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
int[][] Color={{255, 0, 0}, 
  {232, 104, 48}, 
  {232, 58, 48}, 
  {199, 22, 111}, 
  {108, 22, 199}, 
  {22, 99, 199}, 
  {22, 199, 46}, 
  {232, 226, 48}, 
};
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
}
 
void draw() {
  colorBoard();
  SelectColor();
  if ((keyPressed==true)&&(key=='d')) {
    WebLine();
  } 
 
}
void WebLine() {
  if (pos.length == 0 || dist(mouseX, mouseY, pos[pos.length-1].x, pos[pos.length-1].y) > brushInterval) {
    pos = (PVector [])append(pos, new PVector(mouseX, mouseY));
  }
  for (int i = 0; i < pos.length; i++) {
    float r = dist(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
    if (r < connectInterval) {
      pushStyle();
      strokeWeight(1);
      stroke(Color[k][0], Color[k][1], Color[k][2], map(r, 0, connectInterval, 10, 5));
      line(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
      popStyle();
    }
  }
}
 
//drawcolorBoard
void colorBoard() {
  pushStyle();
  fill(Color[0][0], Color[0][1], Color[0][2]);
  noStroke();
  rect(950, 0, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[1][0], Color[1][1], Color[1][2]);
  noStroke();
  rect(950, 50, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[2][0], Color[2][1], Color[2][2]);
  noStroke();
  rect(950, 100, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[3][0], Color[3][1], Color[3][2]);
  noStroke();
  rect(950, 150, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[4][0], Color[4][1], Color[4][2]);
  noStroke();
  rect(950, 200, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[5][0], Color[5][1], Color[5][2]);
  noStroke();
  rect(950, 250, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[6][0], Color[6][1], Color[6][2]);
  noStroke();
  rect(950, 300, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[7][0], Color[7][1], Color[7][2]);
  noStroke();
  rect(950, 350, 50, 50);
  popStyle();
}
 
 
//SelectColor
void SelectColor() {
  if (mousePressed) {
    if (mouseX>950&& mouseY<50) {
      k=0;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 0, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>50 && mouseY<100) {
      k=1;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 50, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>100 && mouseY<150) {
      k=2;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 100, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>150 && mouseY<200) {
      k=3;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 150, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>200 && mouseY<250) {
      k=4;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 200, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>250 && mouseY<300) {
      k=5;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 250, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>300 && mouseY<350) {
      k=6;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 300, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>350 && mouseY<400) {
      k=7;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 350, 50, 50);
      popStyle();
    }
  }
}

Save & Clear

My initial idea about this two functions is keyboard operation. However, considering the experience of the users, I choose to change it to mouse operation. The mouseclicka&b() function can both achieve the change of the text color which could provide the feedback when users click on it and the relevant function (save the picture and clear the pad). The mousereleased A&B() function will change the text color back to the normal when users release their mouse.

  • Show Code
/** @peep sketch */
//shape Shape;
Text txt;
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
int[][] Color={{255, 0, 0}, 
  {232, 104, 48}, 
  {232, 58, 48}, 
  {199, 22, 111}, 
  {108, 22, 199}, 
  {22, 99, 199}, 
  {22, 199, 46}, 
  {232, 226, 48}, 
};
 
void setup() {
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
  txt=new Text();
  txt.showText();
  Skateboard();
}
 
void draw() {
 
if ((keyPressed==true)&&(key=='a')) {
    shapeA();
  } else if ((keyPressed==true)&&(key=='b')) {
    shapeB();
  } else if ((keyPressed==true)&&(key=='c')) {
    shapeC();
  } else if ((keyPressed==true)&&(key=='d')) {
    WebLine();
  } 
  if (mouseX<width/2 &&mouseX>width/2-50&&mouseY<380&&mouseY>360) {
    if (mousePressed) {
      txt.mouseClickA();
    } else {
      txt.mouseReleasedA();
    }
  }
  if (mouseX<width/2-40 &&mouseX>width/2-80&&mouseY<380&&mouseY>360) {
    if (mousePressed) {
      txt.mouseClickB();
    } else {
      txt.mouseReleasedB();
    }
  }
}
 
 
void WebLine() {
  if (pos.length == 0 || dist(mouseX, mouseY, pos[pos.length-1].x, pos[pos.length-1].y) > brushInterval) {
    pos = (PVector [])append(pos, new PVector(mouseX, mouseY));
  }
  for (int i = 0; i < pos.length; i++) {
    float r = dist(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
    if (r < connectInterval) {
      pushStyle();
      strokeWeight(1);
      stroke(Color[k][0], Color[k][1], Color[k][2], map(r, 0, connectInterval, 10, 5));
      line(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
      popStyle();
    }
  }
}
 
//Draw Tshirt
void Skateboard() {
  pushStyle();
  fill(255);
  stroke(200);
  strokeWeight(2);
  pushMatrix();
  rectMode(CENTER);
  rect(width/2-25, height/2, 900, 200, 100);
  popMatrix();
  popStyle();
}
 
class Text {
  //Text
  void showText() {
    pushStyle();
    fill(200);
    text("Press 'A' for pen", 200, 330);
    text("Press 'B' for paralell pen", 330, 330);
    text("Press 'C' for Dot pen", 500, 330);
    text("Press 'D' for Web pen", 650, 330);
    text("*Only Dot pen & Web pen are avilable for color change", width/2-130, 60);
    popStyle();
    pushStyle();
    fill(0);
    text("CLEAR", width/2-50-30, 370);
    stroke(0);
    line(width/2-30, 360, width/2-30, 370);
    text("SAVE", width/2-50+30, 370);
    popStyle();
  }
  //save_picture_to_local
  void mouseClickA() {
 
    saveFrame(frameCount + ".png");
    pushStyle();
    fill(255, 0, 0);
    text("SAVE", width/2-50+30, 370);
  }
  void mouseClickB() {
    background(255-16);
    Skateboard();
    showText();
    pushStyle();
    fill(255, 0, 0);
    text("CLEAR", width/2-50-30, 370);
  }
  void mouseReleasedA() {
    fill(0);
    text("SAVE", width/2-50+30, 370);
  }
  void mouseReleasedB() {
    fill(0);
    text("CLEAR", width/2-50-30, 370);
  }
 
}
 
//class shape {
void shapeA() {
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  if (d <= 40) {
    float r = (mouseX + mouseY)/2;
    float g = max(mouseX, mouseY);
    float b = 255 - max(mouseX, mouseY);
    float s = constrain(10-d, 2, 10);
    stroke(r, g, b, 255-16);
    strokeWeight(s);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}
void shapeB() {
  strokeWeight(3);
  float r = (mouseX/4 + mouseY/4);
  float g = max(mouseX/4, mouseY/4);
  float b = 255 - max(mouseX/4, mouseY/4);
  stroke(r, g, b, 255-16);
  line(pmouseX, pmouseY, mouseX, mouseY);
  pushStyle();
  strokeWeight(5);
  pushMatrix();
  line(mouseX, mouseY, mouseX+10, mouseY-10);
  popStyle();
  popMatrix();
}
 
void shapeC() {
  pushStyle();
  fill(Color[k][0], Color[k][1], Color[k][2], 50);
  noStroke();
  ellipse(mouseX+random(-13, 13), mouseY+random(-23, 23), random(12), random(12));
  popStyle();
  pushStyle();
  stroke(Color[k][0], Color[k][1], Color[k][2]);
  strokeWeight(1);
  popStyle();
}

Final Result

The final result achieves the following function 1) 4 different brush 2) changing color of the brush (only two available) 3) save the picture to local 4) clear the pad

  • Show Code
/** @peep sketch */
//shape Shape;
Text txt;
float ratio;
PVector []pos;
float brushInterval, connectInterval;
int k;
int[][] Color={{255, 0, 0}, 
  {232, 104, 48}, 
  {232, 58, 48}, 
  {199, 22, 111}, 
  {108, 22, 199}, 
  {22, 99, 199}, 
  {22, 199, 46}, 
  {232, 226, 48}, 
};//k,j as first and second
void setup() {
  //Shape=new shape();
  frameRate(100);
  size(1000, 400);
  background(255-16);
  stroke(0);
  pos = new PVector[0];
  brushInterval = 2; 
  connectInterval = 50;
  txt=new Text();
  txt.showText();
  Skateboard();
}
 
void draw() {
 
  colorBoard();
  SelectColor();
  if ((keyPressed==true)&&(key=='a')) {
    shapeA();
  } else if ((keyPressed==true)&&(key=='b')) {
    shapeB();
  } else if ((keyPressed==true)&&(key=='c')) {
    shapeC();
  } else if ((keyPressed==true)&&(key=='d')) {
    WebLine();
  } 
 // if ((keyPressed == true)&&(key=='1')) {
   // txt.clean();
 // }
  //
  if (mouseX<width/2 &&mouseX>width/2-50&&mouseY<380&&mouseY>360) {
    if (mousePressed) {
      txt.mouseClickA();
    } else {
      txt.mouseReleasedA();
    }
  }
  if (mouseX<width/2-40 &&mouseX>width/2-80&&mouseY<380&&mouseY>360) {
    if (mousePressed) {
      txt.mouseClickB();
    } else {
      txt.mouseReleasedB();
    }
  }
}
//class shape {
void shapeA() {
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  if (d <= 40) {
    float r = (mouseX + mouseY)/2;
    float g = max(mouseX, mouseY);
    float b = 255 - max(mouseX, mouseY);
    float s = constrain(10-d, 2, 10);
    stroke(r, g, b, 255-16);
    strokeWeight(s);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}
void shapeB() {
  strokeWeight(3);
  float r = (mouseX/4 + mouseY/4);
  float g = max(mouseX/4, mouseY/4);
  float b = 255 - max(mouseX/4, mouseY/4);
  stroke(r, g, b, 255-16);
  line(pmouseX, pmouseY, mouseX, mouseY);
  pushStyle();
  strokeWeight(5);
  pushMatrix();
  line(mouseX, mouseY, mouseX+10, mouseY-10);
  popStyle();
  popMatrix();
}
 
void shapeC() {
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  pushStyle();
  fill(Color[k][0], Color[k][1], Color[k][2], 50);
  noStroke();
  ellipse(mouseX+random(-13, 13), mouseY+random(-23, 23), random(12), random(12));
  popStyle();
 
  pushStyle();
  stroke(Color[k][0], Color[k][1], Color[k][2]);
  strokeWeight(1);
  popStyle();
}
 
//SelectColor
void SelectColor() {
  if (mousePressed) {
    if (mouseX>950&& mouseY<50) {
      k=0;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 0, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>50 && mouseY<100) {
      k=1;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 50, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>100 && mouseY<150) {
      k=2;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 100, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>150 && mouseY<200) {
      k=3;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 150, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>200 && mouseY<250) {
      k=4;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 200, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>250 && mouseY<300) {
      k=5;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 250, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>300 && mouseY<350) {
      k=6;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 300, 50, 50);
      popStyle();
    }
  }
 
  if (mousePressed) {
    if (mouseX>950&& mouseY>350 && mouseY<400) {
      k=7;
      pushStyle();
      fill(Color[k][0], Color[k][1], Color[k][2]);
      strokeWeight(3);
      stroke(255);
      rect(950, 350, 50, 50);
      popStyle();
    }
  }
}
 
void WebLine() {
  if (pos.length == 0 || dist(mouseX, mouseY, pos[pos.length-1].x, pos[pos.length-1].y) > brushInterval) {
    pos = (PVector [])append(pos, new PVector(mouseX, mouseY));
  }
  for (int i = 0; i < pos.length; i++) {
    float r = dist(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
    if (r < connectInterval) {
      pushStyle();
      strokeWeight(1);
      stroke(Color[k][0], Color[k][1], Color[k][2], map(r, 0, connectInterval, 10, 5));
      line(pos[i].x, pos[i].y, pos[pos.length-1].x, pos[pos.length-1].y);
      popStyle();
    }
  }
}
//drawcolorBoard
void colorBoard() {
  pushStyle();
  fill(Color[0][0], Color[0][1], Color[0][2]);
  noStroke();
  rect(950, 0, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[1][0], Color[1][1], Color[1][2]);
  noStroke();
  rect(950, 50, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[2][0], Color[2][1], Color[2][2]);
  noStroke();
  rect(950, 100, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[3][0], Color[3][1], Color[3][2]);
  noStroke();
  rect(950, 150, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[4][0], Color[4][1], Color[4][2]);
  noStroke();
  rect(950, 200, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[5][0], Color[5][1], Color[5][2]);
  noStroke();
  rect(950, 250, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[6][0], Color[6][1], Color[6][2]);
  noStroke();
  rect(950, 300, 50, 50);
  popStyle();
 
  pushStyle();
  fill(Color[7][0], Color[7][1], Color[7][2]);
  noStroke();
  rect(950, 350, 50, 50);
  popStyle();
}
 
 
 
//Draw Tshirt
void Skateboard() {
  pushStyle();
  fill(255);
  stroke(200);
  strokeWeight(2);
  pushMatrix();
  rectMode(CENTER);
  rect(width/2-25, height/2, 900, 200, 100);
  popMatrix();
  popStyle();
}
 
class Text {
  //Text
  void showText() {
    pushStyle();
    fill(200);
    text("Press 'A' for pen", 200, 330);
    text("Press 'B' for paralell pen", 330, 330);
    text("Press 'C' for Dot pen", 500, 330);
    text("Press 'D' for Web pen", 650, 330);
    text("*Only Dot pen & Web pen are avilable for color change", width/2-130, 60);
    popStyle();
    pushStyle();
    fill(0);
    text("CLEAR", width/2-50-30, 370);
    stroke(0);
    line(width/2-30, 360, width/2-30, 370);
    text("SAVE", width/2-50+30, 370);
    popStyle();
  }
  //save_picture_to_local
  void mouseClickA() {
 
    saveFrame(frameCount + ".png");
    pushStyle();
    fill(255, 0, 0);
    text("SAVE", width/2-50+30, 370);
  }
  void mouseClickB() {
    background(255-16);
    Skateboard();
    showText();
    pushStyle();
    fill(255, 0, 0);
    text("CLEAR", width/2-50-30, 370);
  }
  void mouseReleasedA() {
    fill(0);
    text("SAVE", width/2-50+30, 370);
  }
  void mouseReleasedB() {
    fill(0);
    text("CLEAR", width/2-50-30, 370);
  }
 
}

Reference 1) Anon, (2016). [online] Available at: http://file:///C:/Users/Administrator/Desktop/Design%20Programming/assignment3/Drawer_Drawer.pde%20at%20master%20%C2%B7%20pikipity_Drawer%20%C2%B7%20GitHub.html [Accessed 12 Jun. 2016]. 2)Anon, (2016). [online] Available at: http://file:///C:/Users/Administrator/Desktop/Design%20Programming/assignment3/%E7%94%A8%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8B%E6%89%93%E9%80%A0%E5%8A%A8%E6%80%81%E7%94%BB%E6%9D%BF_20%E5%8C%BA.html [Accessed 12 Jun. 2016]. 3)Anon, (2016). [online] Available at: http://peepproject.com/tutorials/tutorial/31/view

Comments

Nobody has said anything yet.