Javascript Intro

Today the Bodgers and Creators were on a hiatus so Mark took a few folks and covered some web development – with a particular focus on Javascript.

We reviewed:

  • How the internet works and how web pages get from the internet to your computer using DNS and HTTP.
  • Talked a bit about the two main kinds of code that our browsers understand:
    • HTML which is great for documents and static content
    • Javascript which is great for dynamic content like animations and games

We then spent the rest of the time playing with Javascript, using the p5.js framework to do some graphical stuff.  We learned about:

  • Functions which is where code is written
    • We wrote two functions: setup() and draw()
    • We called several functions which were written in the p5 framework such as ellipse(..), rect(…), random(..)
  • Variables which is where data is stored.  We learned that in javascript, unlike c# or java, all variables are declared with the “var” keyword.
  • Decision statement which is used to decide between options – in javascript the “if” statement is used for this purpose

We built quite a few cool things to draw interesting patterns and shapes and some of you came up with some mad patterns.  The one we ended up with is shown below.  Have fun playing with javascript and I’ll be really interested to see what you come up with!  Also try to think of ideas and if you come up with something interesting we can have some fun trying to build it!

Platformer Engine Week 2

This week we did a little code to finish our engine and spent the rest of the time working on our own platformer games using it.  The code changes we made to last week’s game engine were:

Hit Boxes:

Fixed the platformer so that our character doesn’t get snagged on edges by its whiskers.  This we did by learning about hitboxes. The hitbox is just a costume which is rectangular in shape.  Before we do our animation, we switch to the hitbox costume and after we switch back to the costume we want.

hitbox

Head Bumping:

Fixed the platformer so that we can bump our heads against the platforms without popping up.  This was by adding a couple of lines to the “stay above ground block” sprite to move down if we are touching the ground while moving upwards.

The entire code for the platformer is below:

platform_code

DOWNLOAD THE FULL PLATFORM ENGINE CODE HERE!!!

Example Game: Mentor Dash

Finally Mark showed an example game pulling all the elements in together – “Mentor Dash”.  It has the same code as we covered, but adds a bit of animation, level changes, sound and some sillyness.

mentor_dash

DOWNLOAD MENTOR DASH HERE

There were lots of brilliant ideas from the ninjas on their own games .. looking forward to seeing what you can do!

Advancers: Scratch Platform Engine – Week 1

This week was quite busy in the Advancers group.

Talk on Coolest Projects

  • Oliver gave a talk on the “Coolest projects” and many of us are planning on targetting it this year –
    • the deadlines are Mid-March for submission of ideas and Mid-June to attend the event itself!
    • Mark and Oliver are going to dedicate the last 30 min of each week to helping people with their projects.

Platform Engine

We started a platform Engine and got most of the code done – next week we’ll finish up the engine (not much code, honest!) and see what it would take to make it into games.  A Platform Engine is something that’s useful in lots of types of games or interactive adventures – be they mario-style or escape-room style, etc.  Once we have this platform engine done, we can easily apply it to other cases.  Think about ideas for platformers for your coolest project!

platform_week1

Things we got working:

  1. Gravity so the player falls
  2. Stopping when we hit the ground
  3. Not falling “into” the ground
  4. Walking along bumpy ground
  5. Not walking over bumps that are too high (like walls)
  6. Jumping

Things we didn’t get working (yet):

  1. “popping” up over walls
  2. Animating our walk
  3. Snagging on edges
  4. Scores, lives, etc.

Next week we can look at the above to see how we might do it, and also what it might take to make it look pretty, add a loading screen, etc.

The full code for today is below (click to view large):

Code from Week 1

Code from Week 1

We will finish this next week and make a game out of it!  You can download the project from here

Advancers P5 Week 3: Our first game

Click “Run Pen” followed by “Edit on Codepen” to view the game and play with the code.  At this stage, codepen has been working well for us so I think it’s a really good idea for you all to register for an account on codepen.  This will allow you to “copy” my sketches so you can save your versions of them online.  As we get more advanced (or if the network is down), we will start working locally with Atom again but this is good for us.

Today we started writing our first javascript game.  We thought for a bit about which game might be good to start and decided on a version of the hit game Flappy Bird.  We got quite far before people started to tire!

It will take another session to finish the game – we might do this next week, or take a break from javascript and come back to it in the new year.

Writing the Game

The first step was to plan how we would do the game.  Like all projects, we build it up in steps.  These steps would work to build a basic flappy bird:

Step 1: Draw the sky

Step 2: Draw the ground

Step 3: Draw the bird

Step 4: Make the bird fall

Step 5: Make the bird stop falling when it hits the ground

Step 6: Make the bird jump/flap when the mouse pressed / screen touched

Step 7: Add pipes as obstacles with a random gap

Step 8: Move the pipes towards the bird

Step 9: When the pipes go offscreen on the left, make them appear on the right again

Step 10: Check if the pipe is hitting the bird and restart of it does

Step 11: Add a distance label (how many pipes have we passed)

Step 12: Add sound, improve the graphics and keep a “high” score

We got as far as Step 6.  The next 6 steps would need another week to cover.  I’ve added comments to the code so you can see which parts of the code relate to which steps.  If you have your own codepen account, it might be a good idea to attempt to do the rest of the game – you might get stuck but that’s part of the fun!

New Concepts we covered today:

  • Variables.  Variables in javascript are just like variables in scratch.  The key things about variable are:
    • You create a new variable by writing the word “var” followed by the variable name.  E.g. we wrote the variables:
      • var birdHeight;
      • var gravity = 0.5;
      • Creating a variable by writing the word “var” is called “declaring” a variable.
    • You can change the value of a variable by using “=”
      • birdHeight = 10;
    • You can also use a variable name in assignment, so e.g. we could make the birdHeight 1 bigger by writing:
      • birdHeight = birdHeight + 1;
    • We learned that if you want to be able to see a variable everywhere, we need to declare it
  • Math operators:
    • We learned that some of these are written a bit differently in computer programs:
      • / is how we write “divided by” – e.g. width/2 is the same as writing “width divided by two”.  This is because on a keyboard for some reason there isn’t the ÷ symbol.
      • * is how we write “multiplied by” e.g. 2 * 2 is the same as writing “two multiplied by two”.  This is because x is very easy to confuse with lowercase x.  So if you had a variable called x things would get confusing!

Advancers: P5 js continued – Robot Draw!!

Today we continued our look at P5 and javascript.  We mostly practiced what we learned last week.

This time we did our work online using the awesome website “codepen” rather than a local text editor.  This website is a place for web developers to play with web code and share it with others.  Using it allowed us to work without getting bogged down with install problems on people’s PCs.  It is great for smaller sketches, but if you want to develop something really big like a complex game it will be much easier to use a local text editor like we did last week.  If you get a chance and have an email address (or your parent has one), sign up for a codepen account.  This will allow you to create and share your own sketches – I’ll link any and all of them on the coderdojo athenry website!

Today we basically just fooled around with it and tried to draw our own picture just with code.  We mostly drew robots as they are fairly easy to draw with rectangles and ellipses!

What we covered:

  1. We watched the neat introduction video from the authors of p5: http://hello.p5js.org/ 
  2. We looked at the P5 reference page which has great instructions and examples for all P5 functions: https://p5js.org/reference/.  Every good library you ever use will have a similar reference page – this is a great example of one.
    1. Similar to how scratch has blocks in different categories (sound, movement, control, etc), p5 groups all its functions into different categories – color, maths, shape, sound, etc.
  3. The canvas, resizing and changing the color using the createCanvas function
  4. Using colours in P5 – We used the following functions to set colours:
    1. background: to set the background color
    2. fill: to set the fill color
    3. stroke: to set the line color
    4. In all cases, colors can be either:
      1. one number in which case it’s a shade of grey from 0 (black) to 255 (white) e.g. background (0) sets the background to black.
      2. three numbers separated by commas, in which case each colour is a shade of RED, GREEN and BLUE – e.g. background(255, 0,0) sets the background to red, background(255, 255, 0) mixes red and green to make yellow.  You can make every colour by mixing red, green and blue!
      3. four numbers separated by commas, in which case it is RED, GREEN, BLUE, TRANSPARENCY. e.g. fill(0,0,255, 100) will make any shape you draw see-through shade of blue.  This is like the ghost effect in scratch.
  5. Some drawing functions in P5:
    1. strokeWeight to set how thick the lines are – e.g. strokeWeight(10) gives thick lines
    2. point to draw a point e.g. point(100, 100) draws a point at 100, 100.
    3. line to draw a line e.g. line(0,0,200, 150) draws a line from 0, 0 to 200, 150.
    4. rect to draw a rectangle – e.g. rect(0,0, 100, 100) will draw a square 100 wide, 100 high at point 0,0.
    5. ellipse to draw an ellipse – e.g. ellipse(0,0, 100, 100) will draw an ellipse 100 wide, 100 high (i.e. a circle) at point 0,0.
    6. triangle to draw a triangle – e.g. triangle(0,0, 100, 100, 200, 200) will draw a triangle between (0,0), (100, 100) and (200, 200).
    7. One other function we used was random.  This can be used in a few ways, but the way we used was to give it one number, in which case it picked a random number between 0 and that number.  E.g. random(255) picks a random number from 0 to 255.  So fill(random(255)) will set the fill to a random shade of grey.

We played about with the all the above to draw a (pretty poor) robot with flashing eyes that fires lasers – the sketch we did is below.  Play around with this and build on it to do something cooler!!

Advancers – Text based coding with p5.js

This week we tried something different with some text based coding.  We learned that for text basoslcyofed coding, we need a good text editor.  The text editor we picked was called “Atom” as it’s a free, powerful text editor that works on Mac, Linux and Windows.

Unfortunately.. with some network and pc problems.. it took longer than I hoped to get things installed on people’s PCs, but even then we managed to make a great start on some code and actually built some quite cool stuff.

For anyone that missed last week.. it would be great if you could run through the steps below and we will be ready for the next stage!

Continue reading

Image editing with the Advancers

wilber-bigThis week at Advancers, we took some time out from programming to review image editing, and play around using the highest quality free image editor in the world, the GNU Image Manipulation Program, also known as “The Gimp“.

Mastering Gimp, or a tool like it, is essential to be able to produce the images you will need for high quality games.  It’s also very useful for touching up photographs, chopping people’s heads off and sticking them on others, etc!

After taking some time to get it installed on most people’s laptops, we reviewed the most important parts of this incredibly powerful program:

  1. Installation of Gimp
  2. The basics of how to open and create a new image file
  3. The Gimp toolbox, how to change colors and use the brushes to paint.
  4. Layers and how they can make your life so much easier when it comes to image editing
  5. Selections, what they are used for and how to use them

Installing Gimp

On windows or Mac, GIMP can be installed by browsing to https://www.gimp.org/ and selecting “Download”.  On linux it can be installed from the app store/package manager on your distribution.  Note: some people last week had Chromebooks and I mistakenly told them that gimp wasn’t available on those devices – I since checked and it is available, though as it’s a web-app it is not as good as a locally installed version – check out this video for instructions on installation: https://www.youtube.com/watch?v=NtdcukXILJg .  It is also not quite free too since you need to pay to save your files.  Click read more for more details!

Continue reading

Scratch Advanced: General Purpose Wireframe 3D Engine

This week in Scratch advanced we took on the ambitious task of writing a general-purpose 3d wireframe engine.  The goal here was to build an engine that we could use to view any structure in 3-dimensions as though we had x-ray vision.   We didn’t really know how it might turn out but were delighted with the results!  If you just want the code, skip to the bottom!

We didn’t quite know how to start this so we Googled 3D and Wireframe, and we found this article on wikipedia that really helped us understand what it was:https://en.wikipedia.org/wiki/Wire-frame_model

wireframe examples

Continue reading

Scratch Advanced – Custom Blocks and Coordinate Geometry

This week in Scratch Advanced we looked at two areas of scratch that are really useful to get the hang of if you want to build cool games.

Custom Blocks

Scratch comes with many blocks built in, but custom blocks let you actually create your own blocks that you can re-use over and over.  Using custom blocks can make your scripts much tidier and shorter and easier to write.  They are similar to broadcasts, but better because you can pass values to them to make them behave differently.

To create a custom block you go to the “more blocks” menu and add a block.

custom_block1

 

 

Give the block a name that describes what it is doing – in the example here I call it “jump”

custom_block3

 

You can see this is really handy and lets us add jump to our sprite easily without having to copy lots of code around.  You can make it even better by adding “inputs” to the block.

custom_block4

To add an input expand the “options” on the block and click the input for the data type you want – in the case of jump, height might make sense as shown below.

 

 

custom_block5

 

Now we have a jump block that will let us use the block for a normal jump and a super jump – maybe after a powerup or whatever.  You can see how handy this could be for anything you want to do over and over!  If you find yourself writing similar code in more than one place for a sprite, it might be a good time to think about writing a custom block.  One thing we didn’t mention on Saturday which is worth a look is the option for “run without screen refresh”.  When this is pressed, a block will run very quickly and only update the screen when it’s done.  This can be a way to speed up things like drawing programs.  Try it out on the jump example above to see what it does.  When it’s clicked, it will look like the sprite doesn’t do anything.. this is because he jumped up and right down again only updating when the block was finished – and he was right back where he started!.

Writing a Square Block

On Saturday, we used custom blocks to write a function to draw a square using a pen.   Then we showed how easy it was to create nice patterns by just calling the block different ways.

The code we came up with for the block was:

custom_block6

 

We spent a fair bit of time thinking about X and Y coordinates in Scratch and how to figure out where to move your sprite to get the shapes you want.  One example of how to use our new block is below.  Lots of the clever scratchers came up with much cooler ones than this though!!

custom_block7

 

custom_block8