Playful Programming and Cool Code: From Tech User to Tech Creator

By Amy Cowen on July 30, 2013 9:00 AM

A move is on in the worlds of tech and education, a push to show students that learning to code is important, fun, and maybe not as hard as they think! Exploring code is easier today than ever, and even students who may not be thinking yet about career paths stand to gain valuable thinking and reasoning skills from learning, practicing, and using fundamental programming skills.

Getting Started with Scratch
Interested in exploring what is means to create a computer program? Scratch makes it easy to get started. See our review of Super Scratch Programming Adventure! in "Super Scratch Succeeds in Scratching the Surface of Code with Cartoon Fun."

Thinking Like a Coder

According to Mitch Resnick, director of the Lifelong Kindergarten group at MIT Media Lab, kids gain valuable skills from learning to "write" with new technologies rather than just use (or "read") them. They learn more than nuts and bolts, variables and logic, says Resnick. They are "learning about the process of design—how to start with the glimmer of an idea and turn it into a fully fledged, functioning project." This ability to take an idea and set up the steps necessary to make it work, block by block or line by line, testing and troubleshooting along the way, is important in all engineering design projects, including computer science projects. Through coding projects, students also learn how to take complex ideas and simplify them, breaking them down into smaller parts that can be tackled, one by one, as a whole is being built.

Mitch Resnick TEDx talk / Scratch/ Learning to Code

"How is it that young people spend most of their time using new technologies? There's no doubt that young people are very comfortable and familiar browsing, chatting and texting, and gaming. But that doesn't really make you fluent." ~Mitch Resnick, creator of Scratch

Blip. Beep. Left turn. Pen down. Move forward ten steps. Repeat if x is true and then turn ninety degrees and move twenty-five steps forward. Blip. Beep.

You want your sprite to use a pink marker?

No problem.

Prefer a quacking duck sound instead of a beep?

Sure thing.

Rather draw triangles instead of squares?

Change the angles.

You want to keep score?

Absolutely!

When you know how to tweak the code, you are at the helm of the program and, with a bit of trial and error, a dash of creativity, and a splash of innovation, you can build a program to do exactly what you want it to do, whether that means creating a video game, making an animated flip-book story, exploring fractals, making a digital animal dance to songs on your favorite playlist, or sending a "just because" interactive postcard to a friend.

As more and more kinds of technology and devices become a part of our daily lives, knowing how to code threatens to become a marker of the haves and have nots—those who "have" the ability to code and those who do not.

Luckily, learning to code is easier today than ever before. There are plenty of tools and a wide range of challenges designed to spark interest. But are students getting the encouragement they need to shift them from play to program mode? What is at stake if today's youth continue to take in more and more technology, passively absorbing new games, features, and apps, but never explore what makes those games, features, and apps work?

Teaching Kids to Write (Code)

In his "Let's Teach Kids to Code" TEDx talk last November (2012), Mitch Resnick, developer of Scratch (a project of the Lifelong Kindergarten Group at the MIT Media Lab), talked about the critical importance of teaching kids to code. By virtue of kids who had used the Scratch programming environment to build apps with a Mother's Day theme, Resnick forwarded on a tribute to his own mom, saying "Look Mom... look what I did... what I enabled" as a way of acknowledging her on Mother's Day.

Further fueling the growing teach kids to program fire, Code.org released a video titled "What most schools don't teach" earlier this year. The video features heavy hitters in the world of code, including Bill Gates (Microsoft), Mark Zuckerberg (Facebook), Drew Houston (Dropbox), Vanessa Hurst (Developers for Good), and others, joined by pop culture icons like will.i.am (Black Eyed Peas) and NBA star Chris Bosch (Miami Heat), all talking about the importance of learning to code. Though primarily a talking-head video, the five-minute short is engaging, fast-moving, speaks directly to kids, and stresses, with plenty of big smiles, that coding is fun, easy, and at the heart of (or underneath) pretty much everything in today's increasingly high-tech world. Throw in the words "free food" and shots of hip working environments, complete with hip employees zipping around on scooters between cubicles, and the video gives programming definite allure, a bit of glamour, and a level of intrigue.

Coding might not be what you think, implies the video.

Coding might not be as hard as you think.

Coding might be fun.

Coding might be worth... a look.

Coding might be... for you.

A look at the "quotes" page of Code.org shows dozens of other thought leaders and educators chiming in with similar encouragement and advice for kids interested in computers and programming. Whether they come at the issue from personal history, concern for the future, or hope that more students will pursue science, technology, engineering and math (STEM) careers that involve computers, the message coalesces into a unified mantra: code is cool, and students need more opportunities and support to learn to program.

Demystifying Code

"Addition, subtraction... that's probably about it," says Gates. Tony Hsieh (Zappos) follows with, "You should probably know your multiplication tables." The message: it isn't as hard as you think.

"It started off because I wanted to do this one thing. I wanted to make something that was fun for myself and my sisters," says Zuckerberg. The message: don't get overwhelmed by thinking of programming as a whole. Think of making just one thing happen on the screen—and go from there.

"Whether you are trying to make a lot of money or whether you just want to change the world, computer programming is an incredibly empowering skill to learn," says Hadi Partovi, founder of Code.org.

Tic-tac-toe. A favorite color quiz. Making a green circle show up on a red square. The classic, "Hello, world." These are some of the coding projects the people in the video remember as their first, the "a ha" or "wow" moment when they realized they could enter a simple string of commands and cause something specific to happen on the screen. With code, they could control what happened on the screen. In each case, the starting project was simple and accomplished something trivial, easy, or purely whimsical.

That is where you begin, at the beginning.

Tech Users and Tech Creators

We know that kids are growing up as tech-savvy users and consumers, devices in hand, thumbs at the ready, and hooked into a spider web of social networks. Yes, kids are tech users. But what Resnick and others are pushing is the move from user to creator, from player to developer, from passive to active, from consumer to builder.

When it comes to technology, Resnick likens the current student landscape to one of being able to read but not write.

Young people have "lots of experience with interacting with new technologies, but less so with creating with new technologies and expressing themselves with new technologies. It's almost as if they can read but not write with new technologies," said Resnick in his TEDx talk.

Code Literacy

How do parents and educators help students flip the switch and support students making the move from player to creator? Understanding what's available is an important part of the equation. While programmers a generation ago may have cut their teeth with typing in lines of code to generate "Hello, world" on the screen, today's young coder may never even see a "Hello, world" example.

Many of today's coders are learning to code within a graphical user interface (GUI) that masks the code behind a colorful, friendly, often block-oriented and drag-and-drop environment. Many of these environments and languages are inspired by Scratch, and with these tools, designing a program can be as easy as moving blocks around on a screen like puzzle pieces, locking them into place in units, wrapping sections in other sections, setting values for variables and controls within the blocks, and creating logical relationships and steps to "run" the program all from a top-level view. The message: You don't have to "write" the code, just put all the blocks in place in the right order.

What next?

Press the "go" button, green flag, "run," or "start," and see what happens.

Doesn't work right away?

Try and pinpoint what isn't working, and then look at the blocks to figure out what may be missing or misconfigured. What else do you need to tell the program so that the behavior matches what you had in mind?

Debugging in a visual environment is much less about spotting a missing semicolon or a typo than it once was. An error on line 935? Maybe, but the budding programmer won't necessarily see that. In block-based building environments, student coders won't scan thousands of lines of code to locate and tweak a problem. Instead, a student coder faced with a program that is not working focuses on thinking through the logic of the program. What isn't working and why? What can I do about it? Which block isn't working? The environment helps make sure pesky typo-oriented bugs are kept out of the way so coders can focus on the functionality—the fun stuff.

Making changes can be as unfettered as dragging in a new block or changing the value of a variable on an existing block and then "running" the program again. With today's environments, the iterative loop for testing and development is streamlined and pretty unintimidating, which may lower the bar for getting kids interested in giving programming a try. Results are immediate. You can stop and run through the program or game at any time to see how things are going. And, maybe, little successes spur students on to add other levels and layers of embellishment, interactivity, and functionality.

Step by step, block by block, small programs can morph into bigger ones.

Coding Science Projects

Whether you or your student wants to explore programming or video game design for fun or as the basis of a science fair project, Science Buddies has plenty of resources and Project Ideas to help guide a hands-on, independent at-home activity or to serve as the foundation for a school project.

The sample Scratch application shown in the screenshot above uses a math equation to tell the cat sprite to walk in a circle. This sample program was created by Jurand Nogiec, a volunteer from Motorola Solutions, Inc.

Block by Block

Scratch is based on Logo, a block programming language developed at MIT in the 1960s by Seymour Papert and others. Today, there are many environments based on Logo and/or inspired by Scratch, including Tynker, a new web-based environment that aims to support student programming.

Figuring out where to start may be half the challenge! The Web? Mobile apps? Video games? Computer apps? JavaScript? HTML 5? Sampling some of the possible avenues may be in order as you consider where to focus your energies, but in many cases, the kinds of logic and thinking you will use when working with one program or language will carry over and be useful as you try another program or language. Sampling won't hurt you!

The following Science Buddies Project Ideas involve Scratch, GameMaker, or JavaScript, a few of the ways students can get started learning more about programming:

Quick Draw McPaws: Teach A Computer Kitty How to Draw Shapes: learn how to draw shapes and work with "go to" and "pen down" blocks in Scratch.
Want To Make a Video Game? Here's How!: use Scratch to create a game of chase between a cat and a dog. This project is a great introduction to using Scratch for video game design!
Make a Greeting Card Come to Life!: experiment with Scratch to create an interactive digital greeting.
Pinwheel Magic: Take a Spin with Animation: learn to integrate real-world input by creating a pinwheel animation in Scratch that will spin in response to user input from a PicoBoard.
Customize Your Own Drum Set!: bridge the real world and software by creating a Scratch program to turn your real drum set into an electronic drum pad.
Power Play: How Does Animation Timing Affect Your Perception of Game Action?: experiment with the timing of game movements in Scratch.
Go Fish! Creating an Ocean-Friendly Fishing Video Game: use GameMaker to create a game on a subject of interest or with an educational theme.
Making It Real: Incorporating Physics in Video Games: explore the role of physics in a video game you design using GameMaker.
ABC's of Programming: Writing a Simple "Alphabetizer" with JavaScript: use JavaScript to write an alphabetizer.
Paragraph Stats: Writing a JavaScript Program to 'Measure' Text: use JavaScript to count the words in a block of text.
Bits, Bytes, and Bases: Write a JavaScript Binary/Decimal/Hexadecimal Converter: use JavaScript to make a useful converter tool.
Encryption *: use JavaScript to explore adding encryption to data.
Game of Life *: use JavaScript to create a game.
Program to Check a Sudoku Solution: use JavaScript to write a puzzle checker.
Follow the Bouncing Ball: A Web Animation Project: use JavaScript to control the movement of a ball across a browser screen.

In addition to the projects above, see the following Science Buddies resources and user guides for students interested in computer programming, app development, and video game design:

Blog post: Computer Programming Basics: An Hour of Code
Blog post: Drag-and-drop Code: Engaging Students with Computer Programming
Resource: Kid-Friendly Programming Languages: suggestions for languages/programming environments for K-12 students interested in making video games.
Resource: Scratch User Guide: coverage of Scratch basics, installation, and troubleshooting.
Resource: GameMaker User Guide: links to tutorials, examples, and other resources for GameMaker.
Resource: Tips and Resources for Making Video and Computer Games: helpful information and links to resources that help define what makes a good video game.
Resource: Resources for STEM Education Through Video Game and Animation Creation: an overview of tools for teaching video game design and discussion of how the process helps support STEM learning.
Blog post: Student Video Game Creators Get Their Game On: overview of the annual National STEM Video Game Challenge.
Blog post: Video Game Design Summer Program: Week 1: follow along as an elementary student gets started with an online video game design program.
Blog post: Slingshot Science: The Physics in Angry Birds: consider the ways in which video game design and programming intersect with other areas of science.
Blog post: Mom of Two Emerging Video Game Designers: an inside look at raising kids who are interested in programming and game design.

For additional suggestions, click the "Learn" tab on the Code.org site for a list of apps, tools, and languages, including apps designed to help students explore coding for mobile platforms like iOS and Android. GameSalad is a popular coding environment for iOS development (for coders age 13 and older). Others to explore include App Inventor (for Android) and Codea (an iPad app for iOS development). For younger developers, Hopscotch is an iPad app that lets kids age 8-12 create short animations and games.

If you experiment with Scratch, GameMaker, or JavaScript using a Science Buddies Project Idea, we want to hear how it goes and see your game or screenshots of your work! To share with us, email blog@sciencebuddies.org. We would love to spotlight your work here at Science Buddies!

(Note: not all of the programs and apps mentioned in this article are free. Demo downloads or limited-play installs may be available; prices vary. Scratch and GameMaker Lite, both of which are used in Science Buddies Project Ideas, are free. Scratch 2.0 is now an online environment; Science Buddies materials were written for Scratch 1.4. The downloadable 1.4 version is still available, but you can use Scratch 2.0 with the Project Ideas as well.)

Science Buddies Project Ideas in computer science are sponsored by Symantec Corporation.