Creators – Arrays and Classes

Several Values in One Place

This week we looked at two very useful concepts in JavaScript, Arrays (we’ve also called them lists) and Classes (we’ve also called them objects). They are both things that allow one variable to store more than one value at at time. This can often be very convenient and has the potential to save us a lot of typing! Who doesn’t like that?

Arrays

A plain variable in JavaScript can store a single value, we’ve seen that loads of times:

let a = 5;
let b = 7;
let c = a + b; // will be 5 + 7 = 12

An array variable in JavaScript can store more than one value, just by putting them in square brackets and separating them with commas:

let a = [5, 7]
let c = a[0] + a[1]; // This is the same as above!

The code here does the exactly the same thing as the block above it. See that a now has two values in it and we use a[0] to get the first value and a[1] to get the second. This technique isn’t super useful when we only have two values, but the more we have to store, the more useful this gets. Imagine if we had 10 values,  how much shorter would the array version be?

You can also create an empty array and put values in it later:

let a = [];
a.push(5);
a.push(7);

In the code above we create an empty array (nothing between the square brackets) and then use the push() function to add two values into it.

Concept of Classes

A class is a programming concept that lets you define objects which contain both Properties and Methods. Properties are values associated with the object. Methods are actions that we can ask the object to perform.

class

Think of yourself as a Person object and imagine some of the Properties and Methods you might have.

Your Properties might include NameAgeHeightWeight, etc. A simple Method you might have could be SayHi(). That would make you say “Hi, it’s <Name>!”.

A method might have arguments, so it could be SayHiTo(“Dave”) which would make you say “Hi Dave!”.

Classes in JavaScript

Making classes in JavaScript is pretty easy. Let’s look at the Person class we showed above:

class Person{
  constructor(name, age, height, weight){
   this.Name = name; 
   this.Age = age; 
   this.Height = height; 
   this.Weight = weight;
  }
  
  SayHi(){
    Console.Log("Hi, it's " + this.Name + "!");
  }

  SayHi(who){
     Console.Log("Hi " + who + "!" );
  }
}

We say “class“, the name of the class and a pair of curly brackets. Inside these brackets we have three functions (but notice we don’t have to say “function“).

Let’s look at the first of these, called constructor(). This is where we set the class properties. Note that we must put “this.” before properties to distinguish them.

The second two functions, SayHi() and SayHiTo() aren’t too usual, again note that we must use “this.Name” to get the value of the name property.

Download

This week we created a class to represent a bouncing ball and we saw how easy it was, once we’d created the class, to make several of them, all bouncing around simultaneously. This would have taken us a lot more code to do if we hadn’t made a class. As always, the files can be downloaded from our Github page.

 

 

 

 

 

 

Creators – Being Random

Screen Shot 2017-10-17 at 00.56.49

This week we mainly looked at three things:

  • How data is organised on your computer
  • Creating functions
  • Using randomness to make things interesting

Data Organisation

Most of us had heard of a hard-disk before. This is a stack of metal disks inside your computer. Each metal disk has a special coating made of millions of tiny magnets (like you might find stuck to the fridge) that can be turned on and off.11644419853_9499fa0faa_b

We saw that able to turn something on and off, like a switch, was enough to count from zero to one, but the more switches we added, the higher we could count. Two switches can count from zero to three:

Switch 1          | Switch 2          | Total (Add)
[Off = 0, On = 1] | [Off = 0, On = 2] |
------------------+-------------------+-----------
Off = 0           | Off = 0           | 0
On  = 1           | Off = 0           | 1
Off = 0           | On  = 2           | 2
On  = 1           | On  = 2           | 3

With enough of these tiny switches, we can store anything we need. Each of these tiny switches is also known as a ‘bit’ and a 1 terabyte hard disk has a billion of them!

We also saw that the files on your disk are arranged with folders (also known as directories). Folders can contain both files and more folders. This allow us to keep our hard disk organised; without them all our files would be in the same place which would be difficult once we had more than a few. The location of a file is called its “path”. Looking at the highlighted file on the desktop of my Mac we can see the full path would be:

Screen Shot 2017-10-16 at 22.19.59

/Users/kierancoughlan/Desktop/Ball and Bat Sounds.m4a

 

This means that, reading backwards, the file called ‘Bat and Ball Sounds.m4a’ is in a folder called ‘Desktop’ which is itself inside a folder called ‘kierancoughlan’ which is, at the highest level, inside a folder called ‘Users’.

Functions

A function is a collection of commands that do a job together. We’ve already encountered them, even if you hadn’t especially noticed:

  • Our P5 template already contains two functions called start() and draw()
  • All of the P5 commands we have used, such as createCanvas() and rect() are functions themselves

We could add all our code to start() and draw(), in fact, that’s what we’ve done before this week. That’s fine starting out, but it does mean, once there are a lot of commands in those functions, that our code is gets harder to read and understand. Breaking out a few commands into a new function and giving it a name that describes what it is doing, really helps.

Once we’ve written a function, it can be called as many times, and from as many places, we as need.

Functions can do one other thing too: they can give back a value to the place where they were called from. For this we use the special word return. For example, let’s see what a function to pick the largest of two numbers, we’ll call it Max(), might look like:

function start(){
    let a = 4;
    let b = 10;
    let c = Max(a, b);
}

function Max(n1, n2){
    if (n1 > n2)
        return n1;
    else
        return n2;
}

We give Max() the two numbers we are comparing. If the first one is bigger than the second, it gives back the first. Otherwise, if gives back the second. Note too that the names of the variables in Max() are different to those in start(), and that’s not a problem.

Random

Finally, we looked at the P5 function random(). We used it two different ways:

random(); // gives a number between 0...1
random(n); // gives a number between 0...n (where n is a number!)

In the first form, we used it to pick a random colour. In the second, we used it to pick a random position for our squares.

Files

As usual, all the code is on the creators github repository. Head there and download it!! The files for this week contain both the script we wrote (sketch.js) and a longer version that I wrote (sketch2.js). Feel free to take a look at both!

ModderDojo Topic 7: Planning and Building a Complex Structure Mod in Minecraft

PyrimidInside

This topic continues from ModderDojo Topic 6: JavaScript Operators and ScriptCraftJS Drone Functions.

Sharing a Server:

In previous weeks before we stopped for Christmas, some people struggled to make progress through no fault of their own: they were hampered by CanaryMod crashing a lot on some people’s computers.

To work around this, everyone can connect to my computer as the Minecraft server, and I will also create a shared folder on the computer so you can drop your mods into it.

Please review these notes from several weeks ago: Topic 2: Connecting to Each Other’s Servers.

This Week’s Challenge:

This week (and for the next week or two), your challenge is build a substantial mod in ScriptCraft that, when you run it, will create an impressive-looking structure!

A key step to success here is planning and design: as I have said before, a  programmer’s most important tools are paper and pencils, for figuring out what you want to create before you write code for it.

You should review the following:

 

Tunnel1

 

ModderDojo Athenry Topic 6: JavaScript Operators and ScriptCraftJS Drone Functions

Operators:

Operators in any programming language are used when you want to calculate something new: they operate on values. variables, or expressions to produce a new value.

Since ScriptCraft is built on the JavaScript langauge, it uses standard JavaScript operators. As it happens, many other programming languages (including C, C++ and Java) use the same operators or very similar ones.

JavaScript Operators

Drone Functions:

As we have seen before, in ScriptCraft you use a drone to do your building for you. The drone has functions that are part of it.

Here are some of the main drone functions that are useful when building your mods:

ScriptCraft Drone Functions

You can find lots more about these and other functions in the ScriptCraft API Reference: https://github.com/walterhiggins/ScriptCraft/blob/master/docs/API-Reference.md

Example: Build a Pyramid

This example is based on a very nice program writing by Ruaidhri from Coderdojo Athenry last year, updated slightly because some ScriptCraft commands have changed in the meantime.


// Copyright Ruaidhri from ModderDojo Athenry,
// slightly updated by Michael and Alex.
// Builds a pyramid with entrance and lights inside.

exports.pyramid = function()
{
echo('making a pyramid');
var d = new Drone(self); // 'self' means start drone beside me
d.up(1);

d.chkpt('begin');

var size=31;

// Make the walls
while (size &gt; 0)
{
d.box0(blocks.sandstone,size,1,size);
d.right(1);
d.fwd(1);
d.up(1);
size=size-2;
}

// Entrance
d.move('begin');
d.right(15);
d.box(blocks.air,1,2,3);

// Lights inside
d.move('begin');
d.right(4);
d.fwd(4);
d.up(3);
d.turn(2);
var t = 0;
while (t&lt;4)
{
d.hangtorch();
d.left(11);
d.hangtorch();
d.left(11);
d.turn(3);
t = t + 1;
}
d.move('begin');
}

ModderDojo Topic 4: Moving from Scratch to JavaScript

GeneralFeaturesOfProgrammingLanguages

Note: some individual topics are short: we got most of the way through the first 3 in our taster session. See this post: https://cdathenry.wordpress.com/2015/09/27/minecraft-modding-taster-session-week-1/

JavaScript is a well-established programming language, mainly used in web development. ScriptCraft is a Minecraft mod that allows you to write JavaScript code for building structures in Minecraft and writing new Minecraft mods. (So it’s a mod for creating other mods.)

Steps 1-3: Install ScriptCraft, Learn how to Connect to a Server, and Create a First Mod

We covered these steps in the first two weeks:

  1. Getting Started with ScriptCraft and JavaScript
  2. How to Connect to Each Other’s Servers
  3. Creating our First ScriptCraft Mods

To try out ScriptCraft, look back at the introductory posts here: https://cdathenry.wordpress.com/2015/09/27/minecraft-modding-taster-session-week-1/

Step 4: Comparing JavaScript to Scratch

Some people criticise Scratch as being “childish”, but I don’t agree. While it is designed so that even 8 year olds can use it, it is still has all of the key features of ‘adult’ programming languages, as listed in the image at the top of this post.

(Technically, any programming language with variables, decision and loops is Turing Complete.)

This means that, if you already know how to write a Scratch programs that use these features, you will be able to apply that knowledge to any other language, such as JavaScript. The syntax of JavaScript is different, but it uses the same computational thinking.

Variables-Operators

Loops

Decisions

Notes:

  • Even though they have basic ideas in common, every programming language has its own specific commands that relate to its purpose: Scratch is focused on 2D games and animations, while ScriptCraft is focused on operating inside Minecraft, and JavaScript generally is used for interactive websites.
  • the echo command that features in these slides is not a standard JavaScript command, it is just used in ScriptCraft to display things on your screen in Minecraft.  Everything else is standard JavaScript.

Minecraft Modding Taster Session – Week 1

Slide1

This season at CoderDojo Athenry, the advanced groups are all starting with taster sessions of the various topics we will cover.

In Week 1, the topic we are covering is Minecraft Modding using JavaScript.

Here are the notes:

  1. Getting Started with ScriptCraft and JavaScript
  2. How to Connect to Each Other’s Servers
  3. Creating our First ScriptCraft Mods

Coming up next week: in introduction to Raspberry Pi and Electronics

ScriptCraft – An Exploding Chickens Mod

A few weeks ago we were lucky enough to have a visit from YouTuber and professional Minecraft modder (for the HyPixel server) codename_B (a.k.a. VladToBeHere, a.k.a. Ben).

Ben (left) addresses CoderDojo Athenry. ,Also pictured: Auburn, Ben's girlfriend, and our own Michael Madden

Ben (left) addresses CoderDojo Athenry. Also pictured: Auburn, Ben’s girlfriend, and our own Michael Madden

Ben is an extraordinary programmer who just breathes code. On his YouTube channel he regularly creates a complete MineCraft plugin in only sixty seconds!

After addressing the entire Dojo, Ben showed our modder group and a few other more advanced coders how to make a quick plugin which causes chickens to explode when a player kills them.

Ben’s mod was written in Java and used the Bukkit API to interface with MineCraft.

Porting the Plugin to ScriptCraft

ScriptCraft is built on top of Bukkit. Because of this, almost all the Bukkit API is available for use in ScriptCraft. I believe there are a few Java-only bits in Bukkit, but I haven’t encountered them.

I realized that, in theory at least, it should be possible to port Ben’s plugin to ScriptCraft. In practice, it proved to be more straightforward than I could have hoped. If you don’t already know Java, ScriptCraft is a great place to start if you want to create MineCraft mods.

ScriptCraft and Bukkit References

When writing something new, you’ll need to be able to look-up things that you are not familiar with. Two references I used for this script, apart from Ben’s original code, were:

  1. ScriptCraft API
  2. Bukkit API (from Spigot)

Browsing these resources is also a good way to see what can be done and to thereby generate new ideas.

Anatomy of the Plugin

The plugin is composed of four parts:

  1. Two variables to represent the Bukkit types which represent chickens and players respectively
  2. A loading function which we will run when the plugin loads
  3. An event handling function which will be called whenever one entity damages another
  4. A call to the loading function, at the bottom of the file, to make it run as soon as ScriptCraft reads it

Let’s talk about each of these parts in turn.

Variables to Represent Bukkit Types

After a require(‘events’) line (to make sure we can reference the events object), there are two lines as follows:

var bkPlayer = org.bukkit.entity.Player;
var bkChicken = org.bukkit.entity.Chicken;

These are ‘types’ which represent an entity of type Player and an entity of type Chicken respectively. We’ll use them in a bit to determine, when we’re told one entity has damaged another, that it was a Player entity causing damage to a Chicken entity.

The Loading Function

The next part of the script is the loading function. It’s short and really only does two things:

  1. Announces that the plugin has loaded by printing a message to the console
  2. Tells Bukkit that we’d like a function of our own to be run each time that a particular event occurs. In this case it’s the event that fires every time one entity damages another.

Here’s the code:

// The function which will run when we load this module
var _loadMod = function()
{
  // Announce ourselves to the console
  console.log("Exploding Chickens: [Loading ScriptCraft Mod]");

  // Tie our code into the event that fires every time one entity damages another
  events.entityDamageByEntity(_entityDamageByEntity);
}

We’re passing events.entityDamageByEntity() the name of our function we’d like to have run. That function (_entityDamageByEntity) and this function (_loadMod) both have underscores at the start of their names. It’s a JavaScript convention which indicates that we’re never be calling these functions by name from outside this file. They’re private or internal functions.

The Event Handling Function

This is the most complex part of the module, but not terribly so. Here’s the code:

// The code that we want to run each time one entity damages another
var _entityDamageByEntity = function(event)
{
  // Find out, from the event, who's getting damaged and who did the damage
  var damagedEntity = event.getEntity();
  var damagingEntity = event.getDamager();
  
  // If it's a chicken getting damaged by a player, game on...
  if (damagedEntity instanceof bkChicken && damagingEntity instanceof bkPlayer)
  {
    // Announce in the console that we've detected a player damaging a chicken
    console.log("Exploding Chickens: [A player damaged a chicken]");
    
    // Schedule a task to run in five seconds.
    server.scheduler.scheduleSyncDelayedTask(__plugin, function() 
    {
      // Check to see if the damage brings the chicken's health
      // down to, or below, zero. If so, it's dead...
      if (damagedEntity.getHealth() - event.getDamage() <= 0)
      {
        // Get the chicken's location
        var loc = damagedEntity.location;

        // Create an explosion at the chicken's location. 
        // A big one...
        loc.world.createExplosion(loc, 10.0);
      }
    }, 20 * 5);
  }
}

What does it do?

  1. Gets the entity that caused the damage and the entity that was damaged and check to see if they’re a player and a chicken respectively
  2. If they are a player and a chicken, Schedule a task to run in aprox. five seconds. This task can result in an explosion, so it’s nice to have a little “getting away” time.
  3. When our task runs, see if the amount of damage inflicted was enough to bring the chicken’s health down to zero (or below) and if it was, make a massive explosion where the chicken was.

The Bukkit function scheduler.scheduleSyncDelayedTask() needs a reference to the plugin which is asking for the task to be scheduled. In this case it’s ScriptCraft and there is a special automatic variable, __plugin, which ScriptCraft can use to refer to itself when it needs to.

And that’s pretty much it!

Getting it All Going

The last line in the file is just a call to our _loadMod() function. This will get run immediately by ScriptCraft when it read it, setting the mod into action:

// Run this script as soon as the file's loaded
_loadMod();

Finally

Here’s the mod in action:

Sorry chickens*.

The script file can be downloaded from here. I hope this inspires you to create your own server mods using ScriptCraft.

 

 

* The author is a vegetarian and general soft touch who even tends to feel bad about exploding virtual animals…

 

Automatically Generated ScriptCraft to Draw An Image

image_process

Having done tagger.js, I thought “wouldn’t it be nice not to have to specify the design by hand?”

I started thinking about how cool it would be to have a way to take an image file and use that to define the design that tagger.js was going to spray.

The first thing that I determined was that, as far as I can see, there isn’t any built-in support for the various image formats (GIF, JPEG, PNG, etc.) in ScriptCraft. OK, so what then? Well, web browsers are great at handling images in all kinds of different formats. The HTML5 canvas element is good for playing around with bitmaps and on top of all that, JavaScript is supported for the coding part!

So, with very little previous experience and plenty of Googling, I decided to make a web page which would allow the user to enter a file’s name, press a few buttons and a ScriptCraft script would appear, as if by magic. Development was pretty smooth, baring one significant road-bump which I’ll describe. I’m not going to go into details about how the HTML file was made, but it should be clear enough if you want to read it. I will however describe the process of colour mapping.

HTML5 and a Tale of Tainted Canvases

Say what? An odd problem I quickly hit was that I couldn’t just specify an image file from just anywhere (using HTTP:). In fact, even worse, when I directly loaded my HTML page in my browser (using FILE:), I couldn’t even load up an image file which was in the same directory as the HTML page.

More Googling followed. Turns out that the browser was trying to protect me from “cross-origin data”, which is a security risk. Luckily there was an easy solution. I downloaded a small web server application and used that to serve my HTML page, which eliminated the issue. The web-server I chose was Mongoose, because it’s a single application, light and fast, but you can use another web-server if you prefer.

Testing in Chrome

I used Google Chrome as my browser for developing and testing this webpage. Chrome has a JavaScript console, which greatly simplifies debugging scripts. It can be found from the menu to the right of the address bar, at More Tools > JavaScript Console. Among other features, It allows you to set breakpoints and watch the value of variables as the script executes. It will also show you errors in your code, where it finds them.

Colour Mapping

The most important part of this script is mapping the colour of each pixel in the original image to an equivalent block in MineCraft. For this example, I have restricted myself to the 16 wool colours. So, for every pixel in the original image, I have to choose the MineCraft wool block that’s the closest in colour.

MineCraft Wool Palette

MineCraft Wool Palette

The colours we are going to match against are above. If you’re curious, here’s how I generated this MineCraft palette, I laid all 16 MineCraft wool blocks in order, from white to black, and then took a screenshot. This screenshot was, of course, influenced by the lighting in MineCraft at the time I took the screenshot and each block had the wool texture applied to (i.e. they weren’t just one flat colour). I did some further image manipulation to improve the palette. I applied a strong blur effect to downplay the effect of the texture and then I used my image editors Histogram Stretch functionality to make sure that the whitest and blackest colours were pushed towards true white and true black. Finally I sampled one point on each block and that became my representative colour.

These colours, in RGB format, became an array in the JavaScript inside my webpage:

var paletteRGB = [[255, 255, 255], 
                  [222, 146, 79],
                  [177, 98, 186],
                  [115, 152, 197],
                  [178, 185, 60],
                  [76, 179, 67],
                  [213, 151, 159],
                  [51, 51, 51],
                  [164, 180, 170],
                  [44, 109, 122],
                  [116, 68, 167],
                  [30, 50, 113],
                  [59, 43, 14],
                  [35, 62, 15],
                  [132, 53, 40],
                  [0, 0, 0]];

RGB (Red/Green/Blue) is a common way to represent colour. Its three numerical values, each of which can range between 0 and 255, represent the relative strengths of the Red, Green and Blue channels. We can think of this as a co-ordinate system, with the R, G and B values as axes.

RGB Colour Space Imagined as a Cube

Description: RGB Colour Space Imagined as a Cube. Author: SharkD. Source: http://commons.wikimedia.org/wiki/File:RGB_color_solid_cube.png

The image above shows what this looks like. Pure white is on the corner nearest to us. The opposite corner, which we can’t see, is pure black. Colours aren’t just on the surface of this cube either, If we were to cut through it at any plane, we would see all the colours on the inside as well.

Therefore, the difference between two colours can be thought of as the distance between two points in RGB space. It’s Pythagoras’ Theorem again, as we saw in the rainbowk.js project, but in 3D. All we have to do is take the colour of each pixel in the input image, calculate how far is is from each MineCraft wool colour and pick the wool colour which is the closest in distance; that will be the most similar.

Easy right? Well, almost. Turns out, our eyes don’t quite work that way. We’re not as sensitive to changes in some colours as we are in others. We’re most sensitive to changes in shades of blue, and least sensitive to changes in shades of green. If asked to pick by eye, we might make a different choice for the “closest” colour than then one given by mathematics alone. Luckily, scientists have worked out factors which account for this. If you look in the final script you’ll see that there are factors which are used to weight (make more important) the difference in some colours than others. You don’t need to understand how these numbers were arrived at, just understand why they are there.

// It's Pythagoras' theorem again, but weighted.
function weightedDistanceSquaredRgb(r0, g0, b0, r1, g1, b1)
{
  // These weights are used to convert RGB -> YUV and are useful here
  // to enhance the perceived closeness of two colours
  var weightR = 0.299;
  var weightG = 0.587;
  var weightB = 0.114;
  
  // Distance between two points in space: sqrt(x^2 + y^2 + z^2)
  return distanceSquared(r0 * weightR, g0 * weightG, b0 * weightB,
                         r1 * weightR, g1 * weightG, b1 * weightB);
}

By the way, notice that we’re returning the distance squared here. It’s a common programming shortcut if we’re just checking for the nearest thing. If something has the closest distance, it will also have the smallest distance squared. Doing the square root calculation isn’t worth it – so we don’t.

Downloading and Running

The ZIP file containing this HTML file (image_process.html) and a few sample images can be downloaded from here. Remember, you’ll have to use a web-server to view this webpage and have it be able to process the images. Feel free to try your own images, just copy them into the same directory as the HTML file first, and remember to keep them small as every pixel becomes a MineCraft block. My sample images are all around 40px wide.

What’s Next?

Next week we’ll extend this little application to add optional transparency to the output and merge it with tagger.js so our image is sprayed onto the environment.