Week One: The Power of Touch!!
This workshop is part of series incolaboration with Friends of Refugees with the aim of empowering youth to code and have fun!
Welcome!!
Hello! Welcome or welcome back!! Super excited to have you here! We have alot of fun stuff in store this semster.
Team Up!
In this class we will be working in teams!! Get into a pair. On the laptop (don't open it yet!) there will be a piece of paper which will say if your pair is the Red Team, Green Team, Blue Team, or Yellow Team. We are going to have some friendly competition. Each team will get to score points! You can score points with all kinds of stuff:
Answering a question
Listening well and being ready to go
Finishing an excerise first
Coding something cool
Sharing something cool with class
And more!!
At the end of each class we will see which team wins and they will get a small prize!!
What will we be doing??
In this term we are going to be making our own interactive monsters or creatures. Kind of like a Pokémon!!
Every class we are going to learn something new which we can add to our monsters. Every class we are leveling up just like in a video game. Our own skills and our monster will level up!!
What we are aiming for this class
Learn the basics of what coding is ??
Learn what is P5.JS ??
Set up our work space
Drawing a Circle !!
Learn what a variable is ??
Have fun!!
But first! Let's play a game!!
The Sandwich making Code Game
We are going to play a little game I like to call the Sandwich code game. Listen to your instructor to hear the instructions!
What is Coding?
Coding is just like what you just did in the coding game. You give a set of instructions to the computer. Like what you saw in the game, its very important to be specific!
Coding: Writing a set of instructions for the computer to follow.
What is a Coding Lanuage?
A coding language is similar to a language that you might speak. Every language has its own set of rules like order that you put words or punctuation. Different coding languages are used for different things. The language we work with the most is JavaScript because its good for making visuals and interactive stuff.
P5.JS: We will be using P5.JS which is called a "library" of JavaScript. It's kind of like a dialect; it has some special extra words and features that make it a bit easier to code visuals. Its made for beginner programmers, artists and designers.
What is Syntax?
Sounds scary but its not!
Maybe someone who was here last year like to have ago for five points?
Answer
Let's Code!
We will be working in our team! Don't worry everyone will get a go to do some coding.
Code a Circle
We are going to code a circle. Don't worry if you have never coded before! We are going to work through it together. If you did this last year you should crush this!!
Click this link. It will come up with a page called Open Processing. We will be using the website alot to code this sem. It will ask you to log in. Read the piece of paper which was on your laptop. It will have the Username and Password. If you are waiting for everyone to log in feel free to customise your profile picture.
Follow the instructions on the left hand side:
And write your code under your where it says your team name.
To submit your work click save
First group to code their circle in the right place gets 10 points!!
Nice! You coded a circle as a team!! Awesome job! Let's move on some we can learn how to make it interactive.
What is a variable??
It might sound fancy but variable is just a label for something. Computers aren't mind readers so we have to both tell them what something is called and what it is.
Variables are super useful so we will keep coming back to them.
You might remember p5.js variable called frameCount – tell me what it is for an extra five points
Let's make our own variable
Click here to follow the Open Processing class on creating variables
Why use variables?
Good question. Click here to find out
Let's make our monster
Let's get started on our monster. We are going to start super super simple with a square. Don't worry our monsters are going to get more exciting I promise.
This is what we are going to aim towards today.
In your team together code your monster so that it changes. For example:
Code your monster so it grows when you click
Code your monster so it gets smaller when you click
Code your monster so it changes color when you click
Code your monster so it changes position when you click
Top Tip
You might notice that on my example the size smoothly increases. This is how you do this:
first have your variable: my_cool_variable = 10
Then when you redefine your variable instead of redefining it just with a number when are going to redefine it with the variable + 1. Sounds a bit confusing. This is how its done:
my_cool_variable = my_cool_variable + 1
The computer will check the value of the variable and then it will add 1. This is how it can smoothly increase because everytime it checks the number has changed.
Extension
If you have completed changing your varaible with mouseClicked(). You can now do the extension tasks. If you do an extension task your team gets 5 points!
Extra Functions:
You might have noticed that we used function mouseClicked() . A function is a special set of instructions for a specific task. In the case of mouseClicked() it will run whatever code you have written inside the function when the mouse is clicked.
There are more functions that you can use which are pretty fun. Here is a list with a link to the documentation on how to use them. If you get stuck ask a helper for help.