All projects

My Fruit Worth

Pick all of the fruit growing in your garden.

  • JavaScript
  • HTML Canvas
  • 3D graphics
Title screen of My Fruit Worth, a garden fruit-picking game

A short game prototype where the player collects fruit from the garden while practicing quick decision-making and visual recognition. Made for Computer Graphics 5160, with every 3D view projected and drawn by hand.

Play the game

Controls & gameplay

  • Movement: move forward or backward in the direction you are facing, and turn with the Left and Right arrow keys.
  • Interaction: when you are close enough to a fruit, press Spacebar to pick it and put it in your basket.
  • Restart: press R to restart at any time.
  • Graphics: switch between three visual styles with the radio buttons.
  • Winning: a victory screen appears once every fruit is collected; press R to play again.

Technical overview

Each object type in the game (house, bush, fruit) is defined as a set of vertices, edges and faces built from those vertices.

Object instances are created with their own position and scale, then projected with the pinhole camera method: dividing x and y by z to project depth.

Graphics pipeline levels

Level 1

  1. Loop through each object instance, skipping any collected fruit.
  2. Apply positioning, scaling and vertex projection to each model.
  3. Depth sorting: sort from largest to smallest z so geometry furthest from the camera is drawn first and the nearest draws on top.
  4. Rendering: draw faces with HTML5 Canvas: beginPath(), step through the face's vertices with moveTo(), then closePath() and fill().

Level 2

  1. Initialize a 320 × 200 grid.
  2. Loop through all object instances, skipping collected fruit.
  3. Scale, position and project every vertex onto the grid, keeping only points in front of the camera.
  4. Draw each edge from (u₁, v₁), stepping pixel by pixel along x and adding the slope on each step to colour the line.

Level 3

  1. Initialize the grid and skip collected fruit.
  2. Position and scale each object instance and store its projected vertices.
  3. For each object, loop through its visible faces, clipping geometry behind the camera.
  4. Triangle rasterization: find the bounding box of each face's three vertices, then test every pixel with barycentric coordinates to fill only the pixels inside the triangle.

Known issues

  • Collision detection: collisions are not fully working. Walking into a house face head-on is blocked, but approaching at an angle after turning lets the player pass through.

Future improvements

  • Day/night cycle: a setting sun as the game timer, gradually darkening the sky.
  • Weather: dynamic weather and clouds.
  • Basket UI: a basket on screen that fills up as fruit is collected.
  • Social: a daily leaderboard.