This week, we took the mug we’d created the week before and UV unwrapped it again. We’d covered that last week too, and it’s in last week’s notes, but because we’d rushed a little we went over it again.
One the model was unwrapped, we created an image texture and manually painted it. We then used the GIMP image editing program to add an image to our texture.
The main purpose of this week’s session was to explore the idea of transforms by using them to make a little top-down tank that we could drive about the screen. I close a tank because:
It’s easy to draw a recognisable tank with a few simple shapes
It’s easy to see which way is forward
Tanks move in a very simple way (either turn or drive forward or backwards)
Origin and Axes
We don’t often use the word, but the top left of the screen (0, 0) can be referred to as the origin.
Another useful word is axes (plural of axis). We have two axes in 2D – the X-axis which normally runs horizontally left-to-right on the screen and the Y-axis that runs top-to-bottom.
With these words in hand, let’s talk transform. P5 has three functions that allow us to make transforms. Once we call them, they effect everything that’s subsequently drawn. Here they are:
translate() – Move the origin by a given amount along the x and y axes.
rotate() – Rotate about the origin (wherever it currently is).
scale() – Scale along x and y axes.
Design of our Tank class
Our Tank class has five main things:
A constructor that takes and stores a vector for the tank’s position [this.pos]
A property to store the tank’s angle [this.angle]
A function to draw the tank [draw()]
A function to tell the tank to turn left/right [turn()]
A function to tell the tank to drive forwards/backwards [drive()]
We draw our tank as if it’s centered on (0, 0) and facing right. We then can use translate(this.pos) to move it and rotate(this.angle) to change its angle.
For turn() all we need to do is to to change this.angle by a requested amount.
For drive(), we do a little more. We:
Create a copy of the current position
Create a vector (1, 0) which is facing right (representing the tank’s forward direction)
Multiply that vector by how fast we want the tank to move
Rotate that vector to point in the tank’s actual direction this.angle
Add to the copy of the current position we took initially
Check that new position to make sure we wouldn’t end up off-screen and, as long as we we wouldn’t, update the tanks actual position this.pos
Getting user input
We then need to get input from the user. In sketch.js we created a new function getInput() and put a call to it in our draw() function.
In getInput() we just look for the arrow keys. If we see Left or Right then we tell the tank to turn. If we see Up or Down we tell the tank to drive. We use the P5 function keyIsDown() for this.
The files for this week can be found on our GitHub repository. The actual files uploaded have expanded the game a little. There are now two tanks and the Tank constructor takes two new arguments for the tank’s colours. The second tank is controlled not with the arrow keys but with WSAD and we use the P5 variables keyIsPressed and key to detect those being held down (as they’re different to the arrow keys).
You all did great work on Saturday, there was some quite complex thinking to be done to figure it out but you did great!
the player picks a level of difficulty and the computer chooses 2 random numbers to add (subtract or multiply- whichever you choose!) together and show the numbers to the player. Fr this we needed 2 SPRITES and 4 VARIABLES called SCORE, LEVEL, NUMBER1 and NUMBER2 as well as 2 BACKDROPS.
The player then has to enter an answer to the equation and the computer tells them whether they are wrong or right.
We repeated the ask/answer questions 5 or 10 times. Can you figure out where the REPEAT loop fits?
We also had a second sprite who reacted positively to correct answers BROADCAST and negatively to wrong answers BROADCAST. You can use whatever sprites you like and change their look whatever way you like. One coder added a puppy as their second and had him bark whenever an answer was correct.
After all the questions were asked we had the 1st Sprite SAY – Game Over! and BROADCAST Game over so that the backdrop changed and music played. There are two ways to change the backdrop- see below!CDA-S8-Week_9_18-MathsGame.pdfCan you improve our game??! Can you figure out how to subtract or multiply instead of add? Can you get the computer to add three numbers together or give the user 3 level options like: easy, medium or hard? The notes for the Maths Game are here:
This week you guys amazed us! Kieran and I were blown away by the talent of the ninjas in Creators this week. We set you a task at the start of the session to create a snowy Christmas scene which … Continue reading →
This week we finished off texturing our bowling pin model in Blender and then imported it into Unity to use in our game.
We started by loading our existing bowling pin model with seams already marked.
The process of unwrapping a 3D model is similar to peeling an orange and pressing the skin flat. The seams we marked are like cuts in the orange’s skin. When we peel it, the pieces between the seams come out separated.
To unpeel the model we entered Edit Mode (TAB key), selected the entire model (A key) and chose UV Unwrap | Unwrap from the Mesh menu. Notice that we don’t see impact of this until we switch to the UV/Image Editor
Switching to UV/Image Editor
Our main panel is normally in 3D View mode. To start working with our texture we click on the icon to the left of the menu options and choose “UV/Image Editor”.
When we change mode we see a flat image with our model split apart and spread out into flat sections. Each of these sections represents a part of our model between a set of seams.
Thank you all for coming yesterday on such a lovely day.
Thank you to Sean Shanley for demoing a 2D plotter that is controlled by Arduino, with 3D printed parts, and programmed with a Scratch variant called mblock.
The Arduino kits are available to buy on Amazon and the website where you can get all the ideas and instructions is called Instructables.
This week we did a simple Piano.
We only had to draw two keys, and then could duplicate these and change the names. The same applied to the code. The code is the same for each key apart from one small change so the note is the appropriate for the key.
See you all next week, our last session before we have a one week break for the bank holiday and then we will be back working on individual projects, getting ready for our final day and the day we will award the belts.