On the most basic level, graphic design is about creating meaning from shapes. These shapes can be anything from the simplest geometrical shapes, to complex shapes holding a lot meaning – like letters.
Creating a functional design often entails working with these shapes to establish a good relationship between the content you’re trying to design, and the form you’re trying to present it in. Understanding the different techniques you can use to create a succesful relationship is therefore crucial.
So this is where we will begin our journey: By looking at simple black and white shapes as the form, and try to create succesful relationships between them using different rules of composition.
Workshop Task 1.
Symbolism of forms
Important Workshop you will have to bring: 1 scissor, minimum 6 sheets of A4 paper and minimum 2 black sheets A4 paper. All available in the college shop. (opening hours daily from 09.30 till 19.00). For the afternoon you need a laptop. If you don't have one you can borrow one from the library (limited availability) or simply ask a classmate with laptop and work together.
By using only black squares, create a graphic image that best expresses the meaning of the following words.
Order | Increase | Bold | Congested | Tension | Heavy
Carefully consider the following 5 relationship:
Format – How big is my canvas?
Shape – Rectangle? Triangle? Ellipse?
Position – Where do we place it?
Dimension – What size should it have?
Rotation – Do I turn it?
All designs starts with a constrained area – let’s call it the Canvas. The canvas dictates the way we understand the forms in it.
The rectangular canvas makes no attempt to emphasize any direction. It concentrates the viewport into a well-known shape, and makes it easy to understand the placement of the elements inside of it.
The horizontal canvas is very natural, shaped to the way we experience the world. The human brain is optimized for analyzing horizontal movement (that orange thing moving behind the trees is probably a tiger!) in opposed to vertical movement.
The vertical canvas stands out and calls attention to itself. It’s more aggressive and seems more “designed”, which is probably why most posters have a vertical format.
Even a simple thing like choosing the bounds of your design matters.
In P5 we create a canvas in the function setup() by typing: createCanvas(800, 600);
Homework Task 1a.
Following the workshop and introduction to P5.js, you are now asked to created 3 new visual word representation in P5. Consider using interaction (for example mouseX and mouseY) and other Events you can find in the P5 reference page.
Note: This task is to get you familiar with basic coding and the P5 library, it is not about making your first masterpiece (although this might happen). There is no right or wrong, simply be curious and Playful. Explore the P5 reference and learn by trial and error. These experiments will be part of your final submission.
Save each sketch in a folder in the following structure: word-firstnamelastname
For example: balance-jaapdemaat or scale-jaapdemaat
Pick 3 words from the following list:
Homework Task 1b.
Read the following article and write a short (max 300 words) written response
Hackers and Painters by Paul Graham.
A field guide to Debugging
At all levels, programmers encounter bugs and will often spend more time debugging than actually programming the application. You can expect to spend a lot of time doing this and so it is important to develop good strategies for identifying and working through bugs as you learn to program in p5.js. Read the following article: https://p5js.org/learn/debugging.html This is optional but it will save you lots of time and frustration if you do read it!
Illustration by Taeyoon Choi
Daniel Shiffman has made many brilliant video tutorials on P5.js. Some topics we have all ready covered in class. Your last tasks for this week is to watch these tutorials and get familiar with the basics. You need to full understand these basics for next weeks class.
P5.js: What is it
P5.js: Basics of drawing
P5.js: Variables 1
P5.js: Variables 2
Link to code used in this tutorial on Github
P5.js: the map
P5.js: the random()
P5.js: Introduction to Conditional Statements
P5.js The Bouncing Ball
p5.js: else and else If, and and or
p5.js: Boolean variables
Another great tutorial on transformations of the coordinate space including translate(), rotate(), scale(), push(), and pop().
All books are available in the library. Click on the image for a direct link.
Generative Design: Visualize, Program, and Create with Processing
Benedikt Gross, Hartmut Bohnacker, and Julia Laub
Princeton Architectural Press, 2012
Form and Code in design, art and architecture
Princeton Archit.Press, 2010
Thames & Hudson