Exercise: The Creature

Searching For Inspiration

Transcript

Okay, now you can make your own creature with Processing. Remember that visual programming is not only about logics or geometry but also about developing your own idea and being creative. But creativity doesn't mean that you should invent everything just by yourself. Let's see a website called Open Processing where people around the world have uploaded their Processing-projects. As it says here, "Open Processing is the community of everyday coders and educators experimenting on tech arts and design." You can search with a keyword and find all the projects that are related to that keyword. For example I try searching with keyword "creature". So tons of different projects! Let's see. Well this looks interesting! Okay so here's someone's project, someone's creature. It even has interaction here. When I'm clicking Mouse it's blinking its' eye. You can see the code of the project by pressing this symbol here. And by pressing this info-symbol you can see who has made the project right here. The license of this project is creative commons attribution/share-alike and that means that you can utilize the code yourself and share this project but if you copy the code you have to mention who made the original version. Okay, now it's your turn search for inspiration and develop your own idea.

Do this

Find an interesting creature in Open Processing

https://creativecommons.org/licenses/by-sa/3.0/

What does “Creative Commons Attribution ShareAlike -license” mean? Check the link above to find out.

You can copy and use the code totally freely.

You can publish the code without mentioning the original version if you just edit the code a little bit.

You can utilize the code If you use the same license and mention who did the original version.

Educator notes

In this exercise students finish the creature that they started developing earlier. In the first phase they are advised to search for inspiration in Open Processing, which is a website where artists and programmers around the world have added their projects.

While using Open Processing, students understand the power of the maker-community - it’s always possible to learn from others and also get feedback and praise of your own work.

If students want, they can make their own account to Open Processing (instructional video is in the final step of this project). Remember that you can also just browse the projects in Open Processing without registration or uploading your own projects. And nothing is better than seeing and discussing each others work in your real physical classroom!

Make It Your Own

Transcript

Now draw the rest of the creature you have planned during this exercise. Could it be the main character of your game or maybe your favorite animal presented in a cartoonish way? Almost everything is possible. Remember that although Open Processing can give you a very valuable inspiration, it's not ok to just copy the code of others. Good guideline is that you can use the ideas but not the code and you always have to understand all of the code in your project. Copying the work of others is also very boring after all.

The Creature - Example Projects

The Anxious Cyclope
Only ellipses are used - except the sweatdrop is drawn with a triangle and an ellipse.

The Happy Frog
There are lines, ellipses, one quad and an arc in this frog.

The Gourmand
There are ellipses, rectangles and two arcs in this project. The ears have been drawn with bezier-curves.

Exercise Instructions 1/2:

Advised maximum time for the project is 20 minutes.

Make a creature! Your project should meet the following requirements.

Add at least three different shapes (e.g. an ellipse a triangle and a rectangle).
Use at least three different colors.
Don't copy the owl-example or any other example directly.

Educator notes

If you feel that students just copy the code of others, you should maybe have a discussion about this in the classroom. It might not be wise to restrict using the web too much because students might do it anyway and It’s a good resource to find inspiration. It’s also how real programmers work (but of course they have first learned the basics).

Wiser than to forbid copying totally might be to learn to use it wisely. Good guideline is that you have to understand all the code you use and be able to produce it yourself.

Activity: Encourage students to design the creature on paper first, using the common regular shapes.

The Creature: Adding Comments

Transcript

Congratulations on your first project! You can develop it further and make it move or react to the keyboard and mouse after you have trained a little bit. Let's add some comments the project. Comments are a way of explaining your code to other people who read it which is very useful especially as your projects get more complicated. To start a comment, write two slashes - all text after that is comment text. For example here in my Space Owl project... ...I added my first comment. So this line is the body of the owl. The computer skips everything on the line after the two slashes so these are just notes for human beings. In the comments, I explain the different parts of the code as simply as possible.

Transcript

And next I'm going to upload my Space Owl to Open Processing the show you how it's done. First I have to register to Open Processing. So after the registration you'll have an account in Open Processing. Click "Create Sketch" and copy your code to the main window. So I'm going to copy my Space Owl here. After that, choose "Processing.js" as a mode and then click "Save". Now you can give a name, description and tags for your project. Remember that the project will be available on the website publicly if someone searches it with its' name or the right tag. Okay, when you're ready click "Submit". Okay so there it is! Now the project is in Open Processing. If I log out and search "Space Owl", I can find it easily. Okay so there it is! So now you have an account in Open Processing and the creature-project is there also. Time to move on to new challenges!

Exercise Instructions 2/2:

Write comments to your code with “//” marks and explanations.

EXTRA:

If you feel like it, you can also add your project to Open Processing. For instructions, check the video above.

Educator notes

Try to remind the students to write comments to their code from now on. This is a good habit that is easy to forget! It’s also a way to learn - once you have to explain your code, you might understand some things in a new light.