Welcome to DMS 110: Programming for Digital Art

Welcome to DMS 110, Programming for Digital Art! This webpage will be your guide to the class. Check here for assignments and resources to help you.

Generic placeholder image

Critique

Project statement Written Response #6

Project statements are part of a professional creative practice.

The purpose of this statement is to present the most salient aspects of your final project to the world. Or more specifically, the people who may be reviewing your work for an exhibition, graduate school, job, or other oppertunity.

  • What is important in the project? (concept, visual elements, etc.)
  • Why should anyone care about your project?
  • What does your project offer to the world that wasn't there before?
  • Does your project offer a unique take on its subject matter?

Your project statement should be handed in along with the final project.

Due Tues 12/22 Noon.


Final Project (The grand finale)

Congratulations! We've made it to the end of the class together.

The parameters for your final project are open for you to define (but are subject to approval).

Requirements:

  • Must be based in JavaScript.
  • Your final writing assignment will be a statement about this project.
  • The final is the same amount of points as 4 assignments, and you have 4 times the amount of time, this should give you a sense of the amount of work that is expected.
  • The project should be a finished work of digital art and be hosted online. (UB offers free hosting for students).
  • The files for the project should also be emailed or otherwise turned in to the instructor by the due date.

Deadlines:

  • Proposal due November 30th
  • The last day to expect conceptual or programming help from the instructor is the last day of classes: December 11th.
  • The last day to submit your project is the last day of the semester: December 22nd

Due Tues 12/22 Noon.

Generic placeholder image

Critique

Critique Final project preperation

cri·tique

/kriˈtēk/

noun: critique; plural noun: critiques

1. a detailed analysis and assessment of something, especially a literary, philosophical, or political theory.

Before Monday: Email Derek with a project you have completed in DMS 110 that you would like to have critiqued.

  • Choose a project that has an aspect you would like your final project to also have.
  • Each student has 5 min to present their work, therefore come to class on time Monday.
  • Be generous and helpful to your classmates -- you are each other's peer group and therefore have the most helpful feedback.
  • (This is part of your final project grade)

Due Mon 11/23 before class.


Issue statement Written Response #5

For this assignment you are to write a 500 word (minimum) statement about an issue that you care about.

Drawing attention to something you care about is not always an easy (or painless) task to accomplish. In June of 1963 Thích Quảng Đức self immolated in protest to the persecuton of Buddhists by the South Vietnamese government. When president Kennedy saw an image of the act, he said, "No news picture in history has generated so much emotion around the world as that one."

WHAT TO INCLUDE IN YOUR STATEMENT:

  • In the first sentence state clearly the issue that you care about.
  • Next, state what compelled you care about this issue.
  • Finally, state why other people should also care about the issue.

NOTES:

  • Your issue does not need to be grand or nobel. It could be purely aesthetic (I like pretty colors and so should you). It is how you convince your reader that is important.
  • If you cannot think of good reasons for people who don't know you personally to care about your issue, it is probably too narrow. Try making it more broad. For example, if my issue is that I feel like I work too much, someone who doesn't know me is unlikely to care. In this case, I could expand my issue to be the contemporary alienation of workers, the decline of leisure time, or the loss of social intimacy because of increased time spent working.

Due Monday 11/30 before class.

Thích Quảng Đức

Muybridge

News Game Programming Assignment #9

Create a game mechanice for a News Game about either a recent event in the news, or an issue that you care about.

Your game mechanic should use procedural rhetoric to communicate an idea or position about your chosen topic.

Project requirements

  • Your game must use HTML5 Canvas.
  • Additional requirements will be sent to each of you individually and will vary according to programming ability.
  • See the resources page for examples of news games.

Due Mon 11/23 before class.


Procedural Rhetoric Written Response #4

Watch this talk Ian Bogost gave at UCSC and write a short (around 500 word) response to his lecture.

Ian Bogost is a professor and Media Studies Chair at Georgia Tech, and a founding partner at Persuasive Games. His research and writing consider video games as an expressive medium, and his creative practice focuses on games about social and political issues, including airport security, consumer debt, disaffected workers, the petroleum industry, suburban errands, pandemic flu and tort reform.

Questions to address in your response:

  • What is rhetoric? How is 'procedural rhetoric' different from older forms of rhetoric?
  • Find a stiuation that you think procedural rhetoric could be useful for addressing. Describe the situation and the interaction (game mechanic) you would use to address it. Explain how the action performed is acting as a rhetorical device and what specifically the user of the program is learning.

Interested in Procedural Rhetoric? Read more about it here:

Due Monday 11/9 before class.

Bogost

Muybridge

Sprite animation Programming Assignment #8

Create and animate a character or object using HTML5 canvas and a sprite sheet.

Your animation could be a character you intend to later use in a browser game, a time-laps series of photographs you take yourself, or it could be a collage with moving parts.

Project requirements

  • The animated object MUST be your own creation. No ripping, borrowing, or lifting.

Sprite animation resources:

Due Wed 11/04 before class.


JavaScript Arrays and Objects Programming Assignment #7

Write a program that utilizes JavaScript arrays or objects in a creative manner.

The function of your program is open to creative interpretation (meaning, your program can do anything you like as long as it meets the requirements for using arrays). An interactive program could add or remove items from an array with a click or key press, or an array could have items added or removed using a timer function. Some examples of programs that use arrays are matching games, or games where items are collected.

Project requirements

  • Your program must uses an array or object to create visual elements on the webpage.
  • Your program must have an array that items are appended (added) to and an array that items are removed from (either with pop or splice). This can be the same array, or seperate arrays.
  • Your program should engage the viewer in some way, either through interaction, movement, or aesthetics.

Array resources:

Due Monday 11/2 before class.

Legos

Legos

VIDEO! Programming Assignment #6

Create a work of interactive fiction using the HTML5 video tag or HTML5 canvas.

Your program must tell a story that gives the viewer choices to make as they progress through it. There should be multiple outcomes for the player / viewer depending on the choices they make.

Project requirements

  • For this assignment, you are permitted to use Chrome or Safari if your source video is in mp4 or .mov format.
  • You should be able to explain what the aestheic choices of your story are (visual, poetic, experiential?)

Array resources:

Due Wed 10/28 before class.


Interaction! Programming Assignment #5

Create an 'aesthetic experience' through user interaction.

The aesthetic experience is open to interpretation. Aesthetic could be interpreted to be visual, poetic, or provide a unique experience. You just need to be able to explain and defend the choices you make. (Experimentation in this area is encouraged!)

The content of this assignment is wide open, but your project must have the following features:

  • Your project must contain at least one interaction with the mouse and one interaction with the keyboard. (The keyboard interaction cannot use a text input box).
  • Both interactions must take place on an HTML5 canvas object. (Although, off canvas interactions are permitted, and encouraged for aesthetic purposes, they just do not count toward the technical requirements of the project).

Check the Resources Page for project resources and example code.

Due Monday 10/19 before class.

(Click to reset)


Casey Reas

Formal Elements Critical Thinking Written response 3

Write a short (around 500 word) statement about how you would like to use formal elements in your digital work.

The formal elements can stand primairly on their own, they can be used to visualize data, they could react to the viewer's movements, or employed in any other way you can concieve. The following points should be addressed in your essay:

  • Describe the formal elements you are going to use. (color, shape, motion...)
  • How do these formal elements help create an aesthetic experience? (Do they move, change with data feeds, respond to the viewer?)
  • Think of how formal elements are used in the work of Casey Reas, Jonathan Harris and Sep Kamvar, or any other digital artworks we have mentioned. Give at least one example of an artwork that is using formal elements in a similar way to the work you are proposing. (i.e.: place your idea within the larger history of digital art).
  • What is the take away you want from your viewer / what kind of experience are you creating for them? (Is it purely aesthetic, or is there a deeper message?)
  • Where is the ideal location and form for your hypothetical artwork? (Is it a large installation in a museum, a web-based artwork, or public sculpture?)

Due Wednesday 10/14 before class.


Canvas Animation! Programming assignment 4

Make an animation in HTML5 Canvas using shapes and a timer.

Your animation must have the following features:

  • A shape (or group of shapes) must be added to the canvas or change in some way (rotation, position, color, etc.).
  • There must be a condition where something in the animation changes.
  • Consider the visual aesthetics or mathematical process behind what is happening. Be prepared to explain why you made these choices.
  • Note: this is a timer assignment-- do not use requestAnimationFrame( ).

Resources:

Due before class starts on 10/12.


Rock Paper Scissors

Robot Drawing Programming assignment 3

Make a drawing of a robot using HTML5 Canvas and custom functions.

Your robot can be a replica of a famous robot (like R2D2), or one of your own creation, but it must have the following features:

  • Must use HTML5 canvas object.
  • The shapes must be placed into functions that are called.
  • At least 1 function must call another function. (For example: a function called 'head' could call several circle functions to build the head and eyes).
  • Your drawing must use at least 1 of each of the following: circle, line, square, and a custom shape.

Resources to help:

Due Saturday morning 10/3.


Rock Paper Scissors Programming assignment 2

Create a "Rock Paper Scissors" style game in JavaScript using if/else conditional statements.

Your game does not have to be an exact replica of Rock Paper Scissors, but it must have the following features:

  • Must use at least 3 if/else conditional statements
  • If/else statements can be placed inside other if/else statements
  • There must be some visual output for each condition

Resources to help:

Due before class starts on 9/23.

Rock Paper Scissors

New Media Reader

Reading Assignment 2 New Media from Borges to HTML

This is the introductory essay for the New Media Reader written by Lev Manovich.

The New Media Reader became an important text for both new media theory and new media art. And although the text is over a decade old now, most of the ideas within it have stood the test of time, or have been the inspiration for new ideas about media theory and art. Please read this introduction and answer the following questions either in essay format, or numbered according to the question:

  1. Manovich claims that J.C. Licklider, Douglas Engelbart, Ivan Sutherland, Ted Nelson, Seymor Papert, and Tim Berners-Lee are among the most important artists of our time. Who were these people and why does he consider them 'artists'?
  2. Manovich has 8 propositions for new media. Choose one of these and explain why it is significant and if you agree or disagree with Manovich.
  3. Manovich makes several comparisons and connections between new media and Modern art. Explain one of those connections and try to make a new connection of your own. For example, maybe social media offers an experience similar to an element of contemporary art?

Due before class starts on 9/16.


Who are you

Who are you? Your first programming assignment....

Using this template here, make a simple webpage that has the following features:

  • Your name pops up in an alert box
  • Name in Heading using document.write();
  • Favorite quote in <p> tags
  • Insert a picture of yourself (or something you would like to be)
  • List the programming languages you know in JavaScript comments. If you don't know any programming languages, list other skills you may have.
  • Write the goals you have to the console output using console.log()

Due before class starts on 9/9.

Review the projects here!


Writing response #1: What do you like?

Choose a piece of net.art from the list below and write a short essay (approximately 300 - 500 words) explaining the reason you chose it.

Maybe the work is aesthetically interesting, or it inspires you. In this case, mention something about the work you would like to reproduce in your own digital artwork. Or maybe you hate it and want to rant about how stupid it is. In this case, identify the mistake you feel the work makes that you want to avoid in your own digital art making. Due before class starts on 9/9.

Due before class starts on 9/9.

Generic placeholder image