Welcome to Data and Design. In this course you will learn the basic fundamentals of programming in the best way possible — the designer's way! You will be learning the core truth behind what makes interactive experiences interactive, while creating fun and compelling experiences along the way. We will do this by learning a Javascript language called p5.
p5.js is for writing software to make images, animations, and interactions. The idea is to write a single line of code, and have a circle show up on the screen. Add a few more lines of code, and the circle follows the mouse. Another line of code, and the circle changes color when the mouse is pressed. We call this sketching with code. You write one line, then add another, then another, and so on. The result is a program created one piece at a time.
Here are the important resources for you to get started.
Kadenze Session 1 Required: take this quiz after watching the session.
Shiffman Videos 1.1–1.6
Book Chapters 1–3
Choose an abtract painting that you like. The more geometrical it is, the easier this assignment will be. Your task is to recreate that image onto the screen using p5 and all the basic shape functions you have learned. You must also use the background(), fill(), and stroke() functions.
Save this sketch as painting and upload it into your GD153 directory on the server.
This section will cover variables and how to store, modify, and reuse data; loops, and how to use random() to get random values from the computer.
Kadenze Session 2 Required: take this quiz after watching the session. You may take the quiz more than once.
Shiffman Videos 2.1–2.2, 2.4–2.5, 4.1–4.2
Book Chapter 4
This project focuses on the power of iteration (loops) to create complex and compelling designs. Your task is to create a series of eight compositions using loops and nested loops in their structure. Your goal is to play and explore the infinite possibilities of form and composition, and then choose your favorite eight examples. You will then use screenshots of each to create a 2 by 4 grid image. The image should be 1000 pixels wide and 1400 pixels tall, making each screenshot 500 by 350.
Save your image as grid.jpg in a folder named iteration. Save all of your sketches into individual folders named loop1 through loop8. Place those folders also into the iteration folder and upload it to the server.
In this section, we will cover the following topics: 1) Setup and Draw: Creating programs that run over time. 2) Input, Responding to the mouse and keyboard. 3) Drawing. 4) Make different tools with code. 5) Conditionals, Making decisions in code. 6) Easing.
Kadenze Session 3 Required: take this quiz after watching the session. You may take the quiz more than once.
Shiffman Videos 3.1–3.4
Book Chapter 5
This project focuses on the flow of a program and how user interactions change how your program responds to their input (states). You will create a program that allows the user to draw on the screen in a variety of different ways. You will be using the built-in variables mouseX, mouseY, pmouseX, and pmouseY to allow the user to draw. You will need to incorporate mouse events to allow the user to clear the screen and change to different drawing modes. Your program should have a minimum of three different drawing modes. This will require designing a simple interface. You may incorporate keyboard events as well.
Be creative and explore the many different ways a user can make marks on the screen, such as easing, stamping, using text and shapes, patterns, etc.
Save your sketch as drawing inside your GD153 directory on the server.
This section will cover external media, file formats, how to load and display images, how to load and display vector shapes, how to load fonts and display text, and how to handle sound files.
Kadenze Session 4
Shiffman Videos: video #33 in playlist
Book Chapter 7
Set a theme then develop a collage in p5.js based on that theme. You should incorporate mouse events that will change the collage in some way. The collage must combine at least one of each of the following: images, typography, generated graphics.
Save your sketch as collage inside your GD153 directory on the server.
In this section you will learn about types of motion in code, how to create motion with code, transformations, and timers.
Shiffman Video: 9.1, 9.2, 9.3 Required
Kadenze Session 6 Required
Book Chapter 6 & 8
Create a program that uses the time and date data from the computer to create a unique way to represent the passing of time. The scope of the timespan you choose can be anything from milliseconds to months and years. You will be using some of the built-in variables millis(), second(), minute(), hour(), day(), month(), and year(). You should also incorpoarate timers to trigger changes.
Save your sketch as clock inside your GD153 directory on the server.
This section will introduce functions. We will cover the basics of functions, functions with parameters, and returning values from functions.
Shiffman Videos 5.1–5.3
Kadenze Session 7
Book Chapter 9
This exercise focuses on parameterized form. Create a function (or group of functions) to make a parameterized drawing of something such as an object, creature, etc. Changing the function parameters should change what the design looks like. Use your functions to create a 2x2 grid of possible variations on your object. You should use random() to introduce some variation, but use it sparingly. Make sure that each version of your design is still recognizable.
Save your sketch as sprites inside your GD153 directory on the server.
In this section you will learn how to define a class, add fields and methods to a class, create an instance of a class, and create multiple instances of a class.
Shiffman Videos 6.1–6.4
Kadenze Session 8
Book Chapter 10
For this assignment you will be creating a minimalist game for a mobile device. The game play will be based on the classic rain catcher game, where "raindrops" (objects) are falling from the top of the screen and players goal is to catch them with a "bucket." Your version of this game doesn't have to use the rain/bucket model. You are encouraged to reinterpret it however you like, as long as it functions in the same way.
This game will require you to use object-orienting programming. All of the elements in the game will be objects (raindrop, bucket, buttons, etc.). It will need to contain the following features:
Save your sketch as game inside your GD153 directory on the server.
In this section you will learn what arrays are, how to declare and create arrays, how to assign and ready values, and more.
Kadenze Session 9
Shiffman Videos 7,1–7.3, 7.4–7.8
Book Chapter 11 & 12
Working with data is both difficult and rewarding and the more familiar and connected you are to the data the more likely you are to enjoy the work and gain real insight in designing the visualization. For this assignment you will collect and visualize your own data. Your data can be anything, the only requirement is that some aspect of it is time based. For example, you could do something simple like track how many cups of coffee you drink each day, or more complex by also keeping track of how easily you fall asleep each night to see if there is a correlation. The time scale can be anything that makes sense for your data, daily, hourly, weekly, monthly, as long as there is some type of time dimension. Record your data in a text file or spreadsheet so that you can easily format it as a csv file to load using p5. The more data you have the more interesting your output will be, I suggest that you collect 100 data points, but you are only required to collect at least 50.
When choosing your data, keep in mind that you will need to represent it visually and think about how you can use visualization to find insights into the data or tell a compelling story with the data. Make use of color and animation to bring your data to life.
Your piece will require loading a dataset and using either arrays or tables to represent the data in some sort of visual form that will provide insight into the data that the pure numbers would not be able to communicate.
Save your sketch as dataviz inside your GD153 directory on the server.