P5: converting examples into lessons/assignments

Teaching
1

Hello, at the moment I’m working on a dutch project for art education specialized in new media.
I’m searching for new ideas to give art classes for students going to high school (7th - 10th grade).
During my searching I found P5. What a solution! There are so many examples where I could work with. My question is how can I convert the examples into lessons / assignments? I hope anyone can help me with it….

2

Really difficult question to answer! And I don’t think there is one unique solution…

It really depends on the goals of your class, how much time you get with the students, the kind of background the students have, if this is mandatory class or not…

From what you said, it feels that the students don’t necessarily have background in coding and that you also need to teach them art.

So what I would do, and I have no teaching background, would be to give a goal to achieve at the end of every lesson.

This goal would be an artistic output but constraint by some rules. Through those rules, you can train the student to some concept of coding.

You start with the basic and then you move on to more complex stuff and if something is really complicated, you can break it down in several lessons. You would still have an artistic output at every lesson but the next time, instead of starting from scratch again, you improve the previous result to complete the learning of that complex concept.

Though the year, you should give your student more and more freedom on what they can achieve so it will become less and less about the code and more and more about the expression of themselves. Because in the end, the code is just a tool for the developer as much as a brush is for the painter. You need to master the tool to be able to fully express yourself and give to the world what is in your own mind.

2 Likes
3

It depends on what the examples are, but from what I understand, a general approach is this:

  • Spend the first 1/3rd of the class on introducing new concepts. This can be something like if statements or for loops.
  • Spend the second 1/3rd of the class doing a live demo. Show students how they can use the concepts you just introduced.
  • Then use the last 1/3rd of the class to let the students work. Have them build off the demo you just did, or have them work on assignments.

Shameless self-promotion: I have a bunch of tutorials and examples available at HappyCoding.io. Right now it’s geared more towards Processing, but I’d love to work with you to put something together for P5.js.

I also believe that @saberkhan is working on coming up with a curriculum for P5.js, so you might consider reaching out to him as well.

3 Likes
4

Thank you jb4x. That’s correct. Students do not have a coding background and the lessons absolutely has something to do with ‘creating’ art in a new, modern way.

5

Thank you, Kevin! I will check HappyCoding.io.

6

Take for example the penrose tiles:

Which assignment could I come up with to motivate the pupils to make this?
Maybe I can let them make this. And then I can try to change this a bit. For example: try a different color… or change the dimensions. What do you think?

7

Maybe start by introducing the concept of tiling: what this is, some examples of different tiling, how to come up with new ideas of tiling…

Then move one by showing this implementation and going through the code bit by bit to explain how it is working.

Then ask them to draw their own pattern on paper and to come up with a program that draw it for them.

8

That example above is complex - understanding the theory behind it as a beginner would be hard enough, let alone understanding its implementation.

Can I ask what kind of learning-goals you have at this point?

I don’t mean this as discouragement, but right now I don’t think I understand if this is a “Learn coding through art” class or a “Learn art fundamentals through coding” class, or something in between.

2 Likes
9

I definitely agree with @tony: this seems pretty advanced. What level students are you teaching? How much programming experience do they have?

I would recommend approaching it from the other way: instead of asking “how can I use these examples to teach programming” I would first ask “what coding topics do I want to teach?”

Then based on the answer to that first question, you can find or come up with examples that help teach those concepts.

2 Likes
10

Thank you for your feed back. I will think about these questions. Because I do not have any coding experience myself, I will have to start at the base…
The level of the pupils is very broad: secondary education all levels. What I really like about P5 is that you immediately see what you have made. I absolutely want to make the link to art. That’s an essential part of my lessons. I am going to deepen myself into what exactly my goals are going to be. Thank you for all your tips so far…

11

There’s also this Khan’s CS course which relies on its own flavor of the ProcessingJS (Pjs) library: :woman_teacher:

1 Like
12

Thank you for the link! I’m working on the courses now and that is very helpful. I see there’s also a Dutch version!! Great!

13

You might also be interested in trying out Code It!, which hosts online block-based programming exercises for “Animate with Processing” activities – and has a tutorial sequence, I believe.

Site available in German or English, previous announcement post on old forum, here: https://forum.processing.org/two/discussion/comment/123517/#Comment_123517

2 Likes
14

You may also be interested in:

… past discussions on the old forum related to curriculum planning:

…and, of course, the p5js.org “Learn” tutorials: https://p5js.org/learn/

4 Likes
15

Hi Mirjam,
I’m busy translating a course from Allison Parrish in Dutch for my pupil of the IJburg College.
Here you can find the original course: https://creative-coding.decontextualize.com/
and my work-in-progress https://visualeditor.nl/it/p5/index.html
Hope it helps.
best,
Marijn

1 Like