Mtg 5/25: Mon-18-Sep-2023

Outline for Today

Wiki

Link to the UR Courses wiki page for this meeting

Media

Transcript

Audio Transcript

Okay
you connect the computer to the display display
made it through okay
so anyone has anyone been able to use the online text or an earlier version of se seven that's in print?
The only one yes.
Okay I haven't gone through it but I have access to it
okay
so this website is the one that has the causal support for this book so we'll talk about the first assignment on Wednesday, and we'll be due two weeks plus two days after that on the Friday
for now it's not mine
Okay, and then here I've indicated the dates for exams
and if you click on those, they go to the URL courses assignments which won't require you to submit anything we just there so it shows up on the calendar
so any questions or concerns about finding things on the website and your courses
so I've been trying to make my code directory seem a bit more friendly
so this is on a patchy set up to do list the files there
it's a bit and I'm not sure I've been doing it the most efficient way but so this gives you the breadcrumbs at the top. So this this file gets printed out and then it shows the directories there
so let's see examples of three Jas.
So I have in my three Jas directory, the node packages, the node modules installed so then you can see the node modules the package dot lock and package dot JSON files so that just gives you an indication of the files that you might have in your own directory.
I can update this file this should be the index dot HTML here we're not gonna look at this code today but I
so because we're running if you if you're doing it with NPM running these programs with light so it set up it was set up
to show the HTML files and not render them, so you can just click on the HTML files and see them so note that I'll fix that after class today.
Morning
so I copied some code from
the indirect interactive computer graphics.com website. So these are common files here. So m V, M versions of it. So that's a library for matrix and vector
operations.
Let me just show.
Not I haven't gone through to define what the difference between them V J. S and M V new GS is. Flattened Jas, just I think is the function to turn a JavaScript array into a floating point, like triple JavaScript array which has a lot of extra information into it in into a form where it just has a floating point numbers in it. And these are about loading shaders. And I don't remember utility is at this point. But anyway, those are the common.
So we don't want to have we don't need to have too much direct exposure to the stuff in there. It's just files that will help that we need to have the code run.
So h e o two, that's eighth edition chapter two.
So we'll hold off on that for a minute.
Okay, so we're gonna look at graphics start on graphics programming today. If you haven't done it already, take a minute to record your attendance. And these are just for your information. These are all your courses links.
So we had so
I had 11 responses. So I'm just highlighting some of those. Here's a common vote raster versus vector. So what's the essential difference
between those two kinds of displays.
Going row by row Now.
knew the same primitive
looks less like a flower and more. Well, who knows.
So what,
what are some advantages or disadvantages you can see. which is
a repeat of bottom vector because it's arbitrary so you're overlapping
Yeah, so maybe this is inefficient.
Vector is
a lot more detail than raster lines
just smoother
the exact opposite for less difficult it's more efficient than dropping
okay
W foster to
generate.
Well, that was
the thing. So if we have a raster image and we have the bitmap, we have the pixels computed already and it's just transferring them to display
that that's fairly quick. Whereas, we have to generate the pixels with a vector format because we don't have purely vector displays anymore, really. Maybe you could say a plotter is a vector device, it's more pure vector display but when we're talking about monitors, they're all bitmapped. So there's a step of scan converting the perimeters at the appropriate resolution
so that's why it might be a couple more there
okay, graphics pipeline. So we start with vertices. Do some transformations and end with fragments. So
we'll talk about
that in much more detail. So graphics and visualization are important in daily life. There's lots of things that we see in visual form. So having some having the literacy to understand those forms is important. And it lets us see Marvel superheroes in action and on the big screen so there's a combo graphic design. I'd say that that's not necessarily what we're doing here. But computer graphics, and animation are tools for graphic design. So that might be an area of interest for you, that you might pursue and this class can help you understand.
Our computer can be an effective tool for graphic design. And lastly, I bought a synthetic camera so I think that's a very powerful model.
So
I know I've drawn the camera bigger than the person here so forgive me for that please. But that is our take taking a picture of a scene and light passes through the pinhole and we see the the image appear upside down
on the film
what we're doing with our synthetic camera.
I'm not sure how the picture is in the book
so the idea is we're putting the image plane at the front our before the focal point so we're not reversing it. We're just we're projecting onto the film here
this is a pyramid
if we're doing a perspective projection, and if we're doing a plan projection, or orthographic then it'll be
a parallel pipe it
that's too general it would be.
So it makes sense
anyway, I won't apologize again for my drawings
so I just
wanted to point out this is a benefit of having UTF eight as the format for webpages because you get an accent on the end for the Polish mathematician walk la Pinsky. So UTF eight gives us all the Unicode characters and we can do so it's variable length encoding was so if we have the standard North American English characters, otherwise known as ASCII. Put in UTF eight
the first seven bits the character encoding match ASCII. So ASCII is seven bits. So for doing North American English words, it doesn't have accents we can get away with seven bits. And then we can store text in a format of we're using one byte per character, so it's very efficient. When you want to do characters like this, then we have to go out side of one byte. But the UTF eight encoding lets us do that easily. So are you able to see on my Mac if I hold down the key and it gives me alternatives with the accents
anyway
so there's a shape called a sir Pinsky gasket. So anyone heard of that? before?
So this is
just gotten a lot of interesting stuff for the show Pinsky triangle web Wikipedia page
so I had the privilege of spending some time working for Benoit Mandelbrot at IBM and long time ago
so there's this webpage says
that he called it a gasket because you reminded him of a gasket used in car motors I seem to remember him caught saying that there was a joke because the serpins he gasket doesn't look like it could see anything.
So what does it look like?
So we can start
with a triangle and then divided into four triangles I'm gonna leave the middle one out
we keep doing this
do one more.
LZ the highest resolution of this trip my best piece of chalk and you
you get the idea. Here. Shape is
I think I did
so again, the caveat here is all the all the little triangles and the little triangles are supposed to be the same size
so we
can generate them recursively or there's another approach called the chaos game.
So we start with a point, let's say
here, and then we pick a few vertex at random and move the point half the distance to that selected vertex.
So if we pick this point,
pick this vertex pardon me. Then we move the point that half the distance and I'd say we've picked it again and then we're moving in about half well
and then let's say we pick this one I move it halfway.
So
is a fellow Michael Barnsley who developed the chaos game? He said it's a bit like once you get the ball thrown into the soccer pitch or the football pitch and then the skilled players take over and passing these passing the ball around. And so if we watch this over time, we'll see that this shape becomes filled in.
So in the text,
they say pick an initial point a random inside the triangle. So I'm I say or better yet one of the vertices I didn't do that in the example here.
Why do I Why do I suggest or?
Why do I suggest a vertex or why was the point I picked? A good choice as the same characteristics
so I picked this point. That was my that's what I attempted to do. So that point is under shape. already. If I pick a point at random, I could pick a point here. And then it will take a few iterations to get close to the shape so it'd be a few points that aren't part of the shape. So that's so in this case, we know that all the fixed points of the vertices
are if we think of a transformation centered at each vertex, each vertex is a fixed point. So if you apply the transformation to the vertex, you get the same point.
So we're not generating any points outside of the shape or after, so it makes sense. Anyway, so they're gonna pick once we have a starting point, we're gonna pick one of the vertices at random. Find the point Q, halfway between P and the selected vertex display Q by putting some sort of markers such as a small circle at the corresponding location on the display. replace P with Q and return to step two. So we're we're doing a loop here.
Sure that I had it
pointing to this page
so here's
I can't see that develop over time. But here's the idea. So this is randomly generated using a chaos game. So we're taking a point and pass it, moving it around. So we're doing this randomly, then we're going to get a fairly complete coverage. Of the shape.
We will look at the code in a minute.
So what are some ways we can
generate this? So we can talk about immediate mode. So we can have this loop and then each time we generate a point we draw it onto the screen.
So we're not storing any points. So
what are some advantages or disadvantages? That you can see from that approach?
So if we wanted to redraw the shape we don't have any geometry leftover so we have to regenerate it
and the advantage is that we're not having to allocate it. We're just generating a one time we don't have to store the points we can just put them on display.
So we can
rearrange our graphic so that's one way to do graphics program. We can use retain mode graphics. So we're going to generate the points and store them and then draw them at once so we've got a list of points
so we
so we're generating the list of points. We're storing them and then we have routine to make use of that stored.
Stored plays.
If we want to do an animation of the triangle then we still might be creating a bottleneck because we're having to to move the points from the CPU handled by the CPU to the GPU. And then our third approach is that we can generate points store them, send them to the GPU and then draw the points using the GPU. So
we can take out the need to transfer the points within the system repeatedly. We move it to the GPU and the GPU can
handle the transformations and operations we need to do to create the animation
so.
Let's first look at our
our source.
So
we're doing application we have an HTML file. That's gonna be rendered by the browser. And then we have the code the JavaScript code that's going to handle the dry
Okay, so here's
excuse me, here's our HTML file.
So the first line says it's text HTML and the character set is UTF eight. So that lets us do the
those
character for example the second one is viewport. Content width device. width equals device width, initial scale equals one.
So this helps us when we're
looking at it on a phone it doesn't appear like it should be on doesn't appear tiny. Like like we're looking at a desktop website on our phone
so here I'm
gonna suggest that we use Bootstrap for HTML.
I'll give you the links to this.
So we don't have to deal with programming and Bootstrap is just using the using the features of it so we can use a CDN like J Jarius. Deliver dotnet.
So that gives us the bootstrap and this first one is a style sheet.
So then, in our HTML file,
we define two things. We have a vertex shader and a fragment shader.
So these are scripts as far as HTML is concerned. So these indicate the version or ship precision is medium for the float, and we
have an F
factor of f color.
So F color is fragment color.
So what color is this?
Is it just
read that yes, it's read?
To know what else he stands for
transparencies zero
so we're giving,
giving each fragment the color red and then the vertex shader
we get the position we set the point size to one
and position
to the input position
so these are
variables available in WebGL.
So we're assigning the point size of 1.0. And we're using a position so we'll see how that comes up later.
When you look at the JavaScript file, chapter, gasket one.js. So we're looking at we need to bring in the image shaders file from the common area and MVC view as well. And then of course, guys got one dot j s. So let's do defines the heading area and then in the body we do a heading one for the gasket. The name of our
web page. I love her web page. And here we're defining a card body back was dark background. And we have a HTML canvas with an ID
so that we can refer to it using the
DOM document object model. Let me give it a height width and the height and Jared snare will print this message and at the bottom of the page we have the script
for we end the body. This is our script for Bootstrap. So we put it at the end to speed things up. A little bit. Okay, so that's your HTML
All right. So when you use
Bootstrap four or something similar
that's what I use on my website.
So what kind of editor do you use?
VS code.
I used to use atom until I used to use that it was Yeah. And then they stopped supporting atom so I wasn't happy with the first time I tried it but now I'm having a better better experience with it
for someone who likes atom notepad plus plus also works
okay
yeah
the shortcut key maps off the atom it's available in the VS code. So you can install the extension using the VS code.
Yeah, I'm not I'm not very good with
shortcuts I guess.
I'm just trying to get by Well, that's not true. I mean, I'm not just
I guess I'm not that connected to Adam that I would think I got it I have to bring them features or madam or to VS code. But anyway, I was using ES lint in atom and so I got that installed for VS code.
And so if you see, if you look at this code
it's different than the one on the website because I've run this through es lint with Google best practices as a style guide.
So I think that's
a good thing to do. Is anyone using ES lint
Okay, that's good to hear.
Okay, so what do we have to do here? So we're saying use strict
so we have some variables like the domain for positions and the number of positions we're doing is 50,000.
So that seems to
be used to be the 50,000 points didn't go so quick. But
it's that's
this is nothing for modern we can even add listener What
if we added a zero, so it's 500,000 points.
The.
Time doesn't change very much. Nor does the quality of the picture actually.
Okay, so
when we're loading, we're doing this init function when we're loading the window. So we're getting a canvas so this is using the DOM
to get the element that we call GL canvas.
Sir getting a
WebGL to context for the canvas.
So if we don't
get if we don't get the return. GL then we haven't been able to get the web to GL to find out. One of the samples for Chapter Two says tries to get a G Web GL 1.0. And I'm not sure whether that's a mistake or
what the case is. So here we're
getting the vertices of the triangle. So we go minus one minus 1011. Minus one
so he said minus one minus one.
So here's 00.
And then our second point is zero and one.
And our third one is a one one. It's a one minus one. Right? Because one one would be over here. So this isn't quite an equal lateral triangle, but it's. So we have the chord, our world coordinates, we can think of as regenerating between minus one to 1x and minus one to one and y. So I've got a square.
So then we're, we have to map those coordinates minus one to one minus one to one into our viewport which is
512 by 512. That we set up
in ah, the HTML with our width, width and height okay.
So specify a starting point position
so this is a little more complicated and I would do it
anyway, so we just
naturally be inclined to say p equals vertex vertices zero or one as a starting point so, then we're going to add our initial position to arbitrary points. So we start by pushing.
So, this is our JavaScript array.
We push p into the array and it compute the new positions. So, arrays take i equals zero
positions dot
length so that's the current length of the array as we're pushing points into it. Is less than than the number of positions so this is the size that we're allocating for the array and then we're incrementing i.
So for each iteration
picking.
Summer
we're picking Sanjay is giving us an sorry Sanjay is going to be an index into the vertex array.
So it's going to be 01 or two. And then we're going to
take position i and add vertex j and then multiply by one half. And we're gonna add
the new point into our positions array. So that's going to generate a list of 50,000 points.
So here's what your parents were saying or WebGL.
She held up viewport was from 00 to 512 and 512.
And we're clearing the color and what is this color?
It's white. Yeah. Sorry, RG and V. full intensity is
as white so then we're going to add the shares through using the net shaders routine from
that other file, and we're loading the vertex shader and the fragment shader
and then so this is defined the program and then we're seeing use program with our
GL context and our WebGL context. So now we're going to load the data into the GPU. So you create a buffer
we're going to bind the buffer and the buffer data
needs to go from this JavaScript array positions into just the float the IEEE three floating point
array. So that's where the flattened function comes in.
So now we're associating our shader variables will
be in a buffer. Fortunately, yes, Linden doesn't catch spelling mistakes. I didn't either.
Associate added shader
variables with our buffer data with our data buffer.
So now we're going to get the attribute of a position.
So we're getting so this is a variable we're using to get together. So we're getting an attribute location from the context and so we're storing it in position lock and then we're pointing to add
and then we're enabling that attribute for the array so then we do a renderer and the render so we're doing a clear
draw the arrays from the data buffer as points should go from zero to 50,000.
So let me go back
okay
so I just want to point out the connection here, so a position
in our vertex shader.
Paid position here so we're making that link. So again the positions of the points from the data buffer
and so,
when we draw the rainbow are getting the color assigned to the fragments and we get to read Sierpinski gasket
so anyway, the other thing I wanted to mention about Bootstrap
is so we have this
card it's defined. It fills the whole web page. So that's why we have the background dark
area beside
the canvas that gets drawn here.
To be okay
let me see if I can do this quickly
here.
So this will look a little different because it's not running Apache. It's just
jackhole the web brick server
quickly show right
I know
I'm late here. Now.
So there it is with 500,000 points.
Anyway, I'm out of time today. So thank you very much for today. And if you will continue with chapter two on Wednesday. We'll talk about the first assignment that's wrong. Thanks again. Take care have a good day everyone. Thank you
Anyway, I'm out of time today. So thank you very much for today. And if you will continue with chapter two on Wednesday. We'll talk about the first assignment that's wrong. Thanks again. Take care have a good day everyone. Thank you

Responses

What important concept or perspective did you encounter today?

Sierpinski Gakest (Triangle) was the interesting thing I learned today, though the algorithm seemed a bit tricky but I’ll try out the code. Also was wondering the triangle is 2d what will happen if it’s made 3d.
is you can create Sierpiński Gasket by repeatedly picking random points in a triangle, finding their middle point, and marking it.
I learned the steps involved in Sierpiński Gasket: 1. Pick an initial point at random inside the triangle [or better yet, one of the vertices (Why?)]. 2. Select one of the three vertices at random. 3. Find the point q halfway between p and the selected vertex. 4. Display q by putting some sort of marker, such as a small circle, at the corresponding location on the display. 5. Replace p with q. 6. Return to step 2.
the most important thing I learned in today's class is Sierpinski triangle, as it was nee information for me I found it quite interesting what I learned in that topic is : how to structure it in a easy way and that is Start with an equilateral triangle. Subdivide it into four smaller congruent equilateral triangles and remove the central triangle. Repeat step 2 with each of the remaining smaller triangles infinitely.

Was there anything today that was difficult to understand?

As far as the topics for our every lecture is concerned ,I get that well. But some times at the end of the class I'm still confused was the end goal of today's class or this whole courses.So it would be better to put that one bullet point to add that at the end of this lecture what will be able to know or learn
Sierpiński triangle: difference between the Recursive Method & Chaos Game Method of forming it.

Was there anything today about which you would like to know more?

I came to know about synthetic camera,difference between raster and vector. Would love to deep dive more into these topics soon.
The Sierpinski Gasket, a captivating fractal, can be created using two methods: recursion and the chaos game. A remarkable feature of the Sierpinski Gasket is its self-similarity, where zooming in on any part reveals a pattern resembling the whole, a property seen in both mathematical constructs and natural phenomena, making it a captivating concept in the world of fractals.
I would like to know more in detail about Sierpiński Gasket
Sierpinski Gasket is a new thing for me. I would like to know more and will try to look for example of how complex structures can emerge from simple recursive rules.

Site built: 2025-05-06 13:52 -0600 • Give feedback about page