Text and Image

Description

For this project, students, either in groups of two or individually, will make a interactive work using p5.js.

The aim of this project is for you to use your new skills in text, font, image creation, combined with your new knowledge of functions, to create an interactive text and image art work. This project can take a variety of forms including, but not limited to, an interactive text adventure, an interactive photo album with a variety of effects, an experimental long form poem with meaningful interactive elements, and much further. Begin by exploring Twine to test out non-linear text. Additionally, explore the references at the bottom of this page. Students are encouraged to explore image filtering, font manipulation and interactive font effects in p5.js. Students are expected to conduct research on artists and themes related to the concept of their project.

Technical Requirements:

  • The project uses text and/or images (photographs, drawings, digital paintings, svg images etc)
  • The project makes use of functions
  • The project is interactive (A person can use a mouse, keys, etc to navigate through it). Explore the p5.js reference: keyPressed(), keyTyped(), keyIsDown(), keyReleased(), keyCode, doubleClick(), mouseMoved(), mouseDragged(), cursor(), mouseReleased(), and others.

Optional:

  • The project uses the windowWidth and windowHeight variables for the canvas and works with the windowResized() and resizeCanvas() function.

Twine

Begin by experimenting with Twine to map out an interactive text. Twine will not work for concepting all projects, especially project that are more image focused, however this is a great tool to begin thinking about nonlinear text.

Proposal (1 point)

Each student or group should print out and bring a one page proposal to class on the day the proposal for the project is due. This proposal should include a description of the work you plan to produce, your timeline(/work split) to finish the project, and some sketches of how you imagine the project looking/functioning. This project proposal should also be uploaded to Canvas.

Submit

  • Submit proposal to Canvas and bring printed copy to class.
  • Fill out form on Canvas
  • Submit to Canvas as either text entry of PDF
    • Submit a short paragraph description of your project. Include the artists and other concepts you researched. 
    • Submit the title of your project.
    • Submit your p5 share link.
  • Submit p5 share link to the Text and Image channel on Discord

Each student/group will demonstrate their work to the class and should prepare a 1 minute statement on their work. Following this statement, there will be a several minute open critique in which the students and instructor will comment on the work. During this critique, the student’s work will be graded by the instructor using the following rubric.

Final Rubric (9 points)

Concept (3 Points)

3: The group/student went above expectation in their conceptual approach to the project. The relationship between text, image, and interactivity is thoughtfully considered in the work. The student(s) approached the concept for the project with creative/intellectual generosity and were able to demonstrate conceptual risk-taking in their project. The project does not directly copy from references, and the student(s) can clearly articulate the references/research that guided the production of the work.

2: The group/student meet expectations in their conceptual approach to the project. The student(s) presented a thoughtful interpretation of the project prompt and explored the relationship between text, image, and interactivity. It is clear the the student(s) did some form of research for the project.

0-1: The group/student did not meet expectations in their conceptual approach to the project. The student(s) either closely followed a reference or did not demonstrate an understanding of the assignment. The assignment might be missing required elements or shows little effort to consider the project prompt.

Code (3 Points)

3: Within the project, the student(s) used their introductory programming knowledge to create a conceptually and technically complex system. The student(s) made use of functions learned in class as well as explored new functions and approaches using p5 documentation or other sources. The student(s) is able to clearly communicate their system and the programming concepts that used to design their project.

2: Within the project the student used their introductory programming knowledge to create a functional system. The student(s) only made use of functions learned in class. The student(s) can communicate their system and the programming concepts they used to design their project.

0-1: The student(s)’ project is either non-functional or barely functional. While effort was made to create the project, the final code contains bugs or errors that causes the program to be unable to run. The student(s) did not seek help from the instructor or peers in advance of submission.

Craft (3 Points)

3: The student(s) demonstrated exceptional thoughtfulness and intentionality in their visual, text, and interactive design. Visual, text, and interactive elements of the project are clearly connected with the student(s) conceptual approach.

2: The visual, text and interactive elements of the project are somewhat intentional and can be connected to the conceptual approach to the project.

0-1: The visual, text, and interactive elements of the project are unrelated to the conceptual approach to the project.

References: