Courses‎ > ‎Computer Graphics‎ > ‎Dyrland-Weaver‎ > ‎

Work

SUPER IMPORTANT SUMISSION GUIDELINES
  • You must include a makefile for each assignment!
    • The makefile should invoke whatever is needed to compile and/or run your program. When I type make, I expect to have your program generate an image.
  • Every assignment (unless otherwise noted) will require both a github submission and an image gallery submission. Full credit will require both.
  • All github submissions should be submodules in the correct period directory for the assignment. Please see the resources page for help on linking your own repository as a submodule. 
  • NEVER EVER EVER add image files to github
    • Adding image files will result in deductions
    • I will include a useful .gitignore file at the root of each assignment repository, if you want, copy it and rename it to .gitignore in your repo.
  • Gallery submissions should be made here: http://gallery.stuycs.org

Work 13: The End

posted May 30, 2018, 11:50 AM by JonAlf Dyrland-Weaver   [ updated Jun 8, 2018, 8:40 AM ]

Project Due: 12pm (noon) Thursday, 6/14.

GitHub link: https://github.com/mks66/final.git

For the final project, you are to add any features you'd like to your current graphics engine. Below are some good places to start (you may work on other features if you prefer, just talk to me about it first).
  • Lighting
    • Implement lighting commands in MDL.
    • Relevant MDL commands: ambient, light, constants
    • Allow an MDL programmer to set the ambient light, create lighting constants and set potentially multiple point light sources.
  • Shading
    • Implement Gouraud and/or Phong shading.
    • Relevant MDL command: shading
    • Allow an MDL programmer to select from the shading methods you have implemented.
    • As discussed in class, a hash table structure can be very helpful for dealing with vertex normals. If you are woking in c, check out uthash.
  • Importing polygon mesh files
    • Relevant MDL command: mesh
    • Allow an MDL programmer to specify a polygon mesh defined in an external file.
    • The easiest format to work with is .obj.
      • Read up on it here.
      • Find example files here.
      • Make sure you deal with .obj files that list quadrilateral faces instead of triangles.
  • Add new primitive shapes to the graphics engine.
    • You will have to add MDL commands for each new shape, requiring you to modify the lexer and parser language specifications.
  • Add modifiers to the vary command.
    • Create options to vary knobs in ways other than linearly.
    • This will require you to modify the lexer and parser language specifications.
You may work with one other person from your graphics class if desired.

Your README.md file must describe what features you have implemented  and any relevant MDL instructions.
  • Start your README.md file with your name(s) and class period.
  • The have a succinct list of the features you have implemented, and any relevant MDL commands.
  • Provide more detailed descriptions below that list if needed.

Work 12: Gettin' Giffy With it

posted May 22, 2018, 5:54 AM by JonAlf Dyrland-Weaver

Animation! Woohoo!

New MDL commands to implement:
  • frames
    • set the number of frames
  • basename
    • sets the basename for animation file saving
  • vary
    • vary the values for a knob between 2 values in a set range of frames
Animation Features:
  • The key animation commands are frames, basename and vary. You should proceed with animation code in 3 steps:
    • Go through the operations list and look for any of the three animation commands
      • Set frames and basename
      • Handle erros as needed
    • Go through the operations list a second time and look for the vary command
      • Populate a table that has an entry for each frame, and in each frame it has a value for each knob
        • When completed, the table should contain the correctly set values for each knob (perform the varying calculation)
        • In c, there is a struct vary_node defined in parser.h
        • In python, you could use a dictionary/list combination
        • Handle errors as needed
    • Perform the normal interpreting/drawing steps that are currently working, with the following additions if animation code is present. 
      • First, look at the table of knob values (set in the second step) and set each knob in the symbol table to the appropriate value.
      • Run the normal commands
      • At the end of the loop, save the current screen to a file, the file should have the basename followed by a number, so that animate will work correctly. 
        • I suggest you put all the animation frames in a subdirectory, so just append a directory name to the basename when saving files
        • in c, you can pad the beginning of a string with 0's using the following syntax (if x = 12):
          • sprintf (s, "%03d", x ) will set s to the string "012"
          • The 0 indicates that you are padding with 0, and the 3 indicates that if x is less that 3 digits in length the number will be padded with 0
        • python has similar functionality using python formatted strings
          • "%03d"%12  will give you "012"
      • When you are done with each frame loop, don't forget to reset the screen, origin stack and any other pieces of data that are specific to a given frame
  • Once you have all the files created, you can generate the animation using imagemagick's animate and convert commands:
    • animate
      • Will display multiple single image files in succession as a single animation, with a default frame rate of 100 frames per second, by using the -delay option, you can change the fps ( -delay x will set the frame rate to 100/x fps )
        • $ animate -delay 10 animations/orb*
      • Convert can, like animate, take a number of frames and animate them, but instead of displaying the animation, it will combine them into a single animated gif file. Note that the only image format that can use animation is gif.
        • $ convert -delay 10 animations/orb* orb.gif will create a single animated gif called orb.gif
    • In python and c, I've included a make_animation function in display.c/py that will generate the animation for you.
github clone link:
https://github.com/mks66/mdl_animation.git

Work 11: More Delightful Labor

posted May 12, 2018, 7:03 PM by JonAlf Dyrland-Weaver   [ updated May 14, 2018, 8:00 AM ]

(MDL actually stands for Motion Description Language)

Before doing anything else, take a look at MDL.spec, it provides important information about the language structure.

There are many commands and features in MDL that we will not be using yet, you should ignore those for now.

Time to start working on mdl! Implement the following mdl commands:
  • push
    • push a copy of the current top of the origins stack onto the origins stack (a full copy, not just a reference to the current top)
  • pop
    • removes the top of the origins stack (nothing needs to be done with this data)
  • move/rotate/scale
    • create a translation/rotation/scale matrix and multiply the current top by it
    • do not try to use the option arguments for these commands
  • box/sphere/torus
    • add a box/sphere/torus to a temporary polygon matrix, multiply it by the current top and draw it to the screen 
    • do not try to use the option arguments for these commands
  • line
    • add a line to a temporary edge matrix, multiply it by the current top and draw it to the screen
    • do not try to use the option arguments for this command
  • save
    • save the screen to the provided file name
  • display
    • show the image
  • You only need to modify one of the following files (c/python):
    • my_main.c 
    • mdl.y: there is a comment at the very bottom that you will also need to check.
    • script.py
github clone links:
http: https://github.com/mks66/mdl.git

Work 10: Shed some light on the situation

posted May 1, 2018, 6:58 AM by JonAlf Dyrland-Weaver

Implement the Phong Reflection model with flat shading. (Note: if you look up information online, do not confuse this with Phong Shading).
  • You should be calculating I once per polygon.
  • Remember to limit I to be in the range [0, 255]. You may not want to do this all at once at the end.
  • There are a lot of user-defined values in lighting calculation, eventually, we will to be able to set them in our scripts. For now, pass them around to the necessary functions, and set them in either your main/parser functions. This is modeled in the provided source code.
  • Once again, our robot friend is not a great test for lighting, boxes in general are not good since they have very few polygons. 
github link: https://github.com/mks66/lighting.git

Work 09: Scanning For Signs of Life

posted Apr 19, 2018, 6:52 AM by JonAlf Dyrland-Weaver

Add scanline conversion and z-buffering to your graphics engine.
  • Parser Note:
    • In the previous assignment, I noted that the clear command was no longer needed, because we immediately clear the polygon/edge matrix after a shape is drawn. In order to test Scanline conversion on multiple shapes, a different version of clear is useful. Now, clear will clear the screen, allowing us to reset and test multiple shapes in the same script. 
    • I have added this command to the provided source code, but everyone should implement it.
  • Scanline conversion
    • Create a new function that handles the scanline conversion.
    • Call this in your draw_polygons function.
    • Make sure that you change color values for each triangle.
  • z-buffering
    • In the base files provided, I've added a z-buffer argument to the necessary functions, but have not done anything with it.
    • The z-buffer should only be modified in your plot function, or when clear_zbuffer is called.
    • You will need to calculate z values in both scanline_convert and draw_line.
      • Your z values are not limited to the integers.
GitHub repository: https://github.com/mks66/solids.git

Work 08: Let's see how your code stacks up to the competition

posted Apr 12, 2018, 7:09 AM by JonAlf Dyrland-Weaver   [ updated Apr 12, 2018, 7:11 AM ]

(I do not know who the competition is)

Note: If you are working in c, I have provided a basic stack library that you can use in the dwsource repository

To implement a relative coordinate system... system, add/modify your current parser so it has the following behavior
  • push
    • push a copy of the current top of the coordinate system (cs) stack onto the cs stack (a full copy, not just a reference to the current top... I'm looking at you python people)
  • pop
    • removes the top of the cs stack (nothing needs to be done with this data)
  • translate/rotate/scale
    • create a translation/rotation/scale matrix
    • multiply the current top of the cs stack by it
    • The ordering of multiplication is important here.
  • box/sphere/torus
    • add a box/sphere/torus to a temporary polygon matrix
    • multiply it by the current top of the cs stack
    • draw it to the screen
    • clear the polygon matrix 
  • line/curve/circle
    • add a line to a temporary edge matrix
    • multiply it by the current top
    • draw it to the screen (note a line is not a solid, so avoid draw_polygons)
  • save
    • save the screen with the provided file name
  • display
    • show the image
  • Also note that the ident, apply and clear commands no longer have any use
github clone link:
https://github.com/mks66/cstack.git

Work 07: If your shapes don't look solid, tri a different angle...

posted Mar 23, 2018, 10:18 AM by JonAlf Dyrland-Weaver

You must do the following things:
  1. Write correct, functioning code.
  2. Create a script file that demonstrates all the shapes
    • Upload a new picture to the gallery
The Drawing:
  • Create new functions to add a polygon to a matrix, and go through the matrix 3 points at a time to draw triangles.
  • Modify add box, add sphere and add torus to add triangles instead of points.
  • Make sure the parser calls the draw_polygons functions when needed instead of draw_lines
  • More to come...

Work 06: Get to the Point

posted Mar 15, 2018, 7:01 AM by JonAlf Dyrland-Weaver   [ updated Mar 15, 2018, 7:41 AM ]

DUE: 8am Tuesday 3/20

We will now begin to add 3d shapes (as points only) to our already simmering graphics stew.

You must do the following things:
  1. Write correct, functioning code.
  2. Create a script file
  3. Upload a new picture to the gallery
  • add the following commands to the parser
    • clear: clears the edge matrix of all points
    • box: adds a rectangular prism (box) to the edge matrix - takes 6 parameters (x, y, z, width, height, depth)
    • sphere: adds a sphere to the edge matrix - takes 4 parameters (x, y, z, radius)
    • torus: adds a torus to the edge matrix - takes 5 parameters (x, y, z, radius1, radius2)
      • radius1 is the radius of the circle that makes up the torus
      • radius2 is the full radius of the torus (the translation factor). You can think of this as the distance from the center of the torus to the center of any circular slice of the torus.
  • You should actually add edges to draw the box.
  • For the sphere and torus, just add the points (for each point on the surface, and an edge from it to a point 1 pixel away to make it easier to see.

Work 05: It's spring training, time to work on your curve.

posted Mar 8, 2018, 7:00 AM by JonAlf Dyrland-Weaver

It's time to add curves to the graphics engine. Everything will work as before, we will just have three more shapes to draw .

Add the following commands to the parser
  • circle: adds a circle to the edge matrix - takes 4 parameters (cx, cy, cz, r)
  • hermite: adds a hermite curve to the edge matrix - takes 8 parameters (x0, y0, x1, y1, rx0, ry0, rx1, ry1)
    • The curve is between points (x0, y0) and (x1, y1).
    • (rx0, ry0) and (rx1, ry1) are the rates of change at each endpoint
  • bezier: adds a bezier curve to the edge matrix - takes 8 parameters (x0, y0, x1, y1, x2, y2, x3, y3)
    • This curve is drawn between (x0, y0) and (x3, y3)
    • (x1, y1) and (x2, y2) are the control points for the curve.

github clone link: https://github.com/mks66/curves.git

Work 04: Transformations - More Than Meets the Eye!

posted Feb 28, 2018, 7:12 AM by JonAlf Dyrland-Weaver   [ updated Feb 28, 2018, 7:12 AM ]

  1. Write code to work with transformation matrices:
    • create a translation matrix
    • create a scale matrix
    • create a rotation matrix about the x-axis
    • create a rotation matrix about the y-axis
    • create a rotation matrix about the z-axis
      • Note: The trig functions in python and c take radians as parameters, but you should assume degree input, make sure to convert or things won't look right.
  2. Modify your main routine so that it keeps track of:
    1. A single edge matrix
    2. A single master transformation matrix
  3. Create a parser that will interpret a script to be used to draw an image.
    1. Each command is a single word without spaces in it, and if it takes arguments, the line after will contain the arguments, separated by spaces. For example, a line of the file might look like this:
      • line
      • 0 0 0 100 100 0
    1. Here is the full list of commands:
      • line: add a line to the point matrix -  takes 6 arguemnts (x0, y0, z0, x1, y1, z1)
      • ident: set the transform matrix to the identity matrix
      • scale: create a scale matrix, then multiply the transform matrix by the scale matrix -  takes 3 arguments (sx, sy, sz)
      • move: create a translation matrix, then multiply the transform matrix by the translation matrix - takes 3 arguments (tx, ty, tz)
      • rotate: create a rotation matrix, then multiply the transform matrix by the rotation matrix - takes 2 arguments (axis theta)
      • apply: apply the current transformation matrix to the edge matrix
      • display: draw the lines of the point matrix to the screen, display the screen
      • save: draw the lines of the point matrix to the screen/frame save the screen/frame to a file - takes 1 argument (file name)
github link: https://github.com/mks66/transform.git

1-10 of 14