Demo Video

Problem Space

Now, people are very concerned about their health, and many people have regular jogging habits. Some people have also begun to try to use wearable devices and smartphones to help record their exercise results. For example, bracelets used to record heart rate and GPS to record jogging distance and time, providing speed and calorie consumption apps, such as Running Distance Tracker +, Nick Running, etc. But these data provide only training results, without helping user to improve the process. On the other hand, breath training has been recognized by academics and joggers. O'Brien et al. (2002) pointed out that using regular breathing to drive the rhythm of running can achieve better training results. Many training websites for joggers (Airofit, 2019; Kuzma, 2019; Natmessnig, 2018) also point out that regular breathing, such as 2: 2 breathing, has a positive effect on joggers' running exercises. But for beginners, because of the lack of guidance, it takes more time and energy to complete the breath training exercises. User research shows that if someone instructs them to perform breathing training, they can enter this state more quickly. Therefore, it will be meaningful to design a wearable device to guide jogging beginners to perform breathing training for running.

User Research

Due to the social distancing, the user research is conducted online. A total of 5 online interviews were conducted.

All 4 participants with jogging experience stated that they had learned a certain breathing training method at a certain stage, and all believed that breathing training improved their jogging efficiency. One participant learned to use the nose to inhale and the mouth to exhale. Two other participants said they learned the 2: 2 breathing method, which means 2 step with one breath. Also, they will change to 1:1 breathing when speed up. 3 participants said they encountered some challenges when they started practicing breath control, such as forgetting to control in the second half of jogging. One participant stated that they was unable to adapt to the intensity of running in the early stages and was therefore unable to take care of breathing training. But they once had a coach to remind them to control breathing. They thought that the coach's reminder helped them learning faster. One participants with no jogging experience indicated that they had no knowledge of breathing training. According to them, they recalled their occasional running activities, for example, running for classes. there was no regular breathing rhythm, and they always feel exhausted after running.

When asked about the experience of using existing sports apps. One participant talked about the achievement system and leader board in the app was one of the reasons that attracted them to use the app. Another participant said they was more concerned about the performance recorded by app. Two participants indicated that they had the habit of listening to music during jogging.

Design Process

Constructing

The prototype used a microphone as an input sensor for breathing. Finally, the XC-4438 type microphone with adjustable threshold function was selected. In the early stage of the design, this project considered to collect and analyse the user's breath audio to provide users with more information to enhance the training effect. But because only the analogue signal is provided from Arduino and the microphone, it will bring great difficulties to convert it into an audio signal and then analyse it. So this idea was abandoned. Finally, after using median filtering to gain stable reading, the signal that exceeds the threshold is considered to be the user's exhaled breath as data input. One disadvantage of the microphone is that it is impossible to detect the user's inhalation process but considering that the user would not hold breath during exercise, this project assumes that the user is inhaling at the stage of no exhalation.

After confirming the use of 2: 2 breathing method, this project began to explore the possibility of step counting. In the early stage of exploration, this project tried to use the compass to obtain the user’s when running and shaking for step counting, but in fact, the shaking is not obvious, and the value hardly changes during the movement. Later we tried to use the tilt switch. The switch responded well when it was rocked up and down in the handheld test. When it was placed vertically, it was triggered every time it was shaken. But in fact, after testing on the human body, we found that the shaking of the running is not enough to trigger the tilt switch.

In the end we used an accelerometer. We use the change in reading caused by shaking up and down, that is, the change in z-axis as the basis for step counting. Similarly, after obtaining a stable reading using median filtering, the user is considered to have taken a new step when the reading exceeds the threshold, and the step is completed when the reading returns to the baseline. But one problem that has existed so far is that sometimes, the accelerometer will plus 2 steps after the user takes a step. In fact, the readings brought by the accelerometer are far more complicated than expected and may require further improving.

As mentioned above, the output method of the device is finally determined to be a display suspended at the upper right of the user's field of view.The final design is presented in image below.

The content presented on the display is considered can be difficult to read the text during running and the attention needs to be distracted on the route. The form of feedback is determined to be mainly based on images and can provide the user with the next breathing mode prediction, so that the user can be prepared. Finally, we designed a line chart to make it easier for users to notice the next breathing direction. And let it disappear as the feedback of unstable breathing rhythm as image below.

Interaction Paradigm

The figure below presents an example of interaction between the user and the system in a single use.

Because the helmet uses 2: 2 breathing method, the breathing frequency needs to be matched with the step. Therefore, the data input includes the user’s step frequency and breathing. After each input is received, the helmet will determine whether the exercise conforms to the breathing method in the background. If the breathing matches, the display will show breathing guide diagram of the next 4 steps is presented; if it does not match, the text requiring the user to adjust the breathing is presented on display.

The user maintains the breathing rhythm of his running through the guide map of breathing training to achieve the better training effect. The visualisation of the line chart allows users to predict their breathing phase in advance. At the same time, users can get feedback when their breathing becomes chaotic to reduce their attention pressure on their own breathing.

Breathing is divided into two stages: exhalation and inhalation. Because the microphone can only detect exhalation, the helmet always taking first exhales as start point after user adjustment for display guidance to achieve the best presentation effect. After the user uses the button again after the end, the device ends the training mode and presents the statistical results of this training. By comparing the result, users can understand if they have made improvement on jogging breathing training.

References

Airofit. (2019). How to breathe when running and strengthen your performance. Airofit. https://www.airofit.com/blogs/all-blog-posts/how-to-breathe-when-running-and-strengthen-your-performance

Kuzma, C. (2019). Breathing Techniques—How to Breathe While Running. Runner’s World. https://www.runnersworld.com/training/a20822091/running-on-air-breathing-technique/

Natmessnig, H. (2018, March 6). How To Breathe Properly While Running. Runtastic Blog. https://www.runtastic.com/blog/en/how-to-breathe-properly-while-running/

O’Brien, J. (2002). Running and Breathing. Yes International Publishers.

Just the fact example

Fact:

105: The percentage of Australia's population in 1988 (16.6 million) compared to visitors of Brisbane's World Expo '88 (15.8 million) in the same year.

From:

ExpoMuseum. (n.d.). Expo '88, Brisbane, Queensland, Australia. Retrieved from expomuseum.com/1988/. PopulationPyramid.net. (n.d.). Population Pyramids of the World from 1950 to 2100. Retrieved from populationpyramid.net/australia/1988

Justification:

I decided to use Circle Packing figure (The Data Visualisation Catalogue, n.d.) to express this fact comparing two different number of people. Expo is a famous abbreviation for the Universal Exposition. It will be interesting to change the letter O into the pattern. The figure itself is a Circle Packing figure that two different circle overlapping together to show the area of small circle accounts for the big circle. The big circle is 105% of the area of the small circle. I used orange as the main colour, which idea came from the theme colour of logo of World Expo 1988. After that I choose an analogous colour as in green and with the same high brightness but much less saturation, to keep two circle harmony but clearly divided. For background I simply use dark grey, which can cause a strong contrast with bright figure and text, to emphasis the main message.

I placed the main pattern in the centre, because the main figure is text, so I decided to show the other words as annotation rather than a title, using two dashes to connect the big circle and the small circle. To keep the weight of the whole picture, I put one half of annotation on top, and another half to the bottom. The population annotation including a conclusion message of “105%”. Considering that the reading order is from top to bottom, I decided to put this one below. Moreover, this sentence is longer and putting it below will make the picture more stable.

I picked the typeface cocogoose family (Zetafont, 2014) for my design. This typeface has thicker letters and a very rounded letter “O”, which can be easier for reader to associate the figure and the letter O. This font fits nicely with the figure, so I think this font is the right choice.

Infor graphic

Data source:

Australian Bureau of Statistics. (2018). 4517.0 - Prisoners in Australia, 2018. Retrieved May 19, 2019 from abs.gov.au

Justification:

The original data is complex, so I try to present complex but important information in as many dimensions as possible on a single graph. I choose to use the crime as the main category, divide the crime into bubbles, and use the area of the bubble to indicate the number of crimes. The coordinates corresponding to the centre point of each bubble are two time-related variables, the average age of imprisonment and the average age of crime. For this data, I think the second crime rate is also an important reference, so I choose to It is placed above the title as a new dimension.

I tried to assign the colour of each bubble to the highest possible degree of discrimination so that there is enough contrast between them. This also allows me to present the number of criminals in each state and the proportion of each crime in the form of a column.

Finally, I tried to add a legend in the lower right corner to make the graphics better understood.

Design challenge

Design topic:

The challenge is to draw a suburb of Brisbane as a tourist advertisement in the style of an old-time railway poster. The required 5 colours maxium. All graphics need to be drawn by myself.

Justification:

The suburb where I live is St Lucia, and the most famous place in St Lucia is probably the street corner near St Lucia Supermarket. And my favorited thing about this place is how the sunset glows over it. So, I drew this poster with the inspiration of a photo I took before to express my deepest impression of St Lucia.

The focus of the picture is sunset glow, so I illustrated the sunset in a large area in the sky and highlighted the impression of the glow of the sunset on the road. Below the picture, from left to right are supermarkets itself, the panels at the entrance of supermarkets, roads, low walls and other townhouses. I noticed a feature of vintage posters is the abstraction of some objects but retaining complex contours. Because the house is normal for tourism tracking, so I abstracted them into black shadow. But in order to make the picture more layered, I lighted the low wall. In order to balance the supermarket on the left, a street sign was placed on the right side. In order to increase the dynamic effect of the picture, I placed a rider near the street sign who was riding a bicycle to prepare to cross the road. Finally, I chose to use a white frame to enhance the vintage feeling of the poster.

This picture uses a total of 5 colours. The sunset glow itself is deep orange (#EA5514), a colour with high saturation and passion. To make the picture harmony, I use a light orange (#F8B62D) as an analogous colour to set off the bright colours of the setting sun. Then I chose a bleak dark blue (#0857A2) as complementary colour to represent the sky in the late night while emphasis the sunset glow more. In order not to increase the complexity of the picture, I chose white (#FFFFFF) for the bright side of the ground, and black (#000000) for the dark side. Finally, order to emphasize the afterglow of the sunset, I exaggeratedly painted the ground as the same colour as the sunset to enhance the impact.

After I made multiple adjustments, I finally chose Ebrima, a sans serif font from the system. Because I found that the fonts of vintage posters are often sans serif and a little vertical font, or handwriting font for the title. But because my poster background is a bit messy, yet shortening the sunset clouds will cause the sunset to become less prominent, so I chose to use the simple sans serif font to balance the complexity of the background. Finally, I chose to emphasize the focus of the picture again with a small word on the subtitle.

Bubble Shooter is a pure web game based on PIXI.js animation engine. PIXI.js is a high-performance canvas rendering engine suitable for making h5 games. This project was originally a project for me to practice JavaScript, and making a game is defiantly an interesting way to do it. There are three main difficulties in this project. The first is that converting the position of the mouse pointer on the page and the rotation of the launch wheel. The second is to let the launched ball just be placed in the certain gap. The third difficulty is that to determine which balls need to be clear after user launching. Finally, I found the answers to these three questions.

1st challenge: rotating the wheel

In fact, to rotate the launch wheel is the simplest of the three challenges, this is a trigonometric conversion problem and I used arctangent to calculate this. But another problem is that the ball and the wheel are two separate objects. So, the ball is actually a round movement rather than rotation. To do this, I abstract the position of the mouse into a hypotenuse from the origin, and then according to the hypotenuse and the ratio of the length of the screen to convert the position of the ball.

                    
function wheelMove(mouseX, mouseY) {
    //calculate the degree of wheel rotating
    turn = Math.atan2(mouseX - appWidth / 2, appHeight - mouseY);
    //the range of rotation
    let turnLimit = 0.9;
    if (turn > turnLimit) {
        turn = turnLimit;
    } else if (turn < -turnLimit) {
        turn = -turnLimit;
    }
    //calculate the position of the ball, by calculating the proportion of size between canvas and entire page
    if (turn < turnLimit && turn > -turnLimit) {
        let times = Math.sqrt(
        Math.pow((mouseX - appWidth / 2), 2) + Math.pow((appHeight - mouseY), 2)
        ) / 128;
        ballX = (mouseX - appWidth / 2) / times + appWidth / 2;
        ballY = (mouseY - appHeight) / times + appHeight;
    }
}
                    
                

2nd challenge: Put the ball in that gap

Although launching a ball is a simple task, and we only need to change the coordinates of the ball at a fixed refresh rate and change the horizontal speed to a negative number at the boundary. But in fact, the angle of the ball launching is random, and the ball may fly to any position, making the canvas very messy.

To make the bubble dragon playable, it is necessary to place the ball fired by the player to the specified position, and then it is possible to process the same colour. I came up with an alternative solution for this. There is an important attribute in PIXI.js that is visible. When the game starts, script generate the ball on the full screen, but only the first 3 rows are visible. When the ball is launched, first script will determine whether it collides with a visible ball and return the line number of hit point. After the collision, it searches for the position of the invisible ball closest to it. At this point, I directly replace the invisible ball with launched ball. This alternative method solves this problem very easily.

                    
function findHitLine() {
/*
this is the function find which line does the launched ball hit and return the line number
if no hit happens, return -1
*/
    for (let i = 0; i < totalBalls.length; i++) {
        if (totalBalls[i][0].y - launchBall.y < 32 && totalBalls[i][0].y - launchBall.y > -32) {
        let line = totalBalls[i];
        for (let j = 0; j < line.length; j++) {
            let ball = line[j];
            if (hitTestCircle(launchBall, ball) && ball.isActive) {
            return i;
            }
        }
        }
    }
    return -1;
}

function findClosestEmpty(launchBall, lineNum) {
/*
This is the function find the closest position of the invisible ball when hit happends
Params:
    launchBall (PIXI.Spirit): the launched ball object
    lineNum (int): The line number that hit happens 
Returns: 
    close (array)[lineNum, index] : including the x, y coordinate information of the closest invisible ball. 
*/

    let close = [];
    let minDist = 512;
    //totalBalls is a 2 dimentional array including all balls on the map
    //start from frist line
    for (let i = 0; i < totalBalls[lineNum].length; i++) {
        let ball = totalBalls[lineNum][i];
        let dist = Math.sqrt(
            (launchBall.x - ball.x) ** 2 + (launchBall.y - ball.y) ** 2
        );
        if (dist < minDist && !ball.isActive) {
            close[0] = lineNum;
            close[1] = i;
            minDist = dist;
        }
    }
    if (lineNum > 0) {
        let line = totalBalls[lineNum - 1];
        for (let i = 0; i < line.length; i++) {
            let ball = line[i];
            let dist = Math.sqrt(
                (launchBall.x - ball.x) ** 2 + (launchBall.y - ball.y) ** 2
            );
            if (dist < minDist && !ball.isActive) {
                close[0] = lineNum - 1;
                close[1] = i;
                minDist = dist;
            }
        }
    }
    //if the hiting line is full, go to the next line.
    if (lineNum < totalBalls.length - 1) {
        let line = totalBalls[lineNum + 1];
        for (let i = 0; i < line.length; i++) {
            let ball = line[i];
            let dist = Math.sqrt(
                (launchBall.x - ball.x) ** 2 + (launchBall.y - ball.y) ** 2
            );
            if (dist < minDist && !ball.isActive) {
                close[0] = lineNum + 1;
                close[1] = i;
                minDist = dist;
            }
        }
    }
    return close;
}
                    
                

3rd Challenge: Finding balls need to be cleaned

This is probably the hardest challenge in this project. The solution I think of is a recursive approach. But because it needs to diverge in different directions, I chose to create an array readyToClear externally, using the feature of JavaScript that array name is just a reference. And I pass this array as an argument to the function adding all the target balls to the array. The function is mainly divided into two parts, the first part is findClear(). This function looks for the balls from 6 directions nears target ball r1, after finding the 6 balls, a judgment function findClearSub() will be called and 6 balls will be passed in the function separately. If the ball is newly added to the readyToClear array in findClearSub(), then we pass the ball back to findClear() and judge the 6 balls around it again. When all the balls are added to readyToClear, functions will stop and we found all the target balls.

                    
function findClear(r1, readyToClear) {
/*
Judging all balls in the six directions of this ball.
Params:
    r1 (PIXI.Spirit): the ball need to be process
    readyToClear (array)[PIXI.Spirit]: an array of balls need to be cleared
*/
    let row = (r1.y - 128) / 56;
    let column = Math.ceil(r1.x / 64) - 1;
    let lineType = totalBalls[row].length === 8 ? 1 : -1;

    let ballLine = totalBalls[row];
    if (column - 1 >= 0) {
        let tempBall = ballLine[column - 1];
        findClearSub(r1, tempBall, readyToClear);
    }
    if (column + 1 < ballLine.length) {
        let tempBall = ballLine[column + 1];
        findClearSub(r1, tempBall, readyToClear);
    }
    if (row > 0) {
        let topBallLine = totalBalls[row - 1];
        if (column < topBallLine.length) {
        let tempBall = topBallLine[column];
        findClearSub(r1, tempBall, readyToClear);
        }

        if (column - lineType < topBallLine.length && column - lineType >= 0) {
        let tempBall = topBallLine[column - lineType];
        findClearSub(r1, tempBall, readyToClear);
        }
    }
    if (row < totalBalls.length - 1) {
        let topBallLine = totalBalls[row + 1];
        if (column < topBallLine.length) {
            let tempBall = topBallLine[column];
            findClearSub(r1, tempBall, readyToClear);
        }

        if (column - lineType < topBallLine.length && column - lineType >= 0) {
            let tempBall = topBallLine[column - lineType];
            findClearSub(r1, tempBall, readyToClear);
        }
    }
}

function findClearSub(r1, tempBall, readyToClear) {

    if (tempBall.color === r1.color && tempBall.isActive) {
        let isIn = false;
        readyToClear.forEach(function (ball) {
            if (tempBall === ball) isIn = true;
        });
        if (!isIn) {
            readyToClear.push(tempBall);
            findClear(tempBall, readyToClear);
        }
    }
}

                    
                

Other improvements

Although this project is only an exercise, it won the praise of my friends after the launch. So I have received a lot of user feedback. In the early stage of production, I made a dark theme and drew balls graphic myself. But users think that this theme is too dark and makes people feel bad. For this reason, I chose the open source material of the Christmas ball to create a new theme, which became a success.

The picture below is the theme I made by modifing the coluor with the Christmas ball material to enhance the distinction. Ii went online at the end of last year.

The cover of the portfolio uses a landscape that occupies the entire page. This photo is actually a part of our project's inspiration. This photo was taken by me last year at Southbank, and it is also one of the most satisfying photographs I have in my Master degree. The font of the portfolio is Rubik, a sans serif font family. This font is easy to read but vibrant, and fits the overall style of the collection.

The theme colour of the collection uses the same blue colour as the Brisban River Adventure, relfecting the main project. I used the plugin scrollTo, an open source scrolling plugin that allows the reader to smoothly scroll to the specified location when clicking on the top navigation bar, improving the reading experience. It is also a progressive plugin that guarantees the anchor is still working when JavaScript is disabled.Because I am a front-end engineer, it is necessary to have certain code in the folio. So I used another plugin prism, which is an open source code highlighting plugin that can display code in <code> tag in the similar way of the code editor does, to enhances the reader's experience when reading the code. At the same time, this is a very light plug-in, which is only 2kb, minimizing the reader's network speed burden.

In addition, this site also takes into account the browsing experience of the mobile terminal. This portfolio uses flex box to realise complex layouts, which is convenient for switching between horizontal and vertical layout. The layout of this portfolio will be responsive to ensure normal experience on different platforms.