Ass­e­s­s­m­e­n­t­0­3 - Ske­t­c­h­P­a­d

by Chinmay Kulkarni

BACKGROUND RESEARCH + INSPIRATION

My approach to this assignment was to develop a simple platform which would challenge the users in using their minds to develop content. I wanted to create a very simple tool, with vast array of possibilities, depending on how the tool was used.

For example, a pencil is a very, very simple tool - it doesn't have any rules as to how it should be used. It's just a block of wood, with graphite in it. That's it. There's nothing special about the pencil. But what is special is how it is used. A simple block of wood challenges our mind to be creative and to choose our own boundaries and capabilities. And as everyone knows, there are miraculous things people can do with a simply graphite within a block of wood.

  1. Photorealistic Graphite Drawing

  2. Cartoon Sketch

  3. Funny Pencil Drawing

As you can see, it's not the pencil which is creative, what what it allows your mind to do. Guitars are another example - you can strum, finger pick, tap, use it as a percussive instrument - the only limit is your imagination. Similarly skateboards are another example of a very simple item with no rules attached to them. Simply a tool for your mind to exercise it's creativity - to see what's possible. (This ties in with the project since my program allows users to make designs onto skateboards).

I drew a lot of inspiration from these "basic" tools which can create wonderous results and decided to pursue a program which emulated that - a simple tool to challenge the user to create interesting and meaningful work.

I wanted to strip down digital art to its simpliest and purest form - and in order to do this, I had a look at the history of Adobe Photoshop and also Photoshop's first demo. It was very facinating to see that even with such primitive tools, a lot was achievable - just further demonstrating that your mind is the real creative force behind projects and that tools are just the means of making the process easier.

My main source of inspiration came from Snapchat art and amazing drawings people made using nothing but a few shaed of colour. Here are a few examples:

  1. Drawings
  2. Wonder Woman
  3. Creative Snapchat Drawings

What I loved about these drawings is that regardless the limited tools for creative complex works, people found a way to do it. And the platform provided a quick, easy, and most of all fun way to create and share the way people felt.

This is what I wanted to emulate.

CODE EXPERIMENTATION

I wanted to start from the ground up - so I began exerimenting with ways to simply paint on a screen - a plain white canvas and a good old black paint brush. I wanted to see what I could do with a very very limited tool.

  • Show Code
/** @peep sketch */
void setup() {
  background(255);
  size(800, 750);
}
 
void draw() {
  if (mousePressed == true) {
    noStroke();
    fill(0);
    ellipse(mouseX, mouseY, 20, 20);
  }
}

It was quite fun seeing what I could do with a brush with only one size. However I felt that it would be better if I could have more control over the brush size - like Snapchat.

My original idea was to have a few set brush sizes and the user would pick between them using buttons (e.g. size 1, 2, 3, and so on). However, I decided to opt out that idea for slightly more control - a slider. I had quite a few difficulties in making a slider so I decided to import sliders from a GUI Library by Andreas Schlegel called controlP5. This helped me a lot and now I could further progress along my design.

Since I imported the libary and can't pull it up in Peep, I'll show what I mean through pictures: Brush Size LargeBrush Size Small

From here I realised the I could take the possbilities even further as to what I could create. However, now I wanted to incorporate colour. I knew that I wanted to have a slider that displayed hue. But what about shades of the colour? Should I leave it as just hues of the colour or add shades? And if I was going to add them how should I add them? I wanted to keep the program as basic and stripped back as could be whilst still providing many avenues for creativity. I thought that I should have it so when the user picks a colour the program gives to 5 shades of that colour to pick from - so it becomes a very easy, simple, and quick method of picking colours, rather than taking a really long time to get that exact colour.

However once again, I opted out of that idea and decided to follow through with a Hue, Saturation, Brightness slider, which makes picking colours very easy. Pick a colour. Then pick a shade. Simple. Yet it offered an enormous library of colours for users to choose from. Once again I used the controlP5 sliders to achieve this.

    Slider hue = cp5.addSlider("Hue", 0, 360, 180, 200, 160, 100, 30);
      Slider saturation = cp5.addSlider("Sat", 0, 100, 200, 200, 100, 30);
      Slider brightness = cp5.addSlider("Bright", 0, 100, 200, 240, 100, 30);
      Slider BrushSize = cp5.addSlider("BrushSize", 1, 50, 25, 50, 280, 250, 30);

    And then linking those sliders to the brush as seen below.

      if (mousePressed == true) {
          colorMode(HSB, 360, 100, 100);
          fill(Hue, Sat, Bright);
          noStroke();
          ellipse(mouseX, mouseY, BrushSize, BrushSize);

      I had achieved a stripped down version of tool a create digital art - you could adjust the brush size and the colour to your liking. I wanted to add furter brush controls such as hardness/softness, brush roundness, and brush rotation - similar to the brush properties that of photoshop, however I ran into trouble with managing it and time and so had to scrap those attempts.

      The final piece was to create a "mask" the users could draw on so they could see exactly how their product would finally look. I asked around and found out the way people have been doing this is to obtain the verticies of the shape and implement them into the code. Since I decided to draw on a skateboard and it wasn't a primitive shape, I didn't want to have to manually plug in the verticies. I decided to make a compound shape out of a rectangle, two circles, to make the shape of a skateboard - this way it would be a lot easier to obtain the verticies. Yet event still I was having difficulties. What I realised was that I could import an '.svg' as a shape and use that as a mask. This significantly saved me the hassle of hardcoding the verticies. So I created a vector on Adobe Illustrator, saved it as a '.svg' and dropped it straight into Processing. Skateboard Mask.

      I added an Erase All function so users could start again, a brush colour & size reference, and that finished up the project for me. A very primitive tool to develop drawings, yet one which challenges by making us ask ourselves I wonder what I can do with this...what are my possibilities....

      The Final Piece

      RESPONSE TO DESIGN BRIEF

      The aims of the design brief were met by creating an interactive sketchpad which would challenge it's users create magic from very simple, yet very powerful tools. I decided to chase the product category of skateboards since designs on skateboards illuminate a variety of different personas and characteristics. And going back to my aim of this project - create basic tool which makes the user want to question themselves "I wonder where I can go with this" - the skateboard encompasses that entirely. Here is a piece of wood on wheels which is as basic as it gets and it's all up to the individual's creativity to make the magic happen. From kickflips, to grinds, from bombing steep hills, to simple cruises, how the very simple tool of a skateboard is exercised, encompasses my aims for the project. They fit right together, hand-in-hand. It's all about experimenting and seeing how far you can push it. Where can you go with it.

      CONCLUSION

      As someone who isn't really all that great at straight-forward logical thinking that's required for programming, this assignment really opened my eyes to the beauty of what programming can do. I was really cool implementing the sliders and having the brush reference change itself in real-time according to my input of colour and brush size. It got me wondering about how much a lot of complex programs such as Adobe Photoshop (etc.) having going on behind the scenes. There was so much I wanted to incorporate into the project such as:

      1. More precise brush controls - to alter:
        1. Brush roundness
        2. Brush rotation
        3. Brush Hardness
        4. Jitter controls
      2. Opacity controls
      3. Shape controls - for more precise drawings of rectangles/lines/triangles (etc.)
      4. An effects panel on the right hand side (the left hand panel would be for free hand stuff, and the right could have various effects and types of brushes
      5. A well developed GUI
      6. Screenshot feature

      Unfortunately, my time managemant was extremely poor - and a major aspect I need to work on - and thus a lot of the later things I wanted to implement yet ran out of time.

      REFERENCES

      1. ControlP5 Library used within program

      The program doesn't run within Peep, please view the one submitted to BlackBoard

      Thanks

      • Show Code
      /** @peep sketch */
       
      import controlP5.*;
       
      ControlP5 cp5;
       
      int Hue = 100;
      int Sat = 100;
      int Bright = 100;
      int BrushSize = 25;
       
      PShape Skateboard;
       
      void setup() {
        background(200);
        size(800, 750);
       
        smooth();
        Skateboard = loadShape("Skateboard_Vector_SVG.svg");
       
        // SLIDERS
        cp5 = new ControlP5(this);
       
        // ("NAME", MIN VALUE, MAX VALUE, START VALUE, POSX, POSY, WIDTH, HEIGHT)
        Slider hue = cp5.addSlider("Hue", 0, 360, 180, 200, 160, 100, 30);
        Slider saturation = cp5.addSlider("Sat", 0, 100, 200, 200, 100, 30);
        Slider brightness = cp5.addSlider("Bright", 0, 100, 200, 240, 100, 30);
        Slider BrushSize = cp5.addSlider("BrushSize", 1, 50, 25, 50, 280, 250, 30);
      }
       
      void draw() {
       
        // SKATEBOARD
        shape(Skateboard, 0, 0, 1200, 750);
        fill(10);
       
        // COLOUR ELLIPSE
        colorMode(HSB, 360, 100, 100);
        noStroke();
        fill(Hue, Sat, Bright);
        ellipse(115, 215, BrushSize, BrushSize);
       
        // MOUSE ACTIONS
        if (mouseX > 510 && mouseX < 690 && mouseY > 100 && mouseY < 650 && mousePressed == true) {
          colorMode(HSB, 360, 100, 100);
          fill(Hue, Sat, Bright);
          noStroke();
          ellipse(mouseX, mouseY, BrushSize, BrushSize);
        }
       
        // ERASE
       
       
        fill(255);
        rect(250, 320, 50, 50);
        if (mouseX > 250 && mouseX < 300 && mouseY > 320 && mouseY < 370) {
          fill(360);
          rect(250, 320, 50, 50);
          if (mouseX > 250 && mouseX < 300 && mouseY > 320 && mouseY < 370 && mousePressed) {
            background(220);
          }
        }
       
        String erase = "Erase All";
        fill(0);
        text(erase, 250, 335, 250, 300);
      }

      Comments

      Nobody has said anything yet.