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

by - Nay Min Thu

For this task, we have to create an interactive "sketchpad" application that will allow users to easily create aesthetically pleasing images by applying generative drawing techniques. I have chosen to create the application that will create images to be drawn on Skateboards.

Skateboards are an accessory that is mainly used by teens. Teens at such age tends to like bright, edgy colors and shapes that will make them stand out among the crowd.

With this in mind, I thought of how music defines our individuality and how it is used to express ourselves in many ways. So i decided to come up with something that would represent music or sound waves.

A skateboard is a type of recreational transport, meaning it moves so sound waves or any type of wave on a skateboard would look cool and fancy, which would fit the preference of the users.

  • Show Sketch
/* @pjs font=/uploads/16182/controllerthreeoblique.otf; */
/** @peep sketchcode */
 
void setup() {
  colorMode(RGB);
  size(1000, 750);
  background(120);
  fill(255);
  stroke(0);
  strokeWeight(1);
  //clear button
  rect(10,10,70,40);
  //bg button 1
  fill(0);
  rect(830,60,150,40);
  //bg button 2
  fill(255);
  rect(830,130,150,40);
  fill(0,0,255);
  rect(830,138,150,25);
  //bg button 3
  fill(255,0,0);
  rect(830,200,150,40);
  fill(255);
  rect(830,208,150,25);
  //canvas
  rectMode(CENTER,CENTER);
  fill(255);
  rect(width/2,height/2,550,150);
  //text
  PFont font = createFont("/uploads/16182/controllerthreeoblique.otf",15);
  fill(0);
  textFont(font);
  textAlign(CENTER,CENTER);
  text("Clear", 42, 35);
  fill(255);
  text("Backgrounds", 900, 35);
  text("Q - Stars",200,700);
  text("W - Red Noise",500,700);
  text("E - Blue Noise",800,700);
  text("Mouse Click for pen",500,600);
}
 
void draw() {
  //clear all
  rectMode(CORNER);
  if(mousePressed){
    if(mouseX>10 && mouseX <80 && mouseY>10 && mouseY <50){
      setup();
   }
  }
  //pen tool
  colorMode(HSB);
  stroke(random(255), 255, 255);
  fill(random(255), 255, 255);
  if(mousePressed){
    if(mouseX>225 && mouseX <775 && mouseY>305 && mouseY <445){ 
    line(mouseX,mouseY,pmouseX,pmouseY);
  }
  }
 
  //canvas bg 1
  colorMode(RGB);
  if(mousePressed){
    if(mouseX>830 && mouseX <980 && mouseY>60 && mouseY <100){
      rectMode(CENTER,CENTER);
      fill(0);
      noStroke();
      rect(500,375,550,150);
  }
 }
 //canvas bg 2
  if(mousePressed){
    if(mouseX>830 && mouseX <980 && mouseY>130 && mouseY <175){
      rectMode(CENTER,CENTER);
      fill(255);
      noStroke();
      rect(500,375,550,150);
      fill(10,10,180);
      rect(500,375,550,130);
  }
 }
 //canvas bg 3
  if(mousePressed){
    if(mouseX>830 && mouseX <980 && mouseY>200 && mouseY <245){
      rectMode(CENTER,CENTER);
      fill(255,0,0);
      noStroke();
      rect(500,375,550,150);
      fill(255);
      rect(500,375,550,130);
  }
 }
 //constrains for the drawings to be within the canvas
float u = mouseX;
float i = mouseY;
float m1 = constrain(u, 236, 765);
float m2 = constrain(i, 312, 435);
//assigning stars to the key "q"
if ((keyPressed==true)&&(key=='q')) {
  star(m1,m2, 10, 4); //calling star from void below
}
 
//noise tool (Red)
float noiseScale = 0.05;
float m3 = constrain(u, 235, 765); //constrains for the drawing so they stay within the canvas
float m4 = constrain(i, 242, 324);
if ((keyPressed==true)&&(key=='w')) {
  width = constrain (width, 775, 775);
  height = constrain (height, 10, 10);
  for (int x=227; x < width; x++) {
    float noiseVal = noise((m3+x)*noiseScale, m4*noiseScale);
    stroke(255,0,0);
    line(x, m4+noiseVal*200, x, 375);
  }
}
//noise tool (Blue)
if ((keyPressed==true)&&(key=='e')) {
  width = constrain (width, 775, 775); //constrains for the drawing so they stay within the canvas
  height = constrain (height, 10, 10);
  for (int x=227; x < width; x++) {
    float noiseVal = noise((m3+x)*noiseScale, m4*noiseScale);
    stroke(0,255,255);
    line(x, m4+noiseVal*200, x, 375);
  }
}
 
}
//void star
for (int x = 20; x < width; x += 40) 
  { for (int y = 20; y < height; y += 40) 
    { float r = random(10, 15); star(x, y, r, r-5); 
} 
}
void star(float x, float y, float inner, float outer) {
  colorMode(HSB);
  int points = 6;
  stroke(random(255), 255, 255);
  fill(random(255), 255, 255);
  beginShape();
  float delta = radians(360/points);
  for (int i = 0; i < points; i++) {
    float ox = x + outer * cos(i*delta);
    float oy = y + outer * sin(i*delta);
    vertex(ox, oy);
    float ix = x + inner * cos(i*delta + delta/2);
    float iy = y + inner * sin(i*delta + delta/2);
    vertex(ix, iy);
  }
  endShape(CLOSE);
}

I added stars with rainbow color because of the recent trend of supporting gay marriage which is represented by a rainbow color. I thought it is trendy, as well as edgy, and can attract the users.

After playing with my tools and looking at pictures of skateboards i decided to add more base background option. I wanted to have more manual color options for the tools using a color wheel from the library or some sort but I am not able to do so. After racking my brains for hours and not having progress, i gave up on that function.

As being a teenage myself, i can relate to the users directly, i believe the sketchpad is very appealing and useful to the users and it is easy to use. I am satisfy with my outcome even though there are improvements to be done.

Comments

Nobody has said anything yet.