Program 5: Putting it all together — Centipede!

 


Due: in final period — Monday, December 7, 12-2:30pm

Goal: In this assignment you will apply what you've learned of basic WebGL and GLSL to build a simple game.

Submission: Submit your partial and final assignment using this Google Form, and demo your assignment during the final exam period.

BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 1: properly turned in program (new requirements!)
  • 5% Part 2: display mushroom field, a centipede and bug blaster 
  • 10% Part 3: animate the centipede
  • 10% Part 4: animate the bug blaster
  • 10% Part 5: animate the bug blaster shots
  • 10% Part 6: add the spider, flea and scorpion
  • 10% Part 7: add at least three levels
  • 10% Part 8: add scoring and multiple lives
  • 10% Part 9: add animated effects and sounds
  • 20% Part 10: make it your own
  • Participation credit: Receive participation credit (outside of this assignment) for posting your resulting imagery and video, good or bad, on the class forum!
Note that there is no partial turn in for this assignment.

General:
Our suggested game is a modern 3D version of Centipede. If you are not familiar with the game, you can play it online here (2600) or here (arcade), view some historic gameplay on arcade or console, and find more information about the game at its Wikipedia entry here. There are also many other sources online.

If you would rather implement a different game, you may do so, providing you ask for instructor's approval by Wednesday November 18. To obtain that approval, submit your proposal using this form. Small teams are also acceptable, but the scope of the project must increase to match. Use the same form if you wish to propose a group project. For example, we will approve two-person teams that propose building Centipede as described below along with all extra credits to earn 100%. 

Unlike previous programs, your game is not required to load specific assets (models, textures or lighting). You are free to hard-code paths to the assets your game requires.

We prefer you continue to improve your mastery by using WebGL. However, you may use any 3rd party game or graphics libraries you find, including three.js and Unity, but with a penalty of -20%. You may not use code from any implementation of Centipede you find online. We are aware of several such implementations and will be comparing them to your code.

Part 1: Properly turned in program
Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website. Since we encourage variation in your games, make sure to include a readme file.

For this assignment only, you can also earn 1% extra credit by allowing us to make your assignment public, and providing us with some extra material to aid us in that. We will pick a few of the best assignments and publish them on our course website. If you wish to allow us, please also deliver:
  • a description: your game in four sentences or less
  • a screencast: a video walking us through your game within a few minutes. 
Assignment material is due online by the time of your final, as noted above. You must also demo your game live to teaching staff during the final period. If you do not demo your game during the final, your program mark will be reduced by 20%. If you do not demo at all, you will forfeit 30%. If you fail to demo an assignment, and it is not browser based, your assignment will not be accepted. Late demos are not possible, and late improvements of assignments will not be accepted.

During the final exam period, you may optionally demo your game in front of the class (without a separate demo to staff). If you do, you will enter a competition for a $20 Amazon gift card. You will win if your fellow students vote your game the best. Students in teams will be in a separate competition from individuals (if there are enough teams).

Part 2: Display mushroom field, a centipede and bug blaster 
Create and render the player's bug blaster, one 12-segment centipede, and field of mushrooms. The field should be divided (not visually outlined) into at least 30 rows, and at least 32 columns, with each cell potentially holding a mushroom. Each mushroom should be slightly smaller than its containing cell. At least 46 mushrooms should be randomly distributed across the grid, with 2 mushrooms per row. At least three rows at the top and four at the bottom should remain mushroom-free. Models should be 3D (full models or sprites, as you prefer), and the view projection must have perspective, with some foreshortening with distance. Fancy modeling is not necessary; cubes, spheres etc. are enough. Nothing needs to move. 

Part 3: Animate the centipede
The centipede head enters at the top center, and randomly chooses an immediate left or right turn. It then proceeds along the row until it hits the end of the row, another centipede (see below), or the end of the row. It then moves down one row, and proceeds down the new row in the opposite direction to the previous row. If the new row has a mushroom in the cell the centipede enters, it does not move horizontally on the new row and proceeds to the next (third) row down. The other segments of the centipede simply follow the head.

When the centipede reaches the bottom row, it moves upward rather than downward. When it reaches the top row the player can reach, it moves downward again. This pattern repeats.

Part 4: Animate the bug blaster
The player's bug blaster can move to any cell in the bottom 20% of rows (for a 30 row field, that would be 6). It cannot move into a cell containing a mushroom. It can move in any direction, and need not be centered on any cell. You can move it with keys or the mouse, or both.

If the centipede hits the bug blaster, the bug blaster dies, and the game ends if there are no more lives.

Part 5: Animate the bug blaster shots
When the player presses the space bar or mouse button, the bug blaster shoots one shot upward straight across the field. The player cannot shoot again until that shot either flies off the field, or hits a mushroom or centipede. The shot follows a straight line at a fixed velocity, so the player must shoot ahead of moving centipedes to hit them. One successful shot destroys a centipede segment, while it takes four shots to destroy a mushroom. 

When the centipede segment is destroyed, it turns into a mushroom in the cell where it was hit. If the centipede head is hit, the second segment becomes the head. If an internal segment is hit, the centipede becomes two centipedes, with those segments in front of the hit segment continuing as they were, and those behind the hit becoming a second centipede, with the segment just behind the hit becoming a second head. Any solitary segment is a head, which moves at a faster speed than a 2+ segment centipede. When a mushroom is hit, it should change to indicate how many times it has been hit.

Part 6: Add the spider, flea and scorpion
The spider appears once in the first level, and with increasing frequency on later levels. It moves using a random polyline, in the bottom third of the field. On later levels, that will change to the bottom fourth, fifth, etc. It eats any mushrooms it touches, making them disappear. If it hits the bug blaster, the blaster dies.

The flea appears first in the second level, whenever the number of mushrooms in the bug blaster's movement zone (see part 4) falls below 5. It appears at the top of the field, in a random column, but never in the left- or rightmost column. It moves downward quickly, dropping mushrooms behind it in empty cells 25% of the time, but never in the bottom-most row. When hit once, it moves twice as fast. In later levels, the likelihood that a flea will drop a mushroom increases.

The scorpion appears first in the second level and with increasing frequency on later levels. It moves slightly faster on each succeeding level. It moves from the left to the right side (or vice versa), within one row only, in the top half of the field. Any mushroom it moves through is poisoned, changing color. When a centipede hits a poisoned mushroom, it moves at its faster (head-only) speed and straight down, cell by cell, through any mushrooms, until it reaches the bottom row of the field.

Part 7: Add at least three levels
Whenever all the centipede's segments are completely destroyed, a new level appears. The health and number of the mushrooms is unchanged (including poisoned mushrooms), but they do all change color. Any spider, flea or scorpion remains, with only its color changing. In the nth level, the centipede will appear in n parts, including n-1 solitary, fast-moving head segments, and one 12-(n-1) segment connected centipede. For example on level 2, there should be one, fast, solitary head segment, and one slower 11-segment centipede. 

Part 8: Add scoring and multiple lives
Add scoring, with points awarded when: 
  • 1 mushroom destroyed: the 4th hit is made.
  • 5 mushroom regenerated: the bug blaster dies, for each damaged or poisoned mushroom.
  • 10 centipede body segment destroyed: the segment is shot.
  • 100 centipede head destroyed: the head is shot.
  • 200 flea destroyed: the 2nd hit is made.
  • 300/600/900 spider destroyed: the spider is shot at far/moderate/near distance.
  • 1,000 scorpion: it is shot.
When a bug blaster dies, it can respawn twice at the bottom center (the player starts with three lives). For every 12K points you score, you get an extra life. When it respawns, each damaged mushroom regenerates to full health, one by one, changing back to its original appearance. The centipede(s) do(es) not regenerate, but moves back to the top of the field. Any flea, scorpion or spider disappears.

Part 9: Add animated effects and sounds
Add distinct sounds when the:
  • Bug blaster fires
  • Centipede moves normally
  • Centipede moves quickly
  • Spider is present
  • Flea drops down the field
  • Scorpion moves across the field
  • Enemy is hit (centipede, spider, flea or scorpion).
  • Bug dies
  • Mushroom regenerates
  • Extra life is earned
You can use the original sounds, or completely different ones if you prefer.

Add animated effects when
  • The centipede walks: legs move left and right 
  • A mushroom is damaged: it changes color or shape when it is hit first three times; gone on 4th hit
  • An enemy is hit: a brief explosion animation
  • The spider bounces:  legs move around
  • The flea drops: legs move up and down
  • The scorpion scuttles: legs and tail twitch
  • A mushroom is poisoned: it changes color
  • The bug blaster dies: a brief explosion animation
We suggest simply changing models or sprites, of course skeletal animations are also (very) good.

Part 10: Make it your own
In the previous parts of this assignment, you strove to make your game work "right". Now you should use the techniques you have learned to make the game "different". To earn full credit, you must change the theme and play of your game, making your game substantially different from the standard game and from your fellow students' games. Simple changes of appearance will not earn full marks, but the gameplay need not change completely. Your "different" game version should appear after you press the exclamation mark (!).


EXTRA CREDIT (TEAM REQUIREMENTS):
Extra credit opportunities include the following. For a two-person team, these features are required, not extra credit. Other extra credits are possible, but must be approved by teaching staff in advance to ensure credit:
  • ⅓% — add a third-person view, with the camera attached to the back of the bug blaster. Two-person teams should also include a first-person view, with adjustments to make the game stay playable.
  • ⅓% — add two power ups, e.g. temporary freeze, brief invulnerability, or area bombs. Two-person teams should also include three more power ups, each with corresponding sounds and visual effects.
  • ⅓% — support a second player, either with different keys or the mouse. Two-person teams should support both players on the screen at the same time, with the possibility for players to destroy one another.
  • ½% — add better/different physics, e.g. curved shots, or bug blaster movement with acceleration/deceleration. Two-person teams should add gravity to shot trajectories, and acceleration/deceleration to centipede movement as well.
  • 1% — 3D gameplay: a field of play with at least two different elevations, and the bug blaster switching between these elevations while shooting and/or moving. Two-person teams should turn the game into tower defense, with the blaster at a fixed elevated location, rotating 360 degrees and shooting downward at different angles.

Program 4 2026: Texture and Transparency

Due: 11:59pm, Thursday November 12

Goal: In this assignment you will learn about rendering textured and transparent models using the WebGL rasterization API.

Submission: Submit your assignment using this Google Form.


BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 1: properly turned in assignment
  • 20% Part 2: render the input triangles, textured but without lighting
  • 15% Part 3: render using both lighting and texture
  • 15% Part 4: render using lighting, texture and transparency
  • 10% / 5% Part 5: support transparent textures and multitexturing
  • 20% / 10%  Part 6: improve transparency with a partial depth sort
  • 5%X / 15% Part 7: even better transparency with a BSP tree depth sort
  • 15% Part 8: make it your own
  • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!

General:
You will render triangles, described in the same sorts of JSON input files used in the third assignment. We will again test your program using several different input files, so it would be wise to test your program with several such files. The input files describe arrays of triangles using JSON. Example input files reside at https://github.com/NCSUCGClass/prog4-noshell/blob/main/triangles.json. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangle files. These files have been improved to include texture file names and alpha values. The triangles files also contain vertex normals and uv coordinates. 

For this assignment, we have made additions to the file format supporting a transparency alpha, texture filenames and texture coordinates. All textures will reside at the same URL as the model input files. For example, if the triangles.json file makes a reference to abe.png, then it will reside at https://github.com/NCSUCGClass/prog4-noshell/blob/main/abe.png. 

When you load texture images, you can only load them from your own server (hosting both your code and your images), or from a server that explicitly allows cross-origin access, like github.com. To access images from such an allowing server, set the image's crossOrigin attribute to "Anonymous". You can find more detail here. Texture loads happen asynchronously (on a different thread from your javascript), so your texture may not appear immediately. We recommend that you load a one pixel "dummy" texture locally to avoid runtime errors in the meanwhile, as shown here.

We are providing a shell in which you can build your code. You will be able to run the shell here, and see its code here. This shell is a correct implementation of program 3, which also loads an image (which can ultimately become a texture) as the canvas background. Default viewing parameters are the same as in program 3. (Note: this will be released in next week, after most of the late period for program 3 has passed). You can find the version without shell here.

This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You may not use others' code to implement texturing, blend texture with lighting, or implement transparency. You may use math, matrix and modeling libraries you find, but you must credit them in comments. You may recommend libraries to one another, speak freely with one another about your code or theirs, but you may never directly provide any code to another student. If you are ever uncertain that the advice you want to give or the code you want to use is permissible, simply ask me or the TA.

Part 1: Properly turned in assignment
Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.

Part 2: Render the input triangles, textured but without lighting
Use WebGL to render unlit triangles, giving each fragment its textured color. Do not perform lighting. You will have to use the fragment shader to find the appropriate color in the texture. UV coordinates are provided with triangle sets.

Part 3: Render with texture and lighting
Improve your renderer to shade fragments by mixing texture with lighting. A simple approach is modulation, which uses the lit fragment color Cf to scale the texture color Ct: C = CfCt. You can find more ideas here (Ch. 9, Modulating and Blending). Toggle across at least two light/texture blending modes (e.g. replace and modulate) when the b key is pressed.

Part 4: Render with texture, lighting and transparency
Improve your renderer further by adding transparency (alpha) to its rendering. To avoid transparent objects occluding other objects, you will have to first render opaque objects with z-buffering on, then transparent objects with the z-write component of z-buffering off (gl.depthMask(false)), so that they don't update the z-buffer.

Part 5: support transparent textures and multitexturing — (461: 10%; 561: 5%)
Make use of the alpha component in textures during rendering. Use this to give your models irregular outlines. There are textures in the assignment repo that will produce this effect. Then, combine multiple textures when lighting a fragment. For example, you could perform light mapping. A texture in the assignment repo supports light mapping.

Part 6: improve transparency correctness with a partial sort — (461: 20%; 561: 10%)
Sort your transparent triangles by depth to make transparency more correct. You can use the painter's algorithm, sorting the triangles by the average depth of their vertices. You must render the farthest triangle first, the closest last. You may have to issue separate draw calls to ensure gpu parallelism does not undo your ordering. Make sure to test your results by overlapping a few transparent triangles with different colors in your view, and then changing their depth order interactively. Toggle between sorted and unsorted (Part 4) triangles by pressing the comma (,) or period (.) keys.

Part 7: improve transparency correctness further with a BSP tree — (461: 5% extra; 561: 15%)
A simple painter's algorithm sort will not handle intersecting triangles correctly. Sort your transparent triangles with a BSP tree to improve transparency further. This will split triangles when they intersect, increasing the number of triangles. You will have to extract a new depth order from the tree every time the view changes, and render in the extracted order. You will have to rebuild the tree every time a triangle moves relative to the others, and adjust the vertex and index buffers to match. Test your results as you did in Part 6, but pay close attention when the triangles intersect. The same comma and period keys should now cycle across unsorted (Part 4), painter's sorted (Part 6), and BSP sorted triangles.

Part 8: Make it your own
In Parts 1-7, you strove to make your image look "correct". Now you should use the techniques you have learned (texturing, transparency) to make a new image that is "interesting". To earn full credit for Part 8, all that you must achieve is to make your image substantially different from that produced by the shell repo input, and from the imagery of your fellow students. Your "interesting" image should appear after you press the exclamation mark (!). 

Extra credit: Voted most interesting
To be voted "most interesting", you must post your interesting image in the #programming channel of the course slack (this may count as participation). Our TAs will select several finalist images for an in-class vote. The student whose image receives the most votes will receive 3%; second most, 2%; and third most, 1%.


SAMPLE OUTPUT

Textured with texture transparency and lighting.


Textured with texture transparency, triangle transparency and lighting.


With ellipsoids.

Program 3 2026: Rasterization

 Due: 11:59pm, Wednesday Oct 21

Goal: In this assignment you will practice basic modeling and implement transforms and lighting on 3D objects using the WebGL rasterization API.

Submission: Submit your assignment using this Google Form.


BASIC GRADING:
The main components of this programming assignment are:
  • 5% Part 1: properly turned in assignment
  • 10% Part 2: render the input triangles, without lighting
  • 15% Part 3: light the triangles
  • 15% Part 4: interactively change the view
  • 5% Part 5: interactively select a model
  • 15% Part 6: interactively transform the triangles
  • 10% / 5% Part 7: windowing, viewing and lighting
  • 10% / 5% Part 8: smooth shading with vertex normals
  • 5%X / 10% Part 9: ellipsoids
  • 15% Part 10: make it your own
  • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!

General:
You may (optionally) work with one partner on this assignment. You should each turn in the same code. 

You will only render triangles in this assignment, described in the same sorts of JSON input files used in the first. We will test your program using several different input files, so it would be wise to test your program with several such files. The input files describe arrays of triangles using JSON. An example input file resides at https://github.com/NCSUCGClass/prog3/blob/gh-pages/triangles.json. When you turn in your program, you should use these URLs in hardcode as the locations of the input triangle files — they will always be there. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangle files. Note that browser security makes loading local files difficult, so we encourage you to access any input files with HTTP GET requests.

We provide a small shell in which you can build your code. You can run the shell here, and see its code and assets here. The shell shows how to draw triangles using WebGL without any model or view transform, and how to parse the input triangles.json file. It also shows how to use animation callbacks to render multiple image frames.

The default view and light are as in the first assignment. The eye is at (0.5,0.5,-0.5), with a view up vector of [0 1 0] and a look at vector of [0 0 1]. Locate the window a distance of 0.5 from the eye, and make it a 1x1 square normal to the look at vector and centered at (0.5,0.5,0), and parallel to the view up vector. With this scheme, you can assume that everything in the world is in view if it is located in a 1x1x1 box with one corner at the origin, and another at (1,1,1). Put a white (1,1,1) (for ambient, diffuse and specular) light at location (-0.5,1.5,-0.5).

This is an individual or partnered  assignment, no exceptions. That said, we encourage you to help one another. Feel free to suggest how other students might solve problems, and to help them debug their code — just don't write their code for them. The code you turn in should still be your own or your single partner's (except for the shell). This is a simple assignment, and should not need other third party libraries. As always, if you are ever uncertain if the help you want to give or the code you want to use is permissible, simply ask me or the TA. For information about how to correctly submit, see this page on the class website.

Part 1: Properly turned in assignment
5% of your assignment grade is just for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.

Part 2: Render the input triangles, without lighting
Use rasterization to render unlit triangles, giving each triangle its unmodified diffuse color (e.g, if the diffuse color of the triangle is (1,0,0), every pixel in it should be red). You will have to use vertex shaders to perform viewing and perspective transforms, and fragment shaders to select the diffuse color. We recommend the use of the glMatrix library for creating these transforms.

Part 3: Light the triangles
Shade the triangles using per-fragment shading and the Blinn-Phong illumination model, using the reflectivity coefficients you find in the input files. Use triangle normals during lighting. Your fragment shaders will perform the lighting calculation.

Part 4: interactively change view
Use the following key to action table to enable the user to change the view:
  • a and d — translate view left (a) and right (d) along view X
  • w and s — translate view forward (w) and backward (s) along view Z
  • q and e — translate view up (q) and down (e) along view Y
  • A and D — rotate view left (A) and right (D) around view Y (yaw)
  • W and S — rotate view forward (W) and backward (S) around view X (pitch)
To implement these changes you will need to change the eye, lookAt and lookUp vectors used to form your viewing transform.

Part 5: Interactively select a model
Use the following key to action table to interactively select a certain model:
    • left and right — select and highlight the next/previous triangle set (previous off)
    • space — deselect and turn off highlight
    A triangle set is one entry in the input triangle array. To highlight, uniformly scale the selection by 20% (multiply x y and z by 1.2). To turn highlighting off, remove this scaling. You will have to associate a transform matrix with each triangle to maintain state, and apply this transform in your vertex shaders. glMatrix will also be helpful here.

    Part 6: Interactively transform models
    Use the following key to action table to interactively transform the selected model:
    • k and ; — translate selection left (k) and right (;) along view X
    • o and l — translate selection forward (o) and backward (l) along view Z
    • i and p — translate selection up (i) and down (p) along view Y
    • K and : — rotate selection left (K) and right (:) around view Y (yaw)
    • O and L — rotate selection forward (O) and backward (L) around view X (pitch)
    • I and P — rotate selection clockwise (I) and counterclockwise (P) around view Z (roll)
    Translate the model after you rotate it (so the model rotates around itself), and after the highlighting scale (see above, so the model doesn't translate as it scales).

    Part 7: Windowing, projection and lighting — (461: 10%; 561: 5%)
    Now make your windowing flexible. Accept a new canvas (viewport) width and height through your UI. Size your canvas to match. This should affect every part of your assignment.

    Also, make your projection flexible. Accept new window parameters through your UI. Relative to the viewing coordinates described by the look at and up vectors, these will be two X values (left, right) and two Y values (top, bottom). Use glMatrix's mat4.frustum command to project to this new window. Note that these window coordinates will be in view space, not be in world space! This should affect every part of your assignment.

    Finally, Read in an additional lights.json file that contains an array of objects describing light location and color. Note that these lights will have distinct ambient, diffuse and specular colors. Render the scene with these lights. During illumination, you will have to sum the colors all the lights. You can find an example lights.json file here. Assume that the input lights file will always reside at this URL when you turn in your code.

    Part 8: Smooth shading with vertex normals — (461: 10%; 561: 5%)
    Using only triangle normals, your curved shapes will look disappointingly faceted. To represent curvature more accurately, you need vertex normals. When you read in triangles, check for vertex normals in the input file. As you apply the composited modeling, viewing and projection matrices to your vertices, apply the inverse transpose of the modeling transform to your vertex normals. During lighting, use these normals rather than the face normal. The rasterizer will interpolate them for you. We will provide an example json file with a curved shape on request.

    Part 9: Render ellipsoids — (461: 5% extra; 561: 10%)
    Render ellipsoids as described in input. You can find an example ellipsoids.json file here. There are no ellipsoid primitives available in WebGL, so you will have to build an ellipsoid out of triangles, then transform it to the right location and size. You can do this statically with a hardcoded sphere model, or procedurally with a latitude/longitude parameterization. Again you will have to use vertex shaders to perform viewing and perspective transforms, fragment shaders to select color. The ellipsoids should be shaded like triangles, and should use vertex normals if you are claiming that extra credit.

    Part 10: Make it your own
    In Parts 1-9, you strove to make your image look "correct". Now you should use the techniques you have learned (transforms, lighting and WebGL rasterization) to make a new image that is "interesting". To earn full credit for Part 5, all that you must achieve is to make your image substantially different from that produced by the shell repo input, and from the imagery of your fellow students. Your "interesting" image should appear after you press the exclamation mark (!). 

      Target outputs:

      The results are rendered based on triangles2.json in the repo.

      Part 4: Interactively change view

      Translation:

      Rotation:


      Part 5: Interactively select a model


      Part 6: Interactively transform models

      Translation:

      Rotation:


      Prog 2 2026: Intro to WebGL

      Due: 11:59pm, Wednesday Sept 30

      Goal: In this assignment you will focus on gaining basic understanding of the WebGL rasterization API, by learning how to render and manage a few triangles.

      Submission: Submit your assignment using this Google Form.


      GRADING:
      This assignment is a forgiving introduction to WebGL, with correspondingly forgiving grading. The main components of this programming assignment are:
      • 20% Part 1: attempt to display all triangles using index buffers
      • 25% Part 2: display all input triangles in correct positions with index buffers
      • 20% Part 3: attempt to display varying triangle colors using shader parameters
      • 25% Part 4: display triangles with correct colors using shader parameters
      • 10% Part 5: make it your own
      • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum! Please tag pretty but wrong imagery with #cool-bugs-and-stuff.

      General:
      You may (optionally) work with one partner on this assignment. You should each turn in the same code. 

      You will only render triangles in this assignment, described in JSON input files similar to first programming assignment. We will test your program using several different input files, so it would be wise to test your program with several such files. The input files describe arrays of triangles using JSON. An example input file resides at https://ncsucgclass.github.io/prog2/triangles.json. When you turn in your program, you should use this URL in hardcode as the location of the input triangles file — it will always be there. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangles files. Note that browser security makes loading local files difficult, so we encourage you to access any input files with HTTP GET requests.

      We provide a small shell in which you can build your code. You can run the shell here, and see its code and assets here. The shell shows how to draw triangles using WebGL, treating them all the same way. It also shows how to parse the input triangles.json file.

      We are using webGL's default view setup, with the eye at the origin, and the window from -1 to 1 horizontally and vertically.

      This is an individual or partnered  assignment, no exceptions. That said, we encourage you to help one another. Feel free to suggest how other students might solve problems, and to help them debug their code — just don't write their code for them. The code you turn in should still be your own or your single partner's (except for the shell). This is a simple assignment, and should not need other third party libraries. As always, if you are ever uncertain if the help you want to give or the code you want to use is permissible, simply ask me or the TA. For information about how to correctly submit, see this page on the class website.

      Parts 1 & 2: Use index buffers to display all triangles in their correct positions
      For these parts of the assignment, your goal is to display all input triangles in the correct position using index buffers. The shell renders only the first set of triangles using only vertex buffers and the call DrawArrays. You must change the code to display all the triangles, using not only vertex but also index buffers and the call DrawElements. If you make a solid attempt at adding index buffers, you will receive full credit for Part 1. If you render all the triangles their correct positions in white using DrawElements, you will earn full credit for Part 2.

      Parts 3 & 4: Improve the shader to render triangle input colors correctly
      For these parts of the assignment, your goal is to color the input triangles with their diffuse color. The shell includes basic fragment shader code that renders everything in white, and basic shader code that does not manage color. You must improve the fragment shader to accept and use a color parameter, the vertex shader to accept and use vertex colors as well as positions, and the javascript code to send the vertex shader color buffer as well as a position buffer. If you make a solid attempt at this, you will receive full credit for Part 3. If you correctly render each triangle set with its unique color, you will earn full credit for Part 4.

      Part 5: Make it your own
      In Parts 1-4, you strove to make your image look "correct". Now you should use the techniques you have learned (triangles and WebGL rasterization) to make a new image that is "interesting". To earn full credit for Part 5, all that you must achieve is to make your image substantially different from that produced by the shell repo input, and from the imagery of your fellow students. Your "interesting" image should appear after you press the space bar. 

       Here is the target output for program 2.

      Program 1 2026: Ray Casting

      Final submission due: 11:59pm, Monday September 21

      Goal: In this assignment you will practice the ray casting methods that we are discussing.

      Submission: Submit your assignment using this Google Form.

      Introductory refs: On javascript.


      GRADING:
      • 5% Part 0: properly turned in assignment
      • 30% Part 1: ray cast the colored ellipsoids in the input file without lighting
      • 30% Part 2: color the ellipsoids with Blinn-Phong illumination
      • 10% / 5% Part 3: windowing, viewing and lighting
      • 10% / 5% Part 4: shadows
      • 5%X / 10% Part 5: triangles
      • 15% Part 6: make it your own
      • Extra credit: be voted most interesting
      • Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class slack!

      General:
      You will only render ellipses in this assignment, which are described in an input file. We will test your program using several different input files, so it would be wise to test your program with several such files. The input files describe an array of ellipsoids using JSON. An example input file resides at https://ncsucgclass.github.io/prog1/ellipsoids.json. When you turn in your program, you should use this URL in hardcode as the location of the input ellipsoids file — it will always be there. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple ellipsoids files. Note that browser security makes loading local files difficult, so we encourage you to access any input files with HTTP GET requests.

      We provide a small shell in which you can build your code. You can run the shell here, and see its code here, and find all supporting files in the progam 1 repo. The correct image for the default input is here. The shell shows how to draw pixels without using WebGL, and how to parse the input ellipsoids.json file. It contains three drawing functions: one that merely draws random pixels, one that loads the ellipsoids file and draws orthographic projections of them using canvas draw functions, and one that loads the ellipsoids file and renders some random pixels in them. The last is probably closest to what you must produce for this program. Some of our programming exercises also contain relevant code.

      All vertex locations should be described in world coordinates, meaning they do not require any transformation. Locate the eye at (0.5,0.5,-0.5), with a view up vector of [0 1 0] and a look at vector of [0 0 1]. Locate the window a distance of 0.5 from the eye, and make it a 1x1 square normal to the look at vector and centered at (0.5,0.5,0), and parallel to the view up vector. With this scheme, you can assume that everything in the world is in view if it is located in a 1x1x1 box with one corner at the origin, and another at (1,1,1). Put a white (1,1,1) (for ambient, diffuse and specular) light at location (-0.5,1.5,-0.5).

      Advice: be careful to implement the algorithm we described in class, which loops first over pixels, then over primitives. The code you find in our exercises to date implements rasterization, which loops first over primitives, then pixels.

      This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You may not use others' code to determine the location of pixels in the world, to do ray-ellipse intersection, or to color a pixel. You may use math libraries you find, but you must credit them in comments. You may use AI, but your code must be unique, not identical to your fellow students'. You may recommend libraries to one another, speak freely with one another about your code or theirs, but you may never directly provide any code to another student. If you are ever uncertain if the advice you want to give or code you want to use is permissible, simply ask me or the TA.

      Part 0: Properly turned in assignment
      Remember that 5% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.

      Part 1: Using ray casting, render unlit, colored ellipsoids
      Use ray casting to render unlit ellipsoids, with every pixel in each ellipsoid having the unmodified diffuse color of that ellipsoid (e.g, if the diffuse color of an ellipsoid is (1,0,0), every pixel in it should be red). You will have to test for depth, to ensure that each ellipse is correctly colored. You should see flatly colored ellipses.

      Part 2: Using ray casting, render lit ellipsoids
      Now you will have to perform a local Blinn-Phong lighting calculation at each intersection. To do this, you will need the normal vector at the ellipsoid intersection point I. The formula for the normal at a point on the surface of an ellipsoid centered at the origin is [2Ix / a2  2Iy / b2  2Iz / c2]. Generally, ellipsoids are not at the origin, so center the intersection point by subtracting the ellipsoid center C from it: [2(Ix - Cx) / a2  2(Iy - Cy) / b2  2(Iz - Cz) / c2]. As you perform that lighting calculation, don't forget to normalize your vectors. You should now see ellipses with depth revealed by illumination, in the same locations and with the same silhouettes as in part 1. You need not show your results for Part 1, if you have completed Part 2.

      Part 3: Windowing, viewing and lighting — (461: 10%; 561: 5%)
      Now make your windowing flexible. Accept a new canvas (viewport) width and height through your UI. Size your canvas to match, and change your ray casting interpolation to match. This should affect every part of your assignment.

      And make your viewing flexible. Accept new eye location, view up and look at vectors through your UI. Reorient the window to be normal to the new look at vector and centered around the new eye. Render the scene with these viewing parameters. Note that with bad viewing parameters, you will not see the model. This should affect every part of your assignment.

      Also, make your projection flexible. Accept new window parameters through your UI. Relative to the viewing coordinates described by the look at and up vectors, these will be two X values (left, right) and two Y values (top, bottom). Adjust your ray casting interpolation to this new window. Render the scene with these new projection parameters. Note that these coordinates will be in view space, not be in world space! Also with bad projection parameters, you will not see the model. This should affect every part of your assignment.

      Finally, Read in an additional lights.json file that contains an array of objects describing light location and color. Note that these lights will have distinct ambient, diffuse and specular colors. Render the scene with these lights. During illumination, you will have to sum the colors all the lights. You can find an example lights.json file here. Assume that the input lights file will always reside at this URL when you turn in your code.

      Part 4: Detect shadows during ray casting — (461: 10%; 561: 5%)
      When performing lighting during ray casting, shoot an additional ray toward the light to decide if only ambient light reaches the intersection. Make sure to shoot a ray at each light! This should only affect the last part of your assignment.

      Part 5: Render triangles — (461: 5% extra; 561: 10%)
      Read in an additional triangles.json file that describes triangles with vertices, and one material (set of reflectivity coefficients) to use with each set of triangles. Read in and render these triangles in addition to the input primitives. You will have to perform ray-triangle intersection, and must code this yourself. You can find an example triangles.json file here. Assume that the input triangles file will always reside at this URL when you turn in your code.

      Part 6: Make it your own
      Until now, you strove to make your image look "correct". Now you should use the techniques you have learned to make a new image that is "interesting". You may work only with ellipsoids, or with other modeling primitives as well (triangles, boxes, etc), but every pixel must be ray casted. You will half credit if you make your image substantially different from that produced by the shell repo input, and from the imagery of your fellow students. You will earn full credit if your work clearly represents significant effort. Your "interesting" image should appear after you press the space bar. 

      Extra credit: Voted most interesting
      To be voted "most interesting", you must post your interesting image in the #programming channel of the course slack (this may count as participation). Our TAs will select several finalist images for an in-class vote. The student whose image receives the most votes will receive 3%; second most, 2%; and third most, 1%.