Computation08

How do I put an applet in my website?

Drew or Anyone in class- I went to the HTML page where processing generates it and copied and paste the code into my website. I also copied the applet folder containing the .pde, .html, .jar and .java file. But when I preview the website, I get an 'x' in the upper left corner. Any idea what I am doing wrong?

      

PicLens Firefox Extension

https://addons.mozilla.org/en-US/firefox/addon/5579

Firefox extension for picture searching and viewing

The Power of Music

This link is to an article about a program called Hyperscore, developed by Tod Machover, professor of music and media and director of the Opera of the Future group at the MIT Media Lab. The program allows anyone to compose music no matter what their musical skills are.  The article talks about the importance music has in our lives and how making music "can make us smarter". It fits well with chapter five in Flow....

Mediated Play Space ~ Design Challenge

Public Mediated Play Space

Design and "Stage" a mediated play experience in a public space.  This project explores how to use an interactive projection installations as an interface for play, social connectivity, experience design, and/or space augmentation.

Stage 1- Problem definition, Ethnographic Research, Analysis (1 week)
Working in teams you will monitor and record spaces you've selected for a minimum of 4 hours.  Selected spaces must be ones that can be crossed in no more than 5 seconds by someone moving at a walking pace.  As an “ethnographic researcher” you will be paying attention to modes of interaction within  the space, as well as physical, social, personal, spatial, and cultural behaviors.  Document and share the results of your documentation; consider multiple strategies  for recording the action/interaction between people/groups in the space. Define the parameters of the design problem, goal, or experiment you are addressing.

Feb 29
Assignment:
Experiment with Computer Vision, make two simple experiments incorporating one of the computer vision libraries.  Use controlled indoor environments. 

Read "Social Life of Urban Space"
Audio: Role of Anthropologist

March 4 Introduction
Discuss Social Life of Urban Spaces

Assignment:
Break into groups of 4. Choose 3/4 different a spaces. Make a 1-2 hour observation of each space. What kinds of patterns arise from your observations? What is the definition of a stranger in this space? How do strangers communicate?  What are the mode of interaction within the space.  Keep in mind to pick a space that would be conducive to a projection and camera installation, but do not limit yourself by this either.  Make a photographic or video slide show of your findings.

Read: What do Prototypes Prototype
Download Prototypes

March 7
Present Raw Findings of Studies.

Assignment:
In groups,  finalize a location. Conceptualize prototypes for that space.  Make prototypes of all 4 quadratures. Discuss the Prototyping process, including techniques and others' work.  Work in groups to conceptualize your prototypes.  Present 4-9 prototypes concepts with just enough fidelity to get the idea across.

Read:  Theater of the Oppressed --> New Media Reader
Audio: Experimenter Chap2.m4a

Stage 2- Proof of Concept
What are the successful/unsuccessful parts of the protoytpes?  What can be concluded from your successes and calculations? Were your assumptions correct?

March 11 
Present your 5-9 Prototypes "Proposals"

Assignment:
Pick a 2-3 Prototypes and do a 4-6 hour installation of it in a controlled space. Document your installationn. Discuss project's next steps, how to formally present your research. Experiment with creative way to display your research and documentation styles. Try time-lapse video. 

You'll need a laptop, Projector, camera, and mobile power supply. 

Stage 3-Prototyping, Testing, Iterating, Documenting
Create a play-space that augments some aspects of interaction you’ve observed (person-to- person, person-to-group, or group to group) and document it. Push to maximize or minimize the effect of the interaction that your observational or other research revealed. This augmentation, or invitation to participate must be self-contained  in your mediation, and cannot rely on communication from you. Instead, explore audio, gestural, and visual means of expression. Observe the context and scenarios under which you prototypes work. What are the intentions and assumptions that you and your users are making in and about your play-space?  Document (video-tape, photography, observation, notation, sketching).   How did your instruction effect volume of traffic? What are the narratives that emerge out of the context?  Who are the characters? What roles do people play?  Does a back story develop? What are the "aesthetics of interaction"? Record the reaction to your play space. Your experiments should last over 12 hours total over the week. 

March 14
Create 5-9 iterations of your prototypes, create a 4-6 hour installation of it in a controlled space. Document your installation.  You'll need a laptop, Projector, camera, and mobile power supply. Present your finds.

March18-22
Make 9-12 iterations of 1 or 2 of your integrated prototypes.
Post a photo of each.  Write 3-6 sentences of what you learned from them. What were the good and bad surprises. How did they effect your line of thinking in regards to role, look and feel, and implementation.

Read.
Theatre of the Oppressed

March 25-28 Install Prototype
Install prototypes. Make a minimum of 3 iterative re-designs.  Document the "experience interface" you created, how/if it was used or experienced. Use the project objectives to collect insights.  Discuss progress in class. Show rough data collection.
Read: Understanding Comics, Chapter 2 + 5.

Postmortem
Produce a postmortem on your final design and make a formal presentation to your studio. This postmortem should be written and posted to your site and should include an analysis and conclusions of the following:
1. Strengths (what did the solution do very well?)
2. Weaknesses  (what could be done to improve the design?)
3. The design process (What were some of the key moments/decisions during the process? What  were trouble spots? How did the collaboration play out? Who took on what roles and how were decisions made or conflicts resolved?
4. Include your analysis of at least 2 "prior art" that are related to your project. Critique these projects in relation to your own: how are they similar or different? What can be learned from these projects if you were to evolve your design further? Include visual examples of the projects described, as well as information on who produced them, when, where, and why.
5. What can you conclude both from your experiments and the ones that you studied? What are open questions remaining to be answered?
6. Can your project be applied to other public spaces? Does it travel well?
7. Would your project make a good exhibition piece? Where would it be seen? If appropriate, submit your project to venues where it can be appreciated by other groups of people.

April 1
Formal Presentations with Guest Critics

 

Feb 29
Assignment:
Experiment with Computer Vision, make two simple experiments incorporating one of the computer vision libraries.  Use controlled indoor environments. 

Read "Social Life of Urban Space"
Audio: Role of Anthropologist

March 4 Introduction
Discuss Social Life of Urban Spaces

Assignment:
Break into groups of 4. Choose 3/4 different a spaces. Make a 1-2 hour observation of each space. What kinds of patterns arise from your observations? What is the definition of a stranger in this space? How do strangers communicate?  What are the mode of interaction within the space.  Keep in mind to pick a space that would be conducive to a projection and camera installation, but do not limit yourself by this either.  Make a photographic or video slide show of your findings.

Read: What do Prototypes Prototype
Download Prototypes

March 7
Present Raw Findings of Studies.

Assignment:
In groups,  finalize a location. Conceptualize prototypes for that space.  Make prototypes of all 4 quadratures. Discuss the Prototyping process, including techniques and others' work.  Work in groups to conceptualize your prototypes.  Present 4-9 prototypes concepts with just enough fidelity to get the idea across.

Read:  Theater of the Oppressed --> New Media Reader
Audio: Experimenter Chap2.m4a

Stage 2- Proof of Concept
What are the successful/unsuccessful parts of the protoytpes?  What can be concluded from your successes and calculations? Were your assumptions correct?

March 11 
Present your 5-9 Prototypes "Proposals"

Assignment:
Pick a 2-3 Prototypes and do a 4-6 hour installation of it in a controlled space. Document your installationn. Discuss project's next steps, how to formally present your research. Experiment with creative way to display your research and documentation styles. Try time-lapse video. 

You'll need a laptop, Projector, camera, and mobile power supply. 

Stage 3-Prototyping, Testing, Iterating, Documenting
Create a play-space that augments some aspects of interaction you’ve observed (person-to- person, person-to-group, or group to group) and document it. Push to maximize or minimize the effect of the interaction that your observational or other research revealed. This augmentation, or invitation to participate must be self-contained  in your mediation, and cannot rely on communication from you. Instead, explore audio, gestural, and visual means of expression. Observe the context and scenarios under which you prototypes work. What are the intentions and assumptions that you and your users are making in and about your play-space?  Document (video-tape, photography, observation, notation, sketching).   How did your instruction effect volume of traffic? What are the narratives that emerge out of the context?  Who are the characters? What roles do people play?  Does a back story develop? What are the "aesthetics of interaction"? Record the reaction to your play space. Your experiments should last over 12 hours total over the week. 

March 14
Create 5-9 iterations of your prototypes, create a 4-6 hour installation of it in a controlled space. Document your installation.  You'll need a laptop, Projector, camera, and mobile power supply. Present your finds.

March18-22
Make 9-12 iterations of 1 or 2 of your integrated prototypes.
Post a photo of each.  Write 3-6 sentences of what you learned from them. What were the good and bad surprises. How did they effect your line of thinking in regards to role, look and feel, and implementation.

Read.
Theatre of the Oppressed

March 25-28 Install Prototype
Install prototypes. Make a minimum of 3 iterative re-designs.  Document the "experience interface" you created, how/if it was used or experienced. Use the project objectives to collect insights.  Discuss progress in class. Show rough data collection.
Read: Understanding Comics, Chapter 2 + 5.

Postmortem
Produce a postmortem on your final design and make a formal presentation to your studio. This postmortem should be written and posted to your site and should include an analysis and conclusions of the following:
1. Strengths (what did the solution do very well?)
2. Weaknesses  (what could be done to improve the design?)
3. The design process (What were some of the key moments/decisions during the process? What  were trouble spots? How did the collaboration play out? Who took on what roles and how were decisions made or conflicts resolved?
4. Include your analysis of at least 2 "prior art" that are related to your project. Critique these projects in relation to your own: how are they similar or different? What can be learned from these projects if you were to evolve your design further? Include visual examples of the projects described, as well as information on who produced them, when, where, and why.
5. What can you conclude both from your experiments and the ones that you studied? What are open questions remaining to be answered?
6. Can your project be applied to other public spaces? Does it travel well?
7. Would your project make a good exhibition piece? Where would it be seen? If appropriate, submit your project to venues where it can be appreciated by other groups of people.

April 1
Formal Presentations with Guest Critics

Image 2, 3, 4, 5

Image 2.1 html

Image 2.2 html

Image 2.3 html

Image 3.1 html

Image 3.2 html

Image 3.3 html

Press number keys to draw, "b" to blast

Image 4.1 html

Press 1-7 to view the different filter() treatments

Image 4.2 html

Image 4.3 html

Image 5.1 html | jar

Image 5.2 html | jar

Image 5.3 html

Image 2, 3, 4, 5

Image 2, Ex. 1

pimptress.html
Prcss_Pmptrss.jar
Prcss_Pmptrss.pde

Image 2, Ex. 2

image2_ex2.html
Prcss_Pmptrss2.jar
Prcss_Pmptrss2.pde

Image 2, Ex. 3

greek_salad.html
image2_ex3.jar
image2_ex3.pde

Image 3, Ex. 1

image3_ex1.html
image3_ex1.jar
image3_ex1.pde

Image 3, Ex. 2

image3_ex2.html
image3_ex2.jar
image3_ex2.pde

 

Image 3, Ex. 3

image3_ex3.html
image3_ex3.jar
image3_ex3.pde

Image 4, Ex. 1

badpussies.html

image4_ex1.jar

image4_ex1.pde

Image 4, Ex. 2

rooftop_invisiblechildren.html

image4_ex2.jar

image4_ex2.pde

Image 4, Ex. 3

sams.html

image4_ex3.jar

image4_ex3.pde

Image 5, Ex. 1

sven.html
image5_ex1.jar
image5_ex1.pde

Image 5, Ex. 2
sven2.html
image5_ex2.jar
image5_ex2.pde  

Image 5, Ex. 3
co.html
image5_ex3.jar
image5_ex3.pde    

Image 2, Image 3, Image 4, Image 5 Exercises

Image2_1

Image2_2

Image2_3

  Image3_1

Image3_2

Image3_3

Image4_1

Image4_2

Image4_3

Image5_1

Image5_2

 
Image5_3

Homework: 02.29

Image 2: Animation

Excercise 1 - 3 // 1. Load a sequence of related images into an array and use them to create a linear animation / 2. Modify the program for exercise 1 to present each frame of animation at a different rate and in a different sequence / 3. Animate an image by changing more than one of its attributes (e.g., size, position, tint).

Image 3: Pixels

Excercise 1 - 3 // 1. Load an image and use get() to create a collage by overlaying different sections of the same image / 2. Load an image and use mouseX and mouseY to read the value of the pixel beneath the cursor. Use this value to change some aspect of the image / 3. Draw a shape in the display window. Copy a section of the window to another by using get() and set() within a for structure.

Image 4: Filter, Blend, Copy, Mask

Excercise 1 - 3 // 1. Load an image and alter it with filter() / 2. Load three images and combine them with blend() / 3. Load two images and use copy() with mouseX and mouseY to combine them in a way that reveals the relationship between the images.

Image 5: Image Processing

Excercise 1 - 3 // Write your own image filter by modifying the value of pixels[].

Excercise 2 - 3 // Explore different kernels to convolve an image and write a program to display your most interesting discovery.

Excercise 3 - 3 // Load an image and use its data to generate an animation that reflects the original image.

Input2, Shape 2, Shape 3

Input 2_ex1 (Download s_input2a.html ); (Download s_input2a.pde ); (Download s_input2a.jar )

Input2_ex2 (Download s_input2b.html ); (Download s_input2b.pde ); (Download s_input2b.jar )

Input2_ex3 (Download s_input2c.html); (Download s_input2c.pde); (Download s_input2c.jar)

Shape2_ex1 (Download s_shape2a.html ); (Download s_shape2a.pde ); (Download s_shape2a.jar )

Shape2_ex2 (Download s_shape2b2.html ); (Download s_shape2b2.pde ); (Download s_shape2b2.jar )

Shape2_ex3 (Download s_shape2c.html ); (Download s_shape2c.pde ); (Download s_shape2c.jar )

Shape3_ex1 (Download s_shape3a.html ); (Download s_shape3a.pde ); (Download s_shape3a.jar );

Shape3_ex2 (Download s_shape3b.html ); (Download s_shape3b.pde ); (Download s_shape3b.jar );

 

Shape3_ex3 (Download s_shape3c.html ); (Download s_shape3c.pde ); (Download s_shape3c.jar )

Feb 26: Data2, Data3, Data4

Data2:

Data3:

Data4:

data4_01:

html / jar / pde