Description
CS559 Programming Assignment #1
Synopsis:
You need to create a program that draws a picture on a 2D Canvas on a Web
page. Your submission must demonstrate the use of lines and polygons, and the use of
slider elements for input.
Learning Objectives:
To make sure everyone understands how to make pictures with
Canvas, using the most basic features that we reviewed in class. We also want to make sure
that you can turn in assignments, and that you know how to create an HTML page with
JavaScript (as a stand-alone file or files; not within a pastebin like JSbin).
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this page here). It is always ok to use code provided
in our in-class examples as a starting point, but you need to add your own effort to raise
those examples (or other sources) to what is asked by the programming assignment (i.e.
finding some code on some online forum that does all the job for you that is needed to satisfy
https://canvas.wisc.edu/courses/320922/assignments/1717059?module_item_id=5431845 2/4
the assignment is not the intent, if you haven’t added any of your own effort to it).
If you use
somebody else’s code (other than our GitHub examples), make sure to clarify in your
submission notes what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-2 from Week 2).
If you submit
anything else than a single HTML file, please put everything in a single ZIP archive. It is not
acceptable to submit a link to JSbin for this assignment! For this assignment, we
discourage you from using any libraries. But if you do use a library, make clear to mention it
in the comment box.
Description
In our recent lecture (in particular, on September 8th) we saw a few introductory examples of
using the HTML5 canvas for simple drawing in 2D. Those include a simple demonstration of
creating a canvas element and drawing a single colored line [JSbin link]
(https://jsbin.com/bovuhok) , a demonstration of the use of function calls, and filled
polygons [JSbin link] (https://jsbin.com/suhujar) , and an introduction to the use of sliders as
input elements along with their associated callback mechanisms [JSbin link]
(https://jsbin.com/fesukexori) .
Incidentally, you can find these same examples in our GitHub
repository (https://github.com/sifakis/CS559F22_Demos) (under the subdirectory Week2/; look
for the subdirectories Demo0, …, Demo2 under it) more properly written as .html files and .js
files containing the HTML/JavaScript code respectively.
The goal of this assignment is to have you figure out the programming aspects of drawing
pictures on web pages using the JavaScript 2D Canvas library.
You should create a new
program (as a single HTML file, or even better a separate .html file and a .js file with the
JavaScript code, as exemplified in the demos from the GitHub repository) that includes – at
minimum – the following visual elements:
You should draw at least one filled shape (e.g. a polygon).
You should either have multiple, separate filled shapes (not merely identical copies of one
another; craft a different shape instead), or draw some shapes that are not
filled alongside the filled polygons, for example polygonal shapes that are only drawn as
https://canvas.wisc.edu/courses/320922/assignments/1717059?module_item_id=5431845 3/4
a line (if you do the latter, make sure that this shape includes more than one line
segment).
You are welcome to do both, of course, and include multiple filled shapes and
multiple line-drawn (non-filled strokes) along them!
You must demonstrate the use of more than one color in your drawing
You must include at least one slider in your program, and have it affect the image drawn
in some way. For example, it could control the location of one of the polygon vertices
being drawn; or it could control the thickness of some line; or it could move an entire
shape.
The requirements above are what is asked of you to get a “Satisfactory” grade (i.e. a score
of “3”) in the programming assignment. If you want to contend for an “above-and-beyond”
grade (i.e. “4”), you should consider drawing something more elaborate.
For example, you
might consider doing several add-ons such as the following (not an exhaustive list) :
Something that creatively combines many shapes to create an interesting appearance.
Something that changes shape (perhaps as triggered by the value of the slider) in an
interesting way.
Something that includes an animation (we gave hints/examples of how to do this towards
the end of the September 15th lecture).
You can satisfy the requirements by taking the short examples in the tutorials (and giving
proper attribution – see the collaboration policy) and combining or modifying them. However,
we recommend that you put some effort into really understanding what is going on. And to
make a picture that is more fun. Go ahead, show off your creativity!
We will give you a bunch of resources for getting started with JavaScript and Canvas (Start
with the “learning JavaScript” (http://graphics.cs.wisc.edu/WP/tutorials/learning-javascript/)
page). If you’re new to JavaScript, take one of the example programs to start with, and
experiment with changing the drawing command stop see what happens. In fact, you can
tinker with the examples right in JSBin. And you might want to tinker with other parts of the
program to see how it works.
Even if you know JavaScript and Canvas, please look through the tutorials – they will
connect things to the other concepts in class.
To do this assignment, we recommend that you start with: HTML5 Canvas What and Why
(http://graphics.cs.wisc.edu/WP/tutorials/html5-canvas-what-and-why/) (well, maybe you should
look at the Learning JavaScript (http://graphics.cs.wisc.edu/WP/tutorials/learning-javascript/)
page first)
https://canvas.wisc.edu/courses/320922/assignments/1717059?module_item_id=5431845 4/4
And then read the: Getting Started with HTML5 Canvas
(http://graphics.cs.wisc.edu/WP/tutorials/getting-started-with-html5-canvas/) page.
You might also
want to go look at some more of the JavaScript Canvas resources listed on the HTML5
Canvas What and Why (http://graphics.cs.wisc.edu/WP/tutorials/html5-canvas-what-and-why/) .
This will give you enough to start doing the assignment. Then you’ll want to learn a bit more
about what you can do with Canvas, and probably to become a better JavaScript
programmer as well. The next programming assignments won’t be as easy…
CS559 Programming Assignment #2
You will make a program with an object (or more) that uses the concept of
hierarchical modeling and have it be animated.
Learning Objectives:
To see how transformations in 2D and hierarchical objects are useful
in modeling and animation, obtain exposure to the implementation of these concepts in the
HTML Canvas and the transform stack it implements, and to experiment with using them in
web programming.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this post here). It is always ok to use code provided
in our in-class examples as a starting point, but you need to add your own effort to raise
those examples (or other sources) to what is asked by the programming assignment (i.e.
finding some code on some online forum that does all the job for you that is needed to satisfy
the assignment is not the intent, if you haven’t added any of your own effort to it). If you use
https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923 2/4
somebody else’s code (other than our GitHub examples), make sure to clarify in your
submission notes what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-2 from Weeks 2 & 3).
If you
submit anything else than a single HTML file, please put everything in a single ZIP archive. It
is not acceptable to submit a link to JSbin for this assignment! For this assignment, we
discourage you from using any libraries. But if you do use a library, make clear to mention it
in the comment box.
Description
In class, we’ve been learning about transformations (in 2D), create composite transforms by
combining elementary ones, and the Canvas transform stack. Now is you chance to try these
concepts out!
Like the previous assignment, you must make a web page with an HTML5 Canvas on it. You
must do all the drawing with Canvas. In fact, you must use the canvas transformation
commands (i.e. the translate(), scale(), rotate() methods of the drawing context) as
opposed to implementing these transforms via some other process (e.g. adding coordinates
together by hand to implement a translation, or using a linear algebra library to implement
such operations; the latter is a fine way to implement transforms as a general practice, but
for this assignment we want you to use the canvas commands for elementary transforms as
much as possible).
Transformations are helpful all of the time. However, they are really useful when you want to
make objects that are hierarchical (have parts that move relative to other parts). They are
also really useful for moving things around.
An example of a hierarchical model might be a model of a car with spinning wheels: the
wheels of the car rotate, but they stay attached to the car as it moves around. Another
example would be a quadcopter as demonstrated in the lecture – with 4 propellers that spin
while the copter flies around. Since we have only worked in 2D so far, consider how this
would look in a top view (link (http://graphics.cs.wisc.edu/Courses/559-
f2015/Examples/QuadCopter/quad.html) ). Note: we are not hiding the source code of this
https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923 3/4
implementation from you, but you must make your own object and motion.
This particular
example is not intended to be an example of how to code up such models in
JavaScript/Canvas, and you are strongly recommended to not use it as a starting point for
your implementation. This is merely supposed to be a visual illustration of how a moving
hierarchical object might look like.
We also gave examples of hierarchically modeled objects
in class, such as a simple articulated robotic chain (link (https://jsbin.com/wovupusife) ). It is
ok to use these code samples (the ones where we explicitly described the code during class;
many/most of these will also be duplicated in our GitHub repository of demos) as starting
points in your implementation, or to get some inspiration to get started. Again, you should
deviate from these examples by adding your own shapes, connectivity of pieces, and/or
motion.
Your implementation must demonstrate the use of the HTML Canvas transform stack, in
service of the hierarchical modeling concept. If you’re not using the save()/restore()
commands in a way similar to how we did in class, you are probably doing this wrong.
We would encourage you to be creative! Pick something interesting. It just has to have parts
that move relative to each other (e.g. be hierarchical). And it should have at least one part
that has two children (like the quadcopter has 4 propellers, or a car has 2 wheels). And it has
to move by itself to show this off.
You do need to animate your object (or objects) in a way that shows off the hierarchy.
The QuadCopter (http://graphics.cs.wisc.edu/Courses/559-
f2015/Examples/QuadCopter/quad.html) demo flies around and its 4 propellers spin. One
possibility is to use “requestAnimationFrame” to do the animation (or setTimeout). See
the tutorial (http://graphics.cs.wisc.edu/WP/tutorials/when-do-i-draw-some-comments-on-codeorganization/) , especially the last example.
It is also OK to use sliders to control the
animation, as we have seen in class (instead of the auto-update via the
requestAnimationFrame mechanism) if that works best with your particular hierarchical
model.
Some ideas (but you should be creative!)
You could make a car (side view) where the wheels spin while it drives. Or make it a
dump truck and the back can tilt up and down. Or a firetruck where the ladder goes up
and down.
You could make a tree where the branches wave in the wind.
How about a clock with two hands (minute/hour), where the clock itself is moving. Maybe
have the clock mounted on some other object (a character’s hand?), or have several of
https://canvas.wisc.edu/courses/320922/assignments/1721563?module_item_id=5447923 4/4
them in your scene.
A model of the solar system, with planets and their moons?
To compete for a “4” (above-and-beyond) grade we suggest that you model objects with
interesting motion, have some added complexity to the hierarchical structure of your object
(say, something more than a Y-shaped robotic arm with 2 fingers …), or use components in
your model that are particularly creative.
Readings (new!)
Although we will try to make the class lectures and slides be as descriptive as possible, and
have them be your primary reference for many of the concepts discussed in class, we will
also provide supplemental reading materials that help build more sound foundations for the
theoretical concepts discussed in class.
Although reading these in great detail is not an
absolute necessity for completing the programming assignments, we believe you would
benefit from doing so; some of these will also prepare you for the lectures ahead of us!
At this point, we recommend that you review the following:
Readings about the basic math (Linear Algebra and coordinate systems)
Tutorial: Points and Vectors (http://graphics.cs.wisc.edu/WP/tutorials/points-vectors-andcoordinate-systems-why-are-points-and-vectors-different/)
Chapter 1 of Hart’s Big Fun Computer Graphics Book (Link)
Chapter 5 of Hart’s Big Fun Computer Graphics Book (Link)
If you need to brush up on linear algebra, you can try chapters 1,2 and 4 or Practical
Linear Algebra (Link, Link, Link)
Foundations of Computer Graphics (Chapter 6, section 1 Link) discusses transformations
in a manner similar to Hart, if you want to see it another way.
Reading ahead to Chapter 7 of Hart’s Big Fun Computer Graphics Book (Link) will give
you a sense of why we’re so interested in transformations.
There is a highly recommended tutorial about types of graphics (image vs. objects)
(http://graphics.cs.wisc.edu/WP/tutorials/image-based-graphics-vs-object-based-graphics/) so you
know why we’re starting where we are.
CS559 Programming Assignment #3
Synopsis:
You will make a program with an object (or more) that uses the concept of
hierarchical modeling and have it be animated, using explicit matrix and vector
representations for the points and transforms involved.
Learning Objectives:
To obtain experience in using mathematical representations of 2D
transforms (i.e. matrices), how such transforms are applied to homogeneous representations
of vectors, and how transforms are combined.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this post here). It is always ok to use code provided
in our in-class examples as a starting point, but you need to add your own effort to raise
those examples (or other sources) to what is asked by the programming assignment (i.e.
finding some code on some online forum that does all the job for you that is needed to satisfy
the assignment is not the intent, if you haven’t added any of your own effort to it). If you use
https://canvas.wisc.edu/courses/320922/assignments/1727899?module_item_id=5469690 2/3
somebody else’s code (other than our GitHub examples), make sure to clarify in your
submission notes what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-2 from Week 5). If you submit
anything else than a single HTML file, please put everything in a single ZIP archive. It is not
acceptable to submit a link to JSbin for this assignment!
Description
In your previous programming assignment, you were asked to create a scene with one of
more objects that are created according to the principles of hierarchical modeling. In creating
such objects, you were asked to leverage the HTML5 Canvas transformation commands (i.e.
the translate(), scale(), rotate() methods of the drawing context) and the stack supported
within canvas (manipulated via the save(), restore() methods) to create models with multiple
components whose transforms hierarchically depend on each other.
This week’s assignment asks you to produce something that visually could be very similar or
even identical to the result of Assignment #2; however, instead of using the Canvas
transforms and stack, you are asked to implement any transforms (and, by “implement”, we
mean creating all the elementary transforms, combining them to create composite
transforms, applying them to point locations to convert them from one coordinate system to
another) using explicit matrix representations, using a matrix/vector library such as glMatrix
(http://glmatrix.net/) or TWGL (https://twgljs.org/) that we discussed in class.
Although
glMatrix would be gently recommended, since we had the opportunity to cover it in more
detail in class, you are absolutely welcome to use TWGL or some other matrix library
instead.
One possible idea, if you are happy with the result you turned in for Programming
Assignment #2 would be to first create a version of the same product, that is visually
identical to what you implemented using the Canvas transformation functionality, but
internally substitute all the calls to the translate(), scale(), rotate() calls (or the save(),
restore() methods for the built-in transform stack) with glMatrix transform representations
and operations. We saw a very good example of this in class; we examined a hierarchically
https://canvas.wisc.edu/courses/320922/assignments/1727899?module_item_id=5469690 3/3
modeled object implemented via Canvas calls [JSbin link] (https://jsbin.com/hozeyar) , and
then saw how the exact same functionality (and appearance) can be implemented using
glMatrix representations of transformation matrices [JSBin link] (http://jsbin.com/yifahoq) .
We also saw an example that uses TWGL as the underlying matrix library [JSBin link]
(https://jsbin.com/qutelof) . The only canvas transform-related operation you are allowed to use
(it’s only optional to do so …) is the setTransform() method, if you don’t end up applying the
transform yourself (like in this example [JSBin link] (http://jsbin.com/leropag) ).
You can also
optionally implement your own stack (you are not allowed to use Canvas’ own stack, as in
the save(), restore() methods) as we saw in examples in-class [JSBin link]
(http://jsbin.com/zimaqos) . You can find implementations for all these examples in our GitHub
repository (https://github.com/sifakis/CS559F22_Demos) under
directories Week4/ and Week5/.
Although it is perfectly acceptable to produce a result that is identical to your programming
assignment #2, as always we encourage you to be creative. If you want your submission to
be competitive for a “4” score, similar embellishments that would boost your score in the
previous assignment (in terms of aesthetics, complexity of motion, intricacy of model) would
also be considered here; however note that if you previously got a “4” for being creative, but
now you turned in the exact same visual result, it might not be enough to just change the
matrix representation of the transforms to get a “4” again … you will need to be creative in a
similar but different way.
One possible idea in your quest for making your assignment more interesting: You may
consider using some simple parametric curves like the ones we have been recently talking
about, to either add interesting shapes, or create an interesting motion/animation by making
certain objects move along a curved trajectory … just an idea, certainly not a requirement!
CS559 Programming Assignment #4
Synopsis:
You will make a program that uses a parametric curve to define an intricate
trajectory, and use this representation both to draw such a curve as well as move/animate an
object along it.
Learning Objectives:
To exercise your understanding of parametric curves (including
cubics) and their representations, their use for motion/animation purposes, and become
more familiar with the concept of continuity of piecewise-defined curves.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this post here). It is always ok to use code provided
in our in-class examples as a starting point, but you need to add your own effort to raise
those examples (or other sources) to what is asked by the programming assignment (i.e.
finding some code on some online forum that does all the job for you that is needed to satisfy
the assignment is not the intent, if you haven’t added any of your own effort to it). If you use
https://canvas.wisc.edu/courses/320922/assignments/1732430?module_item_id=5485251 2/4
somebody else’s code (other than our GitHub examples), make sure to clarify in your
submission notes what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-2 from Week 6). If you submit
anything else than a single HTML file, please put everything in a single ZIP archive.
Feel free
to use the copy of the glMatrix library included in our examples in the GitHub repository (or
use them as a starting point) if it’s convenient. It is not acceptable to submit a link to
JSbin for this assignment!
Description
In the last few lectures we discussed the representation and implementation of parametric
curves, including certain types of cubic curves with convenient properties. We addressed the
motivation in using such geometric tools (e.g. creating more intricate shapes than the ones
allowed by built-in canvas commands, and having the ability to animate objects along them).
We also looked at implementation considerations associated with the use of parametric
curves in 2D (most of which are found in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) under Week5/), such as the drawing of a curve as
a finely-refined chain of line segments [JSBin demo] (http://jsbin.com/ziletiq) , using the
parametric representation to control the position and orientation of an object that travels
along the curve [JSBin demo] (http://jsbin.com/meliyax) , and how piecewise-defined curves
are implemented and what different degrees of continuity feel like [JSBin demo]
(http://jsbin.com/vupevab) .
In Week 6, we also talked about various types of cubic polynomial
curves (including Hermite and B-Splines; we will also talk about Bezier curves in Week 7),
and the convenient properties they provide as building blocks of composite (piecewise-cubic)
curves (see our GitHub repository (https://github.com/sifakis/CS559F22_Demos)
under Week6/).
In this assignment you will create your own program, in the spirit of the demos we saw in
class, extending them of course into something more interesting and hopefully exciting! You
are welcome to take inspiration or even adopt some of the implementation practices from the
in-class demos; your program, however must fulfill the following requirements in order to get
a satisfactory “3” grade:
https://canvas.wisc.edu/courses/320922/assignments/1732430?module_item_id=5485251 3/4
Requirement #1. Your drawing has to include, at minimum, one of the following:
(a) A piecewise-defined curve, that shifts from one formula to another (see the example in
this [JSBin demo] (http://jsbin.com/vupevab) ), that is also closed in the sense that the
curve returns to the place where it started, forming a closed “loop”; note that this is
different from the example we saw in class, where all curves, including those that had
piecewise-definitions, were “open”.
or (you can do both if you wish!)
(b) Multiple separate curves, out of which one has to have a piecewise-defined formula
(i.e. at least two components with different formulas, joined together), but in this case the
curves don’t have to be closed (unless you want them to be!).
Requirement #2. Your drawing needs to have at least one object that is animated using
one of the curves defined. It is sufficient to have the parametric curve control only
the position of the moving object (as in this [JSBin demo] (http://jsbin.com/ziletiq) ), but if
you want to be extra fancy you can also control the orientation of the moving object (see
this [JSBin demo] (http://jsbin.com/meliyax) ).
Requirement #3. You must “draw” the path of at least one of the curves involved in your
scene (consider the way we discussed in our demos, by splitting the curve up into small
line segments). It’s ok to have a “switch” of sorts (e.g. the value of a slider) that “turns off”
drawing the curve line, if you feel your scene looks better without it! As long as there is
the option to display that path, you are good!
Requirement #4. At the point where the different formulas of a piecewise-defined curve
in your scene, you must enforce at least C0-continuity (G1-continuity or higher would be
nice; C2 might be overkill, but you are welcome to do it). This is just for one of the
junctions in one of your piecewise-defined curves; you are free to use any degree of
continuity for all other cases.
Requirement #5. At least one of the curves you use in your implementation has to be a
parametric cubic (Hermite, B-spline, etc or even Bezier if you read about it from FCG
Chapter 15, or catch the in-class description on Oct 18th). It doesn’t have to be the case
that all components of a piecewise curve will have to be a cubic … just that somewhere in
your scene there must be a curve that has at least one component (if it’s a
piecewise/component curve) that’s a cubic.
Frankly, you might find that one of the most
natural ways to enforce C1 continuity (if you choose to have at least that degree of
smoothness) is to resort to cubics anyhow …
You are welcome to use either sliders, or automatic animation to “move” your objects along
any curve trajectories; use whatever feels best for your vision of the scene you want to
https://canvas.wisc.edu/courses/320922/assignments/1732430?module_item_id=5485251 4/4
create!
As always, you are encouraged to try and exceed these requirements, and if you do well,
you can compete for a “4” above-and-beyond grade. Here are some recommendations for
that (do several of these to be more competitive):
Controlling position and orientation of objects in your scene.
Having controls/sliders that alter the shape of your curved trajectories.
Create intriguing motions and shapes.
Enhance the appearance of curved profiles by giving them “thickness” or drawing multiple
parallel lines that go alongside your curve; think of a train track with 2 parallel rails, that
swerve together!
Have multiple moving objects in curve trajectories that somehow interact … a race-track
with multiple cars for example, sometimes overtaking each other?
Readings
The following will be useful references for the topics discussed in weeks 4 through 7:
Foundations of Computer Graphics (Chapter 6, section 1 Link) discusses transformations
and representations in 2D. Later sections in this chapter venture into 3D, which will be
useful very soon!
Chapter 5 of Hart’s Big Fun Computer Graphics Book (Link) is also very useful for 2D
geometry and transforms.
Foundations of Computer Graphics Chapter 15 (Link) covers the representations of
parametric curves, and many other concepts as we discuss in class! Our lectures were
very closely aligned to the notation used in this chapter.
CS559 Programming Assignment #5
Synopsis:
You will write a program that visualizes a 3D scene, as viewed from a movable
camera, and use 2D Canvas drawing operations to construct a 2D projected view of it on
your screen.
Learning Objectives:
To familiarize yourselves with the 3D viewing transform pipeline,
especially the transforms that relate the camera coordinate system with the world
coordinates, and the projection transforms.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this post here). It is always ok to use code provided
in our in-class examples as a starting point, but you need to add your own effort to raise
those examples (or other sources) to what is asked by the programming assignment (i.e.
finding some code on some online forum that does all the job for you that is needed to satisfy
the assignment is not the intent, if you haven’t added any of your own effort to it). If you use
somebody else’s code (other than our GitHub examples), make sure to clarify in your
https://canvas.wisc.edu/courses/320922/assignments/1739611?module_item_id=5509244 2/3
submission notes what you did, and what you repurposed from the external source.
Hand-in:
Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-4 from Week 7).
If you submit
anything else than a single HTML file, please put everything in a single ZIP archive. Feel free
to use the copy of the glMatrix library included in our examples in the GitHub repository (or
use them as a starting point) if it’s convenient. It is not acceptable to submit a link to
JSbin for this assignment!
Description
In Weeks 7-8 we saw several examples of how to visualize a 3D scene using Canvas
drawing instructions (most of which are found in our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) under Week7/). The general idea was to construct
and apply the transforms of a 3D Viewing Pipeline to 3D dimensional points, in such a way
as to compute their corresponding canvas/viewport coordinates, that would allow us to
“draw” a three-dimensional line/shape/polygon, by essentially drawing the same type of
geometric shape but using the projected points onto 2D canvas (i.e. “viewport”) coordinates.
A particularly relevant demo is found under directory Week7/Demo4 our GitHub repository
(https://github.com/sifakis/CS559F22_Demos) (also in this [JSBin] (http://jsbin.com/ficoxeh)
link) where a moving camera is hovering over our 3D world, and creating a projection that
corresponds to its own vantage point, which is visualized in a separate window. The
convenient feature of this example is that it clearly demonstrates all transforms involved in
the 3D viewing pipeline (model, lookAt, projection, and viewport transforms). What you are
asked to do is to create a visualization similar to the “camera” view of this example (the
window on the right) where we visualize what the camera “sees” from its vantage point.
One possible way to achieve this objective would be to take one of the projects you crafted
for programming assignments #3 or #4, and “lift” it to 3D by having all the drawing (and
motion, if you had any) happen on a plane in the 3D world, and setting up a camera so it can
move around it and view it from different vantage points. Of course, it would be even more
exciting (and advisable) if you modified your code to be natively 3-dimensional: for example,
if you had some parametric curves, you could adjust their control points so that they are not
https://canvas.wisc.edu/courses/320922/assignments/1739611?module_item_id=5509244 3/3
all co-planar (so that the curve “escapes” the plane, sort of speak). Or, if you had a
hierarchical model included, you could script some of its transformations to be in true 3D, by
translating or rotating outside of just the same plane.
The following requirements must be
satisfied in order to get a satisfactory “3” grade:
Requirement #1. You must have a moveable camera. The motion can either be
automatic, or triggered by manipulation of a slider. It is ok for the motion of the camera to
be relatively simple (i.e. translation along a line, or motion along a curve).
Requirement #2. Your 3D world must include a hierarchical model, or a parametric curve
(or both!).
Requirement #3. Your example should make it apparent that you are observing a 3D
scene, as opposed to a 2D object. For example, if you drew everything in the 2D plane
(just replacing every coordinate (x,y) with a triple (x,y,0) to “make it 3D”), and just
translated the entire drawing up/down (to emulate “moving the camera”), this is really just
a 2D drawing exercise, not something that feels like 3D. Having the camera “spin around”
an object, having a 3D (non-planar) parametric curve, or having a 3D object are good
possibilities for showing off the 3D nature of your program.
Requirement #4. You need to use a projection transform. It can be either orthographic or
perspective. The aforementioned viewing demo has examples of both, implemented via
glMatrix.
As always, you are encouraged to try and exceed these requirements, and if you do well,
you can compete for a “4” above-and-beyond grade. Here are some ideas:
Create a complex hierarchical object that uses 3-D motion and transforms!
Have objects “fly along” complex 3D curves, in ways that control their position and
orientation in intricate ways. Think, for example, of an airplane that does a banked turn
along a spiral-shaped path …
Think about the possibility of having solid-drawn (filled) polygons “hide” each other, if they
happen to be in front of one another. For example, think of a cube made up of six square
faces; from any vantage point, we should only be able to see three of the six faces (the
other three are hidden behind the visible ones).
Here’s a thought to consider: you could
associate a “normal/perpendicular” vector with each face of such a polyhedron, and ask
yourself how this vector is transformed in Camera Coordinates. If the normal vector points
towards the camera, maybe this is a “visible” polygon. If it points away, maybe it should
be “hidden” (i.e. not drawn).
CS559 Programming Assignment #6
Synopsis:
You get to write some shaders! You will experiment with the shdr.bkcore.com
(http://shdr.bkcore.com/) interactive shader editor to create your own pair of vertex &
fragment shader, and test it with the provided 3D geometric models
Learning Objectives:
To familiarize yourselves with the GLSL shading language, the
respective roles of the vertex & fragment shaders, exchanging information between them
(via varying variables), and using the supplied attributes and uniforms. Also, experimenting
with shading models incorporating diffuse and specular reflection.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture.
You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a
rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be
awarded for people who have crafted something particularly cool. As a general rule, no more
than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4”
grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you
needs to include proper attribution (see this post
(https://canvas.wisc.edu/courses/320922/pages/collaboration-policy) here). It is always ok to
use code provided in our in-class examples as a starting point, but you need to add your own
effort to raise those examples (or other sources) to what is asked by the programming
assignment (i.e. finding some code on some online forum that does all the job for you that is
https://canvas.wisc.edu/courses/320922/assignments/1745802?submitted=1 2/3
needed to satisfy the assignment is not the intent, if you haven’t added any of your own effort
to it).
If you use somebody else’s code, make sure to clarify in your submission notes what
you did, and what you repurposed from the external source; for this particular assignment,
since you have been given some very intricate shaders as examples, it’s important to explain
what is the new thing that you added yourself, if your starting point was one of the shader
examples discussed in class.
Hand-in: Electronic turn-in on Canvas. The shdr.bkcore.com (http://shdr.bkcore.com/)
editor gives you a way to build a “link” that points to your implemented shaders: if you click
on the “Share” button, you will get a (long!) URL that captures your entire program, including
both the vertex shader and the fragment shader. Include this link BOTH in the text box of the
Canvas submission, AND in a README file that you upload. Also, as a fail-safe, we
recommend uploading the shaders as a text file. You can do that by clicking the “Download”
button on top of the interface; this will give you a text source of both shaders, that you can
save and upload to your submission.
Description
Your task is to write some shaders in GLSL; specifically a pairs of shaders – a fragment
shader and an associated vertex shader.
This used to require building an application, getting some geometry, attaching the shader to
it … but in the modern era, we can use the web! There are a few “shader sandbox” websites
out there. Both are cool websites where you can type in shader code and see it applied to a
model in real time. They let you try writing shaders with a minimum of fuss – just focus on
writing the shader! They even helps you by giving you sample fragments of code.
http://shdr.bkcore.com/ (http://shdr.bkcore.com/) is a simpler one that we have used
over the years in CS559, with reasonable success and a small number of hickups (that seem
to change from year to year, but typically not particularly problematic – this year it appears
that the only issue is that the URL “Shorten” utility in the “Share” button doesn’t work
anymore, since it depended on Google’s URL shortener that is no longer operational). But it
should be perfectly sufficient for your purposes.
The intent of this assignment is to make it relatively easy to get a “3”, i.e.
a satisfactory grade. In particular, to meet that standard your shaders need to meet the
following requirements:
https://canvas.wisc.edu/courses/320922/assignments/1745802?submitted=1 3/3
Requirement #1. At least some of the shading/lighting computations need to happen in
the fragment shader.
That’s to say, you should do something different than computing a
per-vertex color and simply interpolating the color itself across each triangle by assigning
it to a varying and directly using it in gl_FragColor as this shader
(http://goo.gl/ORVZrq) does (again, to avoid confusion, this is what you should not do;
perform some of the shading calculations in the fragment shader, like this example
(http://goo.gl/ooE6NL) instead).
Requirement #2. Implement a shading model that includes at least diffuse reflection or
specular reflection (ideally both, but at least one of them).
Requirement #3. Use the “time” uniform provided by shdr.bkcore.com to
have some element of your scene change dynamically over time. You have many options
how to do this … you can change the shape of the geometry being drawn, you can
change the location of the light source (see this example (http://goo.gl/2qVk59) ), you
can change the color of the object or the color of the light, you can change the fragments
being discarded, etc … this example (http://goo.gl/gMWgIO) does several of these
things at once!
As always, you are encouraged to try and exceed these requirements, and if you do well,
you can compete for a “4” above-and-beyond grade. Here are some ideas (you should try
multiple of these, to be more competitive for this grade!)
Use multiple lights, maybe with changing colors, or changing locations.
Make sure to incorporate both diffuse and specular reflection.
Make the color of the object (the underlying “intrinsic color” of the object, that is, not just
the apparent color due to lighting) vary across the spatial extent of the object. Here
(http://goo.gl/36jtDv) are (http://goo.gl/1tVj5D) some (http://tinyurl.com/y2y5sd8v)
examples.
Make the geometry of the model being shown “stretch” or otherwise deform. You can do it
by applying transforms to the vertex positions in the vertex shader. This example
(http://goo.gl/gMWgIO) takes this principle to the extreme!
Use the “discard” functionality to create interesting/artistic transparency.
CS559 Programming Assignment #7
Synopsis:
You get to use WebGL to create a 3-dimensional scene, with your own shaders, models, and associated data (vertex attributes, colors, normals, textures, etc).
Learning Objectives:
To familiarize yourselves with the complexities of using the WebGL API and the GLSL shading language to craft a 3-dimensional scene. This includes defining vertex attributes, dispatching them to the GPU and using them within shaders, using vertex colors, normals and texture coordinates (when applicable).
Also, using textures to create a more rich appearance, if desired (optional) Evaluation: Based on our 4-point grading scheme, as discussed in our introductory lecture. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial).
“Above and beyond” grades (i.e. a “4”) will be awarded for people who have crafted something particularly cool. As a general rule, no more than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4” grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you needs to include proper attribution (see this post (https://canvas.wisc.edu/courses/320922/pages/collaboration-policy) here). It is always ok to use code provided in our in-class examples as a starting point, but you need to add your own effort to raise those examples (or other sources) to what is asked by the programming assignment (i.e. finding some code on some online forum that does all the job for you that is https://canvas.wisc.edu/courses/320922/assignments/1754483?module_item_id=5563924 2/5 needed to satisfy the assignment is not the intent, if you haven’t added any of your own effort to it).
If you use somebody else’s code (other than our GitHub examples), make sure to clarify in your submission notes what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but even preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository (https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos in Week10/ Week11/). If you submit anything else than a single HTML file, please put everything in a single ZIP archive.
Feel free to use the copy of the glMatrix library included in our examples in the GitHub repository (or use them as a starting point) if it’s convenient. It is not acceptable to submit a link to JSbin for this assignment! Description our task will be to create a 3D scene, visualized using the WebGL drawing API (as opposed to the “Canvas” 2D drawing API we have used up to and including homework assignment #5).
We have seen several examples, in-class, about using this interface, which you can find in subdirectories Week10/ and Week11/ of our GitHub repository (https://github.com/sifakis/CS559F22_Demos) (check out this (https://jsbin.com/feqibunoyu/) and this (https://jsbin.com/zivofiw) URL for JSBin versions of some of these examples).
When authoring such three-dimensional visualizations, it will be your responsibility to do the following, among others (while online tools like shdr.bkcore.com would do many of these things for you) : Write your own vertex shader and fragment shader; a relatively clean and straightforward way to do this would be to include them in the body of
CS559 Programming assignment #8
You get to use WebGL to create a 3-dimensional scene using textures to enrich the visual
appearance of your objects.
Learning Objectives:
To familiarize yourselves with the complexities of using WebGL to manipulate
textures, load texture images onto the GPU, specify texture coordinates for your models, and adjust
shaders to leverage texture mapping functionality.
Evaluation:
Based on our 4-point grading scheme, as discussed in our introductory lecture. You get a check
(“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the
tutorial). “Above and beyond” grades (i.e. a “4”) will be awarded for people who have crafted something
particularly cool. As a general rule, no more than 1/3 of all assignments turned in (the very best ones, that
is) will be considered for a “4” grade.
Collaboration policy: This is an assignment to be done individually. Code not written by you needs to
include proper attribution (see this post(https://canvas.wisc.edu/courses/320922/pages/collaboration-policy)
here).
It is always ok to use code provided in our in-class examples as a starting point, but you need to add
your own effort to raise those examples (or other sources) to what is asked by the programming
assignment (i.e. finding some code on some online forum that does all the job for you that is needed to
satisfy the assignment is not the intent, if you haven’t added any of your own effort to it). If you use
somebody else’s code (other than our GitHub examples), make sure to clarify in your submission notes
what you did, and what you repurposed from the external source.
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your
program to run. It is acceptable to turn in a single HTML file with your program, but even
preferable to separate your code into an .html file and a separate .js file containing the
JavaScript code, similar to the examples in our GitHub repository
https://canvas.wisc.edu/courses/320922/assignments/1760459 2/3
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos in Week10/ Week11/).
If you
submit anything else than a single HTML file, please put everything in a single ZIP archive. Feel
free to use the copy of the glMatrix library included in our examples in the GitHub repository
(or use them as a starting point) if it’s convenient. It is not acceptable to submit a link to JSbin
for this assignment!
Description
Your task will be to create a 3D scene, visualized using the WebGL drawing API, very similar to what was
requested of you for Programming Assignment #7. As before it will be your own responsibility to write
your own vertex/fragment shader pair(s), compile/link them into a “program”, define vertex attributes, send
them (via buffer objects) to the GPU, and establish the necessary transforms (lookAt, projection, etc) as
“uniforms”that are dispatched to the GPU.
The difference between this assignment and the previous one (#7) is that this week you will be required to
use texture mapping somewhere in your scene. Specifically, you should satisfy the following requirements
(some of which overlap with those of assignment #7):
Your scene should include at least one “polyhedral” object with multiple shaded (as opposed to be
drawn as “wireframe”, only by their edges) polygonal facets. Those will be typically be comprised of
triangles. Your entire object cannot be all flat! (unless if you include several objects in your world, in
which case it’s ok for at least one of them to not be flat). We would like to be able to visually appreciate
that the Z-buffer visibility algorithm is actually working … “front facing” triangles/polygons, should hide
parts of the objects that are located behind them.
You should use at least one texture somewhere in your scene. It is perfectly fine to re-use some of the
textures that are included in the in-class examples (see the JSBin demos or the ones in the GitHub
repository from Week11). In our in-class lecture, we discussed (verbally, for those that were present)
the process for serving an image texture through Flickr
(these
(https://live.staticflickr.com/5564/30725680942_0c6e60a13f_o.jpg) are
(https://live.staticflickr.com/65535/50641871583_78566f4fbb_o.jpg) some
(https://live.staticflickr.com/5323/30998511026_c90053af9c_o.jpg) of
(https://live.staticflickr.com/5726/30206830053_87e9530b48_b.jpg)the
(https://live.staticflickr.com/65535/50642695166_9c28ba57e8_o.jpg) examples
(https://live.staticflickr.com/65535/50641908943_f6ebfef28d_o.jpg) from your instructor’s Flickr collection,
which area ready-to-use for you if you wish – those links are already of the right”type and size”- or you
can upload and use your own).
Expect to see a piazza posting soon with a verbal review of the process.
You should have a texture coordinate vertex attribute for your model (or whichever model in your
scene actually uses a texture), and correspondingly Sampler2D variables in your shaders.
Texture look-ups should occur in the fragment shader (as in our in-class examples), not in the vertex
shader.
https://canvas.wisc.edu/courses/320922/assignments/1760459 3/3
At least one such texture should “wrap around” multiple triangles/polygons in your object. For example,
having the cube model from our in-class examples where each square face of the cube has a complete
copy of the texture image would not be appropriate; instead consider if the texture image was
stretched/wrapped around 4 square faces surrounding the cube.
You should have a textured model (or at least one of your models) that’s substantially different from the
cube model shown in class. A “minimally acceptable” possibility could be for example a “house” model,
with a cube as its main part, and a square-based pyramid as its roof (it would be nice in such case to
have a texture wrapping around the 4 triangles that make up the roof!).
You are not required to use MipMapping, but it is recommended.
The simplest way that you can use this texture to create a visual appearance is to use the color resulting
from the texture look-up as the “diffuse color” of the object, as in our early examples [JSBin]
(https://jsbin.com/zivofiw) .
Note that, if you already used textures in your programming assignment #7, it
could very well be the case that your previous submission already satisfies the requirements of assignment
#8 as well! In this case (if you used textures that satisfy the above requirements) you can simply resubmit
the same, and obtain a “3”for this assignment as well!
But if you want to be more competitive and aim for a
higher grade, consider being more ambitious along the following lines:
Use multiple textures, and multiple objects with interesting shapes.
Use more “advanced”texture mapping effects. Decal textures and normal mapping would probably be
the easiest ones to attempt. More advanced effects that use render-to-texture would also be very
welcome, but please consider that those can be significantly more difficult (but success will be
rewarded).
