Documentation & Reflection

Week 14

Sulaiman Ma - Sat 13 June 2020, 1:18 pm

Design process

Final outcome:

This week, we finalize our project. We used the towel, cardboard, glue to make up the map, as shown below:

imgur imgur imgur

Video

This week I shoot three videos for my portfolio, which are intended experience, final outcome demonstration video, how it works video.

Portfolio

I finished everything in portfolio.

Reflection

This semester is hard for both us and tutors, we were trying to figure out a new way to keep high-quality education in such a suffering situation. Finally I happy with the final outcome I got and the assistance the teaching team provides.

In the whole process of designing, the hardest part is communication with teammates. Since we do not have a chance to meet up in person, so we need to contact with each other remotely. Initially, we found our efficiency of communication is lower than before, so we were trying to find some ways to enhance our efficiency, so we were trying to use some online tools to help us. And the miro is the best one, it can help us to analyze logic efficiently.

Anyway, this is a special semester for us, and we all will remember it.

Thanks for all!!

Week13

Sulaiman Ma - Sat 13 June 2020, 12:50 pm

Design process

In this week, I was doing preparation for the final exhibition, I was focusing on the final program, portfolio, and physical block.

Final python program

For the program, we met a problem which is the robot can not send the data of finding a wall to the python program, so Bowen and I were thinking about using a virtual map to achieve that, which means we create a virtual map by creating arrays and labeling the position of road, wall, start, and final. As shown below:

imgur

Physical block

Since this time, we increase the number of blocks to provide more possibilities for the users. But there is a problem which is that it is more difficult for users to pick the block they want among such many blocks. So, I was trying to figure out how to solve the problem. Then I came up with one idea which is to use different colors to classify the code blocks by using different colors, this will help users to pick up blocks more quickly, as shown below:

imgur

Portfolio

This week, I finished most of the contents in Word, then I will put it to my website next week, as shown below:

imgur imgur imgur imgur imgur imgur imgur imgur imgur

Plan for next week

Next week, I will finish the portfolio website, and I will shoot some demonstration video for portfolio too.

Week12

Sulaiman Ma - Tue 2 June 2020, 12:59 pm

Design process:

This week, Bowen and I mainly work to combine our code together, since before we create code separately, I took charge of the block input, he took charge of robot output, this time we wanna combine them together and make sure it still works well. But the process does not work well since when it comes to the Loop[] function, it keeps popping out errors, so we still need to debug in the few days. This is the current version of the combination of code:


#!/usr/bin/env python3

# Copyright (c) 2018 Anki, Inc.

#

# Licensed under the Apache License, Version 2.0 (the "License");

# you may not use this file except in compliance with the License.

# You may obtain a copy of the License in the file LICENSE.txt or at

#

#     https://www.apache.org/licenses/LICENSE-2.0

#

# Unless required by applicable law or agreed to in writing, software

# distributed under the License is distributed on an "AS IS" BASIS,

# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

# See the License for the specific language governing permissions and

# limitations under the License.

import cv2

import numpy as np

import serial

from pyzbar.pyzbar import decode

import anki_vector

from anki_vector.util import degrees, distance_mm, speed_mmps

from anki_vector import audio

from anki_vector.objects import CustomObjectMarkers, CustomObjectTypes

from anki_vector.events import Events

import keyboard

import time

import _thread

import functools

class Controller:

    

    def __init__(self):

        self._cmdStr = ""

        self._cmdList = []

        self._loopTimes = 1

        self._wallAheadFlag = False

        self.main()

    def handle_object_appeared(self,event_type, event):

        # This will be called whenever an EvtObjectAppeared is dispatched -

        # whenever an Object comes into view.

        print(f"--------- Vector started seeing an object --------- \n{event.obj}")

    def handle_object_disappeared(self,event_type, event):

        # This will be called whenever an EvtObjectDisappeared is dispatched -

        # whenever an Object goes out of view.

        print(f"--------- Vector stopped seeing an object --------- \n{event.obj}")

    def wallDefine(self):

        while True:

            args = anki_vector.util.parse_command_args()

            with anki_vector.Robot(

                               default_logging=False,

                               show_viewer=True,

                               show_3d_viewer=False,

                               enable_custom_object_detection=True,

                               enable_nav_map_feed=False) as self._robot:

            # Add event handlers for whenever Vector sees a new object

                self._robot.events.subscribe(self.handle_object_appeared, anki_vector.events.Events.object_appeared)

                self._robot.events.subscribe(self.handle_object_disappeared, anki_vector.events.Events.object_disappeared)           

                self._wall_obj = self._robot.world.define_custom_wall(custom_object_type=CustomObjectTypes.CustomType00,

                                                           marker=CustomObjectMarkers.Circles2,

                                                           width_mm=70.0,

                                                           height_mm=70.0,

                                                           marker_width_mm=70.0,

                                                           marker_height_mm=70.0,

                                                           is_unique=True)

                _thread.start_new_thread(self.cmdInput, ())

                while True:

                    self.isWallAhead()

                    time.sleep(0.5)

                    pass

    def tutorial(self):

        self._robot.behavior.set_lift_height(1.0)

        self.greeting()

        self._robot.audio.set_master_volume(audio.RobotVolumeLevel.MEDIUM_HIGH)

        self._robot.behavior.set_head_angle(degrees(45.0))

        self._robot.behavior.say_text("Welcome to our system. The main idea about our system is helping the people likes you, to eliminate the negative impression to learning programming")

        self.pureGoRight()

        self._robot.behavior.say_text("The route in front of me will be the road to the target spot. The game rule is simple, use the blocks on my right hand sides to compose the commands that guides me to the destination")

        self._robot.behavior.say_text("Before I go back to the charger, you can already started combine the blocks, good luck")

        self._robot.behavior.drive_on_charger()                                   

        

        

    def isWallAhead(self):

        self._robot.behavior.say_text("Checking the task result")

        try:

            for obj in self._robot.world.visible_custom_objects:

                if (obj.object_id == 2):

                    self._wallAheadFlag = True

                    print("Wall detected")

                    self._robot.behavior.say_text("Target spot confirmed")

                    #self.goBackward()

                    return True

                print("No wall detected")

                self._robot.behavior.say_text("Seems like I am not in the right position,try again!")

                self._wallAheadFlag = False

                return False

        except KeyboardInterrupt as a:

            pass

    

    def cmdInput(self):

        """

        Command Table:

        "0" -> Go foward  "1" -> Go left  "2" -> Go right "3" -> If (wall ahead){

        "4" -> Loop[  "5" -> }  "6" -> ]

        """

        self._robot.behavior.say_text("Start analyzing the data")

        time.sleep(2)

        print("enter list!!!!!!!!!")

        list1=["Loop[","W","]"]

        self._cmdStr = list1

        print(self._cmdStr)

        self._robot.behavior.say_text("Codes confirmed")

        for i in range(len(list1)):

            cmd = list1[i]

            print (cmd)

            if cmd == "W":

                self._cmdList.append(self.goForward())

            elif cmd == "L":

                self._cmdList.append(self.goLeft())

            elif cmd == "R":

                self._cmdList.append(self.goRight())

            elif cmd == "Loop[":

                #only iterate the commands inside the loop

                cmdStrPost = self._cmdStr[i + 1 : len(self._cmdStr)] 

                cmdListPost = []

                #execute all the commands before the loop

                for _ in self._cmdList:

                    if _ is not None:

                        _()

                print('self._cmdList =', self._cmdList)        

                print('cmdStrPost =', cmdStrPost)

                finalList = []

                j = 0

                for j in range(len(cmdStrPost)):

                    print('j = ', j)

                    #Read the commands from cmdStrPost

                    cmdLoop = cmdStrPost[j]

                    if cmdLoop != "]":

                        if cmdLoop == "W":

                            cmdListPost.append(self.goForward())

                        elif cmdLoop == "L":

                            cmdListPost.append(self.goLeft())

                        elif cmdLoop == "R":

                            cmdListPost.append(self.goRight())

                        #Read how many times will the loop implement

                        elif cmdLoop == "if(wall){":

                            for _ in cmdListPost:

                                if _ is not None:

                                    _()

                            

                            cmdStrIf = self._cmdStr[j + 1 : len(cmdStrPost)] #If script??

                            cmdIfListPost = []

                            for k in range(len(cmdStrIf)):

                                cmdIf = cmdStrIf[k]

                                if cmdLoop != "}":

                                    if cmdLoop == "W":

                                        cmdIfListPost.append(self.goForward())

                                        self.animationDisplayFailure()

                                    elif cmdLoop == "L":

                                        cmdIfListPost.append(self.goLeft())

                                    elif cmdLoop == "R":

                                        cmdIfListPost.append(self.goRight())

                                else:

                                    print("}")

                                    break

                                self.ifWall(cmdIfListPost)

                    elif cmdLoop == "]":

                        finalList = cmdLoop[j + 1:-1]

                        print("]")

                        self._loopTimes = int(cmdStrPost[j+1])

                        break

  

                

                #Using loop function to realize iterations

                if cmdListPost is not None:

                    self.loop(finalList, 1)

                   

    def goForward(self):

        print("goForward()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.drive_straight(distance_mm(80), speed_mmps(100))

        

    def goBackward(self):

        print("goBackward()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.drive_straight(distance_mm(-100), speed_mmps(100))

    def goLeft(self):

        print("turnLeft() + goFoward()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.turn_in_place(degrees(90))

        self._robot.behavior.drive_straight(distance_mm(80), speed_mmps(100))

    def goRight(self):

        print("turnRight() + goFoward()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.turn_in_place(degrees(-90))

        self._robot.behavior.drive_straight(distance_mm(80), speed_mmps(100))

    def pureGoRight(self):

        print("turnRight()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.turn_in_place(degrees(-90))

    def pureGoLeft(self):

        print("turnLeft()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.turn_in_place(degrees(90))

    def rotatingCircle(self,angle):

        print("rotatingCircle()")

        self._robot.behavior.drive_off_charger()

        self._robot.behavior.turn_in_place(degrees(angle))

    def loop(self, funcList, loopTimes):

        loopTimes -= 1

        while loopTimes != 0:

            print("loop times remain = " + str(self._loopTimes))

            for func in funcList:

                func()

                

    def ifWall(self, funcList):

        print("ifWall{")

        if self._wallAheadFlag:

            for func in funcList:

                func()

    def animationDisplaySuccess(self):

        animation_1 = 'anim_pounce_success_02'

        print("Playing animation by name: " + animation_1)

        self._robot.anim.play_animation(animation_1)

    def animationDisplayFailure(self):

        animation_2 = 'anim_reacttoblock_frustrated_01'

        print("Playing animation by name: " + animation_2)

        self._robot.anim.play_animation(animation_2)

    def greeting(self):

        self._robot.behavior.say_text("Hi")

        animation_3 = 'anim_greeting_hello_01'

        print("Playing animation by name: " + animation_3)

        self._robot.anim.play_animation(animation_3)

    def celebrations(self):

        self.animationDisplaySuccess()

        self._robot.behavior.set_lift_height(1.0)

        self.rotatingCircle(450)

        self._robot.behavior.set_lift_height(0.0)

        self._robot.audio.set_master_volume(audio.RobotVolumeLevel.MEDIUM_HIGH)

        self._robot.behavior.set_head_angle(degrees(45.0))

        self._robot.behavior.say_text("Congratulations, You did it!")

        print("Find way back to the charger")

        self._robot.behavior.drive_on_charger()

    def failure(self):

        self.rotatingCircle(180)

        self._robot.behavior.set_head_angle(degrees(45.0))

        self._robot.audio.set_master_volume(audio.RobotVolumeLevel.MEDIUM_HIGH)

        self._robot.behavior.say_text("I can't found the target spot. Don't be upset, try again!")

        self.animationDisplayFailure()

    #input

    def start(self):

        ser = serial.Serial('COM3', baudrate=9600, timeout=1)

        button_start = ser.readline().decode('ascii')

        start_input = 1

        i = 0

        button0 = "0" + "\r" + "\n"

        button1 = "1" + "\r" + "\n"

        while start_input == 1:

            button_start = ser.readline().decode('ascii')

            if button_start == button0 and i == 0:

                print("\n", "Press the button to start!")

                i += 1

            elif button_start == button1:

                print("Welcome to your coding journey!")

                print("Start to code with your blocks!")

                print("Have fun!!!", "\n", '\n')

                start_input = 0

        return start_input

    def read_output_data(self):

        cap = cv2.VideoCapture(0)

        cap.set(3, 640)

        cap.set(4, 480)

        start_read = 1

        input_data = []

        data = []

        while start_read == 1:

            success, img = cap.read()

            for barcode in decode(img):

                myData = barcode.data.decode('utf-8')

                if myData != data and myData != '':

                    input_data.append(myData)

                    data = myData

                pts = np.array([barcode.polygon], np.int32)

                pts = pts.reshape(-1, 1, 2)

                cv2.polylines(img, [pts], True, (255, 0, 255), 2)

                pts2 = barcode.rect

                cv2.putText(img, myData, (pts2[0], pts2[1]), cv2.FONT_HERSHEY_SIMPLEX, 0.9, (255, 0, 255), 1)

                if myData == 'Go!':

                    start_read = 0

                    break

            cv2.imshow('result', img)

            cv2.waitKey(1)

        del input_data[-1]

        print("Your input code is:", input_data, "\n", '\n')

        data_list = input_data

        return input_data, data_list, start_read

    def main(self):

        while 1:

            #self.start()

            #self.read_output_data()

            self._args = anki_vector.util.parse_command_args()

            with anki_vector.Robot(self._args.serial, enable_face_detection=True) as self._robot:

                self.cmdInput()

            '''while(1):

                cmd = input()

                if cmd == 'w':

                    self.goFoward()

                if cmd == 's':

                    self.goBackward()

                if cmd == 'a':

                    self.turnLeft()

                if cmd == 'd':

                    self.turnRight()'''

        

if __name__ == "__main__":

        Controller()

    #c.wallDefine()

    #c.isWallAhead()

Portifolio

This week I finished most of the contents for portfolio, such as concept demonstration, problem space, design process, final outcome in Word.


For the website, since I almost forgot some knowledge about the web design, so I reviewed some and learned some tutorials about Bootstrap

This week, I finished the homepage of my portfolio. Imgur

Week11

Sulaiman Ma - Sun 24 May 2020, 9:57 pm

Design Process

Simple code

Since there are some people suggesting that we should make the simple make more sense for users from the last appraisal, I just wondered whether the current version of the simple code is easy to understand for my target users or not. And I tried to find some simple code design principles to help me make it more understandable, but it seems that there is no such type of material. So I just planned to use the card sorting to test target users which simple code is can be easier to understand. So, I used the online card-sorting websites trello.com creating four cards with a random order, then I introduced the basic functions to them, and let them do the card sorting.

imgur

I found that all the participants sort it like these two results:

imgur imgur

So in the next stage, I prefer to use this version of simple code, since it seems to make more sense for users.

Map

As mentioned in the last journal, two of appraisals thought that they feel confused about the difficulty of the tasks, they do not think that the difficulty is different, so this week I was drawing some tasks for user testing, to let the user rate for the difficulty, then I will adjust the difficulty to make it not too hard for all the users to motivate users to use that, but some kind of difficult to keep them engaging and keep challenging for some tasks. The current maps I have thought about this week is:

imgur imgur

Plan

Since my partner, Bowen is working on combining the two parts of our work together, so next week it will have the full functions, at that time we will do some user testing to choose the tasks for final outcome, and set the difficulty. Besides, I will write the instructions for the users that can make sure they understand the purpose and basic rules of the concept.

Week10-Appraisals and Reflections

Sulaiman Ma - Sun 17 May 2020, 1:49 am

Appraisal

This week I focused on the appraisal and reflections. In the contact session, my teammate and I watched all the prototype videos and reports we need to critique together, and we shared our opinion and we discussed the confusing part of each prototype, In the meantime, we uploaded our suggestions and questions in a google drive file. Googledrivelink

Refulections:

I received three appraisals from classmates:

1.

Hi, Sulamain:

The starting point of your concept is very good, which is to design a game to help players develop programming thinking.

By watching your video we are happy to have some feedback for you.

  1. For the code on the front of the block, we are more confused about the setting of the complex instructions in the loop statement. If a player does not have any programming foundation, then he is likely to feel confused about what these codes mean and how should I use them. Therefore, you can consider a detailed explanation of all game devices and settings before the game starts so that players can fully understand the game running and operating rules.
  2. Regarding the tasks to be completed by the robot, we would like to know whether the design of this maze game is based on the results of user research. Because through your documentation, we learned that in the process of confirming the way of this game, you just brainstormed with Bowen, so we can't understand whether this decision is based on user research. In addition, regarding the game mission, we know that there are different game difficulties in your description, but it seems that this part is not reflected in your video. Does the difficulty of the game depend on the length of the maze path? Or is it set by other methods?
  3. For the input of the block, we have a question, is there any basis for determining the meaning of each letter on the block? For example, why does the letter "W" represent the front rather than the letter "F"? We hope to see more of this part of the design basis to understand the design principles behind.

In short, very good work, but some details still need to be considered, we are looking forward to your final prototype!

  • Team Hedgehog

2.

Hi Sulaiman! Our team really enjoyed the concept of using building blocks to represent code as it represents the metaphor of “building” code. The method of interacting with the concept is definitely novel and interesting so great job on that!

While reviewing your video, we had some questions regarding the usability of the concept, as there are only a limited number of blocks, how would the full implementation of the concept look like? Will there be too many or not enough blocks for the user to progress in their programming abilities? Maybe it would be valuable to look into having multiple sides represent multiple keywords. We also noticed how the user would have to individually scan each block, we would suggest having an implementation where all the blocks are able to be scanned at once.

While having a robot visually represents the code is a very effective way to engage with users, I’m curious to see how will this be progressively harder to “code” by the user as moving/changing direction is considered to be relatively simple code. Lastly, the context of use wasn't too clear, in regards to the number of components to the concept, we would suggest that your concept be applied in a school setting, with relevant research into who will use this concept and what differs it from traditional online methods (eg using GUI to learn code). All in all, I really like the idea of blocks and a great job with your prototype!

  • Team Garfunkel

3.

We really like the way you are creatively using tracking and the sensors to capture what the user has selected. However, we were wondering about the usability of the letters chosen for the blocks. We were confused by what “W” stands for and whether users will wonder the same. It might be worth double checking the contrasts of the letters as well, as we found it difficult to read. Another thing we noticed is that once the block lines get longer, it gets more and more time consuming for the user to scan each and every block, and perhaps you want to explore ways of scanning the whole line at once? How about having a portable scanner that can be rolled along the blocks? Some user tests to explore their experience with the blocks and the concept might be good to make sure they understand what they are doing and what they are doing it for. For both you and Bowen we would have liked to see more about the user experience in the user journey, not just how it works. It’s good to see that you have background and user research to back up your design choices!

  • Team Supparoo
After reflecting on these appraisals, these are my responds for the team appraisals:

1.Team Hedgehog

Since team Hedgehog mentioned that they think that the code may confuse the people without programming knowledge, so I plan to consider adding an explanation or a tutorial for the system. Besides, they did not feel that the difficulty is different, so I plan to create more tasks and let the user test it and rate for the difficulty for each task, then I will set the order of the task, make it a difficulty-increasing game. Additionally, for the simple code put on blocks, they felt that the code put on it does not have any design principles to support that. So, I plan to dom some research to find some design principles to perfect the current code to make it more understandable for users.

2.Team Garfunkel

Team Garfunkel confused about our blocks setting, they suggest that to put the code on different sides of the blocks, it will reduce the number of blocks in all. To achieve that I can make the Qr code smaller and put it with the simple code together on one side of the block, it is accessible, but the problem is that the QR code on different sides may disturb each other, and make it hard to recognize. So I will do a test to see whether it can work well or not. Besides, they suggest that the concept can be used in a school setting since our target audience before is all the novice of programming, so I may consider the suggestion and do some user testing to find the best context for that.

3.Team Supparoo,

From the team, they suggest we find a better way to scan the blocks. Since currently, this is the only way I found that can achieve the goals, so maybe I will explore more ways to see whether I can find a better solution. And I will pay more attention to describe the user journey in the next report.

Week 9

Sulaiman Ma - Tue 12 May 2020, 11:03 pm

Overview

This week I was focusing on the prototype. So, I spent the whole week time to make the prototype, write the report, and make the prototype video.

Prototype

My prototype consists of three main parts, which are blocks, Arduino, and computer.

Blocks

imgur

For the front side of each block, I put the simple code on it for users to reorganize, each code has a meaning, for example, W means Move forward, L means turn Left, R means turn right and so on.

imgur

For the right side of the block, I put the QR code on it. And each QR code has the simple code of the same block in it. After putting it in front of a computer camera, the computer camera can detect the QR code and read the data in it one by one and save them in a list and send the command to the robot.

Arduino

I use the Arduino button as a trigger for each round of the game, once user gets ready and press the button, the python program will get the signal from Arduino and start to access the computer camera and start to detect the QR code and read the data and save it. After the user finishing the input code, he can put the Go! block in front of the computer camera, once the camera detects that, the program will terminate the camera and will save the code it has caught at that time in a list.

Computer

imgur imgur

I wrote a python program for the project, as you can see the computer can detect the QR code, and once it has recognized it successfully it will display the content above the QR code.

Prototype video:

Week8

Sulaiman Ma - Tue 5 May 2020, 12:54 am

Design process

This week I am preparing for the upcoming prototype. My prototype is the physical input of a programming robot game, so I plan to put some pseudocode on the top side blocks and write a python program to keep reading the QRcode from the front side of the block. And for users, they can reorganize the block and click an Arduino button to enter the pseudocode. And my purpose for this prototype is to find out which part of the physical input confused the users and get some suggestions from the users about how to improve the experience.

Read the pseudocode from the surface of the block

After recovering some python knowledge, and watching some tutorials from Youtube, I got my initial version of the python program to read the QRcode by using the computer camera.

Python Code

imgur

Detecting Screen

imgur

As shown above, you can see the QRcode has been recognized by the computer camera

Result

imgur

Every time the camera read the code, I saved that in the list, and finally print it out.

Problem

The problem I am facing now is that I can not read the QR code in order. All the QR codes can be recognized and saved in a list, but unfortunately, the order is not correct, that will be a big problem because different order will lead to different results of the robot, so it should be solved soon.

Use an Arduino button to start each round of the physical input

Since I want to provide a button for the user to start each round input, so I want to use Arduino to send the signal to python, and python can read the signal and control the start of a loop.

I have watched some tutorials about this, but have not achieved it yet.

Research

I was doing a survey of the preference for physical interaction this week.

imgur imgur

Besides, I was also doing the research of the pseudocode to decide to put which kind of code to show to the users. I have found some interesting examples.

imgur imgur

Plan for next week

Firstly, I should solve the order problem as soon as possible.

Secondly, I should figure out how to use the python to read the signal from Arduino.

Thirdly, I should finish the report.

Week7

Sulaiman Ma - Sun 26 April 2020, 9:55 pm
Modified: Sat 13 June 2020, 4:59 pm

Design Process

At this phase, I made some changes to the game setting according to the survey, which let users rate for two types of game setting that are high-freedom game setting and task-based game setting. The data shows task-based game setting is preferable. The data is shown below.

imgur imgur

Contact

In the session, everybody shares the current progress, after we doing that, I got some useful tips. Lorna suggested me to check the fiducial marker. Since I have some technical problems to read the simple code from the blocks, I did not come up with a good solution to solve that. After checking the fiducial marker, I found that it is a graph with a unique ID that can be recognized by the camera. Additionally, it is can be used in Unity plus vuforia. But, the problem is the robot only can be coded by python, so it is hard to connect use the Unity to generate some signal in a Python code. So, I was thinking that how about achieving all this on Python, it will be much easier to control the robot in the same language environment. Then, I found a tutorial about the Aruco marker with Python.
But it is a pity that you can not put some content in the fiducial marker, so I was searching for some label that can contain some word content, I found the QR code. And to recognize the QR code from the computer camera by using Python, I found a useful tutorial, it is suggested to use the open CV to achieve the goal.

Meeting

This week we had two meetings with Bowen since we shared the same concept. In the first meeting, we discussed the issues which require more research.

imgur

And in the second meeting, we discussed how to do the users' research and details about the game mode and physical input.

imgur

Reflection

Up to now, we already have some clean plan for our project, but we found since the progress is a little behind, so we need to catch in the following weeks. Besides, we need to do more creative learning research to make our game more fun.

#coding learning#creative learning

Week 6

Sulaiman Ma - Thu 16 April 2020, 10:20 pm
Modified: Sat 13 June 2020, 5:02 pm

Contact session:

In the contact session, we did some activities. And me and teammates we also did a mind map of our concept. As shown below, it contains function, form, the context of use, design principle, rationale. After adding all the possibilities, all of us gain many inspirations from that, and it can give us alternatives in the following design process.

imgur

Design process:

At this phase, for physical input, we decided to use blocks and jigsaws as alternatives after brainstorming with Bowen. Then, we did a survey to decide which one is better. According to the feedback from the survey, it shows that the block performs better because users think it is more dimensional and easier to reorganize. The data is shown below:

imgur imgur

At the meantime, for what code put on the block, I did some research, and I found that pseudocode is a good choice for that, which is a combination of simplified code and real language, since it is much clearer for the novice to understand compared to the real code language.

Meeting

This week, I had two meetings, the first one is a meeting of four of us, we discussed our problem space coding teaching, and we shared our different concepts. Liony plans to use AR to teach users coding, and she planned to use the screen imitating the vision of users to do the prototype. Owen planned to use do a coding quiz game by using Arduino giving some feedback to users. And I and Bowen planned to use a physical input robot to teach people coding. Even we have different concepts, we still gain benefits from sharing the design process, technology and understanding of problem space.

Another meeting is between me and Bowen, we dicussed the tasks assignments of the current concept, and I took the responsibility of physical input, and he took charge of the robot programming. We still confused about how to use the camera to detect the simple code on the blocks, and how to translate it into Phython language and send signal to the robot.

Individual

As I took charge of the physical input part, so I checked some examples of existing applications, some are interesting and inspiring.

An interesting one is Hands on Coding:

The coding block is a smart way to teach users coding in a touchable method. It could be one choice for my physical input.

imgur

Besides, I focused on the technology that can help the camera of computers identify the code on the block. I am thinking of using a barcode to achieve this function. But it seems very hard. I read several articles about how to use python to recognize the barcode with the computer camera. But some code seems too difficult for me to understand, and also it can only recognize the code of one block, but the requirement is to recognize the code of different blocks together, so it still does not meet my requirements. In the future, I will try to find alternative ways to solve this problem

imgur

# -*- coding:utf-8 -*-

__author__ = "HouZhipeng"

__blog__ = "https://blog.csdn.net/Zhipeng_Hou"

import os

import qrcode

from PIL import Image

from pyzbar import pyzbar

def make_qr_code_easy(content, save_path=None):

    """

    Generate QR Code by default

    :param content: The content encoded in QR Codeparams

    :param save_path: The path where the generated QR Code image will be saved in.

                      If the path is not given the image will be opened by default.

    """

    img = qrcode.make(data=content)

    if save_path:

        img.save(save_path)

    else:

        img.show()

def make_qr_code(content, save_path=None):

    """

    Generate QR Code by given params

    :param content: The content encoded in QR Code

    :param save_path: The path where the generated QR Code image will be saved in.

                      If the path is not given the image will be opened by default.

    """

    qr_code_maker = qrcode.QRCode(version=2,

                                  error_correction=qrcode.constants.ERROR_CORRECT_M,

                                  box_size=8,

                                  border=1,

                                  )

    qr_code_maker.add_data(data=content)

    qr_code_maker.make(fit=True)

    img = qr_code_maker.make_image(fill_color="black", back_color="white")

    if save_path:

        img.save(save_path)

    else:

        img.show()

def make_qr_code_with_icon(content, icon_path, save_path=None):

    """

    Generate QR Code with an icon in the center

    :param content: The content encoded in QR Code

    :param icon_path: The path of icon image

    :param save_path: The path where the generated QR Code image will be saved in.

                      If the path is not given the image will be opened by default.

    :exception FileExistsError: If the given icon_path is not exist.

                                This error will be raised.

    :return:

    """

    if not os.path.exists(icon_path):

        raise FileExistsError(icon_path)

    # First, generate an usual QR Code image

    qr_code_maker = qrcode.QRCode(version=4,

                                  error_correction=qrcode.constants.ERROR_CORRECT_H,

                                  box_size=8,

                                  border=1,

                                  )

    qr_code_maker.add_data(data=content)

    qr_code_maker.make(fit=True)

    qr_code_img = qr_code_maker.make_image(fill_color="black", back_color="white").convert('RGBA')

    # Second, load icon image and resize it

    icon_img = Image.open(icon_path)

    code_width, code_height = qr_code_img.size

    icon_img = icon_img.resize((code_width // 4, code_height // 4), Image.ANTIALIAS)

    # Last, add the icon to original QR Code

    qr_code_img.paste(icon_img, (code_width * 3 // 8, code_width * 3 // 8))

    if save_path:

        qr_code_img.save(save_path)

    else:

        qr_code_img.show()

def decode_qr_code(code_img_path):

    """

    Decode the given QR Code image, and return the content

    :param code_img_path: The path of QR Code image.

    :exception FileExistsError: If the given code_img_path is not exist.

                                This error will be raised.

    :return: The list of decoded objects

    """

    if not os.path.exists(code_img_path):

        raise FileExistsError(code_img_path)

    # Here, set only recognize QR Code and ignore other type of code

    return pyzbar.decode(Image.open(code_img_path), symbols=[pyzbar.ZBarSymbol.QRCODE])

if __name__ == "__main__":

    make_qr_code_easy("make_qr_code_easy", "qrcode.png")

    results = decode_qr_code("qrcode.png")

    if len(results):

        print(results[0].data.decode("utf-8"))

    else:

        print("Can not recognize.")

    make_qr_code("make_qr_code", "qrcode.png")

    results = decode_qr_code("qrcode.png")

    if len(results):

        print(results[0].data.decode("utf-8"))

    else:

        print("Can not recognize.")

    make_qr_code_with_icon("https://blog.csdn.net/Zhipeng_Hou", "icon.jpg", "qrcode.png")

    results = decode_qr_code("qrcode.png")

    if len(results):

        print(results[0].data.decode("utf-8"))

    else:

        print("Can not recognize.")

Reference

(1条消息)Python3 生成和识别二维码PythonHouZhipeng 的专栏-CSDN博客. (n.d.). Retrieved 16 April 2020, from https://blog.csdn.net/Zhipeng_Hou/article/details/83381133

Coding Blocks | Hands on Coding. (n.d.). Handsoncoding. Retrieved 16 April 2020, from https://www.handsoncoding.org

Python生成+识别二维码Pythonqq37504771的博客-CSDN博客. (n.d.). Retrieved 16 April 2020, from https://blog.csdn.net/qq37504771/article/details/80321259

coding learning#physical coding input

Week5

Sulaiman Ma - Sun 5 April 2020, 9:54 pm
Modified: Sat 13 June 2020, 5:06 pm

Team

In the online session, we shared what we have done so far with our classmates. And after hearing others' achievements, I felt that our team need to catch up on the domain research part since we only did some research for coding, but for the domain Creative Learning, we have not done much research.

imgur

After the session, I and my team have discussed the coming assessment proposal. We shared the screen and try to understand what we should do in each part.

Everything went well, but our idea about the concept has been a little separated. One team member wants to make an AR coding system by using the projected and computer and use the robot only as feedback for users. Others want to teach the people to code by programming the robot. Therefore, we separated into two teams focus on different concepts, but the good thing is we all focus on the domain of creative learning and coding learning, so we still can share the resources.

Individual

This week, I focused on the research of my domain and coding learning area. I have done some research on creative learning principles, and the situated model of creative learning is inspiring to me:

  1. Immersion in the topic of interest, in traditions and in the subject matter;
  2. Experimentation and inquiry learning;
  3. Resistance from the material of interest [1].

For coding learning, from the research, the example is inspiring to me:

imgur [2]

As you can see, the system display three screens, which are helpful for feeding the gap between simple language and real coding language. And the form of block is also fascinating for users, and also helpful for people's understanding of the structure of the coding language. So I am also considering using the block to help users organize the code, especially for those who have not learned to code before.

Interview:

I did some interviews about the users' intended experience about a coding game, the results shown below:

imgur

Reference

[1]L. Tanggaard, ‘A Situated Model of Creative Learning’, European Educational Research Journal, vol. 13, no. 1, pp. 107–116, Feb. 2014, doi: 10.2304/eerj.2014.13.1.107.

[2]M. Khamphroo, N. Kwankeo, K. Kaemarungsi, and K. Fukawa, ‘MicroPython-based educational mobile robot for computer coding learning’, in 2017 8th International Conference of Information and Communication Technology for Embedded Systems (IC-ICTES), Chonburi, Thailand, May 2017, pp. 1–6, doi: 10.1109/ICTEmSys.2017.7958781.

research#coding learning#creative learning

week4

Sulaiman Ma - Sun 29 March 2020, 10:22 pm

Preparation for Presentation

For the preparation of the concept, we did an online meeting on the Zoom. After the discussion, we got clean on how to present our idea. We chose to use a paper prototype because it is the easiest idea for people to understand the idea. We assigned the missions to the team members.

imgur

Online Contact Session

During the online contact session, we reviewed the ideas of other groups. From the process, we got many useful tips from our classmates and the teaching team. Me and team member analyzed the critiques, and summarized a conclusion:

  1. Explore the gap between plaint-language and coding language
  2. Change the target audience from age 9-12 to the people who never learn the coding language (the age is not enough specific for our project, cuz there may a lot of children already had the foundation of coding)
  3. Maze — Box moving (From Zebing Yao, Clay 'I think keeping the robot in the maze is limiting')
  4. This would allow for the robot to modify its own code being able to correct your code. (From Clay)
imgur

Concepet Reflective

After a discussion with my team, we decided to modify our concept according to inspirations from the critiques. Bowen found a robot named Anki, which is a sound-control robot that can move according to the sound commands. So we decided to use a computer camera to identify the scripts on the block and generate a sound command according to the scripts. In this way, the robot will move according to the blocks' scripts. Besides, we want to change the maze game into a Box game which asks users to push a box to a certain place. In the future, we will design different difficulty levels for the box game.

Week3

Sulaiman Ma - Sun 15 March 2020, 6:52 pm

On Tuesday

On the contact session, we were doing the World Cafe, which helps us get to know different themes, and tried to help us get clear what kind of concept we want to do in the following semester.The following three is the most interesting fun theme for me.

Altered Landscapes

imgur

There is a good idea we got is to make a sharing painting board, which can display people's paint on the landscape, such as the building's wall. Its purpose is for entertainment, sharing and social. It also can encourage people to express themselves.

Emotional totems

imgur

That is an interesting theme. It can be anything that tells people whether their mental health is in good condition. So it can be a public thing in the company which can help the boss know the emotional condition of their employees to see whether the mission is too stressful for them. And like one classmate said it can be a thing that helps people be calm when they are emotional, which can promote people to speak in a calm way.

Creative Learning

imgur

Creative learning is also one of my favorites themes. Because learning is one of the vital parts of my life. And trying to makes learning fun is one of my biggest wishes. We discussed a lot about how to make different learning materials fun. Such as coding, art, pet training, language, mechanism. And for the methods, like how to make things fun, we talked about the game, collective activity, dancing. The most inspiring one for me is coding creative training, I will talk it later.

And there are also fun themes I saw.

Digital sensations

imgur

Musical Metrics

imgur

Guided Movements

imgur

Finally, I picked the Creative Learning as my top one theme.

On Tuesday

In the contact session, firstly, a graduate shared his experience of finding a job for us and made me understand the preparations needed to find a job. Immediately afterward, I met with my group members. We confirmed some team agreements, shared our views on this theme, and some ideas I thought of and agreed to meet on Friday.

On Friday

imgur

Me and my teammate in Building 78, firstly we shared our opinions about the creative learning, we took down all the topics we came up in the Google Drive.

imgur

Then we discussed each topic, and we all thought that creative coding training for beginners, especially for children is an interesting idea. We decide to develop this idea in the following days.

We identified the target audience, purpose and some details about the concept.

imgur

Basically, the concept is like a board game with block, the player can control the character to move by grabbing the script blocks, the character will follow the script command of the script. And there can be a maze on the board, or it also can be a city image, like roads, trees, and buildings on the board.

Sketch

imgur

Team profile

imgur

Week2

Sulaiman Ma - Sun 8 March 2020, 8:10 pm

Idea presentation

On Tuesday and Wednesday of contact, people presented their ideas. All of the ideas are amazing, and I found some of them are really attractive to me.

Speaking shooting game

It is interesting that turning sound into the bullet to play a game. That is a really novel interaction for me. And I think that would be a really attractive way for the child as well. So, it would be great to make it a language learning game for children. Children can shoot the monster by speaking the words on the screen, and the more accurately they speak, the more powerful the bullet will be. It will a good promotion for children to learn the language.

Percussion Glove

It is a fantastic idea which can allow people to make music by clapping hands. The most fascinating part of the idea is it is collective and no limitation of how many people enrolling in the activity. It can be a show at a big event, and it also can be a game on a social occasion. Music produces fun for humans, and when people create music together, fun can be doubled. And my idea is that we can add more sensors to the people's leg and feet, in this way, people's dancing can also produce music.

Secret Handshake Lock

This idea is pretty fun. It is very playful and novel. Since normally opening the door with keys is a boring and frequent part of human life. The handshake lock makes the interaction more fun and natural. Obviously, it enhances the experience of daily life, and also increase the well being. I thought it will be fun if adding some silly games to it, it can be a prank or Rock Scissors Paper game.

Reflection

After listening to different ideas in class, and checked the themes on the blackboard. The most interesting themes for are Musical Metrics,Body as controller and Creative Learning.

  • Musical Metrics* is an attractive theme for me because I am passionate about improvising and creative music. So if I can make a thing that can help people produce freestyle music, and can allow people to enjoy that, it will a good experience for the music fan. And according to Nicole Leatherman, music can help people relax, so I think it is meaningful for us to use music as the power to provide people a better world.
  • Body as controller* is another theme that I am interested in because I think for most of the students and working people, all of them are lack of exercise. So if body can be as a controller, the game can also be beneficial for people's health. And when using the body as a controller, it can produce double fun, one is game fun and the other is exercise fun.
  • Creative Learning* is also one aspect I am interested in, because more and more students get bored with the traditional study, so a creative learning method is in an urgent need for people. My idea is we can focus on students' interests and hobbies, and try to make students learn things from the activity or things they are interested to do.

Space Induction

In Space induction, I got some knowledge about the safety and rules in that room. And also some good tips for us. I thought a lot of useful tools and equipment in there, I hope they can help me in the future. Besides, the most important rule the tutor taught us is "Don't be dumb, ask the tutor". I thought it is a useful tip for me.

Plan for next week

Next week, I hope that I can get some inspiration from classmates and tutors, and I want to brainstorm some ideas according to the theme.

Reference

[1]N. Leatherman, ‘How Music Relieves Stress and Helps You Relax’, p. 5.

week-2-Idea Pitch

Sulaiman Ma - Tue 3 March 2020, 1:27 am

Title of the Concept: Cook the World

A3 Sketch

Imgur

Description:

Inspirations:

Cooking is one of the most important activities I do every day. Since Chinese food usually requires people to do stir fry in a pan, and normally people will spend much time to use the spatula to mix the food every day. So I am thinking about how to make the boring cooking process more fun.

Problem

The problem I am addressing is to make the cooking process more interesting, and also promote people to eat healthily to provide them a healthy life.

Context

The concept is designed for people who usually cooking but feel bored with the process. By using this application, everything gets more fun. Because you can see yourself cook a unique world of your own. Your materials in the pan will change the composition of this world, and your heating and seasoning will change the weather and ecology of this world. Your healthy diet will make the world more and more beautiful, and the character in the world will become bigger and stronger.

#cooking#visualization#health#produce fun#game

week-1-Reflection&Plan

Sulaiman Ma - Mon 2 March 2020, 12:11 am

Reflection

Since this is the beginning of the semester, so I felt a little not prepared well for the course in the first semester, I found that my preparation is too little which leading to I did not have good performance in the group discussion in class, so I need to think more and prepare more before the class for the following days. And in the process of ideation, I found one of my faults, which is spending too much time when stuck, rather than jump to another idea. Especially when we use the card to do the brainstorm. The next time of brainstorm I will try to move on fast instead of stuck on an idea too long.

Plan for Next Week

The most important thing next week is the presentation of my idea, I need to figure to use what kind of way to introduce my idea soon. Maybe I will try to use a scenario to illustrate that, it will be much easier to understand. Besides, I will go to soldering induction and space induction on Mon.and Wed. Good luck to me!

Week-1-Documentation&Reflection

Sulaiman Ma - Sun 1 March 2020, 11:58 pm

The Work Done:

On Monday

I went to the UQ Innovate, the tutor introduced us to many machines that will be used in the future process this semester including Bandsaw, Laser Cutting, Painter and so on. The most important part of the induction is the safety rules and using instructions. It seems that each machine is very dangerous if we used it in the wrong way. We also used some machines to cut the wooden board as below shown.

On Tuesday

In the contact session, we shared our cognition, excitement, concerns, rumors, and questions about the course. The opinion of our group is as below. After Lorna's answering, we get more clear about what we should do and what we should emphasize.

imgur

After that, we discussed what is physical computing, and tried to find some examples from the Internet. By sharing the understanding of Physical Computing, I felt confident to produce some ideas in the future. Some good examples are as below.

On Wednesday

Firstly, we discussed the 7 Grand Challenge of HCI. In my table, we focused on the Well-being, Health, and Eudaimonia. We found some positives about that. Firstly, It can produce an effective and less expensive way for people to achieve a healthy lifestyle. Secondly, it encourages positive behavior and avoids harmful ones. Thirdly, it can help people do self-monitoring of their health. On the other hand, it also has some disadvantages. Firstly, the high potential for self-monitoring. Secondly, the high cost of the equipment. Thirdly,over-dependency of the electronic stuff. Fourthly, privacy threats like shown below. After different tables sharing their finds about the challenge, it gave me a lot of inspirations about which aspects to generate ideas.

imgur

After that, we were in the process of generating ideas, using the imagination and inspiration from the cipher of a different set of cards, this method improves our effectiveness of generating ideas a lot.

Imgur Imgur

And this is my sketch at that time.

Imgur

Ideation:

One of my favorite ideas is called the Rolling Moon. The cipher is "Design for love in transportation using push it with the quality chaotic." Inspired by the sentence, mine idea is to make a ball shape transportation which can allow couples to lie in it, by using AR and VR technology, people in it will feel that they are floating in the adventure in the space, The Roller Moon will be powered by solar energy, rolling forward, but passengers will not feel dizzy or bumpy, because the body has a good suspension system. It will be enjoyable for couples to drive the transportation, lie and talk together. By designing the vehicle, it provides for couples a better experience of dating time.

Imgur

Week-1-Introduction

Sulaiman Ma - Sun 1 March 2020, 8:22 pm

About Me

Hello everyone! my name is Sulaiman MA. I am a postgraduate of ID who is passionate about designing cool stuff relating to music and game. I am a kind of imaginative person,which also makes me a good idea producer when brainstorming. I hope to have a good time and see some really cool stuff this semester. Good luck everyone!😊

Expectations

As a 4 units course, I thought we will learn more things from this course, Such as Programming technology relating to Arduino, some basic knowledge to use a basic machine to produce some medium-quality products. After attaining the UQ Innovate Induction, I feel stressed about the process of practicing my design, because of so many machines and so many rules to memorize. Hope that the tutor can give us some help when we do the production of our design.

Finally, hope everybody can have a good time, and get an ideal final outcome!💪

#introduction#week1