Explore
For Enterprise
Join for Free
Log In

Arts and Humanities
Business
Computer Science
Data Science
Information Technology
Health
Math and Logic
Personal Development
Physical Science and Engineering
Social Sciences
Language Learning
Degrees
Certificates

Explore all of Coursera

Browse
Search
For Enterprise
Log In
Join for Free

Unit 6.6: Graphics

Loading...

Build a Modern Computer from First Principles: Nand to Tetris Part II (project-centered course)

Hebrew University of Jerusalem

5 (228 ratings) | 17K Students Enrolled

In this project-centered course you will build a modern software hierarchy, designed to enable the translation and execution of object-based, high-level languages on a bare-bone computer hardware platform. In particular, you will implement a virtual machine and a compiler for a simple, Java-like programming language, and you will develop a basic operating system that closes gaps between the high-level language and the underlying hardware platform. In the process, you will gain a deep, hands-on understanding of numerous topics in applied computer science, e.g. stack processing, parsing, code generation, and classical algorithms and data structures for memory management, vector graphics, input-output handling, and various other topics that lie at the very core of every modern computer system. This is a self-contained course: all the knowledge necessary to succeed in the course and build the various systems will be given as part of the learning experience. The only prerequisite is knowledge of programming at the level acquired in introduction to computer science courses. All the software tools and materials that are necessary to complete the course will be supplied freely after you enrol in the course. This course is accompanied by the textbook "The Elements of Computing Systems" (Nisan and Schocken, MIT Press). While not required for taking the course, the book provides a convenient coverage of all the course topics. The book is available in either hardcopy or ebook form, and MIT Press is offering a 30% discount off the cover price by using the discount code MNTT30 at https://mitpress.mit.edu/books/elements-computing-systems. The course consists of six modules, each comprising a series of video lectures, and a project. You will need about 2-3 hours to watch each module's lectures, and about 15 hours to complete each one of the six projects. The course can be completed in six weeks, but you are welcome to take it at your own pace. You can watch a TED talk about this course by Googling "nand2tetris TED talk". *About Project-Centered Courses: Project-centered courses are designed to help you complete a personally meaningful real-world project, with your instructor and a community of learners with similar goals providing guidance and suggestions along the way. By actively applying new concepts as you learn, you’ll master the course content more efficiently; you’ll also get a head start on using the skills you gain to make positive changes in your life and career. When you complete the course, you’ll have a finished project that you’ll be proud to use and share.

Skills You'll Learn

Computer Architecture, Compiler Construction, Compiler, Operating System

Reviews

5 (228 ratings)

5 stars
218 ratings
4 stars
10 ratings

RR

Jul 16, 2017

This is an excellent course giving good view of operating system, compiler and fitting the pieces together. Highly recommended

AD

Sep 02, 2018

One of the best computer science courses I ever had. You start understand how actually things like heap, stack, etc. works.

From the lesson

Operating System

Unit 6.1: Operating System15:23

Unit 6.2: Efficiency Matters17:39

Unit 6.3: Mathematical Operations21:27

Unit 6.4: Memory Access12:32

Unit 6.5: Heap Management30:47

Unit 6.6: Graphics15:01

Unit 6.7: Line Drawing25:17

Unit 6.8: Handling Textual Output18:46

Unit 6.9: Input16:58

Unit 6.10: String Processing17:34

Unit 6.11: Array Processing6:09

Unit 6.12: The Sys Class12:48

Unit 6.13: Project 12: Building the OS11:52

Unit 6.14: Perspective7:32

Taught By

Shimon Schocken
Professor

Transcript

So welcome to Unit 6.6, in which we are going to talk about graphics.

And in particular, we are implementing the Jack operating system.

And the class that is relevant to this module is the Screen class,

which we are going to use to handle all the graphical operations of our programs.

And in particular, we'll talk about this library, that features several

basic operations for a drawing figures and pixels on the screen.

And what we'll do in this unit and in the next one,

is we'll explore some of the more interesting functions in this library.

Now before we do this, I would like to say some

general words of introduction about the notion of Graphics.

And let us begin with this, with these two figures here that look identical, right?

What we have here is Donald Duck trying to understand how

computers work in a more direct way then what we do in this course.

So the first thing that we'll do is we'll remove the computers so

they don't get harmed.

And then let us begin to zoom in on Donald Duck.

And you will notice that as I zoom in more and

more, a glaring difference between these two images reveals itself.

And the difference is that the image on the right does not scale nicely,

whereas the image on the left scales up perfectly.

And the reason for these differences in these graphical effects is due to the fact

That the two images are stored using two different techniques.

The image on the left is managed using what is known as vector graphics,

and the image on the right is an example of bitmap.

And what I'd like to do in the next few minutes is discuss

the virtues of every one of these techniques.

And in particular, I want to focus on vector graphics.

So here's an example of some portion of the screen, and

let's say that I want to draw this cup on the screen.

Well, I will draw it somewhere, it doesn't matter exactly where.

And I draw it by simply turning on and

off pixels, which is what we can do in Jack, right?

In Jack, I'm sorry on the Hack computer, we don't have colors,

we have only black and white.

Although we can easily add colors, but perhaps not in this course.

And so this is the way the cup is going to be drawn on the screen,

and here is the bitmap file which is going to store this image.

So what I do here is something which is very straightforward, for

every pixel which is white I store 0, for every pixel which is black I store 1.

And I get a bunch of numbers that, taken together,

give me a one-to-one correspondence between the figure and the binary digits.

So that's bitmap.

If I have an image that consists of a million bits, I'm going to have

several hundred of thousands of such tuples in this file.

Now here is the very same image stored in vector graphics.

Now as you see, instead of actually recording the information in this figure,

what I record is set of instructions that specify how to draw the figure.

So the first instruction is, draw a line from 3,0 to 11,0,

and this will give me the top row of the cup.

Then I take advantage of the fact that I have a large rectangle, so

I draw a rectangle from 3,1 to 9,5.

And so in one shot I describe how to draw,

I think 35 pixels, and then I keep on drawing a few more

lines in order to complete the specification of this cup.

So what are the advantages of vector graphics?

Well, if you try to scale up these two cups like we did before,

you will notice that the big map doesn't scale up properly.

All we have is these bits of information, and therefore, we can try to

use all sorts of opportunistic algorithms that compute pixel averages, and so on.

But the result will not be satisfying at all to the human eye,

whereas in vector graphics we get perfect scaling.

Why?

Because we have a set of instructions.

And if you want to draw the cup on a different resolution, or

on a different screen size, all you have to do is manipulate these numbers

using some simple proportional constants.

And boom,

I'm going to get the perfect figure drawn in any resolution that I desire.

So, in a nutshell, the vector graphics technique has several

very important advantages.

First of all it contains relatively little information,

because I don't have to record the pixels.

I have to record instructions on how to create huge expanses

of pixels, and so it doesn't take a lot of space on the disk.

And for the same reason I can easily transmit vector graphics images

over the internet, because the files are relatively small.

And when I get to render this figure on some screen,

I can easily scale it up or down.

And this is extremely important in a world that is characterized by

many different screen sizes.

I mean think about cell phones, think about cameras,

think about laptops, tablets.

It doesn't matter what the target screen is,

I can always scale it up efficiently and effectively.

And finally, if you like bitmap, well I can always turn it into bitmap.

So all together, vector graphics is a very important invention,

and that's what we're going to use in our operating system as well.

And in particular, the three primitive operations that we're going to explore is,

how to draw a single pixel, how to draw a line, and how to draw a circle.

And we'll begin with drawing a pixel.

Now I must say that there's something which is slightly inaccurate here,

draw pixel is something which is, Which is needed, both in,

vector graphics and in bit map, right, in bitmap, you also have to draw pixels.

So this is perhaps the most fundamental and primitive operation,

and I should've put it in a class of itself.

Because, drawpixel is absolutely primitive and

basic, and on top of it, we can create either bitmap or

vector graphics figures.

All right, so let's begin with drawing pixels, how do we do it?

So I wish to remind you that, when we built the Hack computer,

we decided to allocate a certain segment of memory for representing the screen.

And basically we took a chunk of 8k registers

and we call them the screen memory map.

And the contract is such that, if we want to draw some pixels on the screen,

we turn on and off various, carefully selected bits in the Memory map.

And then the image will be drawn automatically,

quote unquote, on the screen.

Now how does this work?

Well, it works because there is a contract, yet another contract,

which is realized by the hardware, which is called refresh, or screen refresh.

And the contract is such that, several times each second,

there's an automatic and routine refresh.

In which the computer is going to take all the bits that it finds in the memory map,

and commit them to pixels, which it is going to draw on and

off on the physical screen.

So that if you want to draw this figure here, once again,

we actually draw it in memory, and

then everything else is taken care of automatically by the refresh routine.

So for example, suppose I want to draw this particular pixel,

the pixel which is characterized by 450 and 200.

How do I draw it?

Well, if I write in Jack, I will probably use something

like this command here, drawPixel(450,200).

And of course, someone has to take care of this operation, and

this someone is the operating system.

So the operating system, in particular the OS screen class,

is going to have an implementation of the drawPixel routine.

And when drawPixel will be asked to draw this particular pixel,

here is what it will do.

It will figure out somehow that the word that we

have to manipulate is word number 22812.

And it will also figure out that within this word,

we have to turn on the third pixel, or the third bit, from the write.

Now, how will it make these calculations?

Well, if you will stop the tape and think about it on your own for five,

ten minutes, you will be able to easily come up with the mapping.

Because, see on the right-hand side on the screen, we have a representation which

is 512 pixels wide and 256 pixels deep.

And the left we have a RAM which is so many words long of 16-bit words.

So the mapping between the two-dimensional space that we have here,

and the one-dimensional space that we have there, it's quite straightforward.

And if you work out the math, you will discover that here's what you have to do.

The address in the RAM of the word that we have to manipulate

can be found using this multiplication and addition.

And then what we do is, we go to the RAM, and

we retrieve the value, which is currently located in this address,

plus the base address of the memory map.

So, now we have this value in our hand, right?

The next thing that we do is we set x modular 16

bit of this value to the current color,

which is either one or zero or whatever it is that we wanted to draw.

And after we make this manipulation, we take this value, and

we store it back where it belongs in the RAM.

Now you may ask yourself, why did they bother to first read, and then write?

Why didn't they just go in and manipulated this bit directly?

Well there are two reasons why I did it, first of all you simply cannot

manipulate bits directly, you must operate in chunks of 16 bits.

Or if the computer is 64 bits wide,

you have to operate in chunks of 64 bits, that's how computers work.

So you have to manipulate a whole byte,

or a whole word, in order to end up manipulating a single bit.

And the reason we had to read it first,

is also due to the fact that we may have some other

things drawn already in the vicinity of this bit.

I mean look at the picture here, We have this little man standing there.

And if we just go on and manipulate the bit using the 16 bit operation,

we might mess up images which are in the vicinity of this bit.

So by reading this bit, I'm sorry, by reading these 16 bits first, and

then manipulating only the bit that we have to focus on,

without touching the rest of the bits, we are writing this bit safely.

And so we retrieve these 16 bits, and then we'll probably use some 16 bit OR

operation to add up what we have here with a single bit that you want to manipulate.

And then we write it back to the RAM, and

the result will be turning on this specific pixel on the screen.

So that's how the magic of pixel drawing works,

probably slightly more complicated than you thought.

Now, notice that the drawPixel subroutine,

which belong to the screen class, makes use of the peek and

poke subroutines which belong to the memory class.

And the memory class of course is something that we've already implemented

in previous units.

And this is quite routine in operating system modules,

this interdependency of one module using another, and

that's an example of this interdependency.

So we talked about drawPixel, and in the next unit,

we'll teach you how to draw a line.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play

Coursera
About
Leadership
Careers
Catalog
Certificates
MasterTrack™ Certificates
Degrees
For Enterprise
For Government

Community
Learners
Partners
Developers
Beta Testers
Translators

Connect
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

More
Terms
Privacy
Help
Accessibility
Press
Contact
Directory
Affiliates