Assignments

8.5 Projects + 1 Exam  + 2 papers (1000 points)

(The professor reserves the right to make minor changes to the assignments up to the time when the assignment is presented in class and students begin to work on it.  More details for each assignment will be provided at the appropriate time.)

Important:

Competent completion of all requirements at stated will likely lead to a grade of B+. Superior work demonstrated by completing the assignment at a greater professional and creative level will result in a grade of A- or A.

Failure to post the project as required with all elements working will likely result in a maximum grade of C+.

  • Assignment Page (25 points) DUE September 15
  • Moving Drawing (50 points) DUE September 22
  • Pong Variants due (75 points) DUE October 4
  • Drawing Pro 5000 (75 points) DUE October 11
  • Exam (150 points) on October 20 and October 23
  • Word Art (100 points) DUE October 27
  • Math Paper (75 pointsDUE October 30
  • Generative Art (75 points) DUE November 8
  • ‘The Place of Code’ Paper (100 points) DUE November 15
  • Data Visualization: due (75 pointsDUE November 27
  • Newsgame Proposal (25 points) DUE December 1
  • Newsgame with Controller (175 points) DUE December 13

Use of Images

All photographs/images used in exercise and projects must be royalty free and not “stolen” off of the web.  Students may take their own pictures; use fotolia.com  or istockphoto.com; have a friend create images (and credit him/her); or find another site with royalty-free images (e.g., everystockphoto.com) and pay attention to the Creative Commons licenses.

Assignment Page

Students will create a basic HTML/CSS page from which to link all subsequent assignments.  The page must be available on the web.  Each student will create one page titled index.html that lives in his or her public_html folder which in turn contains a folder named computationalmedia or digc158 or csci158.

The page must include:

  • Your name
  • Your major and graduation year
  • Non-working links to all the assignments above except for: “Place of Code” paper and “Live Coding Exhibition”

Students must e-mail the working link to Professor Sarachan.  It likely follows the format:

http://keep3.sjfc.edu/students/username/foldername
(The words in italics will vary.)

Moving Drawing

Students will created an image based and/or inspired by a famous painting: the drawing should use a variety of drawing techniques (line, arc, vertex, ellipse, rect, etc.). Color (including a background color) should also be incorporated in the project. The image must follow mouse movements, and so must use variables. These files should be posted to the web and linked from your assignment page.

Consider paintings by:

Pong Variants

Students will create a game that involves a bouncing ball with walls.  It may be any sort of variation of pong:

  • A simple “handball” game by the player against a wall.
  • A game with the player against the computer.
  • A “game of visual artwork” that doesn’t erase the screen but draws lines of random colors around the screen as the ball bounces off the walls and the player (or other obstacles).

Most likely, the p5collision.js library should be used.  Students should be creative in creating a pong-like experience.

Drawing Pro 5000

Using variables, events, and conditions, students will create a drawing program (800 x 800 pixels) where the user can adjust color, size [perhaps with a plus and minus button], and shape of the brush (triangle vs. quadrilateral, etc.).   Interaction techniques, including detection of buttons on the screen (use collide library), the mouse location, and individual letters, should be used.  (Visually make sure the user clearly understands how to use the program.)  You should also either allow the user to erase over what is drawn and/or erase the screen in an instant.

Midterm Exam

(P4 core goal 2; program goals 1 & 2)

All notes and the textbook may be used.

Please review the following:

  • rect, ellipse, triangle
  • if…else statements
  • for loops
  • using the draw function as a loop
  • methods of displaying color
  • functions
  • Mathematical applications for graphical movements/how to animate an object on the screen
  • mouseX and mouseY
  • Arrays
  • and other topics TBA

Word Art (Say it Out Loud!)

Students will create a political message related to a topic of your choice, creating meaning from the formalistic qualities of the words/text as well as the meaning of the words themselves.  Images should also be used.

Students must use some sort of motion.  Interaction with the user is optional.  Use the entire canvas–not just one or two objects moving in one place.  Consider the background color—the whole experience matters.

The entire project should last 15-45 seconds, depending on its complexity.  It may have one scene, or more.

The code should include at least one

  • if/then statement
  • functions,
  • for loop
  • array
  • a timer (millis) is optional
  • Translation/rotation/scale could be useful.

Link to the completed assignment from your assignment page.

Examples:

Math Paper

(P4 core goal 3)

In this paper, begin by describing your Word Art assignment in the form of an artist’s statement (1-2 paragraphs) that explains your work in terms of what it means to you and what reaction you hope to create in the viewer. For examples: http://www.artstudy.org/art-and-design-careers/sample-artist-statement.php

Then, choose two or three segments of code (one or more lines).  An if statement and the entire “then” section would be one segment. Alternatively, you could treat each function as a segment.

Describe each segment and explain what the code is accomplishing.  One approach would be to create a grid with different input and output values (as might be created with a for loop). This will be explained in class. Other explanation techniques are acceptable and encouraged.

A brief conclusion is required.

Overall, the paper must be 500-750 words. To type mathematical symbols, choose Insert: Equation in Word.  Also, the code should be indented and in a different font: use Monaco, Lucida Console, or Courier.

The math paper should be submitted on Blackboard using the Submit Papers link and then choosing “Math Paper”.

Generative Art

Students must use objects and arrays together to create a work of visual art (often with a random component) that develops over time.  The program should run infinitely (theoretically).  Interactivity is also required, which will typically result in more instances of an object being created.

Take advantage of established syntax, like shapes, random(), opacity, color, etc..  This likely works better with greater abstraction and less concrete images, etc..

Here are videos of examples of generative art (but don’t be intimidated by them.)  Scroll down the page.

‘The Place of Code’ Paper

(P4 core goal 3 and 4; program goal 4)

In your paper (750-1250 words), consider the influence of coding on an action in your everyday life or how code influences how you interact with media.  Then, consider how this decision is influenced/coerced by bias within the code.  What assumptions are made by or about you that are hidden by the algorithm and that are relevant?   Write a detailed analysis.   You should cite at least two of the articles read in class and find at least one more.

Data Visualization Project

(program goal 3)

Choose one of the following categories for the project:

  1. Educational demonstration: demonstrate a working model or visual articulation of a complex idea, related to science (e.g., chemistry, astronomy) or social science (e.g., economics). There should be some user input, either via the mouse or input box.
  2. Political art/data visualization. Comment visually on a issue related to government policy or issue–consider this an interactive and or animated political cartoon or message.  There should be research and analysis supporting this message; some sort of visualization of data is expected.  (This can be related to any number of issues: voting, labor/employment, environment, education, etc..) There should be some user input, either via the mouse or input box, or even by clicking a series of buttons to emphasize (brighten, etc.) some aspect of the graph.  You could control the year that is shown of specific chronological data, etc..

You must create a fully original, working project.  Use of variables is assumed.  Data read from a .csv or JSON file is required. Arrays and for loops and/or if…then statements should be used as is required.  The use of objects would be impressive (but isn’t really necessary).  Design does matter, and so the use of both text and imported images would be a logical choice.

The user needs to know what he/she is observing.  Label well.

Consider these examples for inspiration: http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/

An interesting exhibit (a bit ambitious):
https://janus.astro.umd.edu/SolarSystems/

Consider how you can manipulate the molecule–the animation at the beginning isn’t what we do: http://nanospace.molecularium.com/

Sources for data files:

https://catalog.data.gov/dataset
https://www.data.gov/open-gov/
http://census.ire.org/data/bulkdata.html
https://vincentarelbundock.github.io/Rdatasets/datasets.html

 

Newsgames

(P4 core goal 1; program goal 5)

You will create a game related to current event or a cultural/political/policy issue.  The game must be fully working and playable (with usability considered: the directions must be obvious or explained) and built in p5.js.

You are highly encourage to use the p5.play library, which simplifies several techniques, including arrays and the creation of objects.  It also replaces the p5.collide library (although you could potentially use both for ‘cleaner’ collides.)

The game should offer a moment of completion–whatever that may mean.  The game should also offer a way to restart (if that makes sense for its theme.)

Consider:
http://www.gamesforchange.org/play/september-12th-a-toy-world/ and https://www.youtube.com/watch?v=N1OemWEk5ns

https://www.thoughtsandprayersthegame.com/

https://alpha.editor.p5js.org/full/S1UxQJh1z (Worms)

http://www.shockwave.com/gamelanding/airportsecurity.jsp

https://syhacked.com/

http://www.shockwave.com/gamelanding/oilgod.jsp

http://fiscalship.org/

http://persuasivegames.com/games/

 

Follow the engineering design process:

  • Part I: Defining the Problem: due Monday, November 27.  To be presented in class.  (This is an abstract of the project—what is will be about, what it will look like, and how you will make it— informally: the project’s elevator speech.)
  • Part II: Newsgame Proposal: complete the research required for this project (in terms of the cultural/political/ policy issue).  Present these “thoroughly” in one or two paragraphs and then specify requirements/specifications of the project: this second section requires details about how the project will work: game play, theme, and objective.  300-500 words. Due Friday, December 1.  Please submit this as part of the textfile as a Github.    The link to your Github page should be placed here. https://docs.google.com/document/d/1Lvf1xtJOUfw2ZXd07Uma8j4MnUoKmpnHBZbCDn56avE/edit?usp=sharing

    Information about formatting the Readme file: https://help.github.com/articles/basic-writing-and-formatting-syntax/
  • Part III: Build the Game/Prototype, ready for playing: due Wednesday, December 13.  This final version must have comments included in the code that demonstrate that you fully understand how the code functions.  The rest of the code should be added to the Github you created for part II.