Author Archive


Experiment 5: Refine/Combine/Unwind




Exploring an Art & Graphic Design movement through computational means.

GitHub Link

Team Members
Carisa Antariksa, Joshua McKenna, Ladan Siad




Project Description

//generative(systems); is a investigation into Constructivism, an art and graphic design movement from the 1920s, through generative form. By referencing elements popularized from that movement, this project explores the automation of design processes through the basis of variance and the discourse around the movement towards engineered design systems. How do we as designers create distinct works when were are in a time of algorithmic design? Can our work still be dynamic, compelling and emotive? //generative(systems); examines the process of algorithmic automation and how it will affect viewers connection to the the aesthetic experience.

This experiment expands upon the Generative Poster project presented in the Creation & Computation Course Experiment 3’s, This and That. The original concept involved generating multiple iterations of a single design through computational means, where the intent was for a user to have a unique copy of a poster according to a predetermined design system.


Tune by beatpick

How it works

Our code executed the following instructions:

  1. Randomly select background color from an already-made array of colors;
  2. Randomly select elements (triangles, circles, rectangles and other quadrilaterals);
  3. Randomly assign a color independently to each element;
  4. Randomly determine the # of elements that would be placed on page;
  5. Randomly determine the composition, placement and scale of each element;
  6. For each element selected, have an accompanied string value for the code to draw on a p5 sketch.
  7. Send the string values to a separate browser page in order as it appears on the graphic sketch.
  8. Save the composition as a .jpg.
  9. Print the code from browser to a physical paper artifact.
  10. Instruct the graphic generative system to wait until the print sketch completed printing.
  11. Restart the sketch.

This then repeated throughout the exhibition, conveying the design processes that the computer made based on the algorithm set through the code.

Project Context

For this project, we wanted to use this opportunity to use the tools we had learned in the course to dive into the history of graphic systems. The idea of using generative computation was very interesting to us as a tool for designers in this age, where the act of creating iterations through a more efficient algorithm can incite more possibilities and frequency of “happy accidents.” We first had to decide upon which graphic design movement we wanted to reference and be the basis of our system. Initially we proposed three historical graphic movements as possible selections for our project; the Memphis graphic design movement from the late 70s, the Bauhaus movement from the early 30s and the Russian Constructivism movement from the mid 20s. We soon narrowed our selection down to two, Constructivism and possibly Bauhaus, given the latter preceded the other.

From left to right, posters from the Constructivism, Bauhaus, Memphis Movements

From left to right, original posters from the Constructivism, Bauhaus, Memphis Movements

Constructivism was a movement with origins in 1920s Russia where it was primarily an art and architectural movement. It refused the concept of art for ‘art’s sake,’ which catered to the traditional bourgeois class of society and instead, focused on using art and design as a political tool. Within this time period, famous Constructivist Kazimir Malevich had also coined the term “construction art,” or “‘Suprematism” as a prominent characteristic of the movement’s visual language. This term was also widely influenced by the works of artist turned designer Aleksander Rodchenko in the 1890s, where he experimented these forms and combined them with photo-montages.

Russian Suprematist Paintings by Kashmir Malevich

Russian Suprematist Paintings by Kazimir Malevich

In its essence, the characteristics of this movement involved a free combination of basic geometric forms, such as circles, squares, lines and rectangles within a limited range of colors. The application of this visual language ranged from product packaging to logos, posters, book covers and advertisements. Despite its unfortunate end following the rule of Stalin, the legacy of this style lives on through succeeding movements, particularly Bauhaus and International Type Design. Nowadays it is widely used in parameters set in contemporary design, especially within flat design for digital means.

In our research, we also selected 3 different case studies that were relevant to the scope of this project iteration. They ranged from applications within modern architecture and graphic design.

  1. Project Discover explores the capability of software to produce an endless slew of architectural designs that satisfy specific criteria within a given project in terms of cost, constructibility or performance dynamics, at a pace and level of productivity that would be impossible for human beings to match. Their hope is that they go beyond basic automation to create an expanded role for the human designer and a more dynamic and collaborative interaction between computer design software and human designers in the future. This study helps contextualize our intentions with the project.
  2. “Randomatizm” is an exploration into the Suprematism movement in the early 1900’s in Russia. The term suprematism refers to an abstract art based upon “the supremacy of pure artistic feeling” rather than on visual depiction of objects. To date, the online gallery presents 16 works of famous figures of Suprematism. At the moment, visitors to the online exposition generated more than 80,000 random files. We found that the variance in juxtapositions between each generated composition to be a good foundation for our research in expanding upon this experiment.
  3. “Oi” is a flexible brand identity created by the renowned Wolff Olins for the Brazilian telecommunications company. The idea behind the “logo generator,” as the application is called, is for the logo to move, wobble, and respond to customers in a playful and interactive way within the company’s mobile and web apps. In application, the identity mixes all of its identity elements — techie-looking typeface, icons, and blobs — in various ways to keep the identity flexible yet cohesive.

We also owe most of our references to and how the author explores algorithmic and generative design in different design applications.

Process Journal

Sketches of Initial Concept

Sketches of Initial Concept

There were many opportunities to continue different projects that involved physical computing with p5, but the interest that brought us together was in completing a browser-based project. In the group meeting that we conducted with several others in the cohort, a proposal to revisit the Generative Poster project was brought forward and we three agreed to push that idea forward. It would also aid to further our learning in coding through p5. Along with that exploration, we also wanted to see how it can contribute to the discourse around algorithmic design and the potential it has in affecting us as designers in the future. All three of us have a substantial background in visual communication and graphic design which motivated us to proceed with this concept.

In writing our proposal for Kate and Nick, we spent time on defining the project and the scope of what can be achievable in the minimum viable product. We also discussed and shared projects that inspired the visual styles that we were interested in conveying. From that basis, we then decided on the design movements we could emulate using generative design. We discussed aspects from existing projects that we liked and saw how they linked to movements that have been applied in contemporary design, such as International Type Design, Memphis and Bauhaus.

Following the proposal, we noted the feedback given to us in a meeting with them the next day. The key pieces of advice that Kate and Nick gave us was to treat the projection as a digital prototype on the wall. We were also advised to make sure we exhibited the canvas to our poster(s) to achieve the greatest impact– the scaling of the projection was key. What would the template to the posters be? Would it be projected on a wall, or would it be projected onto poster paper?

There were also opportunities to think about how the space can be used to introduce unexpected outputs, such as showing the transparency of machine thinking through the console log. The possibilities to how we can present this project can go into many directions, from something that can convey the computer “thinking” in the generative aspect to the code or perhaps introducing a minor interactivity with the visitors of the installation through human input.

MVP of envisioned Installation

MVP of envisioned Installation

Converging into Main Idea

Our criteria for selecting a graphic design movement was dependent on the positioning and placement of the elements on the canvas (whether the elements were abstract shapes, typography or simple forms). We noted that if a grid system was present it would be a helpful parameter and boundary for elements to appear within as part of our generative poster. We studied each movement carefully to determine whether a system was evident that could be reinterpreted and generated independently to the reference paintings. Additionally, we wanted to ensure that whichever movement we selected, that the elements could be drawn easily inside p5.js, there also needed to be a distinct color palette and theme that could be referenced to.

Given the scale of a single generative system we decided collectively as a group that we would only attempt to make a single system based on one movement as opposed to 3 independent systems (one for each previously mentioned movement, Memphis, Bauhaus and Constructivism).

We began our process by attempting to recreate some of the abstract forms in the Memphis movement, but soon realized that it would be a challenge to do so in p5.js as the shapes involved a lot of masking of circular patterns and use of the bezier() shape.

Contemporary Memphis elements that we wanted to code in p5

Contemporary Memphis elements that we wanted to draw in p5

We also explored shapes within the Bauhaus movement by looking at more complex shape code, such as different angles to arc() and also created a document that identified the common aspects to the movement.

90-degree-arcs semicircles

Elements identified for the Bauhaus iteration of project

Elements identified for the Bauhaus iteration of the project

We then opted to start with what we agreed to be the easiest of the three movements to create a generative system of; that being the Russian Constructivism movement. After studying several of Kazimir Malevich’s Suprematism paintings from the 1920’s we recognized some recurring shapes and forms: circles, rectangles, triangles (equilateral, isosceles and scalene), and quadrilaterals. All elements that could be made fairly easily with p5’s draw functions. We observed the common compositions created in his work to apply to the code in terms of how each element appeared on the screen. By referencing the color palette of this graphic design movement and using these paintings as a guideline, we began to build out the code that would later generate random compositions with these above mentioned elements.


Elements identified for the Constructivism iteration of the project

Coding Process and Challenges


Throughout the process, we assigned tasks to each other to ease the workflow. There were many aspects for the installation that we wanted to implement in the MVP. We began by executing the sketches onto 3 canvases that continuously generate in one browser, which might have complicated the process more than it should. It required the use of Namespacing, a resource we found useful in executing this.


We soon scrapped this option as it would pose many challenges in the code, as we would then have to spend too much time on the code to maintain the sketch, drawing within each canvas.

The main challenge we faced while coding our system mostly involved making it behave human-like; we wanted it to convey this idea of it creating its own design decisions (ie. selecting a triangle or a circle for the first drawn element.) It was not as simple as we thought to code a machine to act this way. In our first iteration of this project, we had envisioned that the code would generate the entire poster at once before moving on to create a new sketch. It took some time to program a timer into the draw function of the system so that each element would be drawn consecutively one after another. Along with this problem, we also had to program an additional timer that communicated via PubNub between the two sketches. This was done so that the print sketch could pause the generative graphic sketch once a poster was completed. In the end, this was solved by setting the frameRate and stating the frameCount for each element in function draw().

After defining each equation to the randomly generated elements to numbered strings (e.g. var myString3 = “// Circle\nnoStroke();\nfill(” + circleColor + “);\ntranslate(” + translate2X + “, ” + translate2Y + “);\nellipse(0, 0, ” + radius2 + “, ” + radius2 + “);” instead of placing it into console.log(“”)) we were finally able to publish what was drawn on the canvas through Pubnub onto another browser. Some overlapping to the messages that were sent still remained, but was quickly fixed by defining the positions of each text based on the input, as seen in the print.js file.

Another task that we had to accomplish was print the poster as they are generated. We wanted the print to work without opening the dialog box but to just receive the information and execute the function. The research for the information that kept coming up was the term called silent printing or background printing. The way we were able to silent print was by getting into the browser setup and changed the parameters that would disable the dialog box pop-up. This required us to use Firefox because the instructions were easily accessible. We hacked into the about:config page and created New > Boolean, and then entered the preference name as print.always_print_silent and click OK. The boolean was then set to true. This successfully made the printing to happen automatically and not open the dialog box. After implementing this, the print() browser function was as easy as placing the command line in the code. The print() method then prints the contents of the current window. This process is well reflected in the final video.

Aside from printing the console.log, we also wanted to have a database of all the generated posters that the code executes through draw. We managed to link it to a dropbox folder through the save(); command line.

Presentation and Exhibition

For the installation, we had a clear idea on how to arrange all the elements in our corner in the Grad Gallery. Given if we had another day, we could have scaled up our installation to two generative systems, Constructivism and Bauhaus next to each other. The informative posters for each would be placed in the center area to create a conversation between the two movements and algorithmic systems. However, the Constructivism iteration is the MVP that we had hoped for and we were collectively very satisfied with the outcome. We focused the projection on the corner in a portrait manner by changing the orientation of the projector and placed the printer next to the screen that showed the saved images of the posters generated. The Title to the project was also projected to convey the overall concept of this experiment. Over 1200 posters were created and they are available to view and save through a Dropbox here. 

There was an overall positive response to the installation. Many visitors commended the idea of generative design and commented on how it can even reach the level of teaching an AI, albeit a simple version of it. The final exhibit demonstrated to our audience a process that involved both the designer as the creator of the tool and algorithm– along with the computer, generating the sketch based on the parameters set by the designer. It was also an ode to a history of how these systems began to be applied in means that can create a social and political impact. Furthermore, this process could provide a further commentary about how a machine would understand a cultural movement such as Constructivism; however it is important to note that the machine is still only as smart as the person who makes it.


Special Thanks to Adam Tindale for advising us through some p5 challenges and Omid Ettehadi for guiding us through Pubnub.


Algorithm-Driven Design? How AI is Changing Design. (n.d.). Retrieved from

Autodesk Research. (2017, February 23). Project Discover: An application of generative design for architectural space planning. Retrieved from

Bill. (2008, August 22). “Silent” Printing in a Web Application. Retrieved from

Creative Bloq. (2013, October 11). The easy guide to design movements: Constructivism. Retrieved from

Flask, D. (2015). Constructivism : Design Is History. Retrieved from

Google. (n.d.). Google Fonts. Retrieved from

Hebert, E. (n.d.). Namespacing / Multiple Canvases in P5JS. Retrieved from

Howe, M. (2017, April 5). The Promise of Generative Design. Retrieved from

Miller, M. (2016, April 19). The Ultimate Responsive Logo Reacts To The Sound Of Your Voice. Retrieved from

Moskovsky, A., & Day, Z. (2018). Randomatizm. Retrieved from

Ning, Y. (2017). p5PlayGround. Retrieved from

Tate. (2015). Suprematism ? Art Term | Tate. Retrieved from

UnderConsideration. (2016, April 4). New Logo and Identity for Oi by Wolff Olins and Futurebrand. Retrieved from

The Flower of Life

Experiment 4: Network

The Flower of Life

Team Members: Naomi Shah, Carisa Antariksa, Mazin Chabayta


Project Description

‘The Flower of Life’ is a kinetic sculpture that represents life and death rates of various countries around the world through two oppositely spinning disks. The installation attempts to visually represent populations across countries by the speed at which it spins, while an accompanying screen communicates its quantitative figures. The goal of this kinetic sculpture is to physicalize and merge the ideas of life and death into a single whole shape that is almost pulsating with life.

How it works

A user steps up to ‘The Flower of Life’ installation and enters the name of a country of their choice into one laptop and hits ‘enter’. The quantitative population data of birth and death rates then reflect on a second laptop screen. This, in turn, influences the installation, causing two disks mounted on 360-degree servo motors to start rotation in opposite direction, hence animating the information displayed on the screen. The orange disc represents births while the black disc represents deaths. ‘The Flower of Life ‘signifies the eternal circle of life through its constantly rotating disks.


Digital Visualization of the Kinetic Sculpture



Before we split up into groups, a number of us from the cohort decided to approach forming teams differently for this experiment. We decided to meet and do a group brainstorming session so that we may collaboratively arrive at our concepts with each member contributing to as many ideas as possible. Over two days, we mapped out our disparate ideas and ‘workshopped’ with one another to build up our concepts. We developed around 6-7 strong ideas and finally narrowed it down to just a couple that we were interested in exploring. The concepts that were discussed and developed during our self-initiated workshop allowed us to form teams on the basis of what interested us personally.

From the beginning, our group showed interest in using physical computing as an element for this experiment, and after the Cy Keener’s talk a few weeks ago, we were inspired to experiment with physical computing as a form of data physicalization. Furthermore, we were keen on experimenting with global data brought into the classroom that participants could interact with.



Converging into an idea

Our ideation process began by first assessing the kind of dataset we wanted to visually represent through our installation. We also wanted our project to speak to everyone regardless of where they are from or whatever their background is. In our cohort, we have people from many different parts of the world and we wanted to bring everyone in front of our sculpture and have a relationship with it. Continuing on that line of thought we eventually found the type of data that has a presence inside every one of us: Life and Death through population numbers.

Taking on a task of visualizing life and death can be tricky because they are subjective experiences that can have different meanings to each one of us. However, life and death are natural occurrences that happen every second of every minute all around the world, and we wanted to communicate that. In addition to that, we wanted to avoid a depressing impact on our audience and so we believed the visual representation cannot be unpleasant to look at. Eventually, we decided to use a traditional and well-recognized symbol for life, “the flower of life”. The flower of life is a symbol that’s being used by different civilizations since the 9th century BC. Today, it is usually associated with life and birth.


Other iterations of the kinetic sculpture

final spiral

Final form of the kinetic sculpture


High Priority Tasks:

We broke up our tasks on the basis of the core elements of this installation and then categorized them into high and low priority. Our high priority tasks involved deciphering the code that would be the foundation of our project and building the basic prototype of the installation. Our low priority tasks would extend itself to refining the experience of interacting with the installation through beautification and conceptual layering. We regularly assessed our tasks against our time frame.

How to pull data from an API using p5js

This was the first time that any of us had worked with API data. There were two ways we could have approached this. We could either pull up synchronous data from a JSON file locally hosted or pulled a simulation of real-time data from a URL API using asynchronous callbacks. The former would have required us to use Pubnub to meet the networking requirement, while the latter gave us the option of not using Pubnub at all. We needed to find data that best reflected our concept, or allowed us to tweak the concept only minutely, and that would determine whether we would use a locally hosted JSON file or a URL API.

Translating quantitative data visually

We needed to make sure that we were pulling up specific quantitative information from the API data on p5js, that would influence the kinetic sculpture via the Arduino. Our biggest priority was to make sure that the difference in numbers between life and death actually translated to the sculpture to have the disks move at varying speeds and represent populations.

Designing and building the kinetic sculpture

While this project had immense possibilities for visually representing this installation, we chose to keep our fabrication simple and work with materials from the university’s inventory, given the time constraint. We made quick iteration sketches to determine how it would look and how it must be built. We decided to start with just one pair of disks, but make multiple for various countries if time permits.

Low Priority Tasks:

Designing the web pages for input of country and output of quantitative data

We wanted to design the UI for the information input and output pages on both screens to aesthetically complement the installation ‘Flower of Life’. This would give the project an overall sense of finesse and completion while allowing for more engagement from participants.

Multiple disks for representation

We wanted to shortlist a selected number of countries and make a pair of disks for each, representing the population of each of these countries. This would have allowed us to create a more wholesome data visualization through the tangible exploration of data.


Once we had our concept ready, we started to plan our building process. We considered several options for presenting the kinetic sculpture like hanging it on the wall or on a pedestal. However, after realizing that the flower needs to be on eye level in order for the visual effect to be experienced by the users, we eventually decided to build a pedestal about 6-ft high made of wood for stability. Next, we quickly sketched the structure and all its parts and sourced most from our OCAD facilities.


Materials Used:

20 inches of acrylic sheets with varying colors
Wood for pedestal and frame around rotating disks


2x 360-degree servo motors
1x Breadboard
1x Arduino Micro
1x External power source with wiring Jumper wires


We started our fabrication process with a consultation with Reza, the Maker’s lab manager and based on his advice, we made some crucial changes to the structure. He advised using a cross base rather than a square base, which meant the structure is lighter and easier to move around. In addition to that, at this point, we also decide to add a frame around the disks in order to hide the flatness of the acrylic disks and give more depth to the sculpture.


Fabrication Process 1

For the disks, we were limited to a maximum weight of 4.8kg each, since this is the servo’s capacity. So, although we considered using wood for the disks, acrylic was lighter and more colorful than wood, which is more appropriate for our requirements. After sourcing the acrylic, we utilized the laser cutting machine to performs the cuts on the disks.


Fabrication Process 2

Since we decided to use bigger servo motors with more torque to handle the size of the disks, we decided to test them ahead of time. During the testing stage, we noticed that the servo motors use too much power from the Arduino board and we had to come up with a better solution for power. We realize that our sculpture is not mobile and instead of investing in batteries, we decided to use the internal power converter inside a wall adapter, stripped a USB cable, connected power and ground to the breadboard and used those terminals as a power source for the servos. That ensured the constant supply of power.



Power supply link  + Cut USB cable

In the spirit of last minute complications, one of our disks fell and broke into multiple pieces. We tried gluing it back together, but eventually got them laser cut again on the morning of the presentation.



Coding Process

P5 – Serial Connection to Arduino

Since most of the functions are happening in p5, figuring out this portion of the code was a constant challenge. Also, it was the first time we attempt to use p5 to send data over serial connection to Arduino. So, we first divided the p5 code into the main functions needed and then started writing those codes separately. First, we used the examples we had in class for serial connection p5 to Arduino, which gave us some trouble at first, but eventually, we were able to maintain a connection between the two.

P5 – API Call & JSON Objects

This was the first time for us to pull data from a live source. It was a challenge to understand what APIs are and how they work, and how each API is called differently. We experimented a lot with the API callbacks and even explored using weather conditions from a free online weather API. There were a lot of query tests– from placing the .json information into function setup(), and making an asynchronous callback from that data in function draw(). This was a manual way to call the information, but it would not have been a viable option to call that information because the content of the .json file was quite big (information about ~220 countries were listed.) 

json in setup

Placing data in setup()

Aside from trying to work with a .json, we also experimented using a url for the API. This was proven to be successful as we were able to pull data by specifying the correct path.


Calling data from URL

Eventually, we decided to make the JSON file work. We based the information found online in text (.txt) format and converted it accordingly. After extensive research, the best way to write a JSON array of objects and with each object a set of data that we need to send to Arduino. We learned the correct way to create that file, and then call it from a p5 sketch. This was an excellent learning experience that will be very useful for us in the future. It was then pulled successfully through a chrome webserver extension (200 ok) and the preload function successfully loaded the .json.

P5 – PubNub

Another extremely useful tool that we learned how to make use of during this experiment was PubNub. For our project, we needed the user to be able to insert the country name in order to view that on the servos, and we needed that connection to be wireless. So, we created a PubNub channel called ‘Kinetic Life” and used that channel the ‘subscribe’ and ‘publish’ functions in order to submit commands through the internet. Eventually, we assigned one of the computer to subscribe to the channel in order to receive data, and the other to publish in order to the send out commands. So, computer A sent a call to the JSON file, through PubNub, to computer B, which pulled the JSON and sent out the relevant response, over serial to Arduino.

P5 – Mapping Data

One of the main lessons learned in experiment 3 was the correct way to map values. It allows us to view any data, no matter size or complexity, in a simple output either on screen or for Arduino. Although it is a simple line of code, used correctly, can be a powerful tool. 

Arduino – Data Receiving & Output

The code for the Arduino was fairly simple and straight to the point. After opening a serial connection between P5 and Arduino, it is fairly easy to tell Arduino to receive that data and output it through the servo. However, we quickly learned that servos are not as simple as they may seem and hacking them might not as easy of a task. After several sessions of trial and error, we were able to control the speed and direction at which the servos rotate, and based on the data coming in from the p5 sketch.


Final Circuitry


Presentation Day


Strengths Observed:

We invited participants to come forward and input the name of a country of their choice and see the disks spin as a visualization of the birth and death rates. We observed that many people put in names of countries they come from or have roots in, and expressed surprise over some of the data that came forward. Furthermore, many participants reported feeling mesmerized by the design of the disks that gave the effect of an optical illusion.

Limitations Observed:

Each time a participant input the name of a new country, we had to manually reset the Arduino. It would have been more effective to either have a reset button or allow the discs to rotate only for a specific time before a new country name input was fed into the input box. This would have improved the user experience considerably.

Furthermore, multiple discs representing various countries would have been much more effective as a data visualisation, allowing a comparison to arise between birth and death rates across different geographical regions. Not only would this have been more visually striking, but would have also allowed participants to reflect on growing or declining populations across the world at the same time.

Finally, gaining more control over the speed of the servos would have also contributed to making the experience of deciphering the contrasts between birth and death rates more pronounced. While we did succeed in influencing the speed slightly, it would not perhaps be obvious had the participants not been looking out for it.

Feedback from Participants:

Creating multiple disks for effective Data Visualisation

Creating multiple disks to represent different countries would have been more impactful because of a comparison that would arise, while also looking more striking aesthetically. This is something that we did intend to do initially. However, troubleshooting the code at every stage of the process occupied much of our time, without giving us the time to build further on our fabrication.

Improved Data Input

Participants were instructed to input a capital letter at the start of every country’s name, which would then show the quantitative data and allowed the disks to spin. One of the limitations of our dataset was that it yielded results only if the data input was written in this specific format. A few options provided during the feedback session was

  1. Creating a drop-down menu instead of allowing participants to type it out, hence avoiding mistakes with capital letters.
  2. Creating a map interface to make it more striking, immersive and also aesthetically pleasing

Future scope:

Making interactive data visualisation tangible and experiential can be a fantastic way to immerse participants in large datasets that would be missed if it lay in the form of passive, quantitative information. Not only does the data physicalization give the opportunity to participants to immerse in different contexts, but can also tell an effective narrative through the data that it represents.

It has the ability to inspire a sense of wonder at how its underlying technology allows us to explore, create and communicate with each other in new ways.

The ‘Flower of Life’ is the first prototype at achieving this ambitious goal. This experiment can be further forwarded using diverse data sets and interactions to tell a narrative about our world’s growing population, especially in the context of climate change and depleting resources. While digital data visualisation may be effective in allowing interactivity as well, the tangible and tactile interaction through an installation can allow for a more immersive sensory experience.

Another possible outcome of the ‘Flower of Life’ could be a call to action upon interacting with the installation, focusing on not what we already intuitively know, but where this knowledge could take us in the future.


Flower Of Life – A Thorough Explanation. Retrieved November 26, 2018, from

Population API. Retrieved November 26, 2018, from

Servo Won’t Stop Rotating. Retrieved November 26, 2018, from

Servo 360 Continuous Rotation. Retrieved November 26, 2018, from

Toddmotto/public-apis. Retrieved November 26, 2018, from

Weather API – Free Weather API JSON And XML – Developer API Weather For Website – Apixu. Retrieved November 26, 2018, from

Wolfram, S. (2002, January 1). Note (d) For Why These Discoveries Were Not Made Before: A New Kind Of Science | Online By Stephen Wolfram [Page 872]. Retrieved November 25, 2018, from–ornamental-art

The Pun-nity Mirror (for Hijabis)

EXPERIMENT 3: This + That

by Carisa Antariksa



The Pun-nity Mirror is a prototype of a conceptual vanity mirror that responds to existing beauty standards surrounding the Hijab within the online hijab community. It turns phrases that are self-deprecating, such as “I look like an egg with the hijab on,” or “that’s a huge tent,” into comedic and motivational comments as the user looks into the mirror. These pun-pliments (Pun-like compliments) are activated on the website/screen as the user touches a specific part of the mirror.

eggfake4 fake2

This prototype mirror is a commentary on how vanity has become a significant factor in influencing a Muslim woman’s intentions to wear the hijab. By placing comedy into the mix, I wanted to create an experiment that tackles the issue through a light-hearted angle.

Github Link:


Ideation Process 

I went into this project with Kate’s words in mind (“Have fun with it!”) and began with testing all the examples when I had the chance. The concept came about later on in the process as I wanted to see the possibilities of the all the input and the output sensors and how I can then apply it to a list of ideas. Eventually, I narrowed down my list to the inputs and outputs I was more interested in exploring, from the capacitive sensor, the electret microphone and the infrared (IR) LEDs. I took a week to explore these elements but in the time given, I was only successful in fully exploring the capacitive sensing abilities of both the sensor itself and creating one using the Arduino. I had discovered Capacitive Sensing for Dummies and explored ways in which I could apply this to my personal project.

Furthermore, in terms of the idea itself, I was heavily interested in visualization, especially through Perlin Noise. I studied how it worked and thought of ways to apply it to text, as demonstrated by Kiel Mutschelknaus. Would I be able to apply it to existing vectors I had made in my previous works? Or perhaps I can apply it to other shapes? I had these questions as I kept brainstorming for possibilities. Along with this exploration into algorithms within p5, I also thought of more realistic ideas that concerned my identity, as representation was something I was personally passionate about. 


In the end, I chose to do a micro-project about the Hijab, which I thought suited the opportunity. There were not many existing precedents that explored this religious symbol in a “relatable” context so to say, so I wanted to start by creating one. I approached this idea by first browsing things that I would encounter on Twitter and Instagram regarding comments and opinions on the hijab within the community itself. Modest hijab fashion is a continuously booming industry, giving rise to many influencers from many different backgrounds and nationalities. This in turn forms many narratives from muslims terms of how the hijab is represented and the impressions it gives to the general public. More often there is a serious undertone to these opinions, whether it is judgement or what some define as freedom of expression. An example of this is the issue that rose from one of many hijabi influencers, Dina Torkia, about responses on how she recently wears the hijab (link to article here.)

Rather than applying the heavy weighted side to this subject, I wanted to introduce a perspective that I was more comfortable with. I often discuss about different hijab styles with my close friends and how some styles look differently on us depending on our face or head shape. We throw around words such as ‘egg’, ‘tent’ or even ‘looking “sick”‘ to each other and laugh about it. I was also reminded at some muslim women’s own reasoning behind wearing the hijab itself, ranging from wearing it out of free will or family influence, and can still be heavily affected by the vanity aspect regardless. This thought then led me to search if others who wear the headscarf also think and feel the same way.

examples lol

Screencap of “hijab egg” search results on Twitter

The results were amusing to say the least, which led me to sketching my final idea. I thought of common puns that can go along with these terms, such as “eggscellent” and “ten-tastic.” Since it was supposed to be a prototype, I also decided to narrow it down to these two phrases as it is used in conversations, whether comically or even used as a teasing comment. I also personally added one more, the word “ehh,” since it was one I often use to tell myself and my other friends to be okay with “today’s look.”


Within this process, I also received advice from Veda Adnani to use a mirror to suit the purpose. It was a more practical way to implement the project than using the actual scarf I owned and creating a flimsy wearable. I then decided on this as it was also a more compact way to present the intended concept. From this, the idea of a vanity mirror + puns came to fruition.

Programming & Presenting the Concept

Website (p5)

The illustrations to the website was something I had previously done in a previous project and I altered to fit the concept. The vector graphics were from a visual style project I had created for a visual novel game.


Original Vector Illustration


Altered Vector Illustration & Tent, Egg, Leaf base for the Hijab shapes

These were then applied in the final renderings of the screens in early on in this post. The final vector images were placed under if statements and would change should the wire connected to ground (0).


I consulted peers who have used the Capacitive sensor in the previous experiment to help me with the Arduino aspect. I was warned that there were many challenges to using that sensor, as it is quite sensitive once connected to the power. I started with the circuit that I found on Capacitive Sensing for Dummies and later adapted it to the capacitive pull-up resistor code from Kate’s example in class. The circuit evolution is as follows:


Initial Circuit


Final Circuit

The first circuit pulled values on the serial monitor as it touched conductive objects, while the final was a simple 1-0 value pull-up. I included the LED to help indicate that if it did light up, the circuit proved to work. This element performed perfectly. I decided to employ the final circuit for this prototype and if time allowed later, there would be a better chance to use the actual capacitive sensor element to allow activation from a finger touch.

Arduino to p5 (and the problems.)

Once the LED was lit up, I was sure the process of linking it to my p5 website would be no problem, as it only required connecting the serial port. However, I underestimated this as my images did not load as I turned it on. I had thought this was a laptop problem, and switched it over to the windows laptop. This did not make a difference, as it was most probably a webserver problem, and continued to test it with the original circles in the code examples.


Even after testing it on multiple local webservers and having help from my peers Olivia and Omid, the images still did not load. However, after some debugging, the images finally showed up, thanks to help from Omid. Instead of function preload(), he had suggested I used the createImage function. This ended up solving my agony from the night before.


function preload() to createImg

However, there were time constraints to fully change the code for the presentation on Friday. I created a demo video to present the concept and shared the overall project through what should happen, given the code worked.


The feedback was overall positive regardless of the mishap, and many suggestions on how to push the project forward, from using an API to gather information from certain key-terms on social media to adding additional elements on the website that can provide better context to the concept of vanity and the hijab. There was also a mention from Kate on how linking comedy to fashion is quite rare, and this project allowed a semblance of it.

Presentation day lol

Completing the Experiment

I was determined to make the code work. I then debugged the .js file, rearranged the elements and reconstructed the connection of the Arduino to the mirror. After spending time on perfecting the placement of the elements, I finally opened the serial connection to the p5 website. Eventually, things worked as planned.

Future Iterations

This was my first time planning and constructing hardware for the Arduino by myself and I came to some realizations:

  • The mirror that was lent to me by Veda was stainless steel and would easily conduct the current. In my later construction of the wiring onto the mirror, I had placed in copper tape all around the top part where the indicators on where to clip or touch are. Once I connected the circuit to power and “touched” the word, all of them responded on the p5. I then placed in wood under the pins and taped them in place, and after, ended up layering duct tape on top of the other to prevent all of the images from changing on the p5 sketch.


Evolution of mirror connection

  • Using the capacitive sensor would have created a better viable product, as the user can actually touch the part of the mirror instead of using alligator clips.

This project is only the start and has the potential to evolve into a series of micro-experiments that introduce other aspects within communities as specific as a the hijab fashion-influencer culture. Although this prototype scratched the surface, there are aspects to vanity that can be explored. The data and commentaries to what can be considered the threshold of intentions in wearing the hijab can be collected and expressed in more creative and engaging ways than just merely creating and posting on a social media profile.


Behance. “SPACE TYPE GENERATOR: _v.Field.” Behance,

Instructables. “Capacitive Sensing for Dummies.”, Instructables, 13 Oct. 2017,

“Language Settings.” p5.Js | Home,

“Language Settings.” p5.Js | Home,

RCP, Sean T at. “Hijab Egg – Twitter Search.” Twitter, Twitter, 31 Mar. 2018, egg&src=typd.

The National. “Influencer Dina Torkia Says Online Hijabi Community Is Becoming like a Toxic Cult.” The National, The National, 5 Nov. 2018,

Use of this service is governed by the IT Acceptable Use and Web Technologies policies.
Privacy Notice: It is possible for your name, e-mail address, and/or student/staff/faculty UserID to be publicly revealed if you choose to use OCAD University Blogs.