Assignment 2
1701ICT— Creative Coding
Trimester 1, 2025
Assignment 2 (40%) is due at the end of Week 8 with demonstrations to be held in your week 9 workshop. (11:59pm Friday 2nd May)
Instructions
● Due: 11:59pm Friday 2nd May.
● Marks: 40% of your overall grade
● Late Submissions: Late submission is allowed but a penalty applies. The penalty is defined as the reduction of the mark allocated to the assessment item by 5% of the total weighted mark for the assessment item, for each day that the item is late. Assessment items submitted more than five days after the due date will be awarded zero marks.
● Extensions: You can request for an extension of time on one of two grounds;
○ medical
○ other (e.g., family or personal circumstances, employment-related circumstances, unavoidable commitments).
All requests must be made through the myGriffith portal.
● Individual Work: You must complete this assignment individually.
● Presentation: You must present/demonstrate your work in your week 9 workshop) to a teaching team member. Your work will not be marked if you do not present it.
● Other: This assignment is a mandatory pass component. You must attain 40% (16/40) to be eligible to pass the course.
Overview
The purpose of this assignment is to assess your ability to implement complex interactions between separate modules using JavaScript. and p5.js. Each Question should be submitted on L@G in a separate .js file (titled q1.js, q2.js etc.), but you do not need to submit html and css files. Some of the questions will require you to investigate some concepts outside of the lecture notes. Please make sure that all code that you submit is your own and is not taken/copied from anywhere else.
Question 1 (15 marks) - Maze Runner
In p5.play, sprites provide some additional functionality over normal images. Using p5.play (version 2, not version 3), create a simple top-down maze game with the following specifications:
● The program should read a maze in from a text fiIe caIIed (maze.txt’. 0 shouId
indicate empty space, 1 should indicate a wall, 2 should indicate the starting point and 3 should indicate the exit/finish. You should find/draw appropriate images to use as tiles to represent these components, and you should load them in as sprites. Each (tiIe’shouId have dimensions controIIed by variabIes, and be positioned according to the input file. If the input file is 10x10 numbers, you should draw this many tiles. (4 marks)
● The program should draw a person as a sprite on the starting point, facing an
adjacent empty tile. You will need to write some code to correctly orient your person. You should find a suitable image to use for your person. The player size should be controlled by a variable (but always smaller than the tile size) and be placed in the middle of the tile. (3 marks)
● The program should allow for 4 inputs 一 up/down and left/right on the keyboard.
These inputs should move the player in the direction indicated (smoothly). Don’t Iet them move too fast. The player sprite should rotate to face the direction it is moving, but can turn instantly. (4 marks). When a player runs into a wall, the player should bounce back off the wall slightly (but not further than the middle of the tile), and not be able to move into/through the wall. (2 marks).
● When the player reaches the end of the maze, the game should reset to the start position (simply move the player back to its initial position) (2 marks)
For this question, we are not assessing your ability to write a full game (Assignment 3 covers this), but are more interested in demonstrating your ability to use p5.play sprites and other features.
Question 2 (25 marks) - Queensland Railroad Visualiser
You are provided with data indicating the locations of railway stations in south east Queensland. You are required to implement a tool to visualise these locations.
This question has several components:
a) Start by loading the railways.geojson JSON file into your program. You should do this in preload(). (1 mark)
b) Create a function called loadStations() that takes the loaded JSON as a parameter. This
function should be called from your setup() function. It should extract information from the loaded JSON file into your own variables. The information you need to load in includes the station name, the station co-ordinates and the stations status. You could store the information as 4 parallel arrays (name, xcords, ycoords, status) or an array of objects with name, x and y values. As a part of this process, you should filter the stations and DISCARD (not store) any stations that are not within the following values:
152.946922527076 <= latitiude (x) <= 153.180247019681
-27.6049449522395 <= longitude (y) <= -27.3660874490119 (5 marks)
c) As the x and y values in JSON are actually stored as latitude/longitude, you should create 2 additional computed properties/variables which are the SCALED screen x and y co-ordinates of the stations. The values will therefore depend on the size of your canvas. To keep the aspect ratio consistent, make your canvas square. You will also need to account for the fact that the latitude values are negative (so will need to invert these when computing screen y co-ordinates). (4 marks)
d) Draw the stations. You can represent each station as a circle or square or other shape of your choice. As you have already calculated their screen co-ordinates, this should be fairly simple. (1 mark)
e) Now we want to implement an interactive component. When the user hovers over one of
the stations, a small pop-up box should appear that includes text showing the stations
Name, Longitude and Latitude to 6 decimal places (original data, not the scaled screen co-
ordinates) and the stations Status. The location of this box should be near the mouse cursor, and fit on the screen. (5 marks).
f) Finally, your program should read in a file called “routes.txt” . Each line of this file contains a series of station names separated by commas that should be drawn as a route. To do this, simply draw a line between each station in the order listed. Each “route” should be a different (random) colour. You do not need to check the validity of the routes – you may assume each station exists and is adjacent to the previous/next station in the route. (5 marks)
g) CHALLENGE: Add a background image to your visualiser that is geographically accurate (ie that your program will draw the stations on and they will be in the correct position). An image has been included (map.png) with the following information given:
Top left (pixel): 152.918755 , -27.358992
Bottom right (pixel): 153.196618 , -27.605666
Hint: You could reverse your scaling calculation to work out what the long/lat values are for the corners of your canvas are and then align with the image (you can crop image to fit your canvas appropriately if you like). Or you could scale your cities to fit on the map co-ordinate space. You may wish to apply some transparency to the image so you can still easily see your stations. (4 marks)