Minecraft – Crafting Table

Posted on March 4, 2018 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

For this blog post we have recreated the crafting table in Minecraft using HTML, CSS and JavaScript.

This crafting table enables you to pick up items from your inventory to recreate some of the key recipes to craft new items and add these new items to your inventory.

Our version of the inventory is simplified as it does not record the quantity of items you have left. For each item listed in your inventory it is assumed that you have an infinite supply.

The purpose of this challenge is for you to investigate and reverse engineer how this code works.

First you may want to try this code with a few recipes:

HTML, CSS and JavaScript Code

See the Pen Minecraft Crafting by 101 Computing (@101Computing) on CodePen.

Your Task

You can then adapt this code to add a few more recipes such as the recipe to craft a compass:

And the recipe to craft a clock:

Note that you will find here a full list of Minecraft items.

For more crafting recipes, check this page.

Extra Challenge

The next step would be to tweak this code further to display and update the quantities available for each item in the inventory. These quantities should be reduced when items are used to craft new items, and increased when newly crafted items are added to the inventory.

Data Visualisation Algorithms

Posted on March 1, 2018 by Administrator Posted in A Level Concepts, Computer Science, Computing Concepts, Python - Advanced, Python Challenges

Data visualisation algorithms are used in most software (or video games) which are based on a Graphical User Interface.

They are used to provide a more intuitive, user-friendly visual representation of data.

There is a wide range of techniques and algorithms used to represent data in a visual way, often using Maths concepts (2D or 3D Coordinates, Trigonometry, Proportionality etc.)

The purpose of this blog post is to give examples of a range of data visualisation algorithms.

Example #1: Number of Lives

In a video game, a variable called numberOfLives would be used to store the number of lives remaining, as an integer.
e.g.

numberOfLives = 3

A basic algorithm could then be used to represent this visually at the bottom or top of the screen:

Example #2: Speedometer

Another variable that can be used in a car racing game is the speed of the car in mph.
e.g.

speed = 60

A more advanced algorithm would then be used to represent this value on a speedometer:

Example #3: Analogue Clock

A similar algorithm can be used to represent the time using an analogue clock.

See Python Turtle Clock blog post to implement this algorithm using Python Turtle.

Example #4: Progress Bar

Using linear proportionality we can represent a numerical value as a bar or column.

These three examples would use such an approach to represent data visually:

Progress Bar

Thermometer

Equalizer
See this “Equalizer Animation” blog post to implement this algorithm using HTML, CSS and JavaScript.

Example #5: Pie Charts, Bar Charts, Line Charts, Radar Charts…

Charts are often used to represent data visually. Most high level languages have libraries that can be reused to draw charts.

Try this blog post to draw your own charts using Python Turtle.
Obviously, Python Turtle is not the best library to create charts. Your next step, should you wish to produce advanced charts is to investigate the matplotlib Python library which is very popular to create a wide range of charts. Find out more:

Infographics use a wide range of charts to represent data in a visual way.

Example #6: 2D Representation

Most of the first arcade games where based on a 2D interface.

A 2D interface can be used to represent 2D arrays:

data-visualisation-thatre-booking-system

Theatre Booking System

2D data visualisation algorithms can also be used to represent graphs data structures:

Try the following blog posts to visualise 2D arrays on screen:

Example #6: 3D Representation

Today video games tend to use a 3D user interface which involves more complex data visualisation algorithms.

Try the following blog posts based on 3D data visualisation:

Minecraft Challenge

Example #7: Adding Animation

Data visualisation algorithms can be made more complex when there is a need to animate the visual representation of the data!

Try the following algorithms to create animated simulations:

More examples of Data Visualisation

The following websites contain a wide range of data visualisation techniques:

From Flowcharts to Python Code

Posted on February 28, 2018 by Administrator Posted in Computer Science, GCSE Concepts, Python - Beginner, Python Challenges, Solved Challenges

An algorithm is like a recipe in a cook book. It is a step by step set of instructions that the computer will have to follow to solve a problem or complete a task.

Algorithms consist of step by step instructions which are listed in order and will be executed in the same order, one instruction at a time: this is called sequencing.

On occasions a set of instructions needs to be repeated several times which is done in programming using a loop: this is called iteration.

Computers also have to take decisions as to whether or not to run a set of instructions or to bypass these instructions. In programming these decisions are coded using IF statements: this is called selection.

Complex algorithms can use a range of sequencing, iteration and selection blocks.

To design an algorithm you can draw a flowchart or write pseudo-code.

Your algorithm (flowchart or pseudo-code) can then be converted by a programmer using the programming language of their choice (e.g. Python, Java, Visual Basic, etc.)

Coding Challenges

We have designed five algorithms (See flowcharts below). Your task is to implement each of these algorithms using Python code.

Stopwatch AlgorithmLeap Year?Winter OlympicsTimes TableLogin Form

A stopwatch is used to record the duration of an event as a number of seconds. Our stopwatch algorithm will convert/format this number of seconds to calculate and display the matching number of hours, minutes and seconds, knowing that:

1 hour = 3600 seconds
1 minute = 60 seconds

flowchart-chronometer

Python Code

Complete the code using the trinket below:

This algorithm is a good example of:
sequencing-label

Did you know that the next leap year will be in 2020? To find out if a year (e.g. 2020) is a leap year you can calculate the remainder of year (e.g. 2020) divided by 4. If this remainder is null, then the year is a leap year.

The following algorithm is used to test if a year is a leap year or not.
flowchart-leap-year

Python Code

This algorithm is a good example of:
selection-label

The last Winter Olympics took place in 2018 in Pyeong Chang (South Korea). Winter Olympics take place every 4 years. So when would be the next winter Olympics?

The following algorithm can be used to display the dates of the next ten Winter Olympics.
flowchart-winter-olympics

Python Code

This algorithm is a good example of:
iteration-label

The following algorithm will be used to ask the end-user to enter a number. The program will then display the full times table, from 1 to 10, for this number.
flowchart-times-table

Python Code

This algorithm is a good example of:
iteration-label

A login form should ask the user to enter their username and password. It will then check if these login details are correct before displaying either a welcome message or an error message.
flowchart-login

Python Code

This algorithm is a good example of:
selection-label

Extension Tasks

Use the same approach to complete the following “Flowchart to Python” challenges:

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Tagged with: Flowchart

Time Conversion Algorithm

Posted on February 28, 2018 by Administrator Posted in Computer Science, Python - Beginner, Python Challenges, Solved Challenges

Did You Know?

The 12-hour clock is a time convention in which the 24 hours of the day are divided into two periods: a.m. (from the Latin ante meridiem, meaning “before midday”) and p.m. (post meridiem, “after midday”). Each period consists of 12 hours numbered: 12 (acting as zero), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, and 11. The 24 hour/day cycle starts at 12 midnight (often indicated as 12 a.m.), runs through 12 noon (often indicated as 12 p.m.), and continues to the midnight at the end of the day.

24-hour to 12-hour clock convertor

Your challenge consists of writing a computer program that asks the end-user to enter a time in the 24-hour format (e.g. 18:36). The program will convert this time in the 12-hour format (e.g. 6:36 PM).

To do so you can base your Python code on the following flowchart:

Python Code

Testing

Once your code is done, complete the following tests to check that your code is working as it should:

Test #	Input Values	Expected Output	Actual Output
#1	06:30	6:30 am
#2	14:25	2:25 pm
#3	00:52	12:52 am
#4	11:59	11:59 am
#5	12:00	12:00 pm
#6	23:59	11:59 pm

Extension

Amend this code to validate the user entry and make sure they enter a time between 00:00 and 23:59 and to display a meaningful error message if not.

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Tagged with: Flowchart

A Level Computer Science – Connect Wall

Posted on February 21, 2018 by Administrator Posted in A Level Concepts, A Level Quiz, Computer Science, Computing Concepts, Quizzes

A Level Connect Wall

Group the cards below in groups of 4 by clicking on each card.

Tagged with: Quiz

GCSE Computer Science – Connect Wall

Posted on February 21, 2018 by Administrator Posted in Computer Science, Computing Concepts, GCSE Concepts, GCSE Quiz, Quizzes

GCSE Connect Wall

Group the cards below in groups of 4 by clicking on each card.

Tagged with: Quiz

Python Turtle Spirograph

Posted on February 16, 2018 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges

In this blog post we will create a spirograph using Python Turtle to draw different types of curves.

Did you know?

A Spirograph is a geometric drawing toy that produces mathematical roulette curves of the variety technically known as hypotrochoids and epitrochoids. It was developed by British engineer Denys Fisher and first sold in 1965.

Examples of patterns created using a spirograph:

HypotrochoidHypocycloidEpicycloidEpitrochoidCycloid

A hypotrochoid is a type of curve traced by a point attached to a circle of radius r rolling around the inside of a fixed circle of radius R, where the point is a distance d from the center of the interior circle.

The parametric equations for a hypotrochoid are:
hypotrochoid-formulas

Where θ (theta) is the angle formed by the horizontal and the center of the rolling circle.

Source: https://en.wikipedia.org/wiki/Hypotrochoid

You can tweak the Python code provided below to change the three key parameters: R, r and d to see their impacts on the hypotrochoid curve.

Find out the properties of an Hypocycloid (https://en.wikipedia.org/wiki/Hypocycloid) and adapt the Python code (see below) to create your own Hypocycloid curves.

The parametric equations for a hypocycloid are:
hypocycloid-formulas

Find out the properties of an Epicycloid (https://en.wikipedia.org/wiki/Epicycloid) and adapt the Python code (see below) to create your own Epicycloid curves.

The parametric equations for an epicycloid are:
epicycloid-formulas

Find out the properties of an Epicycloid (https://en.wikipedia.org/wiki/Epitrochoid) and adapt the Python code (see below) to create your own Epitrochoid curves.

The parametric equations for an epitrochoid are:
epitrochoid-formulas

A cycloid is the curve traced by a point on the rim of a circular wheel as the wheel rolls along a straight line without slipping.

Find out the properties of a Cycloid (https://en.wikipedia.org/wiki/Cycloid) and adapt the Python code (see below) to create your own Cycloid curves.

Python Turtle Spirograph: (Hypotrochoid)

Spirograph Pattern:

By changing some of the parameters (r, R or d) and the number of iterations (steps) we can create more advanced patterns.

Tagged with: Python Turtle

Complementary Colours Tool

Posted on February 14, 2018 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

Two colors are considered complimentary (or opposite) if they produce a neutral color — black, white, or grey — when mixed evenly.

When placed next to each other, a colour and its complimentary colour create the strongest contrast that can be created with this initial colour.

RGB colours code consists of 3 values to identify a unique colour:

Red Value: A number between 0 and 255
Green Value: A number between 0 and 255
Blue Value: A number between 0 and 255

For instance:

(255,0,0) is the colour code for red,
(255,0,255) is the colour code for magenta,
(100,0,100) is the colour code for a dark purple colour,
(255,255,255) is the colour code for white,
(0,0,0) is the colour code for black,

Let’s consider a colour with a colour code of (Red, Green, Blue).
The colour code for its opposite colour will be (255 – Red, 255 – Green, 255 – Blue)

Colour (Red, Green, Blue)
Opposite Colour (255 – Red, 255 – Green, 255 – Blue)

Your Challenge

Use the above formula to complete this codepen where the user can pick a colour (by inputting the RGB colour code) to preview this colour. The code should calculate the RGB code of the opposite colour and use it to preview this opposite colour code.

See the Pen Opposite Colours Tool by 101 Computing (@101Computing) on CodePen.

Extension Task

Complete this code to also calculate and display the colour codes of both colours using an hexadecimal colour code.

Python Turtle – Morphing Algorithm

Posted on February 9, 2018 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges, Solved Challenges

Tweening/Morphing effects are often used in Computer Animations to change the shape of an object by morphing an object from one shape into another.

In tweening, key frames are provided and “in-between” frames are calculated to make a smooth looking animation.

In this blog post we will implement a tweening algorithm to morph a letter of the alphabet (e.g. “A” into another letter “Z”) using a linear interpolation.

We will consider a letter as being a list of connected nodes (dots) where each dot has its own set of (x,y) coordinates.

Linear Interpolation Formulas:

Using the following linear interpolation formulas we can calculate the (x,y) coordinates of each dot for any “in-between” frame.

x(t) = x_A + (x_Z – x_A) * t / 10

y(t) = y_A + (y_Z – y_A) * t / 10

“t” represents the time: in other words the frame number (e.g. between 0 and 10)
(x_A,y_A) the coordinates of a node/dot from the starting letter (e.g. A)
(x_Z,y_Z) the coordinates of a node/dot from the ending letter (e.g. Z)

Using these formulas we can see that:

x(0) = x_A
y(0) = y_A

x(10) = x_Z
y(10) = y_Z

Our tweening algorithm will need to apply these formulas to each node of the letter.

Python Code (using Python Turtle)

Your Task #1

Tweak this code to create a tweening animation going through all the letters of your firstname.
(e.g. J -> A -> M -> E -> S).

Your Task #2

Tweak this code to create an animated count down timer counting from 9 to 0.
(e.g. 9 -> 8 -> 7 -> 6 -> 5 -> 4 -> 3 -> 2 -> 1 -> 0).

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Machine Learning – Top Trumps Game

Posted on February 6, 2018 by Administrator Posted in A Level Concepts, Algorithms, Computer Science, Computing Concepts, HTML, CSS & JavaScript, JavaScript

The purpose of this post is to demonstrate a basic example of how machine learning works.

In this example, the computer learns how to play a game of Top Trumps more effectively to increase its chance of winning the game.

It does so by running a learning sequence. During this learning sequence its machine learning algorithm pick two random cards from the deck and compare them against a random criteria.

Based on which card wins the round, it updates its knowledge base accordingly. By repeating this process many times (number of iterations), the algorithm records in its knowledge base statistics for each category of each card. (Probability of winning the round)

The algorithm hence progressively learns which criteria has the highest probability of winning and records this information for each card of the deck.

These probabilities become more accurate when you increase the number of iterations of the learning sequence.

Use the buttons provided in the code pen below to show the impact of the learning phase on the knowledge base.

See the Pen Machine Learning Top Trumps by 101 Computing (@101Computing) on CodePen.

Machine Learning?

Let’s consider the following definition of Machine Learning:

“A computer program is said to learn from experience E with respect to some task T and some performance measure P, if its performance on T, as measured by P, improves with experience E.” — Tom Mitchell, Carnegie Mellon University

Let’s apply this defintion to our Top Trumps Machine Learning algorithm:

E: (The Experience/learning sequence): The experience consists of randomly picking two cards and comparing them against a criteria to see which card would win the round.
T: (The Task): Playing a full game of Top Trumps against an end-user.
P: (The Performance Measure): The probability of winning the game.

In our example, the probability (P) of winning a game of Top Trumps (T) increases with the number of iterations of the learning sequence (Experience E).

So we effectively have a machine learning algorithm.

Obviously, with a fixed data sets of 9 cards and 4 criteria per card, the learning is limited. More complex scenarios use a similar approach with larger data sets which are often open/limitless and where the computer can constantly learn and improve the accuracy of its knowledge base by either analysing existing data sets or populating new data by interacting with real end-users/human beings.

Next Step?

To complete this algorithm, the next step would be to implement the playing phase, where the computer should use its knowledge base to play against an end-user.

Learning Zone ✕

Theory Concepts

Interactive Quizzes

GCSE Computer Science (UK)

A-Level Computer Science (UK)

Coding Challenges ✕

Python Challenges

HTML / CSS & JavaScript

LMC

SQL

Block Programming

Interactive Coding Puzzles

Online Interactive Tools ✕

Coding Tools

Design Tools

Logic Gates Circuits

Cryptography Corner

Member's Area ✕

Register/Sign Up

Get In Touch

Books Corner

HTML, CSS and JavaScript Code

Your Task

Extra Challenge

Example #1: Number of Lives

Example #2: Speedometer

Example #3: Analogue Clock

Example #4: Progress Bar

Example #5: Pie Charts, Bar Charts, Line Charts, Radar Charts…

Example #6: 2D Representation

Example #6: 3D Representation

Example #7: Adding Animation

More examples of Data Visualisation

Coding Challenges

Python Code

Python Code

Python Code

Python Code

Python Code

Extension Tasks

Solution...

Did You Know?

24-hour to 12-hour clock convertor

Python Code

Testing

Extension

Solution...

A Level Connect Wall

GCSE Connect Wall

Did you know?

Python Turtle Spirograph: (Hypotrochoid)

Spirograph Pattern:

Your Challenge

Extension Task

Linear Interpolation Formulas:

Python Code (using Python Turtle)

Your Task #1

Your Task #2

Solution...

Machine Learning?

Next Step?

Our Latest Book

Recent Posts