To reasons unbeknownst to us, Dan and I gravitate towards being around graveyards. In the past, my secondary school in Hong Kong, our first-year and second-year university accomodation were all situated next to a graveyard. In fact, the flat we are living in right now is also walking distance away from a graveyard, and so is where I work.

One thing that I have found magical about graveyards in the UK are the beautiful wild flowers that seemingly come out of nowhere. It makes me wonder whether dead bodies underground is related to the pretty flowers growing overground. Though I can't find the photos, one time we found loads of crocus flowers in a graveyard. It was beautiful.

Anyway, here are snapshot of snowdrops growing in the cemetary near where we live and where I work. Hope you like and appreciate them as much as we do!

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 👾.

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

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.

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.

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!

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.