Author: Marcela Godoy

Posted on

Group Project – Speculative Interactive Artifacts

Before working on this project read the next text:
Beyond Radical Design?


The objective of this project is for your group to invent, design, and prototype an interactive artifact which could exist in the context explained below. The final submission for this project is a performance lasting 4 to 5 minutes showing the use of the interactive device in a creative way. Be creative and have fun!

Context

The year is 2125, and Shanghai stands as a beacon of technological advancements that have revolutionized the city, enhancing everyday people’s lives. However, this progress is not entirely positive, as with every advancement, challenges arise. Speculate on what interactive artifacts could exist in this future? How do people engage with them in their daily lives? What challenges and ethical dilemmas emerge from this hyper-advanced world, and how might they be addressed?

To fully grasp the scale of transformation that can occur in 100 years, consider the exponential nature of technological growth. Historically, people have tended to think of progress in a linear fashion, believing that the changes of the next 50 years will mirror those of the previous 50 – yet we often underestimate how much things can change. Looking back, those who were alive in 1975 (just 50 years ago) didn’t have the Internet, or GPS, or cellphones, or digital cameras – and they couldn’t possibly imagine the technologies that we live and breathe today! 

Get inspired by checking some of the speculative design examples below:

Step 1: Brainstorm and Plan 

For this project, you will be working in your groups assigned during the last recitation. As the Visionaries of tomorrow, your mission is to create a futuristic interactive artifact that exists in the context explained above.  

  • Is your invention unique and imaginative? Research existing technology and designs similar to your concept so that you can go beyond it!
  • Do you foresee any new problems caused by the existence of this invention?

Use the Project Planning Form to establish the project objective, the work division, timeline of completion, and how you will communicate with your team members.  *You only need to submit one form per team*

→ Reach out to your instructor to receive feedback on your ideas and make sure you pick something interesting / critical!!

Step 2: Make 

You need to be able to demonstrate the detailed interaction you envision during your performance. Ignore the technical feasibility and concentrate on how you’d operate these artifacts if they did exist. Consider what users need to see, hear, and touch while using the artifact.

Construct a prototype of the controls using materials such as cardboard, plastic bottles, chopsticks, paper, or any available items. No electronics or advanced technology (sound, projection, lights, etc.) are allowed. Let your imagination run rampant. There is no limit on how small or big you can make the interactive artifact.

Step 3: Perform

Using the interactive artifact, create a 4 to 5 minute performance (study the link if you’re unclear on the concept of performance). Each member of the group must actively participate during this performance. Show, don’t tell! Convey the purpose and interaction of the artifact without explaining it. (Do not create an infomercial).

The performance should incorporate elements of drama, storytelling, and humor to captivate the audience. However, technology is not infallible. Your performance must also explore the limitations or ethical implications of your artifact, showcasing a scenario where something goes wrong. Demonstrate how these shortcomings could impact people. This twist will illustrate the complex nature of technology in society.

*You can use other custom props in addition to the interactive artifact you have made.

Step 4: Reflections

Individually, write a documentation blog post that reflects on the whole process of the group research project. (See the Documentation Guideline on how to create your blog with google sites)

Provide the title of your performance and give your opinion on the successes and the failures of the artifact. How do the reading influenced your idea? Did you clearly showcase the detailed interaction of the artifact? Did you illustrate the complex nature of technology in a critical way? Are there any changes you would make? (one paragraph)

Next, provide a critical analysis and assessment of a performance from another group. Start with the name of that project. How well/not well does it meet the criteria of the assignment? How creatively does the performance help you understand the artifact? Do you have any suggestions for improvements? (one paragraph)

In your blog entry, you should include your performance script. You can include pictures of your props, final prototype and costumes etc, collected during the making of this assignment with your team. If you have a video of the rehearsal or a recording of the actual performance, you may include it as well. Describe exactly what contributions you personally made for this assignment as part of your team. Explain the teamwork dynamics, the different roles, the task allocations, and how the communication within the team was. (one paragraph)

Important Note: I don’t mind about typos, so please write it without overusing AI. I care a lot more about how well you understand what you did rather than seeing typos. Additionally, I want to read something that sounds like you and not something generic and boring.

Posted on

Recitation 6: Animating an Interactive Poster

Working individually, you will integrate the coding elements from this week’s classes to create an animated poster for the IMA show in Processing.  Requirements:

    • The format of the poster should be the web format: 1024px x 768px.
    • Your poster should contain graphics that change with the time.
    • At least one shape should be of your own design, displayed by a function, and it need to be composed of at least three basic shapes.
    • You should create with Processing all the graphic elements in your poster, this means that you are not allowed to use images or photos. Remember to take a video of your interactive poster demonstrating how it works, and upload it along with your code to the documentation blog. 

Information you might need for your poster:

    • Event: IMA Fall 22 End-Of-Semester Show
    • Location: 8th floor
    • Day: Friday December 16
    • Time: 6pm to 8pm
GRAPHIC DESIGN PINTEREST REFERENCES:

 https://www.pinterest.com/ameliechucky/graphic-design-poster/

ANIMATION REFERENCES:

Here are some animations you can get inspired by. 

anim_1 anim_2 anim_4
asdfd fasdff anim_8
anim_9 anim_10
PROCESSING REFERENCE LINKS USEFUL for your animation:
Loops:

 Variables:

 Transform functions:

 Other Functions:

Homework

Task #1: Add a Fixed Pattern

    • Repeat the design you made in a grid so that it covers the entire screen. You can re-use the function you created in the recitation. The entire window of your sketch should be a repetition of your complex shape. Tip: You can watch this video explaining the way that nested loops work.
    • Make sure you add some variations by adding parameters to your function. Check the patterns below for inspiration:

Task #2: Add a Random Pattern

    • Start a new sketch and copy the function you created in Part 1. Display your design a hundred times in random positions on the screen.
    • Use parameters to give them variation such as random sizes, random colors, random rotation, etc.

Task #3: Make it interactive

You should modify your poster in order to include some level of interaction. You can choose to use the keyboard or the mouse, either by reading the variables or by modifying the graphics when an event happens (e.g. click with the mouse, the user presses the spacebar).

You can, for example, create your own pattern by using the mouse. Draw your design every time you press the mouse in the position where you clicked, and use a press of the spacebar on your keyboard to delete everything on the screen.

INTERACTIVITY REFERENCES:

Here are some animated materials that might serve you as an inspiration for your homework:

anim_3anim_

PROCESSING REFERENCE LINKS USEFUL for your Interaction:
Keyboard interaction:

 Mouse interaction:

 Environmental variables:

Documentation

 

Upload the screen recording (video) of your interactive animation along with your code (copy-as-HTML) to the documentation blog. Include both the recitation and homework in your post.

To record your screen on Mac press   Shift + Command + 5   
To record your screen on Windows press  Windows key + G 

/**
 To share your code appropriately in your blog post:
  - Select all your code -> Copy as HTML
  - In your blog post go to "Text" editor, top-right of the window.
  - Copy and switch back to "Visual"
 */

Another option is to put your code on Github Gist and paste the link in your post. If you don’t have one yet, a free Github account is totally worth getting! It’s a sometimes complicated but very useful developer tool, with a great open source community!

Write some comments about what you learned during this exercise, for example, list the most interesting functions you used or what you struggled with. Be thorough so that you can refer to these notes in the future. 

You can work on the assignment on your own, or join one of the Study Sessions hosted by our amazing LAs to learn how to make this! 

rainbow study session

Rainbow Group Study Sessions

Dates:

Monday Nov 7  | 5:30-6:30 pm

Wednesday Nov 9th  | 5-6 pm

Location:

826 Studio

Posted on

Week 8

Class 15 – Loops, Functions and Interactions
Class 16 – Project Production

Additional Resources

 

Posted on

Week 5

Class 8 – Controlling Motors
Class 9 – Variables & Conditionals
Class 10 – Designing Interaction & User Testing

Additional Resources

Reading:

Videos:

Posted on

Week 3

Class 5 – Iterations, Conditionals and Variables
Class 6 – Sensors

Additional Resources

Videos:

Posted on

Week 2

Class 3 – Intro to Microcontrollers
Class 4 – Digital & Analog Inputs & Outputs

Additional Resources

For the next four, use your NYU id and password:

Posted on

Recitation: User Testing

Today’s recitation is about conducting user tests of your final projects. Please read the directions below for information on how to best conduct/participate in user testing.

If you are conducting a user test:

Present your project to the participants. Observe, record, and take notes of what interactions happen during the test. When you are conducting the test, do not try to sell your product. Limit your communication with the tester as much as possible and allow your participant to try and figure your project out. Do not explain how it works! If they have questions, do not simply provide an answer but try to guide them towards finding the solution on their own.

After they have tested your project, ask them about their experience. You may ask prepared questions but also ask about any occurrences you observed during the test. Take note of how their answers address your project’s interface, accessibility, predictability, learnability, etc. Take notes of their feedback and ideas about how your project can be improved.

If you are participating in the user test:

Your job is critical for providing the presenters with useful information about how their project can be improved. As you test their project, make sure to verbalize what you are doing and why you are doing it. If you stumble across something that is unclear, communicate this to the presenter.

When you have concluded the testing, please honestly answer any questions that the presenters ask and feel free to provide feedback about your user experience.

Documentation:

You should have the user testing properly documented and included in your Midterm report. 

Posted on

Using millis instead of delay

The function delay pauses the program for the amount of time (in milliseconds) specified as parameter.  This can make your project a bit confusing sometimes, especially when you use it in Processing. As an advice, never use delay function in Processing.

Below a sample code you can use in Arduino:

int period = 5000;
long time_now = 0;
 
void setup() {
    Serial.begin(9600);
}
 
void loop() {
    if(millis() >= time_now + period){
        time_now += period;
        Serial.println("Hello");
    }
   
    //Run other code
}

If you are using Processing the code will be this:

int period = 5000;
long time_now = 0;
 
void setup() {
}
 
void draw() {
    if(millis() >= time_now + period){
        time_now += period;
        println("Hello");
    }
   
    //Run other code
}

this tutorial is based on this website:

Arduino Tutorial: Using millis() Instead of delay()

 

Posted on

Week 1

Introduction, Electricity, and Electronics

Class 1 – Introduction & Interaction
Class 2 – Electricity & Electronics

Mandatory Readings

Research Readings:

Additional Resources