Week 1

Introduction to Kinetic Interfaces

Class Overview

Lecture 1

  • Class introductions
  • Overview of materials to be covered and project expectations
  • Introduction to Kinetic Interfaces
  • Discussion about new media technologies, interaction design and kinetic user interfaces

Lecture 2

  • Review of programming basics in Processing
  • Iterations (for-loop, while)
  • Transformation functions (push/popMatrix)

Readings and References

Assignment

  • Presentation:
    Watch ‘Art that looks back at you’ by Golan Levin, read ‘Computer Vision for Artists and Designers’ by Golan Levin and look at ‘ZeroUI’ that Andy Goodman talks about, then think about how the concept and technology illustrated can be used practically in our daily lives or be applied artistically.Research online about a work related to your thoughts, and prepare a presentation about what you found interesting about it. (It can be an innovative tool, interesting interface, funny/enjoyable game, interactive installation or beautiful performance.) Also think about what technology went into making of it. (It doesn’t have to be correct.) You will each present very casually for about 5 minutes.Post it on the IMA Documentation blog before the class. Keep the title format “Kinetic Interfaces: title (your name)“.

 


Notes – Class 1

 

Introduction

  • Your name (and preferred name if you have one)
  • Year + Major
  • Any experience with programming or motion tracking methods?
  • Why you registered for this course and what you’re excited to learn!

 

Contact Info

J.H. Moon, jh.moon@nyu.edu

Office: 939

Office Hours: Friday, 11am-12, 1-3pm (by appointment)

 

Syllabus Overview

Description

User Interface

Graphic User Interface

Tangible User interface

Touchless User interface (TUI)

Kinetic User Interfaces(KUI)

Gesture Recognition

ZeroUI

 

Documentation & Blog post guidelines

Screen capture or Video demo

In the title, label as follows:

  • Kinetic Interfaces – Project Title (Your name)

Example:

  • Kinetic Interfaces – Response to ZeroUI (Tom)

Then, select the category “Kinetic Interface”.

 

 

Weekly Schedule Overview

 

Programming Basics

  • P01_11_push_popMatrix
  • P01_12_transformation

Object Oriented Programming

  • Slides
  • p05_16_ball_class_arrayList_mousePressed

Simple Drawing

  • w03_06_pmouse_hsb

Leap Motion

  • Drawing with Particles: w03_11_leapMotion_trail_advanced_hsb
  • Gestures

Buttons

  • w01_07_buttons_buttonObject

Abstract buttons

  • w02_04_sound_triggeredReleased
  • w02_05_sound_comparison

Computer Vision

  • Slides

Pixel Manipulation

  • w04_10_webcam_pixelManipulation
  • w04_11_webcam_prevPixels
  • w04_12_webcam_pixelGrid
  • w04_13_webcam_colorSample

Color Tracking

  • w05_03_colorTracking_colorPicker_centerPosition

Face Tracking

  • OpenCV
    • w07_03_FaceDetect_smaller_faster
    • w07_07_FaceDetect_follow
  • FaceOSC
    • w07_06_FaceOSC_sound

Projection Mapping

  • Keystone
    • w06_02_keystone_twoSurfaces
  • Syphon Server
    • w06_05_syphon_multipleServers

Kinect

  • Screen captures

Kinect to the Internet

  • Coming soon!

 

 

References & Inspirations

 

Students’ Projects

Bruce – Thief Spotlight

Maggie – Eye Tracking

Maggie – Pillow Projection Mapping

Nick’s final

 

My Projects

 

Color tracking

Graffiti Research Lab » L.A.S.E.R. Tag

the Abovemarine

 

Projection Mapping & Games

Kinetic Safari

Proof of principle of the project “Skin Games”

 

Interactive Audio/Video Installations

Dance to Your Beat

Firewall by Mike Allision & Aaron Sherwood

Abstract Wall by sodazot

 

Face Detection

Women’s Aid

 

Performance

Pathfinder by WALTZ BINAIRE

MOMENTUM by chnellebuntebilder

Forms (excerpt) by Memo Akten

unnamed soundsculpture by onformative

XYZT Project

 


Notes – Class 2

 

Processing Basics

setup()
draw()

size()
background()

fill()
noFill()

stroke()
strokeWeight()

rect()
rectMode()  // try to draw at the center

ellipse()
ellipseMode()

random()

 

Environment Variables
width, height
frameCount
mouseX, mouseY
pmouseX, pmouseY

 

Variables
int x, y;
float dia; (random)

 

mousePressed vs mousePressed() – a drawing tool
trail effect – faked fade out

 

vertexShape
beginShape();
endShape(CLOSE);

 

ForLoop with rect()
two ways
grid

 

Transformation Functions
rotate();
translate();
pushMatrix();
popMatrix();

 

map()
constrain()

 

pushStyle();
popStyle();

 

Button with rect()

if statement
operator AND, OR
if else

 

Button with ellipse()
dist()

 

switch and case