HUW112 Digital Media

Class Blog

[huw112spring2015]

[huw112spring2015]

with the gif of machine living among us

[huw112spring2015]

Baile Liu

The name of this project is call “Robi’s World”.

[huw112spring2015]

Just To Be Safe Submission

Heres my New Tumblr http://thebeautifuldistortions.tumblr.com/

Daiquan Green Final Project

Submission

[huw112spring2015]

Hi :D

Tumblr Project

https://www.tumblr.com/blog/aiseyes

ill be late, but ill be there >:D

[huw112spring2015]

New Blog

http://robotnofeel.tumblr.com/

I don’t know if we are supposed to submit this but better safe than sorry

-Sam Mundle

[huw112spring2015]

Extra Credit: Career Assesment - ePortfolio

We have spent all semester in this class, and I am sure you have taken other classes as well, looking at and using a variety of digital media tools (software!) and discussing how these media shape ourselves and our culture. We have also investigated, briefly, some of the next steps in building our career and art practices. Now is an opportunity to reflect upon what you have learned over the semester, both in HUW 112 and your other classes to see how your thoughts and perspectives on Digital Media and your education have changed.

To that end, for up to 5 points of extra credit for the class, please record a simple video of yourself discussing your experiences over the past semester. Then, upload the video to e-portfolio under the HUW 112: Intro to Digital Media class, Integrative Learning/Oral section.

The video need only be 3-5 minutes and can be recorded with your phone. You can edit if you need to, just make sure the audio is okay!

To help facilitate your video discussion, please consider these questions:

Which programs/software applications did you like working with the most?

Why?

Which did you like the least?

Why?

What is a challenge associated with Digital Media that you had to overcome?

How did you do so?

Has working in the class on these programs changed your understanding of Digital Media, from either a technical or cultural perspective?

If so, how?

What are some of the possibilities of Digital Media that you weren’t aware of before this semester?

What is next for you in your studies at LaGuardia Community College?

What is next for you after LaGuardia Community College? Another school? A job? A Career?

What are your long-term goals in relation to your use of Digital Media?

What are the steps necessary to get there?

Upload your video by Monday, June 8th for credit.

For more information on how to upload to e-portfolio please visit:

http://www.eportfolio.lagcc.cuny.edu/support/doc/CP5_Depositing_assessment_digication_student.swf

or

http://www.eportfolio.lagcc.cuny.edu/support/doc/depositing_assessment_digication_student.pdf

[huw112spring2015]

Lopping Gif examples

Final Project GIF examples:

https://38.media.tumblr.com/345cc3d86d14e74f3296610509151db0/tumblr_noqkbhn4Zy1qkdrkzo1_540.gif

http://www.riglondon.com/wp-content/uploads/2011/05/megabytes-of-spring_2.gif

https://33.media.tumblr.com/f352e65939cf9f2dd84caf402e4e1512/tumblr_nmjb3h9pxQ1u3bn17o1_r1_500.gif

http://31.media.tumblr.com/4a0a59f6f3a65c6ebbdd4172d1ccf6b3/tumblr_nnhs8gj8ld1u9k72to1_1280.gif

[huw112spring2015]

Final Projects: Computer Vision

How do our machines/computers see the world?

We’ve spent all semester learning new programs and trying to get our machines to represent how we see the world. Let’s try from another perspective.

Put yourself in your computer’s shoes and think about what the world might look like to it.

To answer that question you will create:

a proposal for what you will make, emailed to me by Saturday, 9AM.

A title for your project

A new tumblr site (you can make it as part of your own!)

A logo for your new tumblr site featuring your project title

A short animated title for your project created in After Effects or Premiere, posted as a video on your new tumblr

Finally, one of the following:

A. A series of four animated gifs created in photoshop

or

B. a short video (:45 to 1:30 minutes)

If you are creating the gifs they must:

contain at least 3 separate images each

have smooth animation

loop seamlessly

be 500x300px (or 300x500px) in dimension

If you are creating the video it must:

have at least 5 different scenes/shots

be between 45 seconds and 1:30 long

have titles and credits

a soundtrack

Extra Credit:

Make the video up to +5 points

Includes your classmates up to +5 points

A related Processing interactive project up to +5 points  

customize the tumblr site up to +2 points

Link from your original tumblr up to +1 points

What is Due When:

Saturday, May 30th: 9AM Proposal, Emailed to me

Monday, June 1: Tumblr set-up and logo inserted in the header

Wednesday, June 3: Animated title video on Tumblr and significant progress

Monday, June 8 (by the time class starts): Finished project posted on tumblr

Attendance on Final Class on June 8th is Mandatory.

Failure to be in Class will result in a “D” grade or less on your final project!

You will be graded on:

If all of the above material is submitted on time and correctly

(does your video play, does the header fit, do the gifs loop, etc)

Does your project answer, in some form, how computers might see the world?

Problem Solving, or, have you some how stretched yourself to learn a new technique not covered in class for the project?

[huw112spring2015]

Homework for Wednesday, May 27th

1. Finish 2.5D Parallax Effect Project.

Export video and post to YOUR tumblr.

2. READ

James Bridle: Why Digital Art Matters:

http://www.theguardian.com/artanddesign/2014/jun/18/-sp-why-digital-art-matters

3. POST

Your response to tumblr:

What is the author’s point?

How does that relate to digital imaging?

What is your opinion?

 Since this is a difficult article you must also:

List a concept/art movement/historical period/technology that is unfamiliar to you and define it. Then explain why the author uses that concept/art movement, etc.

(Word definitions don’t count. There are 1,025,109.8 words in the English language, so you should be looking up new words constantly.)

4. REVIEW BLACKBOARD

TURN IN any late/incomplete assignments for partial credit.

LAST CHANCE. Due by Wednesday, May 27th.

Email me the link for each and every project you are turning in.

[huw112spring2015]

How to do 2.5d Parallax Effect

How to do the Parallax (2.5D) Effect using Photoshop and After Effects

Open photo in Photoshop

Unlock the layer. Name it “Portrait”

Create a new layer on top. Name it “Map.”

In your tool palette, make sure your colors are set to black and white, with black as the foreground (on top).

Using the paint bucket or fill tool, fill the new layer with black.

Change the opacity of the Map layer to 65-70%.

Click on the brush tool. Make white the foreground color. We will now be making a “map” so that black will be the furthest away from the biewer, and white the closest.

Make the brush opacity to 25%, hardness 100%.

With a large brush, paint the the entire general shape of the figure, all while in the Map layer. Don’t let go of the mouse.

With an increasingly smaller brush, paint with white more details that are closer to the front of the image (forehead, nose, chin, lips, etc.)

Keep doing this with increasing detail.

You can check progress by adjusting layer’s opacity.

Once you have a “topographic” map with white areas being closer to the front/top, swith the foreground color to black.

Reduce brush opacity to 8%.

Paint out the eyes and other details that may be set slightly further back (teeth, mouth corners, ear holes, etc.)

Change Map layer opacity to 100%

Add a gaussian blur filter to the map layer, around 10 pixels.

Save image as a psd file.

Open After Effects.

Press 0 to preview composition. Adjust as needed!

Import image to after effects. Click Composition - Retain Layer Sizes and Merge Layer Styles into Footage.

Click on the File composition. You will now see the two layers in the timeline: Map and Portrait. Drag Portrait on top of the map.

Go to Effects - Distort - Displacement Map.Drag this onto the Portrait layer.

Open the effects tab at upper left.

Change displacement layer to “Map.” Change “use Horizontal” and Use Vertical” Displacement to “Luminance.”

Click the stop watch to insert a keyframe for the Max Vertical and Max Horizontal Luminance controls at the beginning of our composition.

3 seconds into your composition, on the time line, insert two more key frames.

Adjust the levels of the second keyframe of Max Vertical and Max Horizantal Luminance to adjust your 2.5D effect.

Set work area in the timeline to 6 seconds by moving timeline cursor to 6 seconds and clicking “N”

[huw112spring2015]

HOMEWORK for WEDNESDAY MAY 20th

Do Something to Your Face in Processing

Save it.

Email me your PDE (Processing) File.

2. Review Blackboard

Find out any missing assignments you might have

[huw112spring2015]

FACE to Be Animated

void setup() {

 size(400, 400);

 background(126, 64, 0);

 fill(255,237,254);

 ellipse (200, 200, 325, 325);

}

void draw(){

  background(126, 64, 0);

 fill(255,237,254);

 ellipse (200, 200, 325, 325);

     fill(5,100,256);

   ellipse (120, 150, 30, 30);

 fill(5,100,256);

 ellipse (280, 150, 30, 30);

 noStroke();

 fill(250,204,245);

 triangle (200, 160, 240, 260, 160, 260);

   noFill();

 stroke (0);

 curve(280, 150, 100, 300, 300, 300, 280, 150);

}

[huw112spring2015]

HOMEWORK

Due On Monday(before class):

Your Joke Video

Saved as a .mp4 file (quicktime) and uploaded to YOUR tumblr page.

Video MUST have:

Intro Title (name of the video)

The joke being told

Credits (who was in the video)

[huw112spring2015]

Here is a nice video explaining motion design/motion graphics

[huw112spring2015]

MY GIF REDO, MORE CREATIVE

#hair#grow#gif#huw112#submission#redo#extracredit

[huw112spring2015]

THE JOKE

The Joke:

A Buddhist Monk is visiting Central Park. He wanders around a while, sees the lake, Strawberry Fields and the Zoo. Towards the end of the day, he finds himself quite hungry. He looks around and sees many people around a hotdog cart.

So the monk gets in line and after while, as it is a very long line, it is his turn to order.

The hotdog vender asks: “What can I get you sir?”

The monk thinks for moment, then says: “Make me one with everything!”

Things to consider:

Keep the camera phone relatively close to to speaker, as that will allow for better sound.

Do you want to have all the shots be the same?

Do you want multiple camera angles?

Should you all be in the same location or different ones?

Do you want it to be one person in the frame or a couple of people at once?

Are you telling the joke to the camera? Or to another person? Or to a crowd?