Week 2 (Starting 17/10/2022)

Monday (17/10/2022)

On Monday, we started my coding journey by using a ready-made code of a whiteboard paintbrush using both JavaScript and HTML from George. The task for that morning was to mess around with the code and get comfortable with the functions.

Once I was comfortable playing around with the HTML website, I was instructed to start messing around with the code. In this instance, my first task was to use the JS code, research from the internet, and the maths library to create a simple triangle. This was a struggle for me since I did not know the basics of Javascript, however using the help of my coursemates and the internet, I could type the code in for the triangle.

case "triangle":
                ctx.lineWidth = 3   
                ctx.beginPath()
                ctx.moveTo(x, y)
                ctx.lineTo(x, y)
                ctx.lineTo(x, y+70)
                ctx.lineTo(x+70, y+70)
                ctx.closePath()
                ctx.stroke()
                break

https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm
                

After the triangle, I tried to code a square, for me, this was a little simpler as there is a library function in Javascript that allows you to create a square.

case "square":
                ctx.lineWidth = 1
                ctx.strokeRect(x, y, 45, 45)
                break

After, I wanted to challenge myself with the next shape, which is a flag that combines both the square and triangle together. I found this very difficult to code since it was knowing the maths and lines to put in the code. With some help from my coursemate, I was able to finish the shape bringing the final shape to show.

case "flag":
                ctx.lineWidth = 1
                ctx.beginPath()
                ctx.moveTo(x, y)
                ctx.lineTo(x, y)
                ctx.lineTo(x+30, y+30)
                ctx.lineTo(x-30, y+30)
                ctx.lineTo(x-30, y-30)
                ctx.lineTo(x+30, y-30)
                ctx.closePath()
                ctx.stroke()
                break

In the second session, we finished up with the ‘paintJS’ and started with programming fundamentals task 2 which included me discussing the difference between time-based animation and frame-based animation. Using sources that were given to us and external sources we had to look up, we discovered time-based animation is more convenient than frame-based animation cause time based is the movement of animation over a set period of time, while frame-based animation is the movement of animation over the amount of framed your device is producing. This means for the animation to be at a constant rate, your device needs to be producing a constant frame rate which is usually impossible, while for time-based animation, if you have a low framerate, then the program should be able to calculate the approximate position of where your character or object should be over 1 second.

Tuesday (18/10/2022)

On Tuesday, I continued with the programming fundamentals 2 task. For that morning I set my self a task to find the three easing functions I wanted to use as my examples. Using the knowledge I gained, I want to one day use one of the easing functions on my game one day.

Wednesday (19/10/2022)

On Wednesday we was taught how to use and apply loops, arrays and functions in JavaScript. I was given tasks to complete. However, with the time we had in the class, I was only able to complete the first two tasks of the worksheet.

This was my code from wednesday.

myList = ["Hello", "Hi", "Greetings", "Hey", "Whats-up"];
let greetings = "";

for(let i = 0 ; i < myList.length; i++) {
    greetings += myList[i] + "<br>";

    console.log(greetings);
}

Thursday (20/10/2022)

Thursday morning was a relaxing morning as the class with Rich talked about how we are finding the course, and games we have played from the past. The second lecture, George went over our easing functions, see what easing functions we could grab a hold of and implement them into the graph.