by Mike Gleicher on September 29, 2015
Here is a snippet of code from my P4 implementation. This takes an array of triangles and sorts them. Notice that for each triangle, I have already computed a “sum of the Z values” of its 3 vertices (this is the average, but not divided by 3).
this.triangles.sort(function (a, b) {
if (a.zsum > b.zsum) {
return -1;
} else {
return 1;
}
});
Notice that JavaScript arrays have a handy sort function. It takes an optional argument that lets me define a comparison function (this is a lot like C++ or Python’s sort function). You might want to look it up on the web.
And something that came up in office hours today…
If you compute the color for the triangle, when you draw it you need to specify the “fillstyle” – the easiest is to make a string like “rgb(255,100,100)” – but be careful. If you use floating point numbers, it doesn’t work. (I totally spaced on this, but when I look at my code, I see I did take care of this)
var color = "rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+")";
by Mike Gleicher on September 28, 2015
We’re realizing a lot of people are having trouble with the programs. And even if you didn’t have problems with Program 3, maybe you can help us help others.
While these programs are small, they do really require you to understand the concepts and to be able to translate the concepts into code.
We try to guess what will be hard for people, but sometimes we miss the mark.
Tomorrow (Tuesday 9/29) in class, we’re going to try a little experiment: we’re going to ask people how we can best help them, and use some of the class for that. We realize that people don’t like to ask questions in class. So, we’re going to ask people to write down questions (or answers) in class, collect them, and then use some class time to go through the questions.
If you want to think about things before hand…
- What would you like to hear more about to help you do Program 4?
- What gave you the most problems with Program 3? What do you wish we had explained better?
Note that even if you’ve done the programs, there are still answers to these questions – so we’re going to ask everyone to answer them. We’ll bring index cards to class, and sort them during the lecture, and then take some time at the end to answer the common questions.
by Mike Gleicher on September 28, 2015
by Mike Gleicher on September 28, 2015
We will hold extra office hours this week.
Prof. Sifakis: Tuesday, September 29th, 2:30 (until at least 3 – or until everyone gets helped)
Prof Gleicher: Tuesday, September 29th, 5:00 (until at least 5:30 – or until everyone gets helped)
by Mike Gleicher on September 25, 2015
This past week, we saw the basics of how to draw in 3D – the pipeline of steps that take our objects (triangles) to pixels on the screen. We focused on certain stages of the pipeline (Viewing, Projection, Visibility).
In the coming week, we’ll see how that pipeline gets implemented. Your programming assignment has you implement a simple pipeline, and in class we’ll learn about the hardware pipeline that does the drawing for us fast.
- For Monday’s Reading (Reading 4) – there isn’t as much as usual. This time, we’ll learn about the topic in lectures first and then fill in details with readings next week. There is a quiz: but it will contain stuff from the last few weeks.
- In Tuesday’s lecture, we’ll introduce the hardware graphics pipeline, and how it’s able to draw a lot. Very fast.
- In Thursday’s lecture, we’ll start to talk about OpenGL/WebGL and how we program the hardware so that you’re ready to start doing it the following week.
- For Thursday, 10/1, Program 4 is due. This one is trickier in terms of programming.
by Mike Gleicher on September 24, 2015
Is now posted. You can read about it here.
by Mike Gleicher on September 22, 2015
In the “Lecture Notes” section, I have uploaded not only my slides from class today, but also Prof. Sifakis’ notes from last year. There is also a link to my viewing demo.
by Mike Gleicher on September 21, 2015
Now that we have some experience using Canvas, we are realizing that we need to change the way we hand-in programs. There are some issues with how Canvas handles files. Please follow these instructions for ALL program handins (starting with P3).
When you turn in a program, please turn in ONE file. This file should be a “.zip” file (an archive that contains all the files of your assignment).
Please name your zip file: lastname_firstname_PX.zip (where X is the program number). So for me it would be: gleicher_michael_P3.zip. The naming is important since Canvas often tries to put all files in one directory.
In the zip file, there should be one file named index.html. It should be at the top level of the directory structure. This should be the “main program” that we should load into a web browser to run your program. If you have a README file, it should be in this same directory as the index.html file.
The index.html file can refer to other files – but make sure if uses relative links (not hard coded links to places on your computer).
You can have hard coded links to servers to fetch libraries (for example, rather than including twgl in your assignment, you can link to the copy on graphics.cs.wisc.edu).
Please check – before you turn in the assignment – that your program works. (unzip the file, click on index.html). If your program shouldn’t run (you’re knowingly turning in a non-working program) please note that in the comment box when you turn in your program. The best check is to open the zip file on another computer (like a CS lab computer) and try it there. However, if you’re careful with checking, this shouldn’t be absolutely necessary.
In the event that you re-submit your program after the due date (for example, if you get a request from the grader to fix something), please attach “_v2” (or _v3 for the third version) to the file name… So if I had to re-submit my P3 it would be gleicher_michael_P3_v2.zip. This is important so we don’t over-write the original (which we need for the date stamp).
by Mike Gleicher on September 18, 2015
I just did a sample solution for Programming Assignment 3. (I had tried it before, but used code from another project).
The idea was to see what it was like to make the program from scratch, like you would have to. Using just twgl.m4. As simple as possible, and as fast as possible. (for me it should be pretty fast, since I’ve done it before)
You can see this simple sample solution (the code is obfuscated – so don’t try to look at it – write your own). It’s less than 100 lines of code – including a decent amount of comments. It just draws a checkerboard and has the simplest possible UI. It does the project/orthographic switch (I didn’t know how to make a button easily, so I used a slider – set it to zero for orthographic).
Some thoughts from doing it myself:
- Javascript allowing me to call functions with the wrong arguments is a hassle! Remember that m4 always wants you to pass a matrix and a point to transform. And that lookat takes 3 points. I kept getting the parameters to functions wrong. And then you get a weird error from m4 (if you’re lucky) – or a bogus value.
- The checkerboard was the simplest object I could make. Well, I actually started by making a dot at the origin – because I knew that if I pointed the camera at it, it should show up on the center of the screen.
- m4.lookat doesn’t do what I thought it did. Read the documentation.
- Ugly sliders are easy. And they work for the assignment. If you want to get things done fast, they are OK.
- I made the sliders in a loop – using document.writeln (which is a bad thing). But you can do exactly what was in the sliders tutorial instead.
- I had written the gl matrix tutorial which reminded me about the multiplication order. You might want to review it so you don’t make the same mistake I did.
- I didn’t know how to make a checkbox. So I used a slider with values 0/1. Later, I took the time to learn how to do a checkbox (similar, but different enough – you need a different event name). The point is: do something that you can get to work (for me, a slider) – then make it better afterwards. (I haven’t uploaded the new version with a checkbox yet).
Have fun doing it yourself! Do something cooler than mine! (well, mine gets some of the project points)
by Mike Gleicher on September 17, 2015
This past week, we learned about transformations and hierarchical modeling. And you got to try out programming it in JavaScript.
This coming week, we’ll start drawing in 3D. You probably saw a simple taste of it in the example, but you’ll see much more.
For Reading 3 (due Monday, September 21), you’ll read about the basic pieces: projection, viewing, visibility. The optional reading will give you another view. In class, we’ll put these pieces together into a pipeline. Note: the quiz will be ready soon.
For Program 3 (due Thursday, September 24), you’ll try implementing the pipeline and do some drawing in 3D yourself. You’ve seen a simple example, and we’ll let you use a matrix library that will create the various transforms for you. So you’ll be ready to do some 3D graphics. Be sure to read the tutorial on the twgl.m4 matrix library and look at the various examples.
The following week, we’ll extend program 3 to draw solid objects. (so you might want to look ahead when writing program 3 to see how to write it in a way that will make program 4 easier). We’ll also start to learn about how the graphics hardware makes drawing fast.