Intro to programming via art


#1

I’m thinking of using Processing next year for my grade 10 intro course. Need to decide which language to go with – probably Python or JS.

I’d like to make it a girl-friemdly class, and I was thinking of focussing on generating art. I’m just wondering if there’s enough to fill a semester. Also, what is lost if I don’t have them creating more traditional programs.

Another option is to use JS, then do half the course in Processing and half doing web pages, another fun activity.


#2

In my humble opinion, this is a perfect use of Processing.

Shameless self-promotion: I’ve written a series of Processing tutorials which could be adapted into a curriculum, available here. That coupled with Daniel Shiffman’s videos would be more than enough to fill up a semester.

See also:

For an intro course I wouldn’t worry about it. Programming is not an either-or thing. Learning one language doesn’t prevent you from learning another language: quite the opposite in fact! Instead, focus on making the course engaging and interesting, which Processing is perfect for.

I love talking about this stuff, and I’d love to format my tutorials in a way that’s more usable as a curriculum, so don’t hesitate to reach out if you have other questions.


#3

@Kevin - great range of links! I’ve just been asked to put a workshop series for artists together (in PraxisLIVE, but mostly about Processing integration), and I’m definitely going to have a lengthier look through your tutorials - some of the better written I’ve seen.

I’d be careful about thinking of that as just “girl-friendly”. Aside from playing to gender stereotypes usually backfiring, programming is by its very nature about creative expression, and for that generating art and Processing are ideal.

(My usual conference talk spiel to programmers who don’t agree what they do is creative expression is to ask them to remove the copyright symbol from their code! :wink: )


#4

You have a lot of good options!

Python mode is wonderful, and I love working with it – it is also a great learner language. But there are some limitations to be aware of – many Python tutorials and online reference materials these days are focused on Python 3, but the built-in Processing Python mode is 2.7, and it is actually running on JVM (Jython) under the hood when it is transpiled – so there can be some gotchas. There are also nowhere near as many tutorials and examples for Python as there are for the default Java mode or for the p5.js JavaScript modes. Still – it is a real pleasure to code in.

p5.js: Sometimes students can be excited about the ability to share their creations – for that, p5.js is ideal, because it can always be published to the web without needing special exporting steps or infrastructure. There are also a lot of p5.js tutorials. In terms of a broad availability of multimedia libraries, options for p5.js aren’t always quite as robust as the Java mode, but that shouldn’t be an issue for your intro.


#5

If you are interested in gender-inclusive approaches to programming and engineering for kids, one interesting recent model is Hello Ruby, which is project-based and introduces a narrative frame and cast of characters to contextualize lessons. I noticed recently that Google does this as well in their foo.bar recruiting tool – it is a series of software engineering interview questions wrapped in a narrative about a supervillian attacking the Bunny Planet, and it is strangely compelling even for “children of all ages” like me…


#6

Oh dear, is Bunny Planet under attack again?? Those poor bunnies…! :rabbit::rabbit2::rabbit:


#7

I’ve been using Processing for about 4 years for my G10 course and do specifically teach it from an art perspective and it DOES engage girls.

I’m able to cover all the curriculum expecations and programmatic structures that would be taught in a more conventional format.

Assigment 1 - use graphic primitives to draw-your-timetable and then over-draw a picture file of a cartoon character loaded into the background. Helps students get used to x-y coordinates for graphic objects

Assignment 2 - quick looping assignment gets students using for or while loops to do the conventional celsius-fahrenheit conversion tables but also used to do a loop-controlled zig-zag pattern with shading showning how loops and variables can be used to modify/position graphic objects.

Assigment 3 - Animation - use x-y variables that move characters through ‘scenes’. Each scene is terminated when a character’s x or y coordinate gets to a certain defined value. Use a switch/case structure to switch scenes. I also start students using the Minim (now Sound) library to play sounds in their small movies.

Assignment 4 - “Catching Game” - multiple falling objects are ‘caught’ or missed by a ‘catcher’ . Introduces using the void keyPressed() method to accept keyboard input. Introduces the random() method for varying the falling speed of the objects on the screen and the re-positioning of objects for next falling x-position after each catch/miss. Lots of if/else structures for collision detection. Eventually can use switch /case for the state of the game: 0 = play game, 1 = game over screen. Use controlP5 buttons for ‘PlayAgain or Quit’

I have found students are very engaged by teaching from the Art perspective. I highly encourage you to give it a try!

The other advantage is that in grade 11, I introduce students to Arduino programming and it is based on Processing so the language aspect of Arduino is not an issue because they already know all the structures. And since Processing is a simplified Java, they have very little difficulty transitioning to full Java.

I’ve just started experimeting with the Android mode for Processing. It’s fantastic! So you could give your students the opportunity to port their games to Android tablets/phones.

Here’s a vid of a catching game I ported to Android through Processing:

My clarification page for porting processing to Android can be found at

Good luck!

Gord
(Ontario, Canada)


#8

Gord,

Thanks very much! That’s very encouraging. I like your sequence. I’m hoping to offer one or more projects that are specifically about doing kinetic and interactive art. I was leaning toward using Javascript with Processing in grade 10 and possibly doing some web page design with it toward the end. Then Python in grade 11 and Java in grade 12. (Next year will be my first teaching all the courses. Small school.) Don’t you regret all the syntax you have to teach new coders in grade 10? Maybe I’m putting too much emphasis on that.

We’re a lower socio-economic population, yet it seems there are more iPhones than Androids in the school, so the Android dev might not work for us. How do you deal with that?

Regards,

m

Mark Matchen, OCT

Woodbridge College, YRDSB


#9

Hi Mark. It’s a small world! I teach at Newmarket High School!

The syntax is not really a problem. Students catch on pretty quickly.

As for the Androids, if your school/department has a set of Android tablets (nexus 7), you could just borrow them for a few days to give students a taste of Android development. I vastly prefer Processing-Android to doing AppInventor.

Good luck. Contact me at school through board email if you ever have questions.

Have a great rest of the semester!

Gord Payne


#10

There is definitely evidence that a STEAM approach helps with gender balance. What I was getting at earlier is that to just focus on that outcome can be detrimental and misses a much wider aspect of this, which is not only about inclusivity. Not sure how things are in Canada, but in the UK there is an issue with “disciplinary silos” in education, something also being criticised by industry. This is an interesting read on this - https://www.nesta.org.uk/blog/fix-the-pipeline-for-steam-talent-in-the-creative-economy/

So, yes, I’m quite into the whole STEAM thing, and think that creative coding is the most obvious and necessary way to teach coding, full stop! :smile:

Isn’t it just! Hang around a few more years and you might be teaching this to my cousin’s daughter, then I can ask her for her opinion on it. :wink:

Nice course outline btw!


#11

One of the schools in my board actually has a programming class just for girls. I think it can be a good idea because the boys can get very aggressive. Not in a bad or harassing way: they just jump all over everything and talk fast and don’t really explain things. It’s more of a competition. The girls are much more collaborative. They also want to understand things fully, while the boys want to charge ahead and pick it up as they go. Both are reasonable approaches, but it’s nice to create a space for the girls. Unfortunately, my school is too small.

Mark Matchen, OCT

Woodbridge College, YRDSB


#12

Not to be too annoying, but I usually try to avoid catch-all language.

Anyway, it’s also worth noting that @saberkhan is working on developing a P5.js curriculum (and maybe a Processing curriculum?), which sounds like it would be super useful to you.

More info here:


#13

Hey hey,
Saber here. Yes, @Kevin is right. I am doing a Processing Foundation Fellowship to support K12 outreach. Please let me know if I can help with any K12 projects. You can reach me here or via email - mrkhanatndv@gmail.com.
Saber


#14

Hi Saber,

I’m sorry for not responding before now. I’m teaching a grade 10 Intro to programming course. I was planning to teach Javascript with Processing, and I was happy to discover that Khan Academy has that course. I’m going to use it as the basis for mine.

What I’d really like to do is emphasize the art. Once they have a basic grip on JS, I’d like to take it in that direction. There are some great-looking books about it, but they’re really expensive: I’m not sure if I can get the budget, although I’m almost ready to ask.

I would love it if you have any suggestions. I would love to draw students into this course by virtue of the art and the fun, and
hopefully have them stick around for the higher grades.

Regards,

mark

Mark Matchen, OCT

Woodbridge College, YRDSB


#15

Edit:
I didn’t notice I was replying to a thread from May :upside_down_face:

I think he was asking whether anything is lost if he doesn’t do things like the traditional “Tax Calculator” or “Grocery ArrayList” programs that are used to introduce fundamentals like variables and arrays and if-statements.

I think this is a valid question, because, despite the fact that Processing abstracts a lot of the nitty-gritty stuff, there are still some basic structures and concepts that need to be understood to implement something via Processing. This post from a while back comes to mind.

That being said, I think it’s completely possible to teach the basics through less traditional means - in fact, I really think that Processing’s “Ellipse Brush”:

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);

}

function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}

is a better introduction than the classic “Hello World”:

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

“Hello World” just throws so much complexity at you all at once. The Ellipse example, on the other hand, is intuitive - and if it’s hard for a student to understand the code on the screen, they might better understand the action on the canvas. Understanding what a public method is, what static means, or what void entails, are definitely important to know - eventually. But getting someone to graspthe concept of a for-loop, or the difference between a String and an Int, does not have to be taught in “raw” command-line Java.

So, tl;dr:
I think Processing, despite its abstractions, can still teach the kinds of fundamental programming concepts you would learn in a more “traditional” Intro to Programming course.