Teaching Visual Art and Computational Thinking

December 6, 2016 — 2 Comments

**Updated January 4 2017 with information about artsy.net and seeing more Miro art.**

This blog post includes a 5 minute video, a lesson plan and examples of student that show integration of visual art curriculum and Computational Thinking in my grade 3 classroom.

Thank you to Bea Leiderman, Carolyn Skibba, Douglas Kian and my experience at the Apple Institute in Berlin for this idea.  Using Keynote and Kandinsky is Bea’s idea. It’s brilliant. Bea, Carolyn and I went to the Bauhaus Archive in Berlin where we saw Kandinsky’s work. We also had in depth workshops on Keynote. The combination of these experiences at the Apple Institute in Berlin lead to this idea and a project. Bea, Douglas and I are currently working on a project where we are investigating how these ideas of art, coding, and Computational Thinking might fit together. This is the early stage of this team project.

This video gives an overview of the lesson and a chance to peak inside my grade 3 classroom:

Visual Arts Expectations

These are the expectations from the Ontario Arts Curriculum that apply to this lesson:

Elements of Design:

• line: variety of line (e.g., thick, thin, dotted)

• shape and form: composite shapes; symmetrical and asymmetrical shapes and forms in both the human-made environment and the natural world

Principles of Design:

• variety: slight variations on a major theme; strong contrasts (e.g., use of different lines, shapes, values, and colours to create interest)

Creating and Presenting:

D1.1 create two- and three-dimensional works of art that express personal feelings and ideas inspired by the environment or that have the community as their subject

D1.2 demonstrate an understanding of compo – sition, using principles of design to create narrative art works or art works on a theme or topic

D1.4 use a variety of materials, tools, and techniques to respond to design challenges

Reflecting Responding and Analysing:

D2.2 explain how elements and principles of design are used to communicate meaning or understanding in their own and others’ art work

Exploring Forms and Cultural Contexts:

D3.2 demonstrate an awareness of a variety of works of art and artistic traditions from diverse communities, times, and places

Computational Thinking Goals

Karen Brennan and Mitch Resnick published a paper in 2012 describing a framework for teaching and assessing Computational Thinking (CT). I learned about this paper from a presentation by Julie Mueller at a CT event for teachers in August 2016.  Based on this framework, these are the CT goals of this lesson:

Coding Concepts (actual computer science concepts): Sequencing and Debugging.

Practices (thinking habits): Being incremental and iterative, testing and debugging, reusing and remixing.

Perspective (beliefs about self): Using technology to express oneself.

Materials:

ios10-960x960_swift-playgrounds-icon_us-enscreen-shot-2016-12-04-at-11-51-01-amimovieseesaw

Source: Wassily Kandinsky [Public domain], via Wikimedia Commons

the-smile-of-the-flamboyant-wings

Source: The Smile of the Flamboyant Wings, 1953 by Joan Miro

For more information on Joan Miro, check out this artsy.net site here. Thank you Louise L. for letting me know about this site.The page I have linked “provides visitors with Miró’s bio, over 400 of his works, exclusive articles, and up-to-date Miró exhibition listings. The page also includes related artists and categories, allowing viewers to discover art beyond our Miró page.”  The rest of artsy.net is very much worth looking at also.

Teacher Prior Knowledge/Experience:

Student Prior Knowledge/Experience:

  • Time to play with Keynote

Lesson Part 1:

Bell-work and Minds On:

As students enter the classroom, give them the option of taking either a Miro or Kandinsky colouring sheet. While the students settle and the teacher takes attendance, students colour the colouring sheets anyway they like.

Introducing the Project and Meeting Miro and Kandinsky:

Introduce the project by showing an example. This was created by Bea:

Next, show examples of Kandinsky and Miro works. Ideally show the same art work as the colouring pages and several more.

screen-shot-2016-12-04-at-12-41-25-pm

Explain how the art is abstract. Show how the example has movement that happens with just a single click.

Go over the success criteria:

screen-shot-2016-12-04-at-11-47-07-am

Teach Art Concepts:

Have students compare their colouring pages to the actual artists’ works. Notice the main differences. Miro uses curved lines and primary colours whereas Kandinsky uses many different colours but has more geometric shapes and straight lines.

Teach Coding Concepts:

Introduce the coding concepts of sequence and debugging.

Working On It:

Now it’s up to students to create their own Kandinsky or Miro style art, or a mixture of both.  You should model how to find shapes, lines, and how to add animation. There are two ways to animate and they are shown in the screenshots below.

First, tap on the More button (…) and then select “Transitions and Builds.”
img_0485

Or, tap on the object you want to animate and tap on “Animate.”

img_0484

Warning: Many students will figure out how to add the animations but won’t be able to link them together.   I skip telling them this step so they are confronted with having to problem solve and debug.  Once they have a need for this information, I show them how, though many figured it out on their own.  The screenshot below shows how to link the animation. To sequence the animation tap on the object, then tap Animate, then tap the heading to get the options you see in the screenshot.  Notice that you have to change “Start Build” from “On Tap” to “With Previous Build” or “After Previous Build.”img_0486

Once students have completed their projects ask them to share the Keynote files with you.  You could do this by using Airdrop or having them save the Keynote file to Google Drive.

This is the end of the first part of the lesson. Now you will need some time to convert those Keynote files on your Mac to mP4. This part was time consuming.  I wish I could export keynote files to iMovie on iPad. But, at this point you can only send a copy As Keynote, PDF, or PowerPoint.

Teacher’s Homework Prior to Part 2:

This part is not fun.

  1. Open each file in Keynote on a Mac and export the file as a Quicktime. (File>Export To>QuickTime…)
  2. Then, open each file in iMovie and export as MP4.
  3. Share these files with students. I used Google Drive.

Lesson Part 2:

Bell-work and Housekeeping:

Give students instructions to retrieve the MP4 file you created with the Keynote files.  Ask students to open the file in iMovie. Review the success criteria.

Teach Art Concepts ~ Reflection:

Students use iMovie to create a voice over audio recording explaining why Miro or Kandinsky would like their art work.  Review the key elements and principles of design for each artist. Give students time to do their reflection and upload videos to Seesaw.

Teach Coding Concepts:

When students are finished uploading their art reflection, have students use Apple Swift Playgrounds Learn to Code 1 to reinforce coding concepts. Have students work on the Command puzzles.

Examples of Student Work:

Here are examples of the animations prior to students adding reflections.

Here are examples including the reflection:

Michelle

Posts

2 responses to Teaching Visual Art and Computational Thinking

  1. This is awesome, Michelle!

Leave a Reply to Michelle Cancel reply

*

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>