What is Processing & Why Do We Teach it to Kids?

Written by Cristina Calabrese, Director of Operations & Founding Member at The Digital Arts Experience – Friday, Jan. 24th, 2014

When I first heard about Processing 6 months ago, I had no idea what it was. Did it have to do with writing Microsoft Word Documents? Was it about typing? Is it related to my computer’s quad-core processor? Nope.

One of our programming instructors, Byron, describes it nicely in his course syllabus:

“Processing is an open source, free to download language. It was developed to initiate non-programmers into computer programming through the instant gratification of visual feedback. It is a simple language branching from Java. Thus the learning curve for future language learning is dampened by playing in this colorful environment.”

Still not sure exactly what it is? That’s okay! After reading a little bit about it, I too was not entirely sure what Processing is used for and why it exists. When Computer Science Education Week hosted “The Hour of Code”, I stumbled upon Khan Academy’s Introduction to Javascript and proceeded to take their series of lessons to start me on my journey. So wait a minute, is it Processing? is it Java? is it Javascript? What’s this all about? HELP!

Introduction to Processing.js / Javascript
Khan Academy’s Hour of Code: Introduction to Javascript

Processing is based off of Java; which is why it’s kid friendly. The syntax and code is broken down a lot more and is easier to read and write.

Processing exports into Javascript, which can be embedded into websites. Did that spark your interest?

Processing provides instant feedback. As soon as you input your code, you will immediately see what you’ve created. Colorful shapes, animations, visual effects and more.

For example, to create a rectangle, you’d simple type:

rect(200, 100, 40, 75);

rect = Draw Rectangle. The 4 numbers are the x-coordinate (200), the y-coordinate (100), the width of the rectangle (40) , and the height of the rectangle (75). On Khan Academy, your rectangle will end up looking like this:

Computer Programming for kids

    Using Khan Academy’s Computer Programming lessons, learn how to draw shapes and create art using math!
  • You can create video games.
  • You can program your computer to do your homework.
  • You can create colorful shapes and art.
  • You can create 2D animation and visual effects.

…all while using math, algebra and basics of code logic.

Khan Academy was an EXCELLENT resource for me in my first real adventure into the world of coding. It is completely free to join and their mission is simple:

“We’re a not-for-profit with the goal of changing education for the better by providing a free world-class education for anyone anywhere. All of the site’s resources are available to anyone. It doesn’t matter if you are a student, teacher, home-schooler, principal, adult returning to the classroom after 20 years, or a friendly alien just trying to get a leg up in earthly biology. Khan Academy’s materials and resources are available to you completely free of charge.”

It took me about 4 weeks to complete all of their lessons and training, but I’ve learned so much along the way. And I’ve also created some really neat programs! Want to see my latest work? Check out this simple painting app that I programmed a few nights ago. Complete with “The DAE’s” staple logo colors blue, pink, green! Additionally, I urge you to sign up for KhanAcademy for free, too and check out all of their amazing programs, tutorials, lessons and more!

Basic Painting App! Made by Cristina.

Now that you have a better understanding of the power of processing, it should be a no brainer as to why we’d want to teach this to kids! It gets them involved in the world of coding without the intimidation of some of the harder languages such as C++ or Java. It teaches them the logic and understanding behind code while allowing them to explore creative outlets. (All while using math! Wow!)

Here at The DAE, we’ll be running a number of Processing classes for kids and teens ages 8 – 17 in Westchester, Fairfield and Rockland Counties. See our upcoming course schedule below:

AFTER SCHOOL – REGISTRATION FORM

Thursdays, 4:00-5:30PM (Ages 8-12) 02/13 – 04/10

Thursdays, 6:00-8:00PM (Ages 13-17): 02/13 – 04/10

WEEKENDREGISTRATION FORM

Saturdays, 10:00AM – 12:00PM (Ages 8-12) 03/01 – 04/26

Saturdays, 12:00PM – 2:00PM (Ages 13-17) 03/01 – 04/26

SCHOOL BREAKREGISTRATION FORM

February 17th – 21st – Ages 10-16

9:30AM – 12:00PM: Computer Programming with Processing

12:00PM – 1:00PM: Lunch & Activity Break

1:00PM – 3:30PM: Computer Programming with Processing

Advertisements

Adobe AfterEffects Side Scroll Project at The Digital Arts Experience

The Digital Arts Experience of Westchester County recently finished an after school 2D Animation/Visual Effects teen class using Adobe AfterEffects. The goal of the final project named Project Scimenatar was to use all of the skills they learned and apply it towards creating their own side scroll video game.

We asked our Animation instructor, Nick Sceusa, who was recently interviewed by opensource.com based on his experience in teaching our 3D Animation class with Blender, to tell me about his experience in the 2D class. According to Nick:

The sidescroller idea came about a little over halfway through our current session. We had been learning After Effects with mini projects and it was going okay, but there was a definite lack of excitement. I needed to come up with a project everyone was interested in and could work on together. Me and the students always chatted during our breaks and I had a pretty good idea of what they were all interested in. I’m not sure when the “a-hah” moment came around, but this project came out of that need to make the class more interesting and engaging.

The first thing we did was sit down and plan out what we wanted to happen in our “game”. The number of enemies, what obstacles do we want, should we have health bars, what weapons should we have etc. All those little details were worked out beforehand and checked with how much time we had to work with. Once that was done, we moved on to storyboarding, which is essentially a visual representation of your script. In our case the script was: destroy all enemies. The storyboard allowed us to plan things out visually and served as a guide during the production phase.

The storyboard process.

The storyboard process.

Once we knew what would happen during the game, we moved over to the photo studio at The Digital Arts Experience. A green screen was setup and each student posed for whatever action they needed during the game.

Stephen poses in the Photo Studio for his 2D Animation class project at The Digital Arts Experience in White Plains.

Stephen poses in the Photo Studio for his 2D Animation class project at The Digital Arts Experience in White Plains.

Things like jumps, shooting, melee attacks etc. Every action required at least one photo. Some actions such as walks needed two. After getting our main cast captured additional characters and items such as the goombas and background were needed. Images from online were used for photo tracing in Adobe Illustrator and hand drawn images were scanned into Photoshop for coloring. This allowed students to work comfortably in a medium they were comfortable in and learn a bit about an additional program that works well with After Effects.

Now we moved into After Effects. The first thing we did was get our characters setup. After importing the original images we ordered and renamed them according to the pose This way we could call up the pose we needed at any time in a different composition within the project. Take a look at this photo of one my students Maggie:

1)This is the original imported image:

The original photograph in our studio

The original photograph in our studio

2)After being imported the green background is removed:

The green backdrop is removed

The green backdrop is removed

3) Accessories are added if needed:

Maggie gains a red lightsaber.

Maggie gains a red lightsaber.

4) The character is dropped into the background:

Background scenery is added.

Background scenery is added.

Each pose or image required these steps. After that each characters motion (enemy, obstacle etc) was animated by calling up a different pose, and moved within after effects. We also did some effects work and some sound design to really give the project some pizazz!

Overall, I’m very happy with the way the project turned out. The students did an amazing amount of work within a short amount of time. In fact this project ending up being so fun that I will be using this project in any future after effects class I do.  Thanks again to Maggie, Kendrick and Stephen for making it a fun project.

Check out the final project here:

 

The Digital Arts Experience (The DAE) is a community focused learning & production facility located in downtown White Plains that teaches courses for kids, teens and adults in Animation, Graphic Design, Moviemaking, Photography, Web Design, Blogging, computer/smart phone basics and more. In addition to teaching classes, The DAE also offers creative and design services to help your business grow. With their in-house professional photography/video studio, fully equipped recording studio, 4 computer labs with all of the latest professional software and industry active staff, The DAE prides itself on being not only a resource for the community, but a productive place you can go to meet other like-minded individuals who share your interests.

Starting the 2nd week of July, The DAE will be running Summer Camps for kids. The summer programs are designed to engage your child in fun, skill building multi-media projects in their chosen area of interest in either: Animation, Graphic Design, Photography, Moviemaking or Web Design. The classes are small with a maximum of 6 kids, 100% hands on and focus on collaboration so your kid/teen will develop social, technical and creative skills, and also leave with completed projects for a portfolio or college application! Check out The DAE’s summer promo video.


Stop by at any time for a tour of its brand new, state-of-the-art 8,000 sq. ft facility, or feel free to call 914-644-8100, e-mail info@thedae.com, or visit www.TheDAE.com for more informati