Ass­i­g­n­m­e­n­t 3 : Ske­t­c­h­p­a­d

by Giselle Gray

Assignment 3:

//controlP5 library needs to be added to processing inorder for sketches to run!

Background Research, Inspiration and Response to Design Brief

For this assignment I found it hard to choose what I wanted to do. I originally wanted to create a skateboard design specifically for girls that incorporated cute fruits that could be manipulated. I wanted to do this as part of the Girls Make Your Move initiative. Girls make your move encourages girls to be active and feel empowered doing so. I liked the idea of enabling women to create personalised skateboards but I had trouble with creating something that could be very cute and also not so cute (to cater for a wide audience). I decided that it may have been too niche and I found it hard trying to figure out how to encorporate the generative design aspect.

From there, I found I was a bit stumped and I found it hard to respond to the brief that allows generative design with interactivity from the user. I initially thought if I used the random() command the user wouldn't be able to control their design to a satisfactory extent - the design would not be the desired design. So after thinking it through a little bit more I thought that the user could choose what they wanted or they had the ability to click a button which allows the computer to generate a design for them.

I liked the idea of doing personalised phone cases that were sleek and also catered to a wide user base. I thought about brands that I particularily liked as well as simple yet nice looking designs that are out there on the market.

I found that I was drawn to the classy, understated momograming provided by The Daily Edited and Kate Spade New York.

Alt text(Web: The Daily Edited)

Alt text(Web: Crush Monkey)

I also looked into trianglify which is a high quality background generator which allows you to change 'cell size', 'variance' and 'colour'. I really wanted to create a design similar but upon researching and looking at the code (it's open source) I thought it was too diffucult to execute and was way beyond the scope of this course.

Alt text(Web: Crush Monkey)

Instead, from the triangular generator I sought inspiration from the colour schemes they had to offer. I liked how the design looked with different shades of the same colour so I wanted to somehow have my iphone case generator to allow for colour variation within the design.

I like arrows and how they represent movement, direction and achievement. I chose to impliment a simple arrow design (V shape) because of its meaning and its aesthetics.

Code experimentation

In the tutorial we were told about the GUI libraries in Processing. We were told to experiment with them and that we were allowed to use them in our assignment. I decided to use sliders, buttons and text fields. Instead of coming up with my own way to do it (which could be very time consuming), I decided to use ControlP5 so that I could focus on the manipulation of the controls and also spend time on other aspects of the design. By looking at the examples provided with the library I was able to quickly integrate it into my own sketch and have buttons and sliders working without the hassle.

Alt text

Sketch 1

Getting my design to this stage was very challenging for me. I wanted to push myself with this assignment and decided that in order to really make use of what I have learnt I should try make the design as generative as possible. This meant that I would have to find a way to generate the arrow shapes and not manually specify the coordinates of the shapes. To do this I first started off by writing down what I was trying to achieve and going through a few examples in order to identify a pattern. I noticed that I could use my 'Point' class from my previous assignment and modify it slightly to represent the vertices of each of the 'V' shapes. Then I would have a 'line' of 3 points with the point in the middle slightly lower than the other too. Once I started implementing my point class I realised that I could simplify the calculations by splitting the points into three different types, for example the point on the left edge of the case would always have an X value of 0 and so that meant I only had to work out its Y coordinate. In order to calculate the Y coordinate, I assigned an ID to each point (with the top left point having ID 0 and the bottom right having n, where n is the total number of points - 1 and can be calculated using 3 * number of lines - 1) and worked out which row it was representing. After I did this I was able to have a Point object reprsenting each vertex of the 'V' shapes I needed to draw.

Following this, I went back to my pen and paper to work out how I could display the shapes. Using the same technique I would draw out examples of what it had to do and try notice a pattern that I could then incorporate into a loop. After much experimentation and struggling I was able to get the desired effect! However, I noticed that I had missed out on the triangle on the top. So I changed the start value of my loop to -1 and in that first iteration made sure to draw the triangle. Once I did this I was able to generate my design with any thickness I desired.

I think that the foundations for a good iphone/ipad design were there but I needed to think about colours and how I was going to implement the monogramming that I liked (from Kate Spade/ tde. inspiration)

Alt text

Sketch 2

Utilising the ControlP5 library proved to be much simpler than trying to generate the design. I followed the examples to include a slider in my own project. Once I had positioned the slider I created a function that has the same name as the slider as this means that the library will execute the block of code. I made that function then regenerate the image using the value of the slider to dictate the thickness (or rather more correctly the number of rows of the 'V' shapes). This was quite easy to accomplish due to the hard work that was put into the previous stage to make the design generative.

I liked the background of the sketchpad being black as it didnt detract from the design and I think having the design next to the controls was easy to understand and looked aesthetically pleasing.

Alt text

Sketch 3

For the next stage I implemented the monogram. I added a text field (again, following the ControlP5 example) and some sliders to manage the positions and size of the text. This was inspired by Kate Spade and tde. I liked the personalisation and sleekness of the monogram.

Final Design

Alt text

Final Sketch

To finalise my sketchpad, I added 3 more sliders that would represent the red, green and blue colour values of the case. Following this, I made the colour fade as it went towards the bottom by decreasing the alpha value. I think that this allowed the design to be visually appealing no matter what the colours used were. To showcase the generative nature of my design I added a button to randomise the colour and thickness of the design and made the colour transition smoothly (something I saw how to do from the ControlP5 examples). I also added a black hole for the camera and cleaned up the code ensuring I had written proper comments. Once I was finished I realised that I would really like to 'save' some of my designs I was creating - and I'm sure the user would too. For this reason I looked online whether it was possible to save a region of the canvas to a file and quickly found a solution on the processing forums. Upon completing this I was quite pleased with the final result. The user is able to generate random designs and then fine tune them using the provided GUI to their liking. I think this is a good feature as it allows the user to seek inspiration and then customise it to their particular preferences. Similarly with the monogram they can add their own personal touch and finally once they are happy with it they can save it to the folder from where the .pde is run.

For the final product, the features that can be manipulated by the user include:

  • Colour of design (RGB colour values can be manipulated for different hues/shades
  • Monogram (position along the x and y axis, as well as the size)
  • Width of arrows/V shapes


Nobody has said anything yet.