Cas­e­-­o­-­M­a­t­i­c­, Ass­e­s­s­m­e­n­t 3

by Nathan Dagher
  • Show Sketch
/**@peep sketchcode */
//Case-o-Matic, sketchpad, designed by Nathan Dagher, ndag2625, Deco1012, Semeseter 1, 2016
 
 
import controlP5.*;       //The coding is sourced from sojamo.de/libraries/controlP5, Andreas Schlegel, 2012
ControlP5 cp5;
 
boolean toggleValue = false;
 
int CC1 = color (150, 150, 150);
int CC2 = color (150, 50, 50);
int CC3 = color (150, 100, 100);
 
boolean Squares = false;
boolean Diamonds = false;
boolean Signature = false;          //Boolean code for the tabs
boolean Save = false;
boolean Clear = false;
boolean TextBox = false;
 
 
 
void setup() {
  background(0);
  size(600, 900, P3D); //Rendering in 3d allows dynamic effects to certain code
  smooth();
 
  //Introduction text is below, creating custom font
  textAlign(CENTER);//textMode(SHAPE);
  fill(255);
  PFont title;
  PFont tools;
  PFont typeOn = createFont("manbow lines.ttf", 35);//This variable is for the typeable text for the design
  title = createFont ("Steelworks Vintage Demo-2.ttf", 60); //Font for the title
  textFont (title);
  text("Case-o-Matic!", width/2, height*.40); //title text
 
  //Introduction message, highlighting system controls
  tools = createFont ("Elevation.ttf", 12);
  textFont (tools);
  text("Welcome to Case-O-Matic! Get ready to design your own case!", width/2, height*.45); 
  text("Within this canvas, you will be able to design a 1930s glamour inspired mobile case.", width/2, height*.47);
  text("Each tab on the side will allow you to craft unique styles and designs, with the tabs", width/2, height*.49);
  text("descending in order in which we recommend creating your design. Tap each tab to", width/2, height*.51);
  text("activate the brush, turning the tab red, and tap on the canvas to begin drawing.", width/2, height*.53);
  text("Please ensure you turn the tab off, when moving onto the next style. The first", width/2, height*.55);
  text("twoshapes create a tunnel effect, styles inspired from the mistisicm of the", width/2, height*.57);
  text("1930s. Signature, allows you to sign your design, truly making it yours, or", width/2, height*.59);
  text("tap the text box and type your name and then tap the canvas to place your", width/2, height*.61);
  text("your name, to change the text, press enter. If you need to restart, tap", width/2, height*.63);
  text("the clear button. Once finished, tap the save tab, and it will save a", width/2, height*.65);
  text("png file on your desktop, and send it through to us, and", width/2, height*.67);
  text("we will make your case! Be sure to draw over this!", width/2, height*.69);
 
  //Below is the CP5 control board, allowing for buttons to be functional, and allow the user to choose each mode
  //The coding is sourced from sojamo.de/libraries/controlP5, Andreas Schlegel, 2012
  cp5 = new ControlP5(this);
 
  cp5.addToggle("Squares")
    .setPosition(20, 50)              //The tab for Circles
    .setSize(50, 20)                    
    .setColorBackground(CC1)
    .setColorActive(CC2)
    .setColorForeground(CC3)
    .setCaptionLabel("     Squares")
    ;
 
  cp5.addToggle("Diamonds")
    .setPosition(20, 180)              //The tab for Diamonds
    .setSize(50, 20)
    .setColorBackground(CC1)
    .setColorActive(CC2)
    .setColorForeground(CC3)
    .setCaptionLabel("   Diamonds")
    ;
 
  cp5.addToggle("Signature")
    .setPosition(20, 310)              //The tab for Signatures
    .setSize(50, 20)
    .setColorBackground(CC1)
    .setColorActive(CC2)
    .setColorForeground(CC3)
    .setCaptionLabel("  Signature")
    ;
 
  cp5.addToggle("Save")
    .setPosition(20, 440)              //The tab for saving 
    .setSize(50, 20)
    .setColorBackground(CC1)
    .setColorActive(CC2)
    .setColorForeground(CC3)
    .setCaptionLabel("       Save")
    ;
 
  cp5.addToggle("Clear")
    .setPosition(20, 570)              //The tab for clearing the display
    .setSize(50, 20)
    .setColorBackground(CC1)
    .setColorActive(CC2)
    .setColorForeground(CC3)
    .setCaptionLabel("       Clear")
    ;
 
 
  cp5 = new ControlP5(this);
 
  cp5.addTextfield("input")
    .setPosition(20, 700)              //The tab for entering text
    .setSize(120, 40)
    .setFont(typeOn)
    .setFocus(true)
    .setColor(color(255))
    ;
 
  textFont(typeOn);
}
 
 
 
void draw() {
 
  /*SQUARES: The first tab allows users to create circles that follow the users mouse direction, and 
   is charactersied by a looping effect, within a select colour palete.*/
  if (Squares) {
    if (mousePressed) {
      noStroke();
      rectMode(CENTER);
      fill(random(20), random(100), random(255));
      rect(pmouseX, pmouseY, mouseX, mouseY);
    }
  }
 
  /*DIAMONDS: Here, the user can draw diamonds alike to the characteristics of the circles
   which follow a looping path based on the postion of the mouses' x and y, whilst drawing 
   diamonds in randomised colours within the colour set.*/
  if (Diamonds==true) {
    if (mousePressed) {
      noFill();
      stroke(random(255), random(100), random(158));
      strokeWeight(mouseX);
      rect(pmouseX, pmouseY, 10, 10);
    }
  }
 
  //SIGNATURE: Here the user can etch their name or signature onto their peice, through the direction of the mouse
  if (Signature==true) {
    if (mousePressed) {
      stroke(255);
      strokeWeight(5);
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
  }
 
  //SAVE: This allows the user to save their design once finished
  if (Save==true) {
    saveDrawing();
  }
 
  //CLEAR: a reset button, that brings a black background to reset the page
  if (Clear==true) {
    background(0);
  }
 
  //TEXT: a textbox, that allows users to input words, and place them on their design. following where the mouse is pressed
  fill(255);
  if (mousePressed) {
    text(cp5.get(Textfield.class, "input").getText(), pmouseX, pmouseY);
  }
}
 
 
//SAVE: This code allows the sketch to be saved and stored in their files.
void saveDrawing() {
  saveFrame("images/casedesign###.png"); //when running on the web it will put the PNG in a new browser tab
}

The Design

Allowing users to design their own unique case for their mobile device was the goal. The sketchpad in which I have developed allows users to create freely through the unique options of design, a 1930s Glamour inspired iPhone and/or iPad case.

The Influences, and development

The art style of the sketchpad draws relatively close to the facade and glamour style of the 1930s. Building my original idea, I took into account the work of Damien Drew, Ian Gracie, & Michael Turner, with their art direction with the motion picture film, The Great Gabsy (2013). The uniques of its geometric structure, with warm vibrant colour palettes, associated with mysticism, enhanced through the sharp shapes. Developing this design thought, I undertook the work ORA 2003 CD-ROM by Casey REAS, where the looping effect of the shapes demonstrated a unique and favoured look that would help carry the themes of the 1930s Glamour. Where the repeated patterns created a distinct feel to the design process, greatly enhancing a users sketch, as the simplicity of the repeated shapes can develop into a dynamic design. I then looked at the minimal look of Mrdoob’s Harmony, sketchpad, allowing users to simply choose their tool and produce their sketch. The layout of this sketchpad was carried through to the final design, using a simple layout to allow users fast and effect access.

The intial design was based on the if (keyPressed) method, until utlising P5 libaries to develop a GUI. The manner in which the shapes would draw, I converted the render of the processing file to 3d, as it created a dynamic effect to the diamonds. The rectangles for the first tab, they were orginally circles, untill experimenting with traingles, quads, and lines, I came to the decision to maintain consistency through it balancing with the diamonds by selecting rectangles to be drawn. The signature tab was supposed to be the final touch of personalisation, until further development and learning, I understood how to include a text input bar, that allowed users to input words and place them via the position of the mouse when clicked. I did try to develop the saving stage, however deemed unsucessful due to my own constraints, not being able to fully manipulate and code for the design to be saved onto a template. The introductional message system, I wanted to keep clean and fast, being able to effienctly understand the sketchpad upon startup, without wandering or tapping into a new page to view the info. Finally I reshaped the size of the window, as when I proceeded to create a mockup, the sizing did not correctly fit the size of an iPhone casing.

Justification of Final Design: Case-o-Matic

The final design of my Sketchpad, follows key designs from the influences, where the name Case-o-Matic stems from the type of brand names within the 1930s. The style of tools in the sketchpad allow the user to generate a design that reflects the chosen feel, based entirely on their own customisable drawn path. The tools are simple, and coded to allow the user to have fun whilst designing their iPhone case, with the two shapes (rectangles and diamonds) following the path of the users mouse when pressed. Developing a looping path of that one shape that changes size based on the position of the mouse. There is too the unique name etch onto the design, with users having the option to either sign their design, or type into the interface and place their name or other personal wording. The sketchpad then allows the user to save their own unique design, saving onto their desktop, as well as into another window for them to view.

Ideally I would have liked for a template to be visible and for users to see their final design, however my own constraints with knowing how to code such elements, and be able for the final design to be exported out onto a mockup direct for the user to see, would have been useful. However with the final design as is, I believe that it does an appealing job of designing a unique custom piece, that when applied to a mockup of the intended final product, the art style and flow of shape and colour does create a unique likeable case for Personal mobile devices. I ultimately do like the retro feel that it creates through the looping shapes and direction of the case, backed with the chosen font for unique text to be applied to the design. As the final verdict, I am happy with what I have coded, however if I didn't have such constraints, further development could be applied.

Referrences

Comments

Nobody has said anything yet.