Micro:bit - Don't Drop The Ball

11 Aug 2023

Recently, I have become fascinated with the BBC micro:bit. It has been described as a "pocket-sized computer" and is much like a beginner-friendly Raspberry Pi or Arduino. micro:bit is designed by the BBC to educate people on how computers work and to inspire children to engage in digital creation.

The Micro:bit Educational Foundation is a not-for-profit organisation that aims to inspire every child to create their best digital future.

Given my recent interest in this electronic, I was pleasantly surprised to find that my sister-in-law's boyfriend had a micro:bit ✨, which he ordered during COVID lockdown, for me to borrow and play around with đŸ•šī¸. With that, I thought I would try and make a little game 👾.

micro:bit Starter Kit

What did I use?

The micro:bit can be programmed using (1) Microsoft's MakeCode editor, which allows programming using colourful blocks like in Scratch, or (2) their own Python editor, which is also known as MicroPython.

Since I am already familiar with text-based programming and Python, I opted for MicroPython. The editor is user-friendly, accompanied by easily accessible documentation and drag-and-drop code snippets. I especially like how there is a simulator of the Micro:bit on the side which quickens the development process.

What game did I make?

I decided to create a game that makes use of the accelerometers in the m,micro:bit. The goal of the game is to keep the "ball" on the board and prevent it from falling off. As the player tilts the board, the ball rolls across the board. To add difficulty, the ball speeds up as you level-up.

The Result

Creating and playing the game was incredibly enjoyable!

Overall, I'm quite impressed with what you can do with micro:bit! I would recommend it to people who want to learn how to code and create something fun!

My source code

Below is a copy of the source code.

## Imports go at the top
from microbit import *
import time

DIRECTION = 'direction'
MAGNITUDE = 'magnitude'
DOWN = 'DOWN'
RIGHT = 'RIGHT'
LEFT = 'LEFT'
UP = 'UP'

GRAVITY_MODE = {
    DOWN: {DIRECTION: 'y', MAGNITUDE: 1},
    RIGHT: {DIRECTION: 'x', MAGNITUDE: 1},
    UP: {DIRECTION: 'y', MAGNITUDE: -1},
    LEFT: {DIRECTION: 'x', MAGNITUDE: -1},
}
ANTICLOCKWISE_GRAVITY_CHANGE = {
    DOWN : RIGHT,
    RIGHT : UP,
    UP : LEFT,
    LEFT : DOWN
}
CLOCKWISE_GRAVITY_CHANGE = {
    DOWN : LEFT,
    RIGHT : DOWN,
    UP : RIGHT,
    LEFT : UP
}
LEVELS_TO_MS = {
    1: 1000, ## millisecs per frame for each level
    2: 500,
    3: 250,
    4: 200,
    5: 150
}
MAX_LEVEL = 5
## States
WON = 'WON'
PLAY = 'PLAY'
IDLE = 'IDLE'

FILLED_VALUE = 9;
MAX_VALID_VALUE = 4
MIN_VALID_VALUE = 0
TILT_THRESHOLD = 500
COUNT_PER_LEVEL = 15

def isPointValid(pt):
    x = pt['x']
    y = pt['y']
    return (
        x <= MAX_VALID_VALUE and x >= MIN_VALID_VALUE and
        y <= MAX_VALID_VALUE and y >= MIN_VALID_VALUE
    )

def loopDisplay(a):
    for i in a:
        display.show(i)
        time.sleep(1)

def countDown(level):
    loopDisplay([Image.HAPPY, "LEVEL "+str(level)])

## Intitalise
point = {'x': 2, 'y': 0} ## coordinate of the ball
gravity_key = 'DOWN'
counter = 0 ## to see how much "time" has passed for leveling up!
level = 1 ## initial level
state = PLAY
countDown(level)

while True:
    if isPointValid(point) and state == PLAY:
        display.clear()
        display.set_pixel(point['x'],point['y'],FILLED_VALUE)
        time.sleep_ms(LEVELS_TO_MS[level])

        if counter == COUNT_PER_LEVEL:
            if level < MAX_LEVEL:
                level = level + 1
                point = {'x': 2, 'y': 0}
                gravity_key = 'DOWN'
                counter = 0
                countDown(level)
            else:
                state = WON

        ## Tilt to control ball
        x_strength = accelerometer.get_x()
        y_strength = accelerometer.get_y()

        if abs(x_strength) >= abs(y_strength):
            if x_strength >= TILT_THRESHOLD:
                gravity_key = RIGHT
            if x_strength <= -TILT_THRESHOLD:
                gravity_key = LEFT
        else:
            if y_strength >= TILT_THRESHOLD:
                gravity_key = DOWN
            if y_strength <= -TILT_THRESHOLD:
                gravity_key = UP

        ## Press buttons to control ball
        if button_b.was_pressed():
            gravity_key = ANTICLOCKWISE_GRAVITY_CHANGE[gravity_key]

        if button_a.was_pressed():
            gravity_key = CLOCKWISE_GRAVITY_CHANGE[gravity_key]

        ## Update gravity
        gravity = GRAVITY_MODE[gravity_key]
        point[gravity[DIRECTION]] = point[gravity[DIRECTION]] + gravity[MAGNITUDE]

        ## Increment counter
        counter = counter + 1
    else:
        ## When the player has lost
        loopDisplay([Image.SAD])
        state == IDLE

    ## When the player has won
    if state == WON:
        loopDisplay([Image.HAPPY, 'YOU WON!'])
        state = IDLE

    ## Waiting for the player to be ready to restart game
    if state == IDLE or button_b.was_pressed() or button_a.was_pressed():
        point = {'x': 2, 'y': 0}
        gravity_key = 'DOWN'
        counter = 0
        level = 1
        state = PLAY

2023 Website revamp for a new start

01 May 2023

To mark the start of finding a new job and moving to the UK, I revamped my website.

After looking at several inspiring websites, I decided that for this revamp, I wanted to express more of my personality as well as make it fun! I was mainly inspired by lynnandtonic's website, and have been fangirling about it ever since finding it. Not only does it showcase really cool and fun projects, but it also impressively showcases annual iterations of the website in the Archive page, which I find motivating and encouraging. I am especially wowed by the wild and imaginative digital easter eggs on the websites (e.g., re-sizing the window to show animations, dragging and dropping icons to change the theme of components).

Without further ado, here is how I revamped my website.

The illustrated cover

Highly inspired by lynnandtonic's 2018 website, which features a Bob's burger-styled illustration of lynn in her room, I decided to sketch myself in our (Dan + my) HK home in the style of LittleDigits' illustration of Hilda from the Netflix TV Series Hilda. I really liked the idea of paying homage to our humble home in HK seeing as we would be moving away to the UK soon.

Since I do not have a drawing tablet/pad, the illustrations were drawn using my mousepad in Figma. I roughly traced a photo of our home and a sketch of myself.

Sketches of myself using pen, pencil, and paper using LittleDigits' style.

Home page fun elements

To welcome visitors, I thought it would be cute to have a little animation of myself saying hello. The animation was created by using @keyframes CSS to run through the six SVG images that make up the frames of the animation. To prevent lagging in the animation, I had to preloaded the images.

Animation frames of myself created using Figma variants

For the digital easter egg, my plan was to use the light switch of our HK home to toggle the light/dark mode of the website. It was very satisfying to create the light switch using CSS (see my CodePen), since I am new to drawing with CSS. As it was my first time implementing dark mode, to toggle the theme of the website, I followed Dmitry Borody's post about theming web applications with SASS, which I found rather clever!

Animation of me saying "hello" and the toggling of the light and dark mode using the light switch.

See you next time!

That's pretty much all for this time's revamp! Now we must wait for whenever another wave of inspiration and motivation to revamp the site hits me.


My past portfolio websites

01 May 2023

My first-ever version of my website was in 2019, just after I graduated from university. The website lasted me through my first job. Below is a screenshot of what it looked like. Back then, I kept the style minimalistic and chic. Many of the projects showcased were past university projects.

2019-website

Last year, I created a new version of my website using Jekyll. It all started when I came across Ian Li's website during my time as a researcher. I really liked the website because, although the design is simple, clean, and easy to understand, it still manages to present character and individuality through the color scheme, illustrations, and layout. I also enjoyed looking through the fun personal projects.

Inspired by the website and his work, I dug into his GitHub account to get some hints on how he implemented his website. That was when I was first introduced to Jekyll! After some self-learning and trial-and-error, I am now a fan of Jekyll. Unlike how my original website (source code) was built, which involved a fair amount of copy-and-pasting HTML code (e.g., for the navigation bar and footer), Jekyll produces a complete static website based on given content and templates. Using Jekyll reduced code repetition and allowed for easier content management of the website.

2022-website