Storyboard for a Promotional Video

Comm Lab - Video and Sound

Group Members:

Amena Hayat

Stephanie Paige

Ayal Rosenberg

We decided to take up the Promotional Video option and jumped right in, sharing our own first ideas and in the end, deciding to incorporate each into what we hope will be a humorous, inspiring infomercial for an amazing product that you all would want to get your hands on.

Our infomercial is going to promote a magical device (a wand, to be exact), that you can code to cause paranormal-telekinesis instances to occur. The overarching idea – the product – is the purest combination of all of our visions for this assignment (a paranormal product, Harry Potter, creating an evil twin).

The general idea of our project is to reflect daily problems of the average ITPer, and how to resolve those issues with the wave of a wand. We are including “P5 coding” in the concept to provide a realistic side to our made up product.

We thought of the daily problems and which of these were interesting enough to cause for the need of a device like ours. From here, we discussed how these could be solved and how/why our device works. Then, how our timeline and storyboard would look. Get ready for the magic below:

Scene 1:

Presenting the first problem : An instructor asks if you did the blog post. And you’re all embarrassed. The instructor is disappointed.

Scene 2:

You are learning Chinese from a book and then go to a group of people and say stupid stuff in Chinese. They look at you in shocked faces. You are embarrassed.

Scene 3:

You are walking down the street and there is a couple holding hands and they’re blocking your way. Next frame – you get to class and you’re late.

Scene 4:

“Introducing – P5.fricking_magic_wand!!” the wand appears at the front of the picture.

Scene 5:

The scientist explains how it works and what is the secret component. A brief frame of someone writing code and uploading it to the wand.

Scene 6:

Going back to the class with the homework. A brief shot of the computer screen with a funny line of code (“map(shiffman, memory, 0,0”);   Then there’s a shot of the Instructor confused and carry on with the class.

Scene 7-8:

Same as 6

Scene X :

“Warning – infinite loops can cause the creation of  an evil twin”

The protagonist’s so called evil twin is making mayhem in the lounge.  

 

~Sketched by Amena~

Glass Half Full

Physical Computing

“FULL” light goes on once the glass is full!

This circuit is designed to light different lights which show the state of the glass of water. It completes when the glass of water fills up, connecting the ends of two wires (one at the bottom and one at the height which is considered “full”), and the micro-controller is programmed to take this input and light up LEDs accordingly. For conductivity purposes, salt water is used.

Salt water conducts electricity

The code:

Interactive Self Portrait

Computational Media

PLAY WITH ME — Move the mouse around and click for a wink! Refresh for a fresh choker.

http://alpha.editor.p5js.org/amena91/sketches/HkN9-Ks9W

Inspired by this photo of me 🙂

Changes to my code: 

[Please visit the post:

SELF PORTRAIT IN P5.JS!

for a refresher on my earlier code]

  • Surprise choker colour every time the sketch is run:

let c1;
let c2;
let c3;

function setup() {
createCanvas(800, 690);
c1= random(0,255);
c2= random(0,255);
c3= random(0,255);

//Choker [PLACED IN FUNCTION DRAW()]
noFill();
strokeWeight(30);
stroke(c1,c2,c3);
arc(376, 618, 155, 20, 0, PI);


  • Fading the background and dancing stars from black to while inversely:

let sinval = sin(angle/10);
let sky = map(sinval, -1, 1, 0, 255);
let stars = map(sinval, -1, 1, 255, 0);
background(sky);
angle += 0.1;


  • Making the eyes follow mouseX position without them leaving their socket

+

  • Creating a wink with one eye while the mouse is pressed:

via GIPHY

let eyeX2 = 439 + ((mouseX/width)*20);
let eyeX1 = 295 + ((mouseX/width)*20);

ellipse(305, 348, 54, 31);
ellipse(449, 348, 54, 31);
fill(0);
ellipse(eyeX1, 348, 30, 30);
ellipse(eyeX2, 348, 30, 30);

Here, to make the eyes follow the mouse X position without leaving the eye socket, the map function could’ve been used but I used pure math to solve the problem. I learned about map later into the exercise while fading the background.

Following the mouse position within the eye socket

 


if (mouseIsPressed)
{
noStroke();
fill(197,154,131);
ellipse(449,348,59,39);
strokeWeight(2);
stroke(0);
line(430,360,425,366);
line(437,364,437,373);
line(448,367,448,374);
line(459,364,466,372);
line(473,359,484,364);

noFill();
strokeWeight(7);
stroke(0);
arc(449,348,54,34,0,PI);
}
else
{ellipse(eyeX2,348,30,30);
}

 

Target Self Check-Out

Physical Computing

Target Self Checkout is, in my own experience, a faster, more autonomous yet introverted means of checking out items from a Target store, with considerably smaller lines (or in the most case none at all).

To process, you scan the barcode on the item and the item pops up on the screen, where you press continue to confirm and proceed to place it in the baggage. The machine weighs the product to ensure the right item is being placed in the baggage area. If any discrepancy is noticed, the machine has pops up a message asking to confirm whether the item placed matches with the item scanned.

I decided to go and observe people at the interactive self-checkout kiosks installed at the local Target store in my neighbourhood. Self-checkout at stores is always my preference, giving me the opportunity to get done with the transaction faster — but sometimes help from a store employee is required, especially in the case of human errors like beeping the item twice, or machine errors like not being able to beep at all. Consecutive unsuccessful tries also result in the machine requiring some form of supervision by a store cashier.

During the 30 minutes or so I spent observing customers using the kiosk, roughly 30-35 people checked out of the store. About a fifth of the total customers decided to use this form of checkout despite huge lines. I guess people want to be mindless about these things. Those who generally decided to use them seemed to be regular users experiencing little to no difficulties.

I decided to focus on 3 customers who had separate communication experiences with the kiosk. The first person seemed to use it seamlessly, knowing how the items had to be scanned and place. On those one off instances when the machine would display an error, they would delete the item, rescan it and proceed further. This person had about 6-7 items and his whole transaction time was not more than 3-4 minutes. The second person had a much bigger shopping basket, with about 20 items. While prepackaged product barcodes were easy to read and locate for the machine, fresh items such as fruits and vegetables were quite the task. The machine would prompt them to scan the correct barcode again. He was also unable to successfully delete the wrongly scanned items he has in the kiosk cart. Having failed consecutively, the machine requested assistance of a cashier. The cashier aided the customer by helping them manually look up the item in the inventory list. As per my observation, this was the hardest task, as the cashier has to search the item they want to put into the bag. This operation as much longer due to 2 reasons; a larger shopping cart and the help required from the store cashier. Therefore, I believe that this sort of situation is ideal for someone who has less than 10 items and does not want to wait 10 minutes to cash them out. The last interaction was actually the shortest where the person kept getting an error on the screen. The machine would ask them to retry as the weight in the bag and the weight of the item scanned did not match. The person eventually had to get in line and wait his turn out.

As far as the quality of interaction goes, it was high, with most customers getting the full benefit of the kiosk: leaving Target without waiting in line, and without any difficulty communicating with the machine, which is the goal of good interaction. The interface is intuitive and fairly straightforward, but there is definitely a need to eliminate the number of errors produced by the machine and need for employees to come over for guidance, hence the interactivity design can be worked on.

 

Dino Switch

Physical Computing

Inspired by this image, the dino switch combines the conducting power of  play-doh (yes, play doh conducts — quite simply because of the concentrated salts in it) with aluminium foil which I used to make the leave to feed it. I went with cute this time, will probably go for utility next time 😉

I <3 you, you <3 me, electrocute this monster already amiright

 

Feeding

And the LED turns on

Here, watch:

Soundwalk: Our Commute

Comm Lab - Video and Sound

Group Members:

Alice Sun

Amena Hayat

Elizabeth Ferguson

We were tasked to make a 5-minute Soundwalk for Communications Lab, and we chose to do one with a journey in mind. We imagined a route across the globe, with our hometowns as stops, which ended in our new home; New York City. With nostalgic sounds of each of the places we hail from, Busan in South Korea, Lahore in Pakistan, and San Fransisco Bay Area in the US, and a refreshing, hopeful ending with sounds that immortalise New York City, our soundwalk is an emotion stirrer.

The soundwalk was planned on a Google Sheet:

Responsibilities:

Amena
–  Sound edition for Lahore, Pakistan in Track 1-Journey
–  Sound edition for entire Track 2 -MTA (Train) and Track 3  -Home (NYC subway and street)
–  Story narration for Lahore, Pakistan

Elizabeth
–  Sound edition for Bay Area, US in Track 1-Journey
–  Story narration for Bay Area, US
–  Production of the map inside Tisch School of the Arts at 721 Broadway

Alice
–  Sound edition for Busan, South Korea in Track 1-Journey
–  Sound edition for Intro
–  Story narration for Busan, South Korea, Intro and Ending
–  Remapping and combining of entire tracks

We used Adobe Audition to edit sound, this is what the formatting looked like:

And the soundwalk also incorporated an instructional map:

Here, have a listen!

Computation in Art

Computational Media

I’ve been both, artist and engineer. The lack of creativity in my engineering program, however, had always made me crave art and artistic practices more, since back then, incorporating the two was a little impossible. Now that that isn’t the case anymore, I want to show you the kind of work I want to make in ps.js, and what has influenced my past work as well.

Photography

Taken in the outskirts of Lahore, my hometown, in a village which got a supply of clean water recently. These photos capture the joy of a newfound utility and contrast facial activity with the surroundings.

Faces are one of my deepest interests in art; capturing, creating, everything.

One of my most significant goals in art pursuits is creating empathy between people.

 

I’ve found that my art tends to be very “branchy”

These images were made on Photoshop while I learned Infinite Surface Design for digital printing on textiles at Rhode Island School of Design during a summer.

 

 

 

 

 

 

 

 

Digital Prints

 

 

 

 

One of my favourite pieces: Tree branches with urban photography backdrop. Noise and order.

For computing the kind of art I am inspired by, I want to be able to merge these

 

This image by Ryan Alexander amazes me. The smokey effect made with narrow branches, creating a portrait this defined: definitely something I want to be able to make. Maybe a generative software too.

I want to make GIFs like these for a better understand of certain logics or data, and to just make learning attractive for younger students.

This one merged with Ryan’s artwork above certainly ignites a chain of ideas in my head. One project I’m interested in is morphing one face from another in a similar way.

 

 

 

 

Self Portrait in p5.js!

Computational Media

To start off, I’ll say I’m pretty proud of myself to pull off a sketch like this after just learning p5.js. Its not really accurate (I could work on that) but at least its not ugly.

I decided on this photo of my face as a guide:

“Cheese! ..not”

As an attempt to extract coordinates, I imported the image onto Photoshop and marked the points, lines, ellipses and arcs (symbolised by T formations since all I needed were the centre, height and width)

Boo

I used the rulers on Photoshop and my cursor

To map coordinates on a drawing. Wonder why the result still wasn’t very ~accurate~

 

 

 

 

 

 

 

I picked colours on Photoshop as well, and noted their RGB

For more colours later, I just found the best Google extension ever

After this I started coding, and many coordinate errors (I was sleepy) and frustrations later (see Exhibit A), after almost reaching the end point, I reached a Eureka moment and coded the following line:

print(“X=”,mouseX,” Y=”,mouseY);  //you idiot

And suddenly the task became a lot easier.

Exhibit A

My Code:

https://gist.github.com/amena91/4bc1786f9b0bddee46ea47e5345f4337

function setup() {
createCanvas(800, 690);
}

function draw() {
background(0); //change to black

//HELP W/ COORDINATES, shouldv’e done this way sooner!
print(“X=”,mouseX,” Y=”,mouseY);

//DANCING STARS
fill(255);
noStroke();
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,1,1);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,10,10);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,7,7);
ellipse(random()*800,random()*800,6,6);
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,1.5,1.5);
ellipse(random()*800,random()*800,8,8);
ellipse(random()*800,random()*800,13,13);
ellipse(random()*800,random()*800,10,10);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,12,12);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,5,5);

//Hair Head and Back Hair
fill(58, 31, 1);
arc(380,200,400,270,PI,0);
beginShape();
vertex(181,194);
vertex(163,463);
vertex(135,646);
vertex(130,666);
vertex(669,682);
vertex(613,424);
vertex(580,193);
endShape(CLOSE);

//Neck
fill(197,139,117);
beginShape();
vertex(298,540);
vertex(303,571);
vertex(260,310);
vertex(303,609);
vertex(284,671);
vertex(486,689);
vertex(472,660);
vertex(455,624);
vertex(455,589);
vertex(467,540);
endShape(CLOSE);

//Face Shape
fill(238,187,166);
arc(385,330,300,340,PI,0);
quad(237,390,259,478,495,487,528,382);
arc(380,480,215,203, 0,PI);
quad(534,330, 532,432, 239,432, 238,315);
beginShape(); //just smoothing edges
vertex(256,468);
vertex(296,538);
vertex(323,472);
endShape(CLOSE);
beginShape();
vertex(476,521);
vertex(497,479);
vertex(445,478);
endShape(CLOSE);

//Eyes
fill(255);
ellipse(305,348,54,31);
ellipse(449,348,54,31);
fill(0);
ellipse(305,348,30,30);
ellipse(449,348,30,30);
noFill();
strokeWeight(7); //damn you, my love for eyeliner!
stroke(0);
arc(305,348,54,34,PI,0);
arc(449,348,54,34,PI,0);
fill(0);
triangle(275,350,276,345,265,345); //and it has to be winged too..
triangle(480,350,489,345,481,345);
strokeWeight(1);
stroke(0);

//Eyebrows
noStroke();
fill(58, 31, 1);
beginShape();
vertex(395,312);
vertex(462,292);
vertex(502,310);
vertex(510,325);
vertex(502,318);
vertex(472,310);
vertex(400,330);
endShape(CLOSE);
beginShape();
vertex(350,310);
vertex(349,322);
vertex(260,310);
vertex(240,315);
vertex(250,310);
vertex(280,295);
endShape(CLOSE);

//Lips
fill(205,120,115);
arc(375,500,87,36 ,0,PI);
fill(169,92,84);
beginShape();
vertex(335,500);
vertex(360,490);
vertex(375,495);
vertex(390,490);
vertex(425,505);
endShape(CLOSE);

//Nose
noFill();
strokeWeight(1);
stroke(0);
arc(380,440,40,15,0,PI);
fill(0);
ellipse(360,444,3,3);
ellipse(400,444,3,3);
noFill();
arc(360,441,14,15,PI/2,3*PI/2);
arc(400,441,14,15,3*PI/2,PI/2);

//Front Hair
fill(79, 48, 12);
beginShape();
vertex(397,156);
vertex(357,160);
vertex(310,179);
vertex(271,213);
vertex(245,249);
vertex(211,326);
vertex(199,348);
vertex(260,671);
vertex(177,670);
vertex(187,283);
vertex(215,209);
vertex(260,154);
vertex(340,120);
vertex(397,133);
endShape(CLOSE);

//Glasses
noFill();
strokeWeight(3);
stroke(0);
arc(375,325,324,10,PI,0);
//line(205,318,534,318);
arc(375,360,40,8,PI,0);
line(355,362,318,321);
line(397,359,435,321);
line(213,325,232,381);
line(357,361,351,381);
line(397,361,401,381);
line(539,325,529,381);
arc(291.5,381,120,100,0,PI);
arc(465,381,125,100,0,PI);
line(233,380,200,346);
line(200,346,316,322);
line(437,320,548,340);
line(548,340,529,381);

//Earrings
noStroke();
fill(100);
ellipse(235,435,26,30);
ellipse(532,420,26,30);

//Choker
noFill();
strokeWeight(30);
stroke(0);
arc(376,618,155,20,0,PI);

}

Check it out:

And Voila!

The Ecstasy of Influence – A Plagiarism by Jonathan Lethem

Comm Lab - Video and Sound

Jonatham Lethem’s article on “plagiarism” and its versions draws many comparisons between artists’, scientists’ and other public figures’ work and criticises the ownership of ideas. It explains with various examples, like that of Bob Dylan’s greatest hits, Shakespeare’s Romeo and Juliet, Martin Luther King’s sermons, Walt Disney’s Mickey Mouse, since all were inspired by other artists before them, that the originality of the works of art and science with the greatest contributions to contemporary human history is in the assembly and the rearrangement of ideas.

Loss Aversion 

Collaging, Lethem explains with the words “the cut-up method”, is an art itself, and there can be true originality there. It is what teachers would call plagiarism, but when done right can invoke the profound effect intended by the artist. For me personally, inspiration did awaken what I consider my previously hidden talents, and my career shift from engineer to fashion designer was heavily influenced by the work of Indian couturist, Sabyasachi Mukherjee. “Like a memory never before experienced” I designed, incorporating bits and pieces of his vision into my work, and the results snowballed into designs that were my own but which borrowed his ingenuity.

I instinctively agree with the notion put forward by Thomas Jefferson that some things are say, sacred enough to never be commodified. Although he did consider copyrights “a necessary evil”, promoting the mentioned culture that everything of value must be owned by someone, ideas, like sex, can not be property. Lethem is right when he calls them “government granted monopolies.” Ideas are both personal, yet they belong to humanity as a whole, like airspace.

Gift Economy and the Commons — “You can’t steal a gift.”

My favourite quote in the article: “Don’t pirate editions, plunder visions.”

What Is Physical Interaction?

Physical Computing

Interaction by definition is the iterative process of two actors listening to each other, processing the information gathered, and responding. The key factors therefore, to good interaction, are reception of information — how accurately and how fast the instruction, or data, has been transferred, the quality of processing — how well the problem is solved: the degree to which it answers the question posed, the computational efficiency of the task at hand, and finally, the return.

Interaction is only possible when all three are key factors are present and the process of exchange is repeated to solve problems. It is a spectrum, not binary, like Chris Crawford explains in his Fridge Door Game example (which is a pretty dull interaction, but could be an interaction nonetheless). It shows that some interactions are superior to others in terms of the size of the problem they solve, the responsiveness, and the engagement of a reasonable mind.

Between humans, interactions mostly take place as conversation, where language is used for both listening and responding, while the brain processes the incoming and outgoing information. Between humans and machines however, additional key factors take major roles. These are somewhat extrapolations of the original pillars of interaction, and because humans and machines have different capabilities and limitations, both have to dumb themselves down in order for the interaction to take place.

Joseph Faber’s Euphonia – as non-interactive as they come. Although it was a mechanical human voice generator, and therefore lacked any processing at all, its use at play was visionary.

Out of the numerous things humans use to interact with one another, from the spoken word to body language and pheromones, only a few sensibilities are put to use when in contact with a computer, like the written word, or touch. Similarly, amongst all the machine’s abilities, from being able to see infra-red to sensing brain waves, only those that are able to respond to a human and in turn being understood by her is one of importance, unless a proper channel is produced for others.

Physical interaction between machines and humans need to carefully and creatively consider the many degrees of abilities found in either of them. In his brief rant, Bret Victor explains that any so-called visionary future that does not take into account the strongest tool available to both humans and machines is not visionary at all.

“A tool addresses human needs by amplifying human capabilities, that is, a tool converts what we can do into what we want to do. A great tool is designed to fit both sides.”

Technology is being invented at a rapid pace and of course, the newest machinery employs the most effective technological power to source it. But what designers of interaction need to visualise further is that technology needs to bend the knee to humans and human nature.

Victor goes on to describe the extent, intensity and versatility of the the utility provided by our hands to us. He presents the inspiring vision of inventing technology that is able to take cues from all these degrees in the human hand.

A physical interaction is good, therefore, when all the three pillars of interaction are supporting and complementing the way humans interact with the world around them. Be it our hands or eyes, our gestures, our tone and emotionality or simply our appearance, if it can be successfully inputted into a machine and meticulously processed by it, and if it can churn out exactly what solves the problem, that is good interaction.