Rotoscope animation (drawn over video) of Mrs. Fuglestad and steamy hot cocoa
My third graders are going to explore the primary & secondary colors, complementary colors, patterns, rotational symmetry, while learning the geometry of a circle in these color wheel paintings. Then they will be compared to op art as students rotate and digitally fall into them using Do Ink drawing and animation app on the iPad.
Analogous colors are next to each other on the colorwheel.
Student Art: view the gallery
Resources:
Students use patterns to fill these cats. This Fugleflick, Repeat, talks about line, color, and shape pattern. See my students working while listening to this music video.
Repeat from Tricia Fuglestad on Vimeo. Other Cats (safeview)Digital Version of this lesson:
Make the Painting Move:
Here is the new digital extension animation plan: Import the digital picture of student art into Brushes Redux. On a layer over the image, recreate the center figure by tracing. Save this image as a png with a transparent background. Then mask out the same figure from original painting and redraw the color and pattern the figure had covered. This forces the student to consider the elements of foreground, overlapping, color, and pattern in a dynamic way. Save the masked painting to the camera roll. Import both images into the Do Ink animation and drawing app in composition mode. Set an animation path and add rotation to the figure. Save this as a video. Here is a quick overview tutorial of all the steps here.
Trace, match the colors, and recreate the center figure on a new layer in Brushes Redux. Save PNG
Don't crop so the figure remains in the same aspect/place it was in the painting
Match colors and mask over the figure, redraw what would have been behind the figure
finished animation
I've been thinking that the figure without pattern would be best to isolate in this process. But, what if that figure is not in the foreground. Does it still work? Why not just isolate the most foreground figure regardless of pattern. Students could redraw the pattern digitally. I wasn't planning on this digital extension when I was instructing students in the design of their lesson. (Download the lesson here from TpT) If I were to do this again, I would have students make the unpatterned figure in the center also in the foreground to make this digital animation a bit easier for them.
Students Working:
Turn up your volume. Yep, it's perfectly quiet. Every single student is digitally painting. They understand the app interface, the concept, their purpose, & the overall goal. They are THINKING LIKE ARTISTS as they digitally create. This is what I've wanted to see for 18 years. This is the results of digital art projects since these 5th graders were kindergarteners. This is the results of being an iPad art teacher for 7 years. This is AMAZING! They are feeling right now how cool it is to work in such a forgiving media. They didn't appreciate the possibilities of the media when they struggled with the tools. Now, the struggle has ended with a hush as they drift into a calm flow of art-making.
Thinking Like Artists from Tricia Fuglestad on Vimeo. Finished movies
Patterned Animation 5-1 from Tricia Fuglestad on Vimeo. Patterned Animation 5-2 from Tricia Fuglestad on Vimeo. Patterned Animation 5-3 from Tricia Fuglestad on Vimeo. Patterned Animation 5-4 from Tricia Fuglestad on Vimeo. 
This DANCE PARTY was inspired by the Christmas dance party scene in the Peanuts animation where each child is dancing in place on the dance floor in a continuous loop. We can try something similar using the Do Ink Animation app with these steps:
1. Get inspired by Peanut's Dance Party2. Each student creates one dancer
1. Open up Do Ink Animation app and chose a "new drawing"
2. Choose brush size 5 and black and draw your first pose with closed shapes (so you can pour for coloring later) 3. Click the + in the timeline (bottom right corner) and draw the next pose 4. Repeat until you have 5 poses 5. Use the pour bucked and color each frame with the same color scheme. 6. Click on pose 4 in timeline, chose the double arrows to reveal "copy" & choose it 7. Click on frame 5 (last frame) and click "paste" 8. Click on frame 3, choose "copy". Click on last frame (now frame 6) click "paste" 9. Click on frame 2, choose "copy". Click on last frame (now frame 7) click "paste" 10. Click the play button and see if the animation loops nicely
2. Share the Do Ink Files
One of the cool things about the Do Ink animation app is that you can share your files from one device to another. We used the DropBox in my art room so students would save their animation using "DATA" then choose "Dropbox" and navigate to the Dance Party folder, rename it and save.
Sharing our original Do Ink files means that we and put together a group animation with multiple dancers while retaining all all layering, resizing, and editing functions.
3. Bring the dancers into 1 composition
4 dancers in one (16:9 ratio) composition with empty background
4. Flipbook designs w/lines & shapes
Students can work in pairs on designing a shape or line design for the background of their party. It's helpful if they choose 16:9 ratio as they create. I would recommend NOT using black in the outlines or anywhere. It will look too busy in the final piece and visually confuse the viewer since the figures are outlined in black.
5. Layer in & fade the background
Use the gear to select transparency in and out on the background layers
Dance party: 4 dancers, two backgrounds, one floor with a background color
Related Projects:
Alien Music Invasion post full of fun musical creatures
Click to see this project full of singing, dancing, and instrument playing aliens
Peanutize yourself like my students did using this link.
Resource: Learn about line and shape pattern with this fun (and repetitive) fuglelflick, RepeatRepeat from Tricia Fuglestad on Vimeo.  After 1st graders finish making their monochromatic fish paintings I have a new idea for them. We will learn to draw shapes into forms, create an interior space, fill it with pattern, and balance it with color using THE GOLDFISH, by Henri Matisse as inspiration. The fishbowl, however, will be empty at first.  Click to view the monochromatic fish lesson Below is a slideshow that leads students through the steps for drawing where they will turn a circle into a fishbowl, make an oval table, design a corner of the room, and use color and pattern in the style of Henri Matisse.
 Students will make their swim around in their fishbowl using the Do Ink Animation app  They will move it one way 2 seconds, flip it, and move it the other way 2 seconds  Digital Carpet Painting:
 I began coloring base colors and added line/shape pattern above on only 1/2 carpet  I duplicated the painting layer and used the horizontal flip button to create symmetry  The finished carpet is a symmetrical rectangle-not ready for flying yet. Adding Perspective:Before you can go on a magic carpet ride like Aladdin, you need your digital carpet painting in perspective so that you can view it from the side so you can climb aboard. I added my painting into the superimpose app over a plain color background. I found the tool mode for the foreground layer and chose perspective (the default). The configuration needed could be pulled and stretched by grabbing the handles on the image or you can chose a pre-created configuration at the bottom of the screen. I chose the one all the way on the right. Then, chose the checkmark to apply.  Superimpose App has a tool mode that allows you to add perspective with a simple button  Save the carpet in perspective with "save mask as png" to keep the transparent background Fly on carpet (using still images)This simple method will get your students up and flying without animating a background. They could pose as if they are riding their magic carpet paintings, use the superimpose app to layer their photo onto the carpet, and take it for a ride using the Do Ink Animation app over a background photo (like clouds). This would also create a fun still image for students' Artsonia gallery.  Moving Background Video:
 Clouds moving fast to show flying-created in Do Ink Animation App One really fun way to extend this lesson into geographic/cultural studies is to have each student draw a landmark that they could fly over: Eiffel Tower, Big Ben, Statue of Liberty, Mt. Rushmore, The Pyramids, Great Wall of China, Stonehenge Grand Canyon, Red Woods, Golden Gate Bridge, Taj Mahal, Hohenzollern Castle, The Leaning Tower of Pisa, etc. See this list of 15o famous landmarks. Film the Green Screen:
 Do Ink Green Screen App 1. background video 2.carpet in perspective 3. Green Screen Video
 Flying on a magic carpet Paper Cut Version: BACKGROUND: This version of the magic carpet ride lesson includes a paper cut landscape that shows foreground, middle ground, background in paper pieces. These will be animated traveling across the field of view through stop motion animation. It would be a great opportunity for students to show an understanding of foreground, middle ground, and background in the pieces they create and how they animate the scene.  Pieces needed for a paper cut animation of flying over the Hollywood sign  Hills in the foreground, sign in the middle ground, and sky in the background  I took 40 pictures in the iMotion App at 10 fps to make a 4 sec video GROUP ANIMATION: I'm thinking that the background animation would be a group project. Each group would work on designing, drawing, cutting, and animating their landmark landscape. Each student would make their own magic carpet video of themselves flying over their group landmark landscape. Therefore, the class compilation video will only have six backgrounds but 24 videos. MAGIC CARPET MADE FROM PAPER: A digital magic carpet wouldn't look right with a paper cut background. So, they would need to make a paper carpet in perspective. This is a great opportunity to teach students about a vanishing point, converging lines, and how pattern would be small in the back and large in the front (relative size).   Digital picture of the paper cut carpet. I erased the background in Superimpose app Since you are not going to use stop motion for the carpet, I just took a digital picture of the paper drawing and erased the background in the Superimpose app. It needs to be digital for the green screen effect where a student rides the carpet.
 Paper Cut Magic Carpet Ride with Stop Motion Animation and Green Screen FX Students Working 
Student Results: view the paintings on Artsonia
Finished: Riding over Landmarks3-1 MAGIC CARPETS from Tricia Fuglestad on Vimeo. 3-2 MAGIC CARPETS from Tricia Fuglestad on Vimeo. 3-3 MAGIC CARPETS from Tricia Fuglestad on Vimeo. 3-4 MAGIC CARPETS from Tricia Fuglestad on Vimeo. Resources:This link takes you to a travel website featuring 150 famous landmarks. Every student can feature a different landmark in the background video/animation. This would make the class video even more exciting as they fly over scenes from around the world.  View this safeshare.TV link of the "Whole New World" scene from Aladdin.  ..and other Individual Rotoscope Animation Ideas One of the super cool things about Do Ink Animation and Drawing app is that you can pull in photos or videos and draw over them. Drawing over each frame of a video is a technique called Rotoscope Animation. You probably have seen this technique in the famous music video from the 80's A-Ha's Take Me On. I also LOVE this music video and song by Andrew Huang, Every Night I Dream of Dancing, which is a rotoscope collaboration using 30 artists crowdsourced through the internet. I tried many ways to instruct my students to create rotoscope animations collaboratively, but I've yet to have them create their own...until now. I think I've come up with some ideas that can make this project manageable for very little people. Plan One: 1 second loops These 1 second animations loop nicely and can be converted to gifs
 Tutorial for Rotoscoping in Do Ink appPlan Two: Color the Loop
Plan Three: Add Rotating MandalasI began a new drawing (still in the Do Ink Animation app) and chose a fill and border color, and dragged out a shape to fill the screen. Then I added line or/and shape pattern. I made two of these patterned mandalas so that I could rotate them behind my rotoscope in opposing directions. The centers won't show much, so I focus the design on the edges.
 Three Layers Each mandala rotates once; one clockwise, one counter-clockwise
 This teaches: movement, rotation, layers, line & shape pattern, & rotoscope animation Plan four: Dancing SketchesSince the rotoscope animation has a built in transparency (the background is empty and see through) while it remains in the app, you could use this to create some very cool effects. One idea I've been playing with is to layer the rotoscope line drawing animation over a sheet of notebook or sketchbook paper. Since my drawing looks like it was made using a sharpie marker, I try to enhance that illusion by either leaving a marker on the notebook when I take the still image, or write with a sharpie marker alongside the animation. Below is my first rotoscope done this way, "How to Whip."  You can bring in still photos to your compositions in Do Ink then layer your Rotoscope over them
Did you see the video of the kids showing up at the end? That was an added step using the green screen app by Do Ink. I exported my sketbookbook video and put it in the green screen app and layered on the original green screen video, lined them up with the drawings. The only problem is that GS app limits you to three layers. I needed 4. So I "flattened" the video effect when I had two kids in place by exporting it. Then brought it back in to a new project and finished the third child's effect.  Gif: mixing physical and digital video. View the video below to hear the music.  Why use a sharpie if you can draw with your finger?  Using two layers of rotoscope animation one empty one with color-adding rotation  You can duplicate your animation and resize to make a synchronized dance party Animated Sketchnotes from Tricia Fuglestad on Vimeo. More Advanced ideas: animated sketchnotes Animated sketchnotes
 Drawing and animation interacting-extra step to create overlapping effect
 Use the composition mode of Do Ink to combine rotoscope, sketchbook drawing and masked sketchbook drawing. Create an animation path for extra movement
 Spooky Sketch that shows overlapping and relative size
 I flipped the butterfly animation by grabbing the corner and crossing over to the other side  butterfly animation over a sketchbook drawing
 Dreaming of Dancing
 A love story that isn't so alien to some of us  Chasing Alien part 2    Mini Digital Stories:mini digital stories from Tricia Fuglestad on Vimeo.  You can adjust the transparency of a layer of animation in the composition mode. Did this for the yellow light so that it looked like a transparent beam signalling a carrot for Carrot Boy  Turning on the lights (so much better with sound-see video)  My collaborative Rotoscope Projects: In 2012, my 5th grade students did a collaborative rotoscope animation project with every one of my 100 students drawing over 330 frames of video pieced back together to make the animation shown in the video below. We entered it into the McGraw-Hill STEMie national online contest and won the $5000 second place prize. This money became the seed money for our 1:1 iPad art room. As you can see from the post, the process was very complicated on my end since there wasn't an iPad app (yet) that allowed students to work over video. We filmed a video then ran it through a program (mpeg streamclip) to break it down frame by frame. Students were assigned frames, pulled it into their iPad from the dropbox, drew over it in Brushes app, turned it back into the dropbox with a number that placed it back into the sequence. I pieced it all back together on my computer using a gif maker to turn it into video. They explain below:   This past school year, I tried a different kind of collaborative rotoscope animation with my 5th graders: a rotoscope in a mutoscope (digital art made physical). This time we made 4 small videos (one per class) that would loop nicely into a hand cranked mutoscope kit by Flipbookit.com. These turned out to be very cool. The work again, fell mostly on me. I had to purchase and assemble the kit, prep the video through their online tool, print the images onto labels, and stick them on flip cards. The students each made one frame of the rotoscope, so they finished in one class period. I love the results, but the kit costs over $40, so students don't get to keep their work individually. However, they do have their still image posted on Artsonia with links to their video.
A cardboard whirligig creation that moves with stop motion animation
Connections: Kinetic Art & Automations
Thanks to Caren Long for sharing this movie. See her post and how she plans to make Whirligigs with her students HERE.
Make a Whirly-bird: plan
The challenge is to make a bird from cardboard that has moveable parts. There is a clear connection between drawing a bird and designing a whirly-bird since you just have to break everything down into shapes: head, beak, eye, legs, body, wings, tail. Each shape can be a piece to add back to the whole bird with brads instead of glue. The brads keep the pieces of the bird moveable like a whirligig. However, this whirligig isn't going to be able to move with the wind. It will move through the magic of stop-motion animation.
My design for a bird with moving parts from cardboard connected with brads.
I sized the bird from a 8.5x11 sheet of thin cardboard
Since I work with 100 students in each grade level, I have to figure out a way to manage resources and materials efficiently. This guide (below) can be printed on 8.5'x11" paper to help students make good choices for size, shape, and placement of holes/brads. This may help avoid mistakes from misplaced holes, working too small, or wasting valuable space on their cardboard sheet. I will encourage students to create their own designs and not use my sheet as a tracer so I will need to provide extra cardboard for their ideas.
This resource will help students with size, shape, and placement of brads
Build a Whirly-bird: lay out and attach
Checking the placement and sizes of pieces before I poke holes for brads
I poked holes first using a skewer. 3 layers was tight for my 1/2" brads (recommend 3/4")
Paint: prime, balance color, add pattern
Because cardboard can curl, I put gesso on both sides of each piece flattened them with books
I limited my colors, thought about balance, and painted a solid base coat on each piece
with only 3 colors I added line, shape, and color pattern to my design
Assemble & test: add brads & try it out
Whirly-bird assembled after I varnished and traced with black marker (optional)
Whirly-bird ideas: dance & weathervane
I used a kaleido free animation for the background-boy is that a flashy whirly-bird
I wrote a post about using this app for a collaborative dance video. It's very similar, so it can help you through the steps of using Do Ink, layering video, and organizing files.
Monochromatic landscape as a background for the stop motion using both Do Ink apps
Whirly-bird weathervane over landscape. Bkgrd=Do Ink drawing Layered= Do Ink GS app
This project would teach SO many concepts: silhouette, landscape, atmospheric effects, monochromatic, size, movement, pattern, balance, stop motion animation, and layering. I have a post and tutorial for creating a digital appalachian mountain landscape here.
Whirly-bug
This same concept translates well as an insect too. If students made a whirlygig insect then the lesson can have a science component to learn about the parts of an insect as they build. No, that's not a tail-it's a stinger. Sorry for the confusion.
Planning the whirly-bug with cardboard shapes
I used only three colors total. Began with base coats thinking about color balance
Used the same three colors and layered different kinds of pattern
I attached with brads then created a stop motion animation under an iPad in iMotion app
More inspiration:
Students Working
The Pouch Makes the Project Possible with all those Pieces
Used permapaque paint markers for patterns and coated the cardboard with mod podge
Dried shiny and a bit stronger. It made the surface smoother and easier to trace in black marker
We limited the whole design to three colors for the base colors and patterns
See the finished STILL image gallery
Working on Stop Motion Animation
Lessons learned:
Good examples:
Layered Display
Our finished stop motion animations needed a way to be shared collectively and into a class movie. Some classes might have enough time to put their whirligig into a frame with a layered project in the Do Ink green screen app. We would put the animation in the background layer, a room with frame in the middle ground (using green inside the frame), and a green screen video of the artist with smock and brush in hand on the foreground layer. Here is what it would look like:
Three layers reinforces foreground, middle ground, and background
When I had students come before the green screen for their artist video, I wondered how to inspire them to come up with a quick movement or response for the camera. Well, I was all wrong about them needing encouragement. They jumped in front of the camera and gave me the silliest and most expressive videos I've ever seen.
Student movies
4-1 Whirligigs from Tricia Fuglestad on Vimeo. 4-2 Whirligig Jig from Tricia Fuglestad on Vimeo. 4-3 Whirligigs from Tricia Fuglestad on Vimeo. 4-4 Whirligig Jig from Tricia Fuglestad on Vimeo.  2nd grade action pose paintings in the style of Keith Haring  Click to download this template from TPT This 2nd grade lesson introduces students to the artwork of Keith Haring. He made colorful painting with figures in action poses. I use this artwork to teach very basic figure drawing, complementary colors, primaries and secondary colors, action/ movement, positive/negative space, line pattern, and shape pattern. We begin by drawing poses using the help of a template students cut out and assemble by themselves. This template allows them to play with poses then trace the ones they like. Download the template.
Student Work: see gallery here
When students finished their paintings, they looked at them through 3-D glasses to see if the complementary colors made the actions poses even more vibrant.  Click to view the gallery of finished art on artsonia Finished stop motion animations:2-2 Stop Motion from Tricia Fuglestad on Vimeo. 2-3 stop motion from Tricia Fuglestad on Vimeo. MA2 Stop Motion from Tricia Fuglestad on Vimeo. The fifth graders from 5-1 used the second graders' step up one day and made this: 5-1 Stop Motion from Tricia Fuglestad on Vimeo.
Resources:
Digital Extension: Create it digitally
Digital Warm Up Drawing:
 When I stacked all the figures with similar colors they created the illusion of movement Digital Extension: Make and Move
 Students can use the template over a piece of construction paper and animate the figure against a complementary color background to demonstrate movement dynamically. I use the free app iMotion HD and have student make a short video. 30 images makes a 2 second video at 15 frames per second. I collect the individual videos for one class video.
|
Loading
Click to view links to 230+ of my STEAM art lessons here
We are the 2nd place winner of the ISTE Technology in Action Video Contest.
See my post for more info. Redefining the Art Room from Tricia Fuglestad on Vimeo. 
Art of Ed Interview on STEAM
Read our SPECT-ART-ACLES article in School Arts, May 2018
Read our School Arts Article April 2016 for an iPad lesson
Read our School Library Journal Article about iPads
Help fund this Science + Art project (click link)
Voting ended
Did you see our School Arts Article? April 2014
Did you see our School Arts Article? March 2014
Did you see our School Arts Article? Nov. 2013
Dryden Art 2013-14 from Tricia Fuglestad on Vimeo. 
View this musical tribute to the hard working teachers at Dryden and the students they love to teach.
Common Core Crazy from Tricia Fuglestad on Vimeo.  Mrs. Fuglestad. Click to see how I made this image. 
About MeTricia Fuglestad, NBCT 07 
Life is too short for long faces.
Archives
November 2018
Categories
All
 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. |
RSS Feed