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 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

Work 03: Take the Red Pill

posted Feb 14, 2018, 9:31 AM by JonAlf Dyrland-Weaver


This will be due Monday, 2/26

Implement the following features but you cannot trivialize the problem by using a structure that already exists in the language you choose:
  • General Matrix stuff
    • matrix multiplication
    • creation of an identity matrix
    • displaying a matrix in a reasonable manner
  • Graphics matrix stuff
    • add a point to an edge matrix
    • add an edge to an edge matrix (should call your add point routine)
    • go through an edge matrix and draw the lines stored in the matrix (should call your draw line routine)
  • Create a main function/method that demonstrates all the of matrix routines you wrote, and generates an image using the edge matrix structure. Upload the image to the gallery page.
READ THROUGH ALL THE SOURCE FILES. Detailed instructions are provided as comments. 

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

Work 02: Because it's time, you'll make a line

posted Feb 8, 2018, 7:22 AM by JonAlf Dyrland-Weaver   [ updated Feb 8, 2018, 7:23 AM ]

DUE: 

You will write your own line algorithm!
  1. First decide what you will be programming in for this assignment. You can use any language you'd like, but you must write your own line algorithm (do not use any built in function that may exist for your language of choice).
  2. Code Bresenham's line algorithm!
    • Start with octant 1.
    • Add the other octants one at a time, you'll have a much easier time debugging doing that.
      • Trust me, I've done this a few times.
  3. Test your algorithm by calling your draw_line routine multiple times.
    • Don't forget to upload an image to the gallery!
Follow these guidelines in your submission
  • Upload your code to gihub
  • Upload an image to the gallery
  • Include a makefile that will create an image using your code.
    • Your code should result in displaying an image that tests all octants, including slopes of 0, 1, -1 and undefended. If you cannot run the display command, then save an image and print out the name of the image being saved.
    • This image may not be the same as your gallery image, that is ok.
If your are using my frameworks you only need to modify the following files:
  • c
    • draw_c
    • main_c
  • python
    • draw.py
    • main.py
github clone link:
https://github.com/mks66/line.git

Work 01: Imagine all the pixels...

posted Feb 2, 2018, 6:52 AM by JonAlf Dyrland-Weaver   [ updated Feb 4, 2018, 12:11 PM ]

Time for your first computer generated image:

  • Create a program that generates a valid ppm image file, it should be at least 500x500, but also don't make it too big (remember, each pixel is stored as 3 bytes - one for each color value - so a 1000x1000 image will be 8MB large, they get big fast).
  • Upload your code, as a submodule, to the appropriate place on github.
  • Convert your image to a png and upload it to the ML6 gallery website: http://gallery.stuycs.org
    • For help with converting, you should install ImageMagick
      • on ubuntu, apt-get install imagemagick will work
      • on mac: 
        • First install XQuartz form here: https://www.xquartz.org/index.html
        •  (if you have homebrew installed): brew install imagemagick --with-x11 will work ( the --with-x11 flag is very necessary, and I've already spent the hours yelling at the internet trying to figure out what was wrong.
        • If you're more of a macports kind of person: port install imagemagick
      • on windows... installing ubuntu and running apt-get install imagemagick will work (I've been told imagemagick works on cygwin)
      • for more detailed instructions (including building and installing it on your own): http://www.imagemagick.org/script/binary-releases.php
      • You can also log into any stuy machine remotely, and run convert on them.
      • Once you've installed image magic, you can convert with the following command:
        • convert <source> <destination>
        • The destination format will be automatically set based on the file extension
        • example: convert foo.ppm foo.png
  • You must submit your code via github and upload an image!
  • Did you remember to include a makefile?

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

Work 00: The beginining

posted Feb 1, 2018, 8:05 AM by JonAlf Dyrland-Weaver

1-10 of 10