ZINE:LOCALE || Graphic Form Project 2 (Process)

The place that I was assigned was Little India. For me, some of the words that came to mind were colourful, loud, exciting and fun. For me, I also wanted to include a cliche and fun narrative that flows throughout the story, because i felt like appreciating the basics. In terms of design, I also wanted to reduce the shapes seen in little India into the most basic forms, so that my work would be more graphic.

Things I wanted to feature:


No matter which corner you go to in Little India, Garland shops were everywhere, and there was always someone buying something. I felt that this was an iconic symbol of Little India, so I wanted to make the zine focus on the garlands and garland shops.

Tan Teng Niah House

The Tan Teng Niah house is a very colourful landmark in Little India.

Traditional Clothes

Tekka Centre / Traditional clothes

Little India is a place where people still wore traditional clothes, and it made the precinct very colourful.


I chose the image of Ganesha as I observed that the god was very prominent in Little India, because he would be put in shops and stalls because he represented prosperity and good luck.


In order to separate from India and Little India, i felt that railings and shophouses made the precinct distinctively Singaporean. I also felt that the orange tiles were a subtle icon of Little India.

Infrastructure, such as railings and shophouses
Orange tiles


Tekka Centre

Initially, i was very inspired by the Memphis design movement, but after feedback, i felt that it did not represent Little India, rather it represented India. Below is a draft of my first design for the two main characters of the story:

I tried to represent the Tekka Centre by reducing the shape of the traditional clothes displayed and hung into a basic form, however i felt that I could not tell what it is when out of context. As such, I decided that i did not want to include an image of the Tekka centre in the zine because I felt that I was not able to represent it well.

Here, I decided to showcase traditional clothes on the main characters themselves:


In the first picture, it is the first design of garlands that i had, which featured almost close to reality jasmine flowers. However, I felt that it was still too illustrative, so I tried to reduce it to a basic shape, as seen in picture 2,3, and 4. I had issues trying to represent the garlands using the basic shape, as i felt that it did not look or feel like garlands. After looking at other designs, I was inspired to design my work as seen below, as I felt it looked more like garlands.


Here, I had illustrated shophouses to be close to reality. I also tried to put a garland shop there, but whilst I was doing this i felt unsatisfied because it did not push any boundaries and looked very normal.

Here, I tried to manipulate the shophouse windows to look more graphic. I felt that the page is too messy as there were too many elements and colours fighting for attention. I also wanted Ganesha to be featured on every page of the zine, because I wanted to make it seem as if he is the one who is in control of the two characters meeting each other. On the right, it is my initial design of Ganesha, which was still illustrative at the time, which i decided to change it for the final.

In my final, i decided to still use the design created, however made the windows blend in with the back ground in order to make the zine less cluttered with colour
Final design of Ganesha


Inspired by Lester Beall and Alexey Brodovitch, I liked the way that their graphics were able to tell a narrative without much use of text. An example of this is the cover page, where I obstructed the main character’s face with the garland and garland’s shadow:


Another page was the scene where the female character falls, where I wanted a more horizontal line for the layout. In the first two pictures, i was inspired to use the sequential imaging and slanted text, but i felt that there were too many things fighting for attention. I also wanted to explore using directional lines to show movement in the work, inspired by Lester Beall:


In the last page, I wanted to make it dynamic because it was the climax of the story. As such, i wanted to use diagonal lines for the layout. In the initial design, I found it too messy. In the final, I added drop shadows behind the human figures, to sort of show a fast-motion direction of which the male character caught the female character. I also had to be wary of leaving a space for Ganesha’s character.

initial design

Colours & Text

As I was not able to showcase the Tan Teng Niah house, I decided that i would use a colourful palette, similar to the building, throughout the zine, which also represented the colourful and exciting atmosphere of Little India.

For the text, they were all from translations of Bollywood songs that sung about love at first sight, which would explain why they might not make so much sense. However, i felt that the content of the text was not that crucial in this project, because i was more focused on creating the forms.


For me, i felt that this project was very difficult because I was very out of my comfort zone in creating graphics instead of illustrating. I had never actually considered graphic design. However, I felt that this being my first try in trying to differentiate myself from what i know, there was still a lot of my personality being injected into the final outcome. After this project, I think i want to explore more into creating a visual language.

DIWO || Experimental Interaction

Do It With Others is another way to label working as a group and being a team player. The difference between DIY and DIWO is that in DIY, I think that you would have to find your resources by yourself and you have to create things from scratch, with your own knowledge (or lack of). I feel that as we grow older and make lesser friends, being part of an organization or community of people that you have similar interests and passions in is important in maintaining your self-identity and purpose. With that, in terms of DIWO maker culture, I feel that it brings like-minded and self-motivated people together and is good way to combine people with different experiences and get inspired by skills that others have. I also feel that through DIWO, it helps make advancements faster, because there are many people looking at the same project, but at different angles.

For me, I have always liked doing work by myself because I prefer being in total control of what is going to be put out. I also like group work, especially in school, and most of the time play the role of the leader. However, what I think is more important is being a team-player, which in this case you do not really need a group leader. For example, during the creation of the final project for experimental interaction, I felt that there was no group leader because we were all pro-active in contributing. In the end, we ended up with a pretty solid outcome, and I enjoyed working with them because it did not cause me any headaches. From here, we can see that like-minded and self-motivated individuals are already in control of the project at hand. However, if the group was made out of people who had no interest, I feel that there needs to be a different approach to leadership, where tasks are assigned by the “boss” of the group. You may also end up with headaches.

All in all, I don’t think DIWO a movement specific to just the interactive industry, but it is more of a life skill that can’t really be taught with a curriculum, but only through experience.

SOUVEILLANCE || Experimental Interaction

It is interesting for me when I read about sousveillance, where the watching is done from below, such as citizens videoing the police, or shoppers photographing the shopkeepers. It is not necessarily counter surveillance; however, it can be used for doing so, however it is more to create a more complete “veillance”. However, I do feel that we all partake in some sort of sousveillance. With the way that social media is working, I feel that we voluntarily submit everything we do to private corporations like Facebook and Twitter. In this case, we feel more comfortable because we have control of what is being seen by everyone, but it is still the same thing though. Also, Facebook monitoring their user’s activities is not surprising, I think that if you want to partake on anything on the internet you just have to go in knowing that you’re being watched. In a way, these private corporations have both aspects of surveillance and sousveillance.

Cyborgs are different because the person being monitored does not have control. In terms of cyborg discrimination, I find that the term is just another word to use as a label to legitimize something that is man-made and unnatural. Whilst I get that the world is becoming more technologically advanced, cyborgs are way ahead of their time and can be seen as something of uncanny valley. Whilst the author talks about miniaturizing as a way to lessen discrimination, I feel that the physical aspects is not the only thing that people feel uncomfortable with. For instance, the author also writes about businesses not being comfortable with the function of the sousveillance apparatus. I imagine that it is not only businesses that feel this way, but the normal everyday people as well, as no one really enjoys their privacy being breached. This is why people should tape the webcam on their laptops because I just do not like the feeling of someone that you don’t know what their intentions are possibly watching.


OPTIC FIBRE DRESS || Experimental Interaction Final Project (Process & Final)


Inspired by Optic fibre dresses, we as a group decided to create one of our own where the lights on the dress would be sensitive to motion and sound.













Our Final:

Tutorial that we followed (click image to be redirected to website)



Buying LED Strips

Buying LED strips were difficult because there were no drivers in Arduino that supported the brands that i bought at Sim Lim. When connected to the Arduino Uno, the microcontroller could support 5v, so the 12v Chinese brand could not be connected properly.

Chinese brand LED strip
Singapore brand LED strip

From the video we can see that the lights were not that bright, and even though the led strip was RGB, the lights came out orange. The Singapore brand LED strip (5v) had the same problem as there were no drivers to support it. So we decided to turn to using the Adafruit Circuit Express. After that we tried to use Makecode to control the lights.


Attached Adafruit circuit express playground microcontroller to a neopixel ring



In the makecode, i couldnt get the neopixel ring light to be sensitive to the sound, so we used the arduino code to make this happen. (followed from here)


#include <Adafruit_CircuitPlayground.h> #include <FastLED.h>
#define LED_PIN 6 #define CP_PIN 17 pin 17
#define NUM_LEDS 32 #define NUM_CP 10 playground

//led strand is soldered to pin 6 //circuit playground’s neopixels live on

// number of LEDs in my strand
// number of neopixels on the circuit
uint8_t brightness = 255; //led strand brightness control
uint8_t cpbrightness = 40; //circuit playground brightness control

int STEPS = 25; //makes the rainbow colors more or less spread out int NUM_MODES = 5; // change this number if you add or subtract modes

CRGB leds[NUM_LEDS]; //I’ve set up different arrays for the neopixel strand and the circuit playground
CRGB cp[NUM_CP]; // so that we can control the brightness separately

CRGBPalette16 currentPalette; TBlendType currentBlending;

int ledMode = 0; //Initial mode bool leftButtonPressed;
bool rightButtonPressed;


#define MIC_PIN A4 // Analog port for microphone
#define DC_OFFSET 0
offset in mic signal – if unusure, leave 0
// DC

// I
calculated this value by serialprintln lots of mic values
#define NOISE 200 // Noise/hum/interference in mic signal and increased value until it went quiet
#define SAMPLES 60 // Length of buffer for dynamic level adjustment
#define TOP (NUM_LEDS + 2) // Allow dot to go slightly off scale
#define PEAK_FALL 10 // Rate of peak falling dot

peak = 0, //

Used for falling dot
dotCount = 0, //

Frame counter for delaying dot-falling speed
volCount = 0; //

Frame counter for storing past volume data int

vol[SAMPLES], // Collection of prior volume samples

lvl = 10, // Current audio level, change this number to adjust sensitivity
minLvlAvg = 0,
dynamic adjustment of graph low & high

maxLvlAvg = 512;
// For
#define MOVE_THRESHOLD 10 // movement sensitivity. lower number = less twinklitude

float X, Y, Z;
// Here is where you can put in your favorite colors that will appear!
// just add new {nnn, nnn, nnn}, lines. They will be picked out randomly
// RGB
uint8_t myFavoriteColors[][3] = {{200, 100, 200}, // I’ve set this for pastel twinkles

{200, 200, 100}, // Change colors by inputting diferent R, G, B values on these lines
{100, 200, 200}, //

}; // don’t edit the line below

#define FAVCOLORS sizeof(myFavoriteColors) / 3
void setup() {
FastLED.addLeds<WS2812B, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).

setCorrection( TypicalLEDStrip ); FastLED.addLeds<WS2812B, CP_PIN, COLOR_ORDER>(cp, 10).

setCorrection( TypicalLEDStrip );
currentBlending = LINEARBLEND; set_max_power_in_volts_and_milliamps(5, 500); //

FastLED 2.1 Power management set at 5V, 500mA

void loop() {

leftButtonPressed = CircuitPlayground.leftButton(); rightButtonPressed = CircuitPlayground.rightButton();

if (leftButtonPressed) { //left button cycles through modes clearpixels();
if (ledMode > NUM_MODES){ ledMode=0;

} }

if (rightButtonPressed) { ledMode=99;


switch (ledMode) {
case 0: currentPalette =
// right button turns all leds off

RainbowColors_p; rainbow(); break;

OceanColors_p; rainbow();

LavaColors_p; rainbow(); break; RainbowStripeColors_p; rainbow();
break; break;
case 1: motion(); break; case 2: soundreactive(); case 3: currentPalette =

case 4: currentPalette = case 5: currentPalette =
case 99: clearpixels(); break;
} }

void clearpixels() {

for (int i = 0; for (int i = 0; FastLED.show();


void rainbow() {
i < NUM_LEDS; i++) leds[i] = CRGB::Black; i < NUM_CP; i++) cp[i] = CRGB::Black;
static uint8_t startIndex = 0;
startIndex = startIndex + 1; /* motion speed */

FillLEDsFromPaletteColors( startIndex);

FastLED.show(); FastLED.delay(10);}

//this bit is in every palette mode, needs to be in there just once void FillLEDsFromPaletteColors( uint8_t colorIndex)

for (int i = 0; i < NUM_LEDS; i++) leds[i] = ColorFromPalette( currentPalette, colorIndex, brightness, currentBlending);

for (int i = 0; i < NUM_CP; i++) cp[i] = ColorFromPalette( currentPalette, colorIndex, cpbrightness, currentBlending);

colorIndex += STEPS; }

void soundreactive() {

uint8_t i;
uint16_t minLvl, maxLvl; int n, height;
n = analogRead(MIC_PIN);
// Raw
reading from mic
n = abs(n – 512 – DC_OFFSET); //

Center on zero

n = (n <= NOISE) ? 0 : (n – NOISE); // Remove noise/hum

lvl = ((lvl * 7) + n) >> 3; // “Dampened” reading (else looks twitchy)

// Calculate bar height based on dynamic min/max levels (fixed point):

height = TOP * (lvl – minLvlAvg) / (long)(maxLvlAvg – minLvlAvg);

if (height < 0L) height = 0; // Clip output

else if (height > TOP) height = TOP;

if (height > peak) peak = height; // Keep ‘peak’ dot at top

// Color pixels based on rainbow gradient — led strand for (i=0; i<NUM_LEDS; i++) {

if (i >= height) leds[i].setRGB( 0, 0,0);

else leds[i] = CHSV(map(i,0,NUM_LEDS-1,0,255), 255, brightness); //constrain colors here by changing HSV values


// Draw peak dot — led strand

if (peak > 0 && peak <= NUM_LEDS-1) leds[peak] = CHSV(map(peak,0,NUM_LEDS-1,0,255), 255, brightness);

// Color pixels based on rainbow gradient — circuit playground for (i=0; i<NUM_CP; i++) {

if (i >= height) cp[i].setRGB( 0, 0,0);

else cp[i] = CHSV(map(i,0,NUM_CP-1,0,255), 255, cpbrightness); //constrain colors here by changing HSV values


// Draw peak dot — circuit playground

if (peak > 0 && peak <= NUM_CP-1) cp[peak] = CHSV(map(peak,0,NUM_LEDS-1,0,255), 255, cpbrightness);
// Every few frames, make the peak pixel drop by 1:
if (++dotCount >= PEAK_FALL) { // fall rate

if(peak > 0) peak–;

dotCount = 0; }

vol[volCount] = n; // Save sample for dynamic leveling

if (++volCount >= SAMPLES) volCount = 0; // Advance/rollover sample counter

// Get volume range of prior frames minLvl = maxLvl = vol[0];
for (i=1; i<SAMPLES; i++) {

if (vol[i] < minLvl) minLvl = vol[i];

else if (vol[i] > maxLvl) maxLvl = vol[i]; }

//  minLvl and maxLvl indicate the volume range over prior frames, used
//  for vertically scaling the output graph (so it looks interesting
//  regardless of volume level). If they’re too close together though

// (e.g. at very low volume levels) the graph becomes super coarse // and ‘jumpy’…so keep some minimum distance between them (this // also lets the graph go to zero when no sound is playing): if((maxLvl – minLvl) < TOP) maxLvl = minLvl + TOP;
minLvlAvg = (minLvlAvg * 63 + minLvl) >> 6; Dampen min/max levels

maxLvlAvg = (maxLvlAvg * 63 + maxLvl) >> 6; (fake rolling average)

show_at_max_brightness_for_power(); managed FastLED display

Serial.println(LEDS.getFPS()); } // fastbracelet()

void motion() {

X = CircuitPlayground.motionX(); Y = CircuitPlayground.motionY();
// //

// Power
Z = CircuitPlayground.motionZ();
// Get the magnitude (length) of the 3 axis vector
// http://en.wikipedia.org/wiki/Euclidean_vector#Length double storedVector = X*X;
storedVector += Y*Y;
storedVector += Z*Z;
storedVector = sqrt(storedVector);
Serial.print(“Len: “); Serial.println(storedVector);

// wait a bit delay(100);

// get new data!
X = CircuitPlayground.motionX();
Y = CircuitPlayground.motionY();
Z = CircuitPlayground.motionZ();
double newVector = X*X;
newVector += Y*Y;
newVector += Z*Z;
newVector = sqrt(newVector);
Serial.print(“New Len: “); Serial.println(newVector);

// are we moving
if (abs(10*newVector – 10*storedVector) > MOVE_THRESHOLD) {


flashRandom(5, 1); // first number is ‘wait’ delay, shorter num == shorter twinkle

flashRandom(5, 3); // second number is how many neopixels to simultaneously light up

flashRandom(5, 2); }

void flashRandom(int wait, uint8_t howmany) {

for(uint16_t i=0; i<howmany; i++) { // pick a random favorite color! int c = random(FAVCOLORS);
int red = myFavoriteColors[c][0]; int green = myFavoriteColors[c][1]; int blue = myFavoriteColors[c][2];
// get a random pixel from the list
int j = random(NUM_LEDS);
//Serial.print(“Lighting up “); Serial.println(j);

// now we will ‘fade’ it in 5 steps for (int x=0; x < 5; x++) {

int r = red * (x+1); r /= 5; int g = green * (x+1); g /= 5; int b = blue * (x+1); b /= 5;

leds[j].r = r;
leds[j].g = g;
leds[j].b = b;
FastLED.show(); CircuitPlayground.setPixelColor(j, r, g, b); delay(wait);

// & fade out in 5 steps
for (int x=5; x >= 0; x–) {

int r = red * x; r /= 5; int g = green * x; g /= 5; int b = blue * x; b /= 5;

leds[j].r = r;
leds[j].g = g;
leds[j].b = b;
FastLED.show(); CircuitPlayground.setPixelColor(j, r, g, b); delay(wait);

} }

// LEDs will be off when done (they are faded to 0) }


Testing the sensitivity of the sound and other modes in our code:


After this, we attached optic fibres bought online:


we attached the leds and adafruit circuit board to the dress:


Jannah: Coding

Dominique: Dress

Alice: Fibre Optics & Assembly

Syam: Assembly


All in all everyone did a good job in this project!!