🧏‍♂️Lesson 3 - Accessibility - Tone Poems: Working With Text

How can we design a project that is accessible to a group of people who is not able to engage with certain elements?

Overview

This lesson will introduce the topic of accessibility by having students using text to accompany the sounds made by an oscillator.

Lesson Objectives

Students will be able to:

• use the text function to add text to their sketch

• Use optional parameters to execute changes in pitch and volume of a sound

• Change direction of text using translate and rotate functions

Suggested Duration

1 period (45 minutes)

NYS Standards

9-12.IC.6 Create accessible computational artifacts that meet standard compliance requirements or otherwise meet the needs of users with disabilities.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

Accessibility - The practice of making information, activities, and/or environments sensible, meaningful, and usable for as many people as possible.

Planning Notes

The purpose of this lesson should be about introducing the concept of accessibility to students. This is obviously a complex topic with a lot of nuance and we cannot be expected to be able to cover even a small percentage of that within the context of this lesson and curriculum. However, this is meant to open the door to get students thinking about it. It is something they should be thinking about both within the context of this curriculum but also outside of that. It is meant to teach students (and teachers) to approach their design process with CARE. Everything we do when designing is a choice and it is important that student consider that their choices should be made with care.

This specific lesson will focus on accessibility for the d/Deaf and hard or hearing community. The use of the lower case 'd' and upper case 'D' is to emphasize that there are people who are deaf in terms of a condition which refers to being unable to hear and people who are Deaf in terms of being part of a shared culture. Someone can be deaf but not Deaf, in that they are unable to hear but do not identify as being a part of the Deaf culture.

The coding part of this lesson is centered around using the text( ) function as well as methods which can affect the size of the text - textSize( ) and alignment of the text - textAlign( ). In addition to this, students will experiment with the direction of their text which requires them to use the translate( ) and rotate( ) functions. Some time has been taken in this lesson to address these functions. However, if this is something your students are unfamiliar with, it may be beneficial to take additional time to go over these concepts prior to this lesson.

Nota Bene

As this lesson is focused on making student think about accessibility and making their projects more accessible, it is important, as teachers, that we are using this as an opportunity to reflect on our own teaching practices and model it for our students as well. If we are going to teach a lesson about making something accessible, we first should make sure that the lesson itself is accessible. Consider the students you have in your own class and any modifications you already make or could be making for them to make you lesson content more accessible.

For example, if you are preparing a slide to display for the Do Now in this lesson, consider doing the following things to make it more accessible as an entry point into this discussion:

• Using Arial Font which is easier to read for people with Dyslexia

• Consider Font/Background contrast for people with low vision

• Make sure to read the questions out loud multiple times for those who may be blind or low vision.

Even if you do not have students with these accessibility needs in your class, it can serve as an example of conscious choices that were made for accessibility purposes which is a central idea for this specific lesson and one we want to encourage students to consider as they continue on their coding journey.

Materials

Tone Poem Planning Document (optional)

Resources

Christine Sun Kim Website

text( ) function reference

ICM Lesson - Translations

ICM Lesson - Rotations

Assessments

Summative:

• Check for ability to accurately write code to make sounds with changes in amplitude and frequency

• Check for ability to accurately write code that displays text with a specific size, location on the canvas and direction.

New Code in this lesson

Code	Type	Purpose
text("word", 200, 200);	function	Draws text on the canvas
textSize(32);	function	Changes size of the text drawn with text function
textAlign(CENTER, TOP);	function	Sets the alignment for the location of the text. Takes seperate arguments for alignment on X and Y access
translate( width/2, height/2)	function	Relocates the point 0, 0 on the canvas and displaces all objects on the canvas in relation to that point.
angleMode(DEGREES)	function	Used to determine if functions with degree-related parameters will uses radians or degrees.
rotate(90);	function	Rotates objects on the canvas a certain amount of degrees. Parameter will be affected by angleMode() function

function draw(){
background(220);

textSize(32); // sets text size
textAlign(CENTER, TOP); // aligns the x and y location of the text to the specified location
text("here is some text", 200, 200);
}

function setup(){
createCanvas(400, 400);
angleMode(DEGREES); // set all angle related arguments to be interpreted as degress
}

function draw(){
background(220);

translate(width/2, height/2); 0, 0 on the canvas is moved to appear at width/2, height/2
rotate(90); // rotates everything on canvas 90 degrees in relation to the point 0, 0
}

Do Now/Warm Up

Display the word "Accessibility" on the board along with the following questions:

1. What does this term mean to you?

2. What is an example of making something accessible?

Allow students a few minutes to consider these questions and allow there to be an open discussion for students to share their thoughts. Make it clear that there is not necessarily a final outcome meant to come from this discussion. The main point is to have a discussion about accessibility because it is important to have these discussions. We may not be able to have all the answers as educators, but it is important to provide a space for those discussions to take place to demonstrate that we are thinking about this in a thoughtful and CARING way.

Keep in mind that this is a nuanced discussion. Be considerate about words and how you frame things, but also be direct with language. A discussion about accessibility is also a discussion about disability, so make sure to center that into the discussion as well.

Provide students the opportunity to share their own experiences. It is possible that there might already be students within your class that identify in some way as being disabled or that they have a member of their family that is a part of a group, possibly someone who is d/Deaf or hard of hearing. They may be able to offer valuable insight from their experiences that can further inform this lesson in ways you may not be able to anticipate.

Be aware of who our audience is

We are going to be thinking about accessibility and design in our own projects as we move forward in these lessons. Have students consider what accessibility would mean within the context of working with sound.

Since we are working primarily with sound as a medium, we want to take into consideration a population that may have difficulty experiencing sound. This includes the d/Deaf and hard of hearing community.

Have students brainstorm what could be done. Consider what they might see in the real world in regards to accessibility for d/Deaf and/or hard of hearing.

Closed Captions / Working with Text

Emphasize that we are going to approach this project with accessibility in mind from the beginning. Often times accessibility is only thought of after a project has been completed, as an afterthought, to be “compliant” with accessibility regulations. We want to focus on having accessibility in mind from the beginning of our project so it can be looked at as a way to help influence our creative choices.

One of the best ways we can consider how to make our work accessible is to see how people from these communities are finding solutions to accessibility and what types of tools they are using.

Present Christine Sun Kim

Artist Christine Sun Kim Rewrites Closed Captions | Pop-Up Magazine

Ask students to share any closed captions from the video which stick out to them. Ones they found amusing, profound, poetic, thought provoking etc

Have students consider how experiencing sound with the additional of text makes it a more multi-dimensional experience and adds a new level of depth to something that seems very mundane.

Tone Poems: Making Connections between Sound and Text

While we are only working with simple sounds that have changes in pitch and volume, we can still consider how we could add descriptive text to these examples to make them accessible.

Have students brainstorm connections they can make between the simple sounds we are generating and imagery/ other sensations. They can do this by making a copy of their Oscillator Object Template and passing different arguments into the frequency and amplitude methods, listening to the sound that is produced and consider what it makes them think of.

Note: This exercise may prove difficult for students at first. If you feel like your students might struggle to generate ideas on their own from the beginning, you can start by providing the frequency and amplitude arguments so all students are providing captions for the same sound and you can see all the different interpretations of the single sound and visual components that students chose. You can make note of ones that are particularly interesting, creative, amusing etc and highlight creative choices that were made in the language used to try and provide inspiration for students as they move onto doing their own.

Encourage them to use a lot of descriptive and expressive language.

Possible Prompts –

• What emotion is this sound? – Example: Intensely content boredom

• If this sound were an animal doing something, what is the animal and what is it doing? – Example: The grumbling of a grumpy bullfrog

• If this sound was an object, what would it be? – Example: The sound of a piece of yarn pulled to its last thread

• What color is this sound?

Consider using words that in some way contrast with one of the sound properties. Example: - A very quiet pitch – The thunderous roar of an angry flea

As students work, remind them of our approach of care. The more details we put into this seemingly simple piece of text paired with a simple sound, the more care we are putting into making it not just accessible but enjoyable for more people to experience.

Have students come up with 3 or more possible examples. This should include the frequency and amplitude of the sound and the descriptive sentence that goes with it. Students can also consider color, outline color and thickness if they want. You can have students use the Tone Poem Planning Document or something similar to keep track of their ideas for when they start coding.

Using text( ) function

Once students have come up with multiple examples to try, they can start coding their ideas into p5.js. If they were using a copy of the Oscillator Object Template to experiment with different sounds, they can continue to add their text in that sketch. Remind them to rename the project to Tone Poem Examples.

To add their sound descriptions into their sketches, they will need to use the text( ) function. Students should have experience using the text function, but provide a quick refresher by having students look at the documentation and have students go over the following:

• How many parameters?

• What argument gets passed to each parameter?

Remind students that there are other functions that can be used to affect the properties of a piece of text which they should consider to help add more context and expressiveness.

textAlign( ) – affects where the text will appear in relation to the X position argument that has been passed. Defaults to left where the first letter will be at the X argument position and proceeding text will go left from there. CENTER will have the middle of the text align with the X position argument and additional text will spread both left and right. There is also an optional Y position argument that will align the text to the Y argument position. For example, TOP will align the top of the text to the specified Y argument position.

textSize( ) – This is going to affect how big the text will appear on the canvas. This can be very helpful to add dimension and expressiveness to the text to help capture the quality of the sound. Consider how size can connect with volume and pitch.

We can also experiment with color and outline for our text using the fill( ), stroke( ) and strokeWeight( ) functions.

Have students try to make 3 different Tone Poems in one sketch. They should include comments to identify which lines of code go with which Tone Poem and they should comment out the ones unrelated to ones they want to play.

Have a share out session where students can pick their favorite to share. Students should mention the frequency and amplitude values as they share and then reveal the sound and text. It can be interesting to also have students with sounds that were similar to share the descriptive closed captions they chose.

Rotation - Captions for changes in pitch and volume

We have worked with the ramp parameters of both amp( ) and freq( ) which allows us to add changes over time. We can now consider the element of time as a design choice as well. There are multiple elements of time that can be connected to our sound

• Change in volume (getting louder, getting quieter)

• Change in pitch (getting higher, getting lower)

• Duration/How long does the change last (short, long)

Changes in sound have a directional quality to them as well. Offer the prompt – If the TV is too quiet, what would you ask someone to do to the volume “Turn it UP” The words used to describe pitch already have a spatial element to them – High/Low.

Have students consider how they could represent these directional qualities of sound in the placement of their text.

Rotating text requires using two functions: translate( ) & rotate( )

translate( ) can be thought of as a repositioning of points on the x and y axis. The values passed as arguments to the translate( ) function will relocate the 0 position on either axis. For example, in this example:

function draw(){
    background(220);
    translate(100, 100); 
    textAlign(CENTER);
    text("A line of text", 0, 0);  
}

The translate(100, 100) moves all points on canvas 100 pixels on both the x and y axis. Therefore when we write the line of code for the text to be at 0, 0, the translate function will cause it to start at 100, 100 on the canvas.

The translate function is needed because when we try to rotate something on the canvas, it will rotate around the point 0, 0. If we want to change the direction that the text is pointing, that object needs to be centered on the point 0, 0. Otherwise, it will move around that point, but not stay in the same place.

Once you have used the translate function and centered your text at the point 0, 0 , you can use the rotate( ) function to change the direction that the text is facing. Keep in mind that the default parameter accepted by the rotate( ) function is radians. If your students are not familiar with this, you can use angleMode(DEGREES) in setup which allows you to put numbers between 0 and 360 to change the direction of the text. This will most likely be easier for your students to visualize.

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
}

function draw() {
  background(220);
  translate(100, 100);
  rotate(325);
  textAlign(CENTER);
  textSize(36);
  text("A line of text", 0, 0);
}

Example of rotated text

Once students have gotten the hang of how to rotate the direction of their text, they can use this to help inspire the choices for how the sound of their oscillator should change using the rampTime parameters for the amp and freq methods.

Example of rotated text with sound

Assessment

The assessment for this assignment should be based primarily on student's ability to accurately execute the code needed for this project. You can set up tiered tasks to accommodate multiple ability levels:

Mild - Create a Single Tone with text

Medium - Create a tone that changes with rotated text

Spicy - Create a tone that changes more than once with rotated text using color

(See extension from lesson 2 for more on how to do multiple changes)

You can also choose to include a portion of the grade to reflect how well the text connects to the sound or points for creativity. However, be aware that this type of grading can be somewhat subjective, so try to set it up in a way that is less about your own personal preference and more about setting a criteria that everyone can meet regardless of what the final outcome of their project may look/sound like.

Wrap Up

Take the opportunity to provide students time to share out their work. It can be very enriching to see the ways students approached this project and all the different results. It is also important to have students share their thoughts about engaging in this project with accessibility in mind.

• How did it change the way that you approached the project?

• How did it change your perspective on making work for other people to experience?

• How has it changed the perspective on the world around you?

Practicing accessibility is an ongoing journey. This project may be your students first time taking accessibility into consideration when making a project. This is an important first step for them to take. The hope is that now that they have been made aware of approaching a project with Care in mind, they will take this into consideration in other projects.

Our goal in designing with accessibility in mind is to make it become more of an engrained part of our thinking, not an afterthought or a one-off exercise. Consider returning to this idea in a future class by asking students if/how they have started thinking about the world around them through the lens of accessibility. Have they noticed accommodations made for accessibility purposes that they have not noticed were there before? Have they noticed something they use routinely that isn't set up to be accessible to a certain population? Have they considered how that could be changed to be more accessible? Our hope is that they will bring this way of looking at things not just in coding but in all areas of the world around them.

Extensions

There are multiple variations on what students can do for this project depending on their ability level and motivation. You should always encourage students to not limit their thinking to what they KNOW how to do, but instead what they WANT to do. Most of the time, there is a coding solution they can use to bring their vision to life. it just may require some searching to find out how to do it. This is a skill all coders have to develop. It can also get them thinking about asking the right questions to find the right answers.