Programming Design Systems

Based on what I have learnt this week I believe programming design systems in its most simple is combing code and design to convey a message. I had a go at trying to do this in class this week using an activity from the ‘Programming Design Systems book created by Rune Madsen.

The Exercise

Pick a random adjective from the dictionary, and write a sketch that tries to convey that word by changing the position, size, and rotation of a single rectangle. Do this for a couple of words, and ask friends to guess the word-image combinations.
Programming Design Systems By Rune Madsen

As I am still a beginner at coding in P5.js I used three adjectives that I thought would be relevantly easy to portray.

Results: Before guesses

In an attempt to make it clear that the rectangles represented three different adjectives, I used colour to match the pieces. However, when coding I kept running into an issue with how the code of the rectangle was affecting the code of another. Below, it can be seen that two rectangles are tilted at the same angle which, I did not want to happen. So after I had some of my classmates guess what the different adjectives were I improved my code by adding in functions such as ‘Push() and Pop()’.

Code – With Answers

Guesses↓

First Adjective ↓

Uneven
Unbalanced
Crooked

Second Adjective ↓

Falling
Disconnected

Third Adjective ↓

Broken
Line

Results: After Guesses

As mentioned before I made some changes to the code after ↓

One of my classmates found it hard to tell that the last set of rectangles was separated because of the stroke. They said they didn’t know they were supposed to be the same rectangle so I removed them and did the same with the rectangles above. I also decreased the space between the ‘separated’ triangles and the ‘broken ones’.

It was also pointed out to me that they weren’t sure if all of the rectangles related to each other so, to make it clearer I added some text that distinguished them.

They easily guessed the adjective for the first rectangle so I didn’t make any other changes than adding in the push() and pop() functions.

Code

Special mention: Image experimentation

During this lesson, I experimented with the source code of some images. I converted them into BMP files and opened them in a text editor before messing around with the code. I copied different chunks of the code and moved them to different places within the file. If I didn’t duplicate the code I moved it to different places altogether. The results were quite interesting.