Introduction: Pixel Art Sonification
Pixel art is digital art that is created using software, where images are edited on the pixel level. You can find examples of this art in 8-bit and 16-bit computers, video game consoles, and graphing calculators.
The goal of this activity is to explore pixel art through data science, specifically through data visualization and sonification. Data visualization is the graphical representation of information and data. By using visual elements like charts, graphs, and maps, data visualization tools provide an accessible way to see and understand patterns in data. If you have time, have students watch this video:
Students will use Google Sheets and conditional formatting to create pixel art, then use the Two Tone application to take this data and create sound with it. In Two Tone the pixel art information can be translated into pitch, volume, tempo, etc.
As a final step, students will share their work with their classmates and others.
Step 1: Data Science Ice Breaker
Data visualization is the graphic representation of data. It involves producing images that communicate relationships among the represented data to viewers. Bar and pie charts are two of several types of data viz.
For this 10 minute icebreaker have students write down their favorite season of the year on a notecard and add it to a stack. Collect and separate all the votes based on each season. If working remotely, have students write their answers in the chat area of the virtual classroom program. Enter the results in a spreadsheet (or use the attached file) and share the results with the class.
To add another level to this icebreaker you could have students guess others' favorite seasons based on their hobbies or some other interests.
Based on the resulting data what can students infer about their classmates? Which season is the most popular? What does the data viz reveal?
Step 2: Make Pixel Art Using Google Sheets
The main activity comes from Make Art with Google Sheets. Students will learn how to create data visualizations (as pixel art) based on conditional formatting.
Students will be making their own pixel artwork in Google Sheets or Excel.
First, start by having students watch the Introduction (3 min video).
What other examples of pixel art have students seen before this class or session?
Step 3: Create Your Grid and Choose an Image
In this step students will use Google Sheets with conditional formatting to add colors and shading to highlight data that meets certain conditions or rules. To begin have students launch Google Sheets from their Google drives and give their projects a name.
For remote classes: Have students work in smaller groups to complete the artwork in a shorter time.
Watch this video tutorial (2:27 min) and follow these steps (10 minutes)
- Set up your spreadsheet canvas by selecting all of the cells in your sheet - click top left box above the table (see photo)
- Resize all cells to form a grid in your spreadsheet.
- Search for spreadsheet pixel art (or based on a theme like Halloween).
- Customize your search and filter your results if needed.
- Select an image to inspire your project.
- Open your guide image in a new browser tab.
Step 4: Create a Color Palette With Conditional Formatting
In this step students will create a color palette for their art using conditional formatting. Have students make a list of the colors they see in their pixel art image.
Watch the video tutorial (3:30 min) and follow these steps (10 minutes):
- Select all the cells in the spreadsheet.
- Open conditional formatting.
- Create a rule for each color in the image.
- Check work by adding colors to the project.
If there are time constraints, students can work in smaller groups on one pixel art project.
Step 5: Create Your Image
In this step students will create their pixel art image.
Watch this video tutorial (2:32 min) and follow these steps (15-20 min):
- Open the conditional formatting rules to see your color values.
- Add values to color cells in your spreadsheet.
- Complete your image.
- Select a custom range for your background.
- Add a new rule to set a background color.
By working in small groups students will be able to get more done in less time. If working remotely this can be accomplished in 'break out' groups.
Step 6: Match Text and Fill Colors and Remove Gridlines
In this step, students will change the text (numbers) colors to match the cell colors and remove the gridlines.
Watch this video tutorial (2:00 min) and do the follow steps (5 min):
- Select all cells and open conditional formatting.
- Revise the conditional formatting rules to match text colors to fill colors.
- Remove the gridlines from your spreadsheet.
- Rename your spreadsheet.
When students are finished they should take screenshots of the final pixel artwork to be used in the final step.
Step 7: Import File Into Two Tone App
TwoTone is an online application that uses sonification to let you hear data. Sonification is the use of audio to convey information or perceptualize data. As a next step, students will import their Google Sheet/Excel pixel art (xls. or .csv file format) to Two Tone. They can drag and drop their files or click the box at the bottom of the gray window to browse and locate their file(s).
Step 8: Create Music Using Data
Using Two Tone students can choose different data sources (columns) from their pixel art spreadsheet and choose instruments for each source. They can click the blue "+" button and the musical note button on the lower right side of the application window to add more data sources.
The small arrows on the right side of each data source will expand to show more options such as changing the key or tempo of the instrument as it plays.
Students should explore and add 4-5 sources/instruments (10 min).
Step 9: Export Music As MP3
After students are done creating their music they can download it as a MP3 file by clicking the orange Export button in the bottom right corner of the application window. Students need to do this for the next and final step.
Step 10: Create Your Final Presentation
As a final step, students can create a slide presentation of their pixel art and music using Google Slides. This should take no more than 10 minutes to accomplish.
- Upload the saved MP3 file to your drive
- Launch Google Slides
- Insert the pixel art image (saved screenshot of pixel art)
- Click Insert>Audio
- Locate and select the MP3 file
- In the "Format Options" box click on "Loop audio"
- Add your name to the file (student name, project name)
Students can participate in a gallery walk: view and listen to other students projects. This can also be done remotely by sharing screens.
This work is made possible by support from STAR, a Biogen Foundation Initiative. The team at Lesley supporting this initiative includes faculty and staff in the Lesley STEAM Learning Lab, Science in Education, the Center for Mathematics Achievement, and other related Lesley University departments and programs.