Processing as motivation tool for teenagers learning programming


#1

Hey!

I’m a programming teacher working at a technical institute in one of the poorest areas in Brazil. These institutes are a federal government initiative to bring technical education nation wide, so when teenagers finish high school, they have a technician diploma. I teach in the informatics course, which focuses in software development (they have subjects such as algorithms, databases, web programming, and computer networks).

I’ll first tell you about the problems that I face as a programming teacher, and then how I thought about trying to overcome them. So, please, bear with me in this part that doesn’t talk about coding. :slight_smile:

I’ve been using Processing as a motivation tool for about a year now. I show them stuff that I’ve done – simple stuff, such as games made out of geometric shapes – and they become very interested in learning more. They want to do something similar to Flappy Bird, Tetris, Space Invaders, Counter Strike (I’ve heard that)… But then the steps to get there scare them. A simple implementation of collision detection makes them lose focus.

I have brilliant students, but they are few, and they don’t need motivation to code. I want to motivate the greater part of students who don’t do well. Remember I said that I teach in a poor area, and because of that, most people can’t afford to have quality education. So most of them get to the institute with poor understanding of basic concepts in maths, for example. They hate subjects such as maths and physics. Also, they are easily distracted by modern stuff, like Instagram and Facebook. They want to post their Processing animation they made of a ball bouncing up and down, but as soon as it gets complicated, their focus is gone.

I faced yet another problem last year. Their former teacher decided to use Pascal as introductory language. They hated it, and complained to me every day since I started working with them. One of the students confessed to me one day the she felt embarrassed, when her cousin asked her what she did in this programming course, and she showed him an algorithm to tell whether a string is a palindrome or not. She said she felt that programming was useless. This day was when I decided I had to do something. I talked to my colleague; we share the class, because there are over 30 students, and one teacher alone can’t give attention to all of them.

We talked about using another approach in programming classes, because we were adopting the same approach that our teachers took with us over 10 years ago. I suggested Processing, because it feels several gaps: 1. It gives them a sense of accomplishment, by making something they can see working, 2. Color, shapes and animations seem to be a better approach at coding than text input/output, 3. No extra configuration needed, the IDE does it all.

It seems perfect, but then I thought about the classes they are going afterwards. They will need to learn JavaScript and work Node.js, write SQL scripts, write shell scripts. Will it be more difficult for them to deal with more complex concepts after working with something so fun, as I think Processing is?

What approaches do you think are good to motivate teenagers to program? What do you think about using Processing (it doesn’t matter if Java or Python) as an introductory language for teenagers in the context that I told you? Do you know of another teachers in a similar situation to mine? Any success stories in using Processing with teenagers?


#2

This is such an interesting post, thanks so much!

This is a common problem, where novices take on much larger projects than they should. I think it’s important to expose them to the process of breaking things down into smaller pieces and taking those pieces on one at a time. You might get them to draw a scene from one of these games instead of trying to implement the whole game.

Honestly this is one of the things that I wish Processing did a little better at: making it easy to share your sketches. You could point them to Open Processing, which is a site that allows you to post Processing sketches. You could also have them use Processing.js, or post their projects to Game Jolt or itch.io.

This is one of the things I hate about “traditional” computer science education. It’s too focused on command line programs that aren’t actually interesting to anybody. This is also why I love Processing so much: it allows you to write very simple programs that are visual and interactive, which is way more interesting than the more traditional beginner programs used in education. I agree with everything you’ve said.

Another thing I love about Processing is that it makes it easy to “graduate” to more advanced languages like Java or JavaScript. I would recommend using Processing to learn the basics, and then building on that foundation to learn other languages. After all, a for loop in one language looks pretty much the same in another language.

Think about it this way: languages are like tools. Different tools are good at different jobs, but learning about one doesn’t make it harder to learn about others. In fact, it makes it easier! Learning how to use a hammer doesn’t mean you can’t later learn how to use a wrench.

I’m not actually a teacher (I do outreach program stuff but I don’t teach in a classroom). But I definitely think Processing is a great way to teach an introductory programming course.

You might also check out Daniel Shiffman and his YouTube channel, Coding Train. He has a ton of videos that take you from the absolute basics to much more advanced stuff, in both Processing and P5.js.

And of course, you can also use the tutorials as a guide on how to structure your curriculum. I’d love to help out in any way I can.


#3

Thank you for your response!

This is a common problem, where novices take on much larger projects than they should. I think it’s important to expose them to the process of breaking things down into smaller pieces and taking those pieces on one at a time. You might get them to draw a scene from one of these games instead of trying to implement the whole game.

Another problem that I noticed is that they cannot generalize. Say I taught them about arrays, how to iterate over arrays, and performs operations on array elements, like add 1 to each integer on an array. When I ask them to use arrays to store elements in another context, such as coordinates, to draw elements on the screen, then they say it’s too complicated. (I’m just venting here, because I don’t expect the solution to be easy).

Honestly this is one of the things that I wish Processing did a little better at: making it easy to share your sketches. You could point them to Open Processing, which is a site that allows you to post Processing sketches. You could also have them use Processing.js, or post their projects to Game Jolt or itch.io.

Thanks for the websites suggestion. I’ll point my students to them as soon as they finish their project.

This is one of the things I hate about “traditional” computer science education. It’s too focused on command line programs that aren’t actually interesting to anybody. This is also why I love Processing so much: it allows you to write very simple programs that are visual and interactive, which is way more interesting than the more traditional beginner programs used in education. I agree with everything you’ve said.

Another thing I love about Processing is that it makes it easy to “graduate” to more advanced languages like Java or JavaScript. I would recommend using Processing to learn the basics, and then building on that foundation to learn other languages. After all, a for loop in one language looks pretty much the same in another language.

I’m still afraid of using it as introductory language and it backfiring later. This programming course is one year long (holidays in between). They will have 2h30 long classes per week. I know I can cover Processing in less than one year, even introducing more advanced stuff (which deviates from the introductory programming course syllabus). Me and my colleague have been discussing about what’s the best approach: 1. One-year long Processing course using Java, so they could also run animations in mobile (considering that Java inside Processing isn’t too complicated, maybe that’s doable); 2. Three quarters of the year using Python, the traditional way, then one quarter using Processing with Python; 3. A variation of 2, but dedicating more time to Processing.

If we decide to use Processing all year long, I fear that they won’t be able to generalize later. I’m talking about a group of teenagers, from which many won’t program when they get home. They will work with something for one year, then have more complicated stuff coming to them in other years.

You might also check out Daniel Shiffman and his YouTube channel, Coding Train. He has a ton of videos that take you from the absolute basics to much more advanced stuff, in both Processing and P5.js.

I think Daniel Shiffman is great, and I learned a great deal of what I know in Processing from him. I introduced him to my previous students, although English is not their primary language – I told them to use the auto-translate feature on YouTube to translate the subtitles. I believe some of his videos have actual subtitles (not the automatically generated).

And of course, you can also use the tutorials as a guide on how to structure your curriculum. I’d love to help out in any way I can.

Thanks, again for your response! Your tutorials will be of great help.


#4

Hey Kevin,

Could you comment in the outreach coding program that you do with Google? I ran into a person at my local library that organizes sessions for the community to do coding but they are scarce and they do not follow a structured program, which makes teaching to be very challenging. I am curious how you approach this via Google.

Kf


#5

I’m not sure how much I’m supposed to say publicly because it’s currently an invitation-only program without any public site, but I’ll say in general the goal of the program is to identify university students who show a lot of potential, keep them engaged, and give them an opportunity to practice their skills on a group project.

I actually use a lot of the server tutorials and give the students a servlets-based web app to work on. During this session, we’re having them work through a set of guided projects and then letting them do whatever they want in an open project.

I’m also currently working with a Processing fellow to put together an official Processing curriculum based on the Processing tutorials. Hopefully more on that soon!

(The outreach program at work has kept me pretty busy which is why I’ve been away for a couple weeks, sorry!)


#6

Wow, great info. If you release your project related to processing, I wouldn’t mind to have a peek or even try to run it in the local community.

I am becoming very interested in server applications atm. The community I am involved with are all node.js and I got my first exposure to server side using php. I remember you do all your server side using java. Let me ask few more questions:

[Q1] Serving pages (pure HTML), processing request (lique SQL) to build pages and then deliver, can all be done using servlets, right? When you send a page, you will send the HTML code? That is what I did in php.
[Q2] Servlets can also be exclusively used to build REST APIs, right? Are Rest API a subset of web apps?
The concept of Rest API is still alien to me. I will need to build my first one to have a better understanding.
[Q3] What hosting services do you use for your server code (or what services do students use)? I am guessing AWS or Heroku could be two options for hosting? Do you recommend one over the other?

I still need to read your servlet guides. But so far I find that php or probably node.js to be the way to go as I want to use it to support my future projects.

Cheers,

Kf


#7

Yep, the idea is that it would be a public curriculum that anybody can use. I’ll definitely keep you updated.

Yeah, you can do all of that with servlets. You generally do the processing in a servlet and then forward the request to a JSP page for rendering, which outputs the final HTML.

Sure, you can use servlets to create a REST API. The term “web app” isn’t really a specific term, so it really depends on the context. Here’s a REST tutorial:

I’ve used a bunch of different providers. AWS and Google are both good options. Here are tutorials for both: