JavaScript and Color Theory Quiz

Course Information

• Course title: Computer Graphics & Visualization
• Course code: CSE-423
• Lecturer: Dr. Reda Elbasiony
• Semester: Fall, 2024
• University: EGYPT-JAPAN UNIVERSITY OF SCIENCE AND TECHNOLOGY (E-JUST)
• Website: www.ejust.edu.eg

What is Computer Graphics?

• Computer graphics involves all aspects of creating images with a computer, including hardware, software, and applications.
• Computer graphics deals with producing images using a computer.

Preliminary Answer

• Application: The image is an artistic representation of the sun for a planetarium animation.
• Software: Maya, built on OpenGL, is used for modeling and rendering.
• Hardware: A PC with a graphics card was used for modeling and rendering.

Basic Graphics System

• Input devices send data to the processor (CPU).
• The CPU sends data to the graphics processor (GPU).
• The GPU processes the data and displays it on the output device.
• The frame buffer stores and displays the image.
• The CPU handles input and processing tasks.
• The GPU handles image display tasks.

Computer Graphics: 1950-1960

• The earliest computer graphics involved strip charts and pen plotters.
• Simple displays used A/D converters to display images on CRTs.
• Cost of CRT refresh was high, and computers were slow, expensive, and unreliable.

Cathode Ray Tube (CRT)

• CRTs used an electron gun and a phosphor-coated screen.
• The electron gun emits electrons that strike the phosphor.
• Focusing mechanisms ensure the electron beam strikes the correct part of the phosphor to create the desired image.

Shadow Mask CRT

• Shadow mask CRTs use a shadow mask to precisely direct the electron beams from separate color guns to the appropriate areas of the phosphor dots on the screen.
• This produces images with color.

Computer Graphics: 1960-1970

• Wireframe graphics involved displaying only lines, such as those in a sketchpad.
• Display processors were used for processing graphics.
• Storage tubes were used to store graphics.
• Wireframe representation, e.g., sun object.

Sketchpad

• Ivan Sutherland's PhD thesis at MIT showed the potential of man-machine interaction via a sketchpad.
• The sketchpad showed a new display system using a light pen.
• Computer graphics algorithms were invented by Sutherland.

Display Processor (DPU)

• A dedicated display processor takes over the task of refreshing the display.
• Graphics are stored in the display list.
• The host computer compiles the display list and sends it to the DPU.

Computer Graphics: 1970-1980

• Raster graphics were introduced, using graphic standards such as IFIPS and GKS.
• Raster graphics became a standard graphics method.
• Workstations and PCs improved graphics capabilities.

Raster Graphics

• Raster Graphics produces images as an array of pixels within a frame buffer.
• Raster graphics allows filling in polygons.

Computer Graphics: 1980-1990

• Realism in computer graphics is enhanced with smooth shading, environment mapping, and bump mapping.

Special Purpose Hardware

• Silicon Graphics geometry engine.
• VLSI implementation of graphics pipelines.
• PHIGS (Programmer's Hierarchical Interactive Graphics System) standard.
• RenderMan standard.
• Networked graphics, such as X Window System.
• Human-computer interfaces (HCI).

Computer Graphics: 1990-2000

• OpenGL API.
• Completely computer-generated feature-length movies.
• New hardware capabilities (texture mapping, blending, accumulation & stencil buffers).

Computer Graphics: 2000-2010

• Photorealism, with graphics cards dominating the PC market (Nvidia, ATI).
• Computer graphics routines for movie industries (Maya, Lightwave).
• Programmable pipelines.
• New display technologies.

Generic Flat Panel Display

• Light emitting elements are arranged in a grid pattern.

Computer Graphics 2011-

• Graphics became ubiquitous in cell phones and embedded systems.
• OpenGL ES and WebGL.
• Enhanced reality.
• 3D movies and TV.

Image Formation

• Images are two-dimensional representations of objects, viewers, and light sources.
• Methods for creating images are analogous to how physical imaging systems (cameras, microscopes, telescopes) create images.
• Formation of images involves capturing and displaying light from scenes.

Elements of Image Formation

• Objects: 3D representations of the scene elements.
• Viewer: 3D location and perspective of the image viewer.
• Light Sources: Light coming from sources in the scene to illuminate elements.
• Interactions: How light interacts with the scene materials (objects and surfaces).
• Independence of objects: Each object in the scene has separate characteristics that can be analyzed.
• Independence of Viewer: Various perspectives can be shown.
• Independence of light sources: Various light sources will produce different effects.

Light

• Light is part of the electromagnetic spectrum that reacts within visual systems.
• Light wavelengths are between 350-750 nanometers.
• Long wavelengths appear red while short wavelengths appear blue.

Ray Tracing and Geometric Optics

• Using trigonometry, computer graphics create images using rays of light following from a point to objects to a camera lens.

Luminance and Color Images

• Luminance images are monochromatic (gray levels).
• Analogous to black and white film or TV.
• Color images use hue, saturation, and lightness.

Three-Color Theory

• Human visual systems use two types of sensors: rods (monochrome, used for low light) and cones (color vision)
• Cones have three types for color vision sensitivity (red, green, and blue).
• Computer graphics only needs three primary colors to generate colors (red, green, and blue).

Additive and Subtractive Color

• Additive: Mixing primary colors (red, green, blue) to form compound colors. e.g. CRTs, projector systems
• Subtractive: Mixing light with filters of cyan, magenta, yellow. e.g. pigments, printing

Pinhole Camera

• Trigonometry determines the projection of a 3D point onto a 2D plane.
• Equations of simple perspective are used.

Coding in WebGL

• WebGL can run on recent browsers (Chrome, Firefox, Safari).
• Scripts are written in JavaScript to form display elements.
• JavaScript code runs within the browser and uses the local resources.

Example Code

• Code example of a triangle using vertex and fragment shaders.

HTML File

• Example HTML to set up canvas element and link JavaScript sources.

JS File

• Example JavaScript code using WebGL to draw a triangle.

JS File (cont)

• Further example of JS code for WebGL intial setup and display.

JS File (cont) 2

• Example code showing variables and functions to display data in the screen

Exercise

• Exercise: Run and edit provided files (triangle.html, triangle.js) to use WebGL to render.

JavaScript Notes

• JavaScript is the language for Web browsers.
• It is interpreted and object-oriented programming languages.
• Refer to online resources, including tutorials and books, for specific information.

JS Notes

• JavaScript engines in browsers are now fast enough to handle graphics data.
• JS is "too big" for simple use in cases where it isn't needed.
• Focus on graphic parts using JavaScript and avoid unnecessary structures.

JS Notes 2

• JS has limited data types.
• Number has a single 32-bit floating-point type.
• Be mindful of potential issues with loops.

JS Arrays

• JavaScript arrays are objects with methods, unlike C-style arrays.

Typed Arrays

• Typed arrays in JavaScript are similar to C arrays.
• Standard arrays are preferred to convert them into typed arrays.

A Minimalist Approach

• Only use core elements of JS and HTML when developing.
• Do not employ extra or varied packages unless absolutely needed.
• No additional packages like JQuery.
• Focus solely on core graphics functionality.

Test your knowledge on JavaScript arrays, operators, and graphics coding. Additionally, explore concepts related to color theory and the human visual system. This quiz is perfect for those delving into programming and visual sciences.