Computer Graphics Exam 1

Chapter 1 - Chapter 4

a)

Which tag does JavaScript go inside when you wish to write it in line with ?

a)

a) Class

Assuming my code does not have any syntax errors in it, what scope is a variable labeled 'this.myVar'?

a) Class

b) Local

c) Global

d) Limited within the

a) extends

What notation does JavaScript use to inherit from one class to another?

a) extends

b) inherits

c) implements

d) :

a) call ‘super()’;

If I have a class (in JavaScript) that inherits from another one, in order to call the constructor in the parent I must:

a) call ‘super()’;

b) not do anything as it will do it automatically

c) call ‘Parent()’

d) must initialize an instance of parent ans assign it to ‘this’

true

(T/F) If I dynamically add an HTML element to page, I do not have to initialize everything at first as I can change the properties of that object once it has been added.

D

If I have the following code in JavaScript

(and assume mySection is a pointer to an HTML

object).

for(var i =0; i < 5; i ++)

{

mySection.innerHTML += "# ";

mySection.innerHTML += "\\n";

}

What will my output be?

true

(T/F) JavaScript is client-side by default.

false

(T/F) JavaScript is server-side by default.

c) hard-typed language

Which of the following statements are not true about JavaScript?

a) will run in-line with HTML

b) can modify other components using the document object model (DOM) of HTML

c) hard-typed language

d) requires the use of tags

e) none of the above

b) will erase the existing web-page

document.write(); will write text to the page, however, it also

a) redirect the text output to another page

b) will erase the existing web-page

c) won’t be formatted properly

d) has no drawbacks, it will work as intended

a) document.write();

You can use this method to write text to the page but it will erase the existing web-page, if the page has finished loading.

What method is this?

a) document.write();

b) document.getElementById();

c) document.note();

d) document.writeText();

b) document.getElementById();

It is a better idea to use this method when writing text to a page.

What method is this?

a) document.write();

b) document.getElementById();

c) document.note();

d) document.writeText();

a) the title will change to “Hello World”

Given the code, what will happen if the following is written to the console?

var myTitle = document.getElementById(“title”);

myTitle.innerHTML = “Hello World”;

a) the title will change to “Hello World”

b) a new small text “Hello world” will appear under the title

c) another title “Hello World” will appear above the title

d) nothing will happen

b) console.log();

Which of the following will output to the console?

a) console.warn();

b) console.log();

c) console.error();

d) console.write();

d) console.warn();

Which of the following will output a warning?

a) console.yell()

b) console.log();

c) console.error();

d) console.warn();

b) console.error();

Which of the follow will output an error?

a) console.warn();

b) console.error();

c) console.fault();

d) console.log();

b) current scope

The following declared variable will declare x as 10 in the ______________.

var x = 10;

a) global scope

b) current scope

c) class scope

d) local scope

true

(T/F) The method document.write(); can only be used while the page is loading up unless you wish to destroy the page.

true

(T/F) JavaScript will always do floating point division.

false

(T/F) JavaScript will only sometimes do floating point division.

true

(T/F) OpenGL will only accept float.

false

(T/F) OpenGL will only accept double.

b) 64

By default, all decimal numbers in JavaScript are ________________ bit.

a) 24

b) 64

c) 8

d) 16

c) global

All variables declared outside of a function of class will automatically have ______________ scope.

a) local

b) class

c) global

d) functional

canvas context, instance of main, canvas variable

The only global variables you are allowed to have are

(select multiple)

• canvas context

• instance of main

• class functions

• canvas variable

document.body.appendChild(this.myImg);

From the code given, which statement allows an object to be dynamically added to the HTML?

a) floating-point division

What kind of math is ALWAYS done in JavaScript?

a) floating-point division

b) double-point division

c) floating-point multiplication

d) none of the above

true

(T/F) The default numeric type for JavaScript is float.

you need a global function for a callback, from the global callback we can call the class function

Explain the process of invoking a call back. Assume we want to have all the functionality inside a class. What is the extra piece of work we have to do?

c) canvas

HTML 5 introduced an HTML element called ____________. This element can be used to draw and render images.

a) painting

b) drawer

c) canvas

d) whiteboard

2D, 3D

What are the two contexts in which a programmer can draw images?

fragment and vertex shader, charset, any/all CSS or JavaScript imports, inline functions or classes

The HTML head section contains:

(select multiple)

• fragment and vertex shader

• charset

• HTML canvas element

• any/all CSS or JavaScript imports

• global functions or classes

• inline functions or classes

b) body

The _________________ section of the HTML file will contain the content seen in the webpage.

a) footer

b) body

c) header

d) title

b) code that is not inside a function or a class

JavaScript will begin execution when it encounters _____________________________.

a) any kind of code

b) code that is not inside a function or a class

c) code that is inside a function or a class

d) none of the above, JavaScript will begin execution regardless

d) all of the above

JavaScript has ________________ variable scope.

a) global

b) local

c) class

d) all of the above

d) all of the above

In this class, the only 3 global variables used are

a) instance of the main class

b) canvas object

c) canvas context

d) all of the above

true

(T/F) If a function returns void, it does not have a return statement or it has a return statement with no value.

b) script HTML tag

In basic JavaScript syntax, things such as writing to the console and function declaration must be written between

a) footer HTML tag

b) script HTML tag

c) body HTML tag

d) none of the above

true

(T/F) You cannot overload the constructor in JavaScript.

false

(T/F) You can overload the constructor in JavaScript.

b) constructor()

What is the correct way to declare class functions?

a) class function constructor()

b) constructor()

c) function constructor()

d) class Main::constructor()

parameterized constructor

You cannot overload the constructor in JavaScript but you can have a ___________________ instead of a default.

true

(T/F) All class variables are public.

false

(T/F) All class variables are private.

a) after

Callbacks must be assigned ___________ the class has been initialized.

a) after

b) before

true

(T/F) JavaScript can also iterate through collections, similar to a for-each loop e.g. for(let x in jsArray){…}.

IDs

You can assign different ___________ to HTML elements.

ConsoleSection = document.getElementById(“console”)

How would you assign this given section to a variable called ConsoleSection in JavaScript?

ConsoleSection.innerHTML += “text”

A section called “console” has the corresponding JavaScript variable ConsoleSection. How would you dynamically add text to this section?

ConsoleSection = document.getElementById(“console”)

true

(T/F) When dynamically adding text to a section, the text is displayed in HTML not normal text. Therefore, it must have HTML formatting.

false

(T/F) When dynamically adding text to a section, the text is displayed as a normal text. Therefore, it must doesn’t need to have HTML formatting.

d) top left

The canvas coordinate system will start at the ___________.

a) top right

b) bottom left

c) bottom right

d) top left

true

(T/F) When you go down the screen of the canvas, the Y increases.

false

(T/F) When you go down the screen of the canvas, the Y decreases.

var ctx = canvas.getContext(“2d”)

We are given the JavaScript variable pointing at the canvas.

How would you write the 2D drawing context called ctx for this canvas?

var canvas = document.getElementById(“myCanvas”)

canvas object

We have to find the ______________ and from that we can select 2D and WebGL.

true

(T/F) Once I set a property, it will remain the same until I set it again.

false

(T/F) Once I set a property, I will need to continuously set that property throughout the code.

line color, fill color, line width, line cap, line join

What are the different context 2D properties?

ctx.beginPath(), ctx.moveTo(X,Y), ctx.lineTo(X,Y), ctx.stroke(), ctx.fill()

What are the commands needed in order to draw your own shapes? (use the context variable ctx)

ctx.drawImage(pic, 400, 200), ctx.drawImage(pic, 400, 200, 100, 100)

What are the two different ways to write the commands to draw an image using the image tag and variables given?

We want the image at location (400, 200) and the size of the image should be 100 by 100 pixels. (use the context variable ctx)



var pic = document.getElementById(“slime”)

true

(T/F) With context 2D, the last thing drawn will appear ‘on top’ of anything drawn before.

false

With context 2D, the last thing drawn will appear on the same layer of anything drawn before.

immediate-mode

With context 2D, the last thing drawn will appear ‘on top’ of anything drawn before. This is a generic property of _____________________ graphics.

red

I set Shape 1 color to green, Shape 2 color to red, and I forget to set the color for Shape 3. What color will Shape 3 be if I render in this order?

green

I set Shape 1 color to green, Shape 2 color to red, and I forget to set the color for Shape 3. What color will Shape 3 be if I render in this order?

Shape 1, Shape 2, Shape 1, Shape 3

top left

Where is (0,0) in the canvas?

beginPath(), moveTo(), lineTo(), stroke(), fill()

What is the order of commands to draw my own custom shape?

false

(T/F) I can only choose to use stroke() or fill(), but not both.

scalability, confusion between which commands affect which object, not effective for storing specific object information

Why would it be a bad idea to make a large function containing a list on instructions to create a complex scene?

coordinates, color, speed, scaling, other properties we want to give our object

What kind of information would we store in a class that allows us to create an object instance, or multiple instances?

DrawBackground(), For each Object in mySceneObjects

A render cycle, a phase where the screen is updated, would have a pseudocode look something similar to:

• _________________

• _________________

• update any info needed in the object

• render (or draw) the object on screen

d) all of the above

Why is it important to define some form of entity that can represent an object in your scene?

a) so it can apply to all objects you may need in your scene

b) so it can be stored in one collection

c) so it can be easily updated and render every time a new scene is needed

d) all of the above

[2D or 3D], Rotation, Constructor(), Update(), Render()

A suggested model for rendering a scene would look like:

Class BaseEntity

{

• Loc = ____________ //an array for storing location

• _________________ = rotation of the object

• __________________

• _________________

• _________________

}

a) starts at 0 at the top left and increases as it goes down

In context 2D the y-axis

a) starts at 0 at the top left and increases as it goes down

b) is located bottom right and increases as it goes up

c) is located midway through the scene

d) starts at 0 at the bottom left and increases as it goes up

a) green

I have four shapes:

Shape one will set the color to red, shape two will set the color to blue, and shape three will set the color to green.

I forget to set my color for shape four and I call the following render functions:

Shape2.render()

Shape1.render()

Shape3.render()

Shape4.render()

What color will shape 4 be?

a) green

b) not enough information

c) red

d) blue

false

(T/F) Color #FFF is the same color as #F0F0F0.

true

(T/F) Color #FFF is the same color as #FFFFFF.

B

Which one is round?

A

Which one is miter?

C

Which one is bevel?

false

(T/F) Line caps "Square" and "Butt" are exactly the same.

b) C

Which language was OpenGL written in?

a) Java

b) C

c) C++

d) JavaScript

d) JavaScript

Which language does WebGL force the user to program in?

a) C

b) C++

c) Java

d) JavaScript

true

(T/F) Modern PCs will almost always transfer the graphical workload from the CPU to the GPU.

c) CPU

What best describes the following?

Designed for general purpose computing and can handle all computational tasks.

a) RAM

b) GPU

c) CPU

d) Cached Graphic Memory

c) GPU

Which best describes:

Specific hardware configuration for graphical computational purposes.

Specializes in parallelism and mathematical operations.

a) CPU

b) RAM

c) GPU

d) Cached Graphic Memory

d) resolution

When I say a picture is 100 pixels by 40 pixels I am talking about the ___________________.

a) full color

b) depth

c) monochrome

d) resolution

d) aspect ratio

When I divide the width by the height I get

a) picture depth

b) resolution

c) full color

d) aspect ratio

a) monochrome

I have 1 bit to define color so I have

a) monochrome

b) 256 color

c) full color

d) 16-bit color

OpenGL

Am I describing OpenGL or WebGL?

• uses C as a primary language

• written at a very low level

• optimized and one of the most popular graphics libraries

WebGL

Am I describing OpenGL or WebGL?

• uses JavaScript

• creates graphics on HTML 5 Canvas objects

• written to allow 3D (and 2D) graphic rendering over the web

• built on top of OpenGL

a) to represent data visually

What is the point of Computer Graphics?

a) to represent data visually

b) to draw pictures digitally

c) to create data on the computer

d) none of the above

input devices, CPU, GPU, memory, frame buffer, output devices

The graphical system will contain:

• ___________

• ______________________

• ______________________

• ___________

• ___________

• _______________

frame buffer

The _________________ holds the data for the image and is loaded into a display device.

resolution

The width and height of the frame buffer is the ______________________.

depth

The number of bits used for each pixel is the ____________ or the precision of the image.

b) full color

If the depth of an image is 24 bits then that means the image is in

a) monochrome

b) full color

c) 256 color

d) none of the above

c) monochrome

If the depth of an image is 1 bit then that means the image is in

a) 256 color

b) full color

c) monochrome

d) none of the above

true

(T/F) Computer Graphics is the opposite of Computer Vision.