Ass­i­g­n­m­e­n­t­3­_­x­c­h­e­8­9­0­8

by sherly chen

Design Brief: This time we will design a website to produce complex and visually appealing designs using a “sketchpad.” My idea of this sketchpad is simple, clear and easy to use. First of all, the sketch should provide a number of tools for users experiment with. This sketchpad is used for design skateboards and iPone and iPad Cases; thus, tools are really flexible to draw. For the sketchpad size, I don't choose a very big size. Instead, I choose a medium size because I don't want it looks really heavy. At the same time, I decide all the drawing tools are in the bottom because users can easy to press on each tool. In the sketchpad, there are total seven tools, which are general brush, wide brush, line brush, color brush, dot brush, ellipse brush, eraser and color bar. General brush allows a user to draw any lines they want. The wide brush can draw really thick lines. Line brush is a special brush that users can try to create a different pattern. For the color brush, it likes a rainbow that shows many colors in one line. The dot brush allows users to draw a dotted line. And, ellipse brush can show many different size circle links together in a line. An eraser is a necessary tool in the sketchpad because it helps us to fix the mistake. Lastly, the color bar can give us the color you want. It controls every brush's color. For those customers who are design the skateboards, iPone, and iPad case. They can use those tools to create the pattern they want. Therefore, sketchpad makes it easier for customer to design the prototype.

Research: Before start doing the sketchpad, I did a lot of research on the sketchpad. The first one named sketchpad in Chrome Web Store. It is an official sketchpad in Chrome. I really like the simple design of the sketchpad. And the color process bar is convenience for users to choose the color. Thus, I decide to change the paint bucket to the process bar. Sketchpads have a long history in computer science and there have been many interesting experiments with the ideas in this design brief. I look at Muro by DeviantArt which is an online sketch board with a wide range of painting tools. I find out there are many interesting brushes tools that inspired me.

Outcomes: Because this is our last project, it's not easy to start. I find out that what kind of brushes you will design is pretty difficult. After look at other famous designer’s project, I get inspired from it. For the design of iPhone, skateboard and iPad case, the tools need to be colorful and easy for users to draw the picture they want. Therefore, I designed some special tools.

Reference: Chrome sketchpad https://chrome.google.com/webstore/detail/sketchpad/lkllajgbhondgjjnhmmgbjndmogapinp?hl=en http://muro.deviantart.com

How to use: Total seven brushes tools and users can use mouse to press onn each one of them. Then slowly draw it. The color changes is on the right side of the sketchpad.

  • Show Sketch
/* @pjs preload="/uploads/16072/1.jpg"; 
preload="/uploads/16072/2.jpg"; 
preload="/uploads/16072/3.jpg";
preload="/uploads/16072/4.jpg"; 
preload="/uploads/16072/5.jpg"; 
preload="/uploads/16072/6.jpg;
preload="/uploads/16072/7.jpg"; 
preload="/uploads/16072/q.png";
/** @peep sketchcode */
 
int brushMode = -1;//This is the bush mode
int py = 45;// between mode switch and sketchpad's offset
int linePosi = 0;//between mode switch and sketchpad y axis location 
int r = 0, g = 0, b = 0;// color choice(rgb)
 
void setup () {   //sketchpad size
    size (800, 500);  
    background (255);
 
    linePosi = height - 170 + py;//dividing line 
    drawIcon (255);// icon
    progressBar ();//progessing bar 
 
    frameRate (1000);
}
PImage img;
void drawIcon (int mode) {
 //   PImage img;
    char ch;
    String str;
    float dh = 250;
    //upload those icons 
    imageMode(CORNER);
//    img = loadImage ("uploads/16072/1.jpg");// upload the image from the outside(icons)
///    image (img, 0, 0);
    img = loadImage ("/uploads/16072/q.png");
    img.resize (width, 170);
    image (img, 0,(float)(height - 170 + py));
 
    ch = 1;
    for (int i = 0; i < 7; i ++) {    // total seven icons, they are repeating for seven times 
        str = "/uploads/16072/" + ch +  ".jpg"; //println (str);// the name of the combination 
        ch ++;
        img = loadImage (str);
        img.resize (70, 120);// redefine the size 
        if (mode == i) {
            dh = height - 170 + py;// increase the height, otherwise it will offset 
        } else {
            dh = height - 150 + py;
        }
        image(img, i*100, dh);// draw chart 
    }
 
    strokeWeight (3);
    stroke (0, 0, 0);
    line (0, linePosi, width, linePosi);// draw lines 
}
 
void draw () {
    if (mousePressed) {   // check the mouse can press or not, then check is it pass the line?
        if (mouseY > linePosi) {
            for (int i = 0; i < 7; i ++) {
                if (mouseX > i*100 && mouseX < 700) { // jugdement which brush the mouse will choose 
                    brushMode = i;
                }
            }
            drawIcon (brushMode);// refresh rhe brush icon 
        }
 
        progressBar ();// update the processbar's status 
        drawBoard (brushMode);// open the sketchpad 
    }
 
 //   img = loadImage ("/uploads/16072/2.jpg");
 ///   println ("000");
 //   image (img, 0, 0);
}
 
void drawBoard (int mode) { // Total seven type of brush mode, need to judgement it separately 
    switch (mode) {
        case 0: generalBrush (); break;//Every mode correspond each icon 
        case 1: colorBrush (); break;
        case 2: wideBrush (); break;
        case 3: lineBrush (); break;
        case 4: dottedBrush (); break;
        case 5: ellipseBrush (); break;
        case 6: eraserBrush (); break;
        default: break;
    }
}
 
void generalBrush () {     // This is the general brush(color rgb, and the stroke weight is 4)
    strokeWeight (4);
    stroke (r, g, b);
    if (mousePressed && mouseY < linePosi)
        point (mouseX, mouseY);
}
 
void wideBrush () {       //wide brush 
    strokeWeight (14);
    stroke (r, g, b);
    if (mousePressed && mouseY < linePosi)
        point (mouseX, mouseY);
}
 
int lastXl, lastYl;
int jl = 7;
 
void lineBrush () { //line brush, it use to jugment from a line to another line, if it over jl,then start drawing
    int dis = (int)dist (mouseX, mouseY, lastXl, lastYl);
//    println (dis);
 
    strokeWeight (3);
    stroke (r, g, b);
 
    if (mousePressed && mouseY < linePosi) {
        if (dis > jl) {
            line (mouseX+7, mouseY-7, mouseX-7, mouseY+7);  
 
            lastXl = mouseX;
            lastYl = mouseY;
        }
    }
}
 
int bj = 5;
int lastBar = -1;
 
void colorBrush () { // color brush, change the color mode and if x axis increase, it change the color
    colorMode(HSB, height, height, height);
    strokeWeight (4);
 
    int whichBar = mouseX / bj;
    int barX = whichBar * bj;   
 
    stroke (barX, height, height);
    if (mousePressed && mouseY < linePosi)
        point (mouseX, mouseY);
}
 
int dottedbrush = 0;
 
void dottedBrush () {    // point brush, continuously change the color? separate three tybes into the brush color from black to white
    colorMode (RGB, 100);
    dottedbrush += 5;
    strokeWeight (4);
    stroke ( dottedbrush & 0x00FF0000 >> 16, dottedbrush & 0x0000FF00 >> 8, dottedbrush & 0x000000FF);
    if (mousePressed && mouseY < linePosi)
        point (mouseX, mouseY);
}
 
int ellRadius;
int lastDist;
int lastX, lastY;
 
void ellipseBrush () { // this is the ellipse brush(random ellipse size), jugement the distance btween two ellipse, if it exceed then start to draw
    strokeWeight (1);
 
    ellRadius = 20;
    stroke (r, g, b);
 
    if (mousePressed && mouseY < linePosi) {
        int dis = (int)dist (lastX, lastY, mouseX, mouseY); //   println (dis + "lase:" + lastDist + "now:" + ellRadius);
        if ((ellRadius+lastDist) < dis*2) {
            ellRadius = (int)random (10, 50);
            lastX = mouseX;
            lastY = mouseY;
            ellipse (mouseX, mouseY, ellRadius, ellRadius);
            lastDist = ellRadius;
        }        
    }   
}
 
void eraserBrush () { // eraser( if customer draw something wrong, then you can use the eraser to redraw) 
    colorMode (RGB, 100);
    fill (255, 255, 255);
    noStroke ();
    strokeWeight (4);
    if (mousePressed) {
        if (mouseY < linePosi) {
            rect (mouseX-10, mouseY-10, 10, 10);    
        }
        if ((mouseX > width - 50) && (mouseY < 50)) {
            background (255, 255, 255);
            drawIcon (255);
            progressBar ();
        }
    }
}
 
int redValue = 690; //(rgb color value)
int greenValue = 690;
int blueValue = 690;
 
void progressBar () { //process bar, first judgement the mouse can press within these three process bar 
    if (mousePressed) {
        if (mouseButton == LEFT) {
            if(mouseX>=(width-105)&&mouseX<=(width-5)&&mouseY>=(height - 120)&&mouseY<=(height - 90)){
                redValue = mouseX-5;  println (redValue);
            }
 
            if(mouseX>=(width-105)&&mouseX<=(width-5)&&mouseY>=(height - 80)&&mouseY<=(height - 50)){
                greenValue = mouseX-5;
            }
 
            if(mouseX>=(width-105)&&mouseX<=(width-5)&&mouseY>=(height - 40)&&mouseY<=(height - 10)){
                blueValue = mouseX-5;
            }
        }
    }
 
    strokeWeight (1);
    colorMode (RGB, 100);
 
    r = (int)map (redValue, 690, 790, 0, 255);// map is mapping into rgb 
    g = (int)map (greenValue, 690, 790, 0, 255);
    b = (int)map (blueValue, 690, 790, 0, 255);
    stroke (r, g, b);
 
    fill (255, 255, 255);//put three color into the progress bar, and draw the line and rectangle from progress bar  
    line ((width-105), height - 100, width-5, height - 100);  
    rect (redValue, height-115, 10, 30);
 
    line ((width-105), height - 60, width-5, height - 60);  
    rect (greenValue, height-75, 10, 30);
 
    line ((width-105), height - 20, width-5, height - 20);  
    rect (blueValue, height-35, 10, 30);
}

Comments

Nobody has said anything yet.