Activity 10, Advanced - Iterating on SVG Drawings & Beyond

In this final adventure of TADA, students will practice iterating their digital drawings by changing attributes of shapes to alter their appearance, moving them around, fixing problems, and getting comfortable enough with manipulating the SVG syntax to prepare for more advanced coding and drawing skills.

This adventure will involve computer use, text editor navigation and text editing/input, opening and navigating through their SVG files and altering the code, being able to open the finished SVG files in Google Chrome or Mozilla Firefox, and outputting via any tactile method.

These tasks should be able to be repeated for each change to the SVG file code and the previous embossed or tactile output retained to compare and contrast the differences between the previous drawing output and the current iteration. Students should be able to discern how the numbers and changes they've made are affecting the output and should be able to enjoy experimenting with subtle and big changes to help spatially map the code to what they are feeling with the tactile output.

Setup - Activity 10

This activity can be broken down into several elements for lesson planning.

Objectives

• Begin to spatially and mentally map how changing numbers and attribute values in the shapes can alter the tactile output.
• Create quick hypotheses about where shapes will appear on the paper when they input certain values, and assess accuracy with tactile output.
• Progress on verbal description of what they've changed and get more comfortable working with a visual interpreter on gauging the accuracy of what they've changed and how the appearance of their drawing has been altered.
• Be ready to advance to learning paths, curves, and additional illustration skills both as they progress through BlindSVG.com and create more of their own graphics.

Materials Needed

• Laptop or Desktop computer
• Text Editor: TextEdit or Text Mate on Mac, Notepadd++ on Windows
• Google Chrome or Mozilla Firefox (Safari may not work for this process)
• Tactile Graphics output method: embosser, Swell-form, visual tracing method on standard printer output

Ideas for Carrying Out This Activity

• Read through and have students read through BlindSVG.com, specifically the Home Page, Setup page, and the Basic Shapes page.
• Pay attention to good typing and syntax usage. Be ready to hunt through code to debug any missing spaces, quotation marks, or incorrect values.
• Be prepared for multiple iterations of tactile output as students change the values in their code.
• Use Swell-form if available for final output.
• If no other tactile output methods are available, print drawings out on basic printers and set print setting to flip the drawing horizontally so it prints out a mirror image. Place this print on a Draftsman and trace the resulting image with a pen for the student, embossing the image and making it appear exactly as intended when the paper is flipped around to expose the embossed lines for the student.

Adventure Map: Activity 10

Teaching tip: Provide sufficient time for the student to explore, develop skills, and have fun at each step! Encouraging creativity and personal preferences for drawing as much as possible. Some students may be able to accomplish each step in one session; most students will need several sessions to complete the adventure. This is a very technical part of the adventure, and this may become frustrating depending on the technical aptitude of the students and their screen reader/magnification skills. Please give them enough time and space to solve for technical bugs and typing errors; Google Chrome will do a basic debug of SVG code and tell the student what lines have errors when opening the SVG within the browser.

Debugging and understanding how to change the attribute values are crucial steps to this entire process. Values within the quotation marks should be the only things changing in the code, unless students decide to remove certain styling attributes altogether. There is a lot of potential for typing/syntax errors such as extra or missing quotation marks, the wrong quotation marks being used, missing or added spaces between the attributes, the equal signs, and the values in the quotation marks, and potentially deleting the closing forward slashes and greater-than signs.

Some examples of common mistakes:

• stroke-width="4 — missing quotation mark, so this code is broken.
• stroke-width="4" — fixed code with ending quotation mark.
• stroke= "teal" — space between the equal sign and the value in quotes breaks the code.
• stroke="teal" — fixed by removing the space.

1. Introduction

Students will now have a chance to understand how changing values in their code can alter the tactile output of their illustrations from Activity 9, and start to learn how the numerical units map to the actual output on the paper.

2. Think About the Values

• Let students look back through their code and start to hypothesize about what would happen to their drawings as they alter specific values in the attributes of their shapes.
  • Where will shapes end up if they change the x and y coordinates of a rectangle, the cx and cy values of a circle or ellipse, or start plotting out new points for lines and polylines?
  • What happens when they alter the size of the stroke-width or change or remove the fill color?

3. Make the Changes

• Have the students save out a copy of their original SVG files and make their proposed changes to the copy. This way their original file can be preserved to make it easier to revert or assess the changes between the values later on.
• They can get creative, adding or removing shapes, but ultimately they should focus on moving or resizing just a few shapes in their drawings.
• Once they've made the changes and have made sure they have typed everything correctly and that their drawings render in Chrome or Firefox without any errors, emboss their new drawings.

4. Compare and Contrast

• Have students compare and contrast their original embossed drawing with the new one they've just output.
  • Do the positions of the new shapes match with what they thought would happen with their code changes?
  • Did anything surprise them?
  • Does the output make sense between what they had in their original code and what they've altered in the new file?
• Being able to feel the differences between the drawings and mapping how much the units have changed the shapes is critical. Feeling how much a shape moves with subtle or large value differences and how that relates to the SVG coordinate system is what helps unlock the coding barrier between creativity and the final output. Knowing exactly where a shape will end up with specific attribute values builds spatial reasoning and sets them up for future success when building more drawings.

5. Iterate, Iterate, Iterate

• Have the students iterate on their drawings by changing the values again. If students were surprised by the output, have them figure out what they need to change to get the shapes into the exact size and position that they wanted in the first place.
• If students nailed it on their first try, have them iterate again, changing and adding shapes with different values and positions to eventually feel how the numbers and the tactile output relates.
• If the students had a drawing they liked but needed to change something or made a mistake, isn't iterating with code a little easier than redrawing the entire picture?
• Relate how in the real world of design, iterations happen all the time. The first sketch they made may be accepted by a client or a friend, and then once they see the digital version of it, they may want a little change here and there.
• This can be practiced by having each student alter one specific part of their iterated drawing. Give them a very specific piece of direction, such as moving shapes a specific set value in any direction, adding a new shape, removing a shape, etc.
• Continue to emboss out their iterations once they are done with the code, and assess if they have followed the iterative instructions and assess if they are happy with the results. The changes in the code should start to get more comfortable as they read through their SVG files and alter them.

6. Final Goals, TADA!

Students have now made their way through the entire adventure and are now skilled explorers ready to advance further into the wilds of tactile illustration! They've developed great skills and found great tools to keep in their travel packs, and can now create graphics either by hand or via code on the computer.

Students can begin progressing through the rest of BlindSVG.com at their comfort and leisure if they are interested in learning more about the graphics creation process. Have the students think about what they can now create, and challenge them to get out there and try it for themselves!

Extension Activity:

• Have the students go back to Activity 1 of TADA and try creating more tactile drawings or reiterating on the original drawing they made.
  • After going through this entire process and having practiced all these skills, are they finding drawing to be a lot easier?
  • Does it feel a little more natural to take their thoughts and ideas and put them down in a tactile format?
  • Do they feel a little more creative now that they have a new creative outlet?

Thank you so much for exploring with us!