Food…but Fancy.

Moodboard

I really liked the way I worked during this project. What made a huge difference was using the transferring technique and working with type on transparency sheets. It was like composing on the computer, but in real life.  I learned a bunch of new tricks and techniques with this project.

For example:

Top: transfer using blending marker. Bottom: Transfer using nail polish remover plus marker on edges. Using a combination of both got me a well saturated image (polish remover) as well as with crisp details (marker)

 

I also experimented with scanning, and how different options when scanning can result in very different results. I ended using the regular 24-bit scans, because of the details and richness in colors:

24-bit color (what I used)

color smoothing

24-bit color

color smoothing

24-bit color

color smoothing

grayscale – halftone

black and white

Not only did this project help me practise working with my hands again, but my choice of topic was very fun for me. Creating a persona that I related to helped make a lot of my design choices. It also opened me up to shifting my topic, by thinking about what someone like me would be interested in seeing and doing. I tried out making jelly spheres/strawberry and banana caviar/ as a side experiment:


They were surprisingly successful, but ended up not making it into my zine. The reasoning behind this was also related to my persona. I thought about students like me, and how making simple foods for us/me is difficult or took time. That made my zine shift from an information book, to a mixture of entertaining foods, as well as the useful recipes part.

printed on transparency

transferred type

Finally, the composition of the final piece was very similar to working on inDesign. I had to test different typefaces and effects as always. What I found hard/inconvenient was having to keep on print different sizes of images, to test how it would look on the page. While working, resizing the image would be faster, easier on screen. But this way, it was better to be able to see the actual way the images would look, instead of having to test print.

This project didn’t really make me lean towards one way of working over the other. Both have their pros and cons. What I realised is that a balance of both would work for me better. Maybe collaging by hand, but resizing and composing on screen. Test prints are something that have to be done during both ways. It most likely would depend on project to project.

What was difficult was the alignment of crossovers by hand, since I really wanted to align some type across a spread. I ended up testing out registrations and stapling a certain way, to have the type be slightly off, but not so much that it’s illegible. What was also good to know—even though it was subconscious initially—was that I had kept a sense of narrative throughout the zine, despite it never being explicitly discussed (it should be obvious from the course’s name, but still).

Advertisements

Arduino – Displaying them and Introduction to circuits

We ended up spending and entire lesson trying to display our work. Eman and I had to look at the wirings and got a brief explanation of how the positive/live socket and ground worked. Since power supply cables were limited we had to figure out how to wire all our arduinos in such a way to maximise the use of the cables. Solutions involved reprogramming our boards (Amira and Amreen)…it was either that or soldering forked wires. Reprogramming was a simple step of changing the (7-y) in a single line of code.

processphoto

Final Result

They didn’t sync as perfectly as we had imagined. The reason was that we all had different numbers of frames. However, the imperfection grew on us. The concept of the dancefloor was enhanced when Wall.e would dance with Abu or when Eve would dance with the Genie, instead of their proper partners.


 

The second lesson was fun. We got a refresher of high school physics and the concepts of sensors. We moved on from working with Rainbowduinos to working with Arduinos. This involved looking more at the circuitry and the effect of programming the hardware on the readings and outputs. We revisited concepts like using the serial monitor to see how the code was being read.

Arduino – has input and output (input sensor or other info – can be analogue or digital, output light/movement/other action – again can be analogue or digital:

input > arduino > output -led (light)

inputs:
-sensors -servo (movement)
-button -motor (movement)
-touch -speaker (sound)
-sound -screen (visual)
-switch
-light
-motion
-pressure
-potentiometer <<<
-tilt/accelerometer <<<
-temp
-humid

The best part? This look at the arduino would be Interactive!

Circuit – if it’s not complete, then nothing will work

wise words…

The basic idea was that there were 13 digital pins? And that we could program the pins directly, for example: ‘turn on pin 13’
^ every single one pin is 5V and can be controlled directly.

Something to remember is that of those pins, 6 were analog pins? (the ones with ~ next to them). This meant that sensors could be attached to them, and it could be programmed with instructions like: ‘analog IN’…It related to the concept of a pwm – pule width modulation. We could use code like:

analogeWrite(pin, value) – to send a  virtual analogue signal. (pwm?)

 

Instead of working independently, we all worked together on a first experiment:

We learnt how to light up an LED. Long one in 5v, short one in ground, this needed a resistor since too much current can result in burnouts.

resistance is key to circuits – restrict amount of energy to prevent burnout

V = IR

I = V/R

R = V/I

Like how we programmed our Rainbowduinos, we have to set the pinMode in the setup – only need to write it once. We used the main Arduino website as a reference again:

pinMode (pin, mode);
^
pin – pin number
modes – input, output, input_pullup

high = on
low = off

I/O – input output

Screen Shot 2016-01-18 at 4.35.52 PM 1y3Fu Screen Shot 2016-01-18 at 4.51.48 PM

pinnacle of our learning – randomly blinking lights

[pic]


Next lesson we really looked at how to read analogue readings (from an input). We ended the previous lesson trying to unsuccessfully do this. The problem was simply reading the pin as

A0 instead of just 0:

Screen Shot 2016-01-20 at 10.34.12 AM

power (+5v) >> photoresistor (control amount of flow) > gnd

^ Personally I didn’t get this concept. How could we see if our code works or not without a physical output? Turns out we use the serial monitor as an output.

>>  > A0 input (act like another gnd)

We learnt the details of how printing worked. Serial print will print a character in a continuous line:

current = constrain(current,0,9)

^ constraining readings from raw readings of 0-1023 to a desired range (1-10 or 0-8 or 0-5…you get the idea) allows us to set an output for a specific range. Say the reading is small, then the fan will go slow (pretend I put a fan as an output). The speed of the fan will go up on the scale of 0-5. The thing with these numbers is that they could be used to play frames as well, frames 0-8, depending on which reading is being sensed…

The homework was to read chapters in the Arduino book about these concepts, to help us learn more about circuits.

Arduino: Final collaborative characters

For the final phase of animating on the arduinos the four of us (Eman, Amreen, Amira and I) decided to collaborate again. Concepts we considered were trains going from a screen to the next, characters running from screen to screen. We realised that trying to make things sync that way wouldn’t really work very well. We came with the idea of creating simple characters, 1 on 2 screens that are dancing next to each other.

I controlled the bottom half of wall.e  and genie while Amreen controlled the top half. We had to work together to make the animation look somewhat synced, if not perfectly.

characters00002characters00003
^
 I was planning on making his tail move, but instead it just looked disjointed and looked like too much with the genies hands dancing AND the lamp blinking. I focused on just making the lamp blink quickly.

characters00001
^
 Our next plan was to give the characters context, otherwise they just looked like they were floating in emptiness. It sounds simple. But creating a dancefloor was a big issue.

dance floor issues:

Initially it wasn’t possible to play the two (character and the dance floor) at the same time. I would draw the floor, but it would disappear when I wanted to add the character:

arduino00033

 

I asked my sister if she could suggest any solutions. She suggested that I do a search on threads . I wasn’t sure what she meant,  but it was meant to bypass the coding issue (playing two things at the same time wasn’t working). But in the end it turned out that Arduino didn’t support threads?

In the end, she worked with me, giving me a crash course in  coding and refreshing my high school maths: “What is a modulus???” – her

We tried using the concept of the modulus to make the two animations play at the same at such a fast speed that it looked as if they were playing together (details in the comments of the code):

arduino00046 arduino00049

^ The percentage sign here wasn’t a percentage, it was a check against the number we gave.

arduino00051

In the end she figured it out…I figured that she was playing the two at the same time in the areas where the screen was blank (if i=0x000000):

dance1

I added an extra line of code to limit that to the last line
Rb.setPixelXY(x,0,random(0xff0f0f));

:::

dance

^ As you can see it still wasn’t seamless. The characters animation would play over itself…

In the end the Professor helped:

arduino00056 arduino00057

^ I still need to get an explanation of how he achieved this so simply……….

Arduino: Looking at Generative design

We discussed how boolean datatypes (1’s and 0s) can be used to reduce using storage since a lot of us were running out of storage again. The problem was that this datatype could only be used if we were using only 2 colors/variables in our arrays.

We looked at other ways to create images. Other, more spontaneous ways such as generative/procedural design [random? systems]. Watching a video about Conway’s Game of Life gave us an idea of what generative design was:

Stephen Hawkings The Meaning of Life (John Conway’s Game of Life segment)

We talked about emergent systems and how these, IT and mathematics related to game design:

a set of simple rules are created > the results are unpredictably complex.

We used this to create random functions to draw ‘random’ shapes. But then added on ‘limits’ or max and min ranges to the functions to somewhat control the randomness.

generativedesign00001

Once we all got the basics of generative design we were left to make something cool with it (or with any other thing we learned in the past few weeks) for the rest of the lesson.

Eman, Amira, Amreen and I decided to do something that we wanted to for a while now (ever since the LED matrices were introduced to us). We made a generic window scene, each controlling a square of the window. we planned to place the screens next to each other with even gaps to make it look like the window pane. Amira decided the colour of the sky and animated the sun, Eman animated the flower and Amreen and I tried to sync an apple falling from the top of the tree on her screen to the ground on mine.

The coding part was simple, we used arrays, it was choosing the delays that was complicated. In the end we synced them, but after a few loops, the screens would go out of sync for a while, then loop back to sync again.

generativedesign00002

Even though we couldn’t sync them properly, we were able to create a harmonious scene because we shared the exact hexadecimals of colours and matched shapes that flowed from on screen to another (grass and tree and sky).

Arduino: Animations

Using any means we wanted (arrays, loops anything we learned so far) We had to create a few animations loosely based around the topics:
typography (fonts)
famous work of art
food
flags
free

Keeping in mind the concept of ‘story’

Ideas I had:

famous work of art: The Scream, The Great Wave
Flag and food to show story  of the works of art? Country and background of artists?


I decided to start with my personal favourite, The Scream by Edvard Munch:

My idea evolved through the process. I made the first frame to begin with.

arduino00011

The painting was not clear at such a small scale (because of the teensy screen and limited number of bits) so I got the idea to zoom. I zoomed and needed features to appear from nothing. The thought of making them appear in a sequence came next. I could show the eyes first, then lips then the mouth opens bit by bit. This would emphasise the scream!

animations00001

I used what we learned about frame sequences to alter the timings of how I wanted the frames to appear.

I wrote comments to show my thought processes in the code itself:
arduino00014
^
 a clearer explanation is that I stored different frame sequences : e.gtotalFrames0, totalFrames and totalFrames2 with the different frames (zooming in and mouth opening). This was so that I could alter the speed with which each sequence took place.

arduino00015

——–
arduino00016

Next I decided to animate a scrolling flag of Norway (Edvard Munch was from Norway). The problem was that even though the flag was a simple cross, getting the correct thickness and proportions in the correct spot was difficult, again because of the limited number of pixels and the square matrix.
2000px-Flag_of_Norway.svg

I tried different styles, finally settling on the one on the far left (top row):

animations00002

I made a spaceship next because I had the thought of zooming into the mouth so much that it reveals a spaceship inside…some kind of zany animation. I didn’t do that part, but made an animation of a ufo bobbing around while stars whizz past it.

animations00003

arduino00017
^
initially I had a delay so that the UFO pauses after bobbing in a circle once, but it just looked unnatural and I got rid of the pause.

arduino00018

My last step was to try to figure out how to make the stars fly by at a faster speed than the hovering spaceship:

arduino00019 arduino00020

^^^  Using this method I couldn’t get the stars to play separately from ship. But I got the ship to play alone with the top and bottom rows being blank…I  changed y=0 to y=1 and changed the dimensions of the array. Still need to figure out how to add on the stars.

Arduino: Learning some more (for loops, arrays and if functions)

We showed the animations we did to the class. We moved on to learn about…

The concept of iterations. iterative loops. I realised that the professor would explain for loops and I had I not already tried it I would have had great difficulty in understanding what’s happening (yes!).

For loop explanation:
We pulled up the same reference for forloops that I had found over the weekend on the Arduinos official website.

initialization – initialize a variable, used as a counter (start at 0 [x value] and count up)

now x value can be changed to ‘i’, since i=0. i becomes placeholder

need to tell it to count up/down and then STOP at something.

i=i+1 >>> add 1 to 0 =1. now i is 1. i=i+1 >>> add 1 to 1 + 2. now i is 2. i++ is shortcut. add 1 to it and reassign

stop counting at 7. when i = 7.

The professor explained the serial monitor which monitored what’s happening with i when we placed 


Serial.println(i);


in the void loop.

With our current function all we got were 7s. We tried using the = sign in the for loop. We thought that one = is an assignment. Assigned i to be 0 AND 7. When we put TWO = it become a check. 1 = is an assignment. 2 = is a check (number that’s being checked against).

This didn’t show anything. == was not a valid command. We ha to use the < or > signs.

cmd+t was another shortcut we learned to keep the code neat and properly indented.

Arrays explanation:
We learnt that an array is a variable with dimension, it can sort multiple values.

datatype colors[ ] <<<<<<<<<< brackets establishes it as an array.

A 2dimensional array has two sets of brackets [][] for every value in one array, there is another array. So it’s like an array inside an array.

pixels[2][4] { {1,2,3,4,5….}, {}, {}……} <<<<<<<<this piece of code means that the program looks inside 2nd container, and then the 4th one in that set

This way we could imagine the arrays as the pixels on the board. While doing this, a lot of us found that we were running out of space since each set (inside the pixels array) was like one frame, and to get an animation we needed many frames.

Going from uint32_t or int to byte halved the storage usage. (Although, changing the colors datatype to byte ruined the colors, so I just changed the ints to bytes). 

We used a for loop to draw the pixels in the arrays:

uint32_t colors[3] {0x000001, 0xaa1010, 0x6e6e6e};

byte pixels[8][8] = {
{1, 1, 1, 0, 0, 0, 0, 0},
{0, 0, 1, 0, 0, 0, 0, 0},
{2, 0, 1, 1, 1, 1, 0, 0},
{2, 0, 0, 0, 0, 1, 0, 0},
{2, 2, 2, 2, 0, 1, 1, 1},
{0, 0, 0, 2, 0, 0, 0, 0},
{0, 0, 0, 2, 2, 2, 2, 2},
{0, 0, 0, 0, 0, 0, 0, 0},
};

void displayFrame() {

for (int y = 0 ; y < 8; y++) {
for (int x = 0 ; x < 8; x++) {

int i = pixels [y][x];
//i now is equal to?

Rb.setPixelXY(x, y, colors[i]);
}
};
}

void setup() {
Rb.init();
}

void loop() {
displayFrame();
delay(500);
Rb.blankDisplay();
delay(500);
}

The first image is the one frame I drew.
array00001The next 8 images show the loop I made by creating 8 arrays inside

byte pixels [8][8] by adding an extra [8] in the beginning. So

bye pixels [8][8][8]

This just made the for loop play all the frames (arrays) with the delay of 500.


and now we were left to make a cool animation for the rest of the lesson…

Experiment Array (looping snow):
array00002

Experiment Array (snooze):
I successfully made a looping snooze using this technique!
array00003

Experiment IF (revisiting snooze, because I’m stubborn):
Since I got the looping snooze to work using arrays, I wanted to try getting it to work using my older method. The method of shifting the Z using a for loop. My sister didn’t help me because she said I should be able to figure it out by myself now…

I wasn’t able to. The professor suggested that I use an IF function instead of the for loop:

int number = 0;

void loop() {
snoozeScroll(number, blue0);
delay(300);
Rb.blankDisplay();

number++;
if (number > 15) {
number = 9;
}
}

successz

annnd it worked!! The difficult part was finding the correct combination of numbers. I thought it was just trial and error but later realised that it was counting the number of shifts in relation to the pixels.

Arduino: Introduction and initial experiments

The class started with an introduction to what the course is about. A likely merging of Imaging and Design Form & Communication, where of course we’ll be looking at images, but also be learning new softwares and technologies like programming Arduinos. This last part sounded really fun.

The next session was spent fiddling with littleBits. We split into groups  to briefly play with how separate pieces of hardware snap–literally–together, to do different things. Testing out different sensors and motors.
What I do hope is that we’re given another explanation of the physics of the parts, because as I’m writing this I can feel that I’ve already forgotten some important information. Did the transformer (i don’t think it’s even called that–the thing that controlled the current) connect to the battery? The orange part was meant to be an extension thing, but there was a weird way it connected (was it called a divider?).

At the end of the day, I think the more we fiddled with them, the better our understanding of the parts got.

Next came learning some programming.

Experiment (dots):
Screen Shot 2016-01-25 at 3.10.08 PM
First we learnt to draw a single pixel using Rb.setPixelXY(); . Then moved on to learning how to store colours using hexadecimal codes to save space. We learnt the basics of programming this way: Functions, commands, the fact that data types need to be specified (e.g.  uint32_t for colors), the importance of [] () and ;

I started by creating gradients, focusing on blues and greens mainly because one of my LEDs had a fused Red filament.

I figured out how to create blinking lights using delays  and Rb.blankDisplay();


 

Further animations at home:

Experiment (ripple):

Screen Shot 2016-01-25 at 3.11.04 PM

I had the idea of ripples, fire and a ping pong game.
I decided to try making a rippling effect where squares of colour turn on turn by turn, and as the third one turns on, the first on turns off and so on until the edge square is reached. I didn’t start my square from the centre of the matrix so that it looks more like a ripple and not just like a pattern.

To do this I had to store each section of blue in a void funtion. I couldn’t understand how to do that so I struggled for a while until it FINALLY worked!

The wrong method:

store as
void blinkRipple(int x,int y)

call with
blinkRipple(3,3,blue0);

The correct method:

store as:
void blinkRipple(int x,int y, uint32_t)

call with
Rb.setPixelXY(3,3, blue0);

Next came figuring out how to turn the lights off. I figured that all I needed was to use RGB values of 0,0,0.

Rb.setPixelXY(x, y, 0, 0, 0);

I tried this with the hexadecimal code and I got a compilation error if I recall correctly. Maybe I was doing something else wrong. Here is what I tried: Rb.setPixelXY(x, y, 0x000000);

After thinking about it for longer I figured that I had to store the blank pixels too:


uint32_t blank = 0x000000;

//void drawRipple(int x,int y, uint32_t){
//}

//turn off light
void blinkRipple() {

  // 1middle 4 pixels in blue0
     Rb.setPixelXY(2,2, blue0);
     Rb.setPixelXY(2,3, blue0);
     Rb.setPixelXY(3,2, blue0);
     Rb.setPixelXY(3,3, blue0);
}

void blinkRippleoff() {
     Rb.setPixelXY(2,2, blank);
     Rb.setPixelXY(2,3, blank);
     Rb.setPixelXY(3,2, blank);
     Rb.setPixelXY(3,3, blue0);
}

Screen Shot 2016-01-25 at 3.12.10 PM

I tried switching colours. Purples were very bright, not as pretty as blues. The reds also looked brighter than blues. So where I had the blues going from dim to bright at the edges, I did the opposite with reds, because otherwise it looked very odd.

Experiment (spiral):
spiral
I used a similar codes to make a looping spiral. It went from light blue to dark in the centre and then dark red to light red in the centre and looped.

Experiment (hello):
Next I wanted to do something complex. I created a system of using a whiteboard marker and transparent sheet to help me visual the pixels I wanted turned on. I wanted to create scrolling text, a simple HELLO. My sister told me to see if the system accepted negative values or values greater than 7, if so then I could draw my entire word and shift the pixels. Screen Shot 2016-01-25 at 3.16.01 PM
While trying to understand how to shift the pixels I finally understood how:

void hello1(uint32_t color) {}

is like a function. the ‘color’ in the parentheses is like the x in a mathematical function. so if I type in:

Rb.setPixelXY(7,3, colour);
Rb.setPixelXY(7,4, colour); in between the {} after it,
it means I can call it later in the loop with:
hello1
and then specify what I want my x to be, which will be a hexadecimal  BECAUSE i specified the datatype as uint32_t  when writing my function!!!

Until now I didn’t get it for some reason. but when it becomes clear it’s so obvious.

wrote out the entirety of my word after testing whether the system accepted extra numbers (more than 7 or less than 0). Then used the x technique (7-x) where x was shift (7-shift). I did this for all of my x numbers, since I wanted the text to scroll horizontally (got hinted in that direction by my sister).

Example:

void helloMessage(int shift) {
 //H
    Rb.setPixelXY(7-shift,3, blue0);
    Rb.setPixelXY(7-shift,4, blue0);
    Rb.setPixelXY(7-shift,5, blue0);

and so on.

I got a lot of support from my sister when it came to making it loop. She explained a ‘for loop’ to me. Like an amateur I typed in ‘4()’… because…4 loop

it was actually:

 for(int number = 0; number <25; number=number+1){
      helloMessage(number);
      delay(500);
    }

This was me using ‘x’ again, where x this time was ‘number’. The ‘number’ was how much I wanted the ‘hello’ to shift by. calculated the 25 by seeing that the entire message, went from 7 to 25. 

just the above didn’t work. It resulted in a block:

 

Screen Shot 2016-01-25 at 3.18.10 PM

the reason being was that after the delay of each ‘number’, the screen wouldn’t go blank, so it just kept copying the first line of the H…I fixed this problem by using the Rb.blankDisplay after the delay.

Screen Shot 2016-01-25 at 3.20.26 PM

I ended the loop with a smile (with no assistance!!!). To make the ‘smile’ I had to figure out how to stop this loop when the O is at the exact spot where I need it to be.

I went online to get a better understanding of for loops:

arduino00008 arduino00009

My current understanding of for loop:

initialization, happens once, it initializes, statement begins with 0. Loop continues to be tested through to the number in the ‘condition. <25 for example if thats my number of steps.so Until that range is covered, the statement block (shifting function) is executed and the increment of the step is added…

Experiment (snooze):

I tried making my own looping forloop, by myself, without assistance. I made a series of 3 Z’s that would scroll up diagonally from bottom left to top right of the matrix. My plan was to make them loop endlessly.

for(int number = 0, number >-12, number = number+1){
^WRONG. need to be separated by semi-colons not commas.

for(int number = 0; number >-12; number = number+1){
      snoozeScroll(number);
      delay(500);
^SUCCESS…in the test the function of snoozeScroll just had one LED on, it seemed to do what I wanted, shift up and right (diagonally):

void snoozeScroll(int shift) {
    Rb.setPixelXY(-1+shift,-1+shift, blue0);

Another thing I discovered was by adding another datatype or variable in the parentheses I could vary the color easily:

SETUP:
void snoozeScroll(int shift,uint32_t colour) {
    Rb.setPixelXY(-1+shift,-1+shift, color);

LOOP:
for(int number = 0; number >-12; number = number+1){
      snoozeScroll(number, blue7);
      delay(500);
^could alter blue7 to any other stored colour.

At the end of it all I couldn’t get the Zs to loop properly. Once the 3rd Z left the screen it wouldn’t loop until after a very long delay which I hadn’t put in.

My sister explained that something in my for loop is wrong, the range of numbers maybe, which is causing the pixels to be shifted up forever. It returns after reaching an insanely huge number.

z