Assignment 3

by Fuad Soudah

Introduction

A client, pleased with the previous works, assigned me with a new task, to create a digital sketchpad, based on which any person would be able to create customizable apparel, etui or any other element showcasing the individual style of each person.

Considering we were to create a sketchpad, I decided that the best object that would fit its criteria would be a skateboard deck.

Inspiration

The concept of chaos is quite broad. Even though order makes things simplier, some people prefer chaos, because of its unruliness and the beuty which lays within the concept itself.

Sports are generally quite chaotic. The team usually try their best to create an order with which they may or may not win the game. However we wouldn't watch football if it was purely the same each time we watched it, correct? The chaotic element makes it interesting, introduces power with which we're able to win any game.

Why not try underlining or personifying the concept of chaos, then? With a skateboard deck, so non-standard in it's looks, however esthetically beutyful, you'll be able to achieve any goals in style!

But it wouldn't be any style, it would be YOUR style. Captured and painted right on your deck!

First Steps

My initial idea was to keep the program simple, as the client seeks tools, relatively comprehensive, however not overly complicated, so that anyone could use it and be pleased with the results.

We don't want to overcrowd people with options, but let them take control of options, which either way will turn out to be, well, frankly said, just: awesome.

Preliminary Results

Show Sketch

/** @peep sketchcode */
button tina;
button paul;
button nutt;
button paco;
button lolo;
button buba;
button nono;
ArrayList history;
color penColor;
 
void setup(){
  size(500,600);
  background(255);
  stroke(0);
  tina = new button(20,20, "Red", color(255,0,0));
  paul = new button(60,20, "Blue", color(0,0,255));
  nutt = new button(100,20, "Black", color(0));
  paco = new button(140,20, "Green", color(0,255,0));
  lolo = new button (180,20, "Yellow", color(255,255,0));
  buba = new button (220,20, "Pink", color(255,0,255));
  nono = new button (260,20, "Aqua", color(0,255,255));
  history = new ArrayList();
  penColor = color(0);
}
 
void draw(){
tina.render();
paul.render();
nutt.render();
paco.render();
lolo.render();
buba.render();
nono.render();
stroke(penColor);
if (mousePressed == true){
line(pmouseX,pmouseY,mouseX,mouseY);
}
  if (mousePressed) {
    stroke(0, 16);
    line(pmouseX, pmouseY, mouseX, mouseY);
    for (int i = 0; i < history.size(); i++) {
      PVector p = (PVector) history.get(i);
      if (dist(mouseX, mouseY, p.x, p.y) < 30) {
        line(mouseX, mouseY, p.x, p.y);
      }
    }
    history.add(new PVector(mouseX, mouseY));
  }
noStroke();
}
 
void mouseClicked(){
  tina.ifClicked(mouseX,mouseY);
  paul.ifClicked(mouseX,mouseY);
  nutt.ifClicked(mouseX,mouseY);
  paco.ifClicked(mouseX,mouseY);
  lolo.ifClicked(mouseX,mouseY);
  buba.ifClicked(mouseX,mouseY);
  nono.ifClicked(mouseX,mouseY);
}
 
 
class button{
  String bName;
  int posX;
  int posY;
  color bColor;
  int bWid;
  int bHei;
 
  button(int _posX, int _posY, String _bName, color _bColor){
    posX = _posX;
    posY = _posY;
    bName = _bName;
    bColor = _bColor;
    bWid = 20;
    bHei = 20;
  }
 
 void render(){
   fill(bColor);
   rect(posX,posY,bWid,bHei);
 }
 
 void ifClicked(float clickX, float clickY){
 if (clickX >= posX && clickX <= posX + bWid){
   if (clickY >= posY && clickY <= posY + bHei){
     clicked();
   }
  }
 }
 
 void clicked(){
   penColor = bColor;
 }
}
 
class weblol{
  int posX;
  int posY;
  int bWid;
  int bHei;
 
  weblol(int _posX, int _posY){
    posX = _posX;
    posY = _posY;
    bWid = 20;
    bHei = 20;
  }
}

I decided to build the sketch page with basic tools, such as creating lines in different colours, however I introduced the web effect, which combined with the colours, they just create quite an interesting scheme.

Final Design

Show Sketch

/** @peep sketchcode */
button tina;
button paul;
button nutt;
button paco;
button lolo;
button buba;
button nono;
button hubl;
button omon;
button dupa;
button wowa;
button nowa;
ArrayList history;
color penColor;
 
//Arrays and buttons above
 
void setup(){
  size(500,600);
  background(255);
  stroke(0);
  tina = new button(20,20, "Red", color(255,0,0));
  paul = new button(60,20, "Blue", color(0,0,255));
  nutt = new button(100,20, "Black", color(0));
  paco = new button(140,20, "Green", color(0,255,0));
  lolo = new button (180,20, "Yellow", color(255,255,0));
  buba = new button (220,20, "Pink", color(255,0,255));
  nono = new button (260,20, "Aqua", color(0,255,255));
  hubl = new button (300,20, "Blueish", color(0,100,255));
  omon = new button (340,20, "Greenish", color(0,100,100));
  dupa = new button (380,20, "Goldenish", color(100,100,0));
  wowa = new button (420,20, "Redish", color(255,0,100));
  nowa = new button (460,20, "Purpulish", color(100,0,255));
  history = new ArrayList();
  penColor = color(0);
}
 
//a series of working coloring buttons above
//We need to render these buttons, so that they're clickable
// (underneath)
 
void draw(){
tina.render();
paul.render();
nutt.render();
paco.render();
lolo.render();
buba.render();
nono.render();
hubl.render();
omon.render();
dupa.render();
wowa.render();
nowa.render();
stroke(penColor);
if (mousePressed == true){
line(pmouseX,pmouseY,mouseX,mouseY);
} //Now we've got the nice "itching" effect, all the magic is here
  if (mousePressed) {
    stroke(0, 16);
    line(pmouseX, pmouseY, mouseX, mouseY);
    for (int i = 0; i < history.size(); i++) {
      PVector p = (PVector) history.get(i);
      if (dist(mouseX, mouseY, p.x, p.y) < 30) {
        line(mouseX, mouseY, p.x, p.y);
      }
    }
    history.add(new PVector(mouseX, mouseY));
  }
noStroke();
}
 
//So, what happens once we click some of these buttons?
//Of course, they will change the pen color!
 
void mouseClicked(){
  tina.ifClicked(mouseX,mouseY);
  paul.ifClicked(mouseX,mouseY);
  nutt.ifClicked(mouseX,mouseY);
  paco.ifClicked(mouseX,mouseY);
  lolo.ifClicked(mouseX,mouseY);
  buba.ifClicked(mouseX,mouseY);
  nono.ifClicked(mouseX,mouseY);
  hubl.ifClicked(mouseX,mouseY);
  omon.ifClicked(mouseX,mouseY);
  dupa.ifClicked(mouseX,mouseY);
  wowa.ifClicked(mouseX,mouseY);
  nowa.ifClicked(mouseX,mouseY);
}
 
//Now the more technical stuff, so that all the magic keeps on working
//Main focus? Classes.
 
class button{
  String bName;
  int posX;
  int posY;
  color bColor;
  int bWid;
  int bHei;
 
  button(int _posX, int _posY, String _bName, color _bColor){
    posX = _posX;
    posY = _posY;
    bName = _bName;
    bColor = _bColor;
    bWid = 20;
    bHei = 20;
  }
 
  //And there's more important stuff, without which the code would not work
  //Or it would work but it would just look badly
 
 void render(){
   fill(bColor);
   rect(posX,posY,bWid,bHei);
 }
 
 void ifClicked(float clickX, float clickY){
 if (clickX >= posX && clickX <= posX + bWid){
   if (clickY >= posY && clickY <= posY + bHei){
     clicked();
   }
  }
 }
 
 void clicked(){
   penColor = bColor;
 }
}
 
//Now we've got a few key bindings for "f" and "c"
 
  boolean IsPressed = true;
 
void keyPressed(){
  if (key == 'f'){
  fill(255,255,255,60);
  noStroke();
  rect(0,0,width,height);
  }
  else if (key == 'c'){
  fill(255,255,255);
  noStroke();
  rect(0,0,width,height);
}
}

I introduced more colours and key bindings such as 'f' for fade and 'c' for clear. The c key however does not works as a refreshing key, meaning the lines seems to still be in the system and as a result the interaction with the sketchpad changes a notch.

Product Placement

These are just examples of how skateboard decks could look like, once applied the style created in the sketchbook provided.

References

I decided to take upon an interesting concept of building webs. Therefore I used a code built by Rob Saunders, the first sketch, which is to be found here: http://peepproject.com/portfolios/entry/1337/view

Upload Picture

Ass­i­g­n­m­e­n­t 3