Graphic Formats Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Which of the following describes EPS?

An open specification controlled by Esri.

A vector graphics format created by Adobe Systems. (correct)

A web format for two-dimensional graphics.

A raster graphics format.

Scalable Vector Graphics can be used only for static graphics.

False

What does SHP stand for in geospatial vector data formats?

Shapefile

Scalable Vector Graphics (SVG) uses __________ to represent graphic content.

XML grammar Signup and view all the answers

Match the following graphic format with their characteristics:

EPS = Created by Adobe Systems for vector graphics SHP = Geospatial vector data format for GIS software SVG = XML grammar for two-dimensional graphics Raster = Stores information for every pixel of a graphic Signup and view all the answers

Which method is used to add a child node to a parent node?

appendChild() Signup and view all the answers

DOM Event Flow consists of four phases.

False Signup and view all the answers

What is the purpose of the preventDefault() method in event handling?

To prevent the default action associated with the event. Signup and view all the answers

The method used to insert a node before another node is called ______.

insertBefore Signup and view all the answers

Match the following event types with their corresponding description:

keydown = Triggered when a key is pressed down. load = Fired when the whole page is fully loaded. click = Triggered when an element is clicked. DOMContentLoaded = Fired when the initial HTML document has been completely loaded. Signup and view all the answers

Which of the following is NOT a property of the keyboard event parameters?

mouseButton Signup and view all the answers

What advantage does addEventListener() provide over traditional event handler assignments?

It allows multiple event handlers to be attached to a single event. Signup and view all the answers

What is the primary purpose of zigzag scanning in JPEG compression?

To remove zeros in the quantized matrix Signup and view all the answers

The default mode of JPEG is Progressive.

False Signup and view all the answers

What does RLE stand for in JPEG compression?

Run Length Encoding Signup and view all the answers

DC components are encoded using __________ coding.

Huffman Signup and view all the answers

Which algorithm involves sending low-frequency DCT coefficients first?

Progressive spectral selection algorithm Signup and view all the answers

Run Length Encoding (RLE) is applied to DC components in JPEG compression.

False Signup and view all the answers

List one benefit of using Progressive JPEG.

Produces a quick, roughly decoded image during transmission. Signup and view all the answers

Match the following JPEG modes with their descriptions:

Sequential Mode = Image encoded in a single scan Progressive Mode = Image encoded in multiple scans Hierarchical Mode = Allows multiple resolutions Lossless Mode = No loss of image data Signup and view all the answers

The algorithm that sends all DCT coefficients but with lower precision is called the __________ approximation algorithm.

successive Signup and view all the answers

What coding is used to encode the difference between the current block and the previous block in JPEG compression?

DPCM Signup and view all the answers

Which method is used to draw a filled rectangle?

fillRect(x, y, width, height) Signup and view all the answers

The moveTo(x,y) function is used to draw a line to a specified coordinate.

False Signup and view all the answers

What property is used to set the color for filling text in the canvas?

fillStyle Signup and view all the answers

To draw a Bézier curve, the method used is _______.

bezierCurveTo Signup and view all the answers

Match the following drawing functions with their descriptions:

clearRect = Wipes the surface lineTo = Draws a line to a specified point fillText = Draws filled text arc = Adds an arc to the path Signup and view all the answers

Which function closes the current drawing path?

closePath() Signup and view all the answers

The shadowOffsetY property determines the horizontal distance of the shadow from the shape.

False Signup and view all the answers

What method is used to draw an outline around a rectangle?

strokeRect Signup and view all the answers

The _______ function is used to change the current position in the canvas context.

moveTo Signup and view all the answers

Which animation technique allows for real-time interactivity?

All of the above Signup and view all the answers

Motion capture animation is generally slower to produce than keyframing.

False Signup and view all the answers

What is the most important principle of the '12 Laws' of animation?

Squash and stretch Signup and view all the answers

In keyframe animation, the _____ fills the gaps between keyframes.

in-betweens Signup and view all the answers

Match the animation techniques with their descriptions:

Keyframe Animation = Drawing of extreme motion moments Motion Capture = Recording of real-world motion Procedural Animation = Generated by rules and simulations Squash and Stretch = Principle emphasizing weight and flexibility Signup and view all the answers

Which animation technique is most effective for creating realistic natural phenomena?

Procedural animation Signup and view all the answers

Colour change is a fundamental aspect of motion capture animation.

False Signup and view all the answers

What are '12 Laws' in animation meant to ensure?

Consistent and beautiful animation Signup and view all the answers

Procedural animation is based on a set of _____ that dictate how motion is generated.

rules Signup and view all the answers

What does the term 'spline interpolation' refer to in animation?

An interpolation method for creating smoother transitions Signup and view all the answers

Study Notes

JavaScript Basics

JavaScript is a scripting language used to add dynamic content to web pages.
HTML and CSS handle static content, but JavaScript allows content to change based on user interaction.
JavaScript runs in web browsers, with an engine that interprets and executes the code.

JavaScript Capabilities

Interaction with HTML and CSS content.
Respond to user events.
Use built-in APIs.
Work with data from external HTTP servers.

Deploying JavaScript in HTML

External scripts: embed JavaScript code within an external .js file linked via src attribute.
Embedded scripts: embed JavaScript code in the HTML <script> tags.
Self-contained scripts: include JavaScript directly within an HTML file.
Offline usage: handle instances where scripts might be disabled or not supported by specific browsers via the <noscript> tag.
Chrome development tools with the REPL (Read, Evaluate, Print, Loop) console for executing code.

JavaScript - Overview & Definitions

Derived from the ECMAScript standard.
Originally designated for use in Netscape Navigator and not Java.
JavaScript is a programming language for web browsers to add behaviour to static content.
It is embedded in web browsers to add dynamic functionality to web pages.

JavaScript Primitive Types

Number: Represents numerical values using floating-point notation which includes integers and decimals.
- Includes special values like Infinity, -Infinity, and NaN (Not a Number).
String: Representations of text enclosed in single quote marks ('...'").
Boolean: Represents truth values (true or false).
Null: Represents the intentional absence of a value.
Undefined: Indicates a variable that has been declared but does not have a value yet.
Reserved Words: JavaScript terms like 'boolean', 'if', 'delete', and more are used in code, but don't have behaviour or methods. Primitive data types often have wrapper objects (e.g., Boolean, Number, String).

JavaScript Variables & Constants

Variable naming: the first letter can be a dollar sign ($) or underscore (_), or any lower (a-z) or upper case (A-Z) letter, followed by other letters, numbers or underscores.
Variables can store a number, string, or boolean.
Variables have global and block scopes.
the var keyword is used to declare a local or global variable. If var is omitted, a variable is implicitly global.
typeof operator is useful for determining a variable's type.
The new keyword creates instances of wrapper objects.

JavaScript Strings

Strings are sequences of 16-bit unsigned integers representing characters.
Backslashes represent escape characters (e.g., newline: '\n').
Strings are immutable; manipulating a string creates a new string.

String Methods

indexOf(): searches for a specified substring and returns its position or -1 if not found.
substring(): returns a portion (substring) of a string.

JavaScript Booleans

Any value can be used as a Boolean in JavaScript expressions (with logical operators).
Falsy values: null, undefined, 0, NaN, ""
Truthy values: every other value.

JavaScript Null & Undefined

Null: Represents "no value."
Undefined: A declared variable without a value.
- Starting an integer with 0 in Javascript makes it an octal value instead of a decimal one

Arrays

Array creation: use literal notation or constructor notation.
Access elements by index, starting from 0.
Arrays have a length property.

JavaScript Objects

Objects store key-value pairs.
Access values using dot notation (object.property).
Values can also be accessed using bracket notation (object["property"]).

Error Objects

Error objects are created when an exception is thrown, they include properties like message (description of the exception/error) and name (the type of error)
Errors: TypeError, RangeError, URIError...
You can create custom error messages by passing them in strings into new Error()

Conditionals and Loops

Conditional statements (if/else) control program flow based on conditions
Loops (for, while, do-while) repeat code blocks based on conditions

JS Operators and Expressions

Unary operator: typeof, ++ (increment), -- (decrement).
Binary operators: + (addition / concatenation), -, /, *, % (modulo).
Strict equality (===) considers both value and type; loose equality (==) does not, and performs type conversions
Comparison Operators: equality, inequality, greater than, less than, etc

Comparing Objects

■ Objects are only considered identical if both references point to the same memory address/object

Declaring and Using Functions

■ The function keyword defines the function declaration ■ The function name and parameters are enclosed in parenthesis, with the logic enclosed in curly braces ■ Functions can explicitly return a value using the return keyword; and implicitly return undefined

Creating Custom Objects

Define a Function
Use the 'this' keyword to reference the object's data.
- Use the 'new' Keyword to instantiate the object.

Prototypes

■ Object instances inherit properties and methods from their prototype. ■ Built-in objects have prototypes. ■ Prototypes can be modified to add or customize properties and methods

Debugging in Javascript

Messages are written in the browser's developer tools' console to track and diagnose errors

Asynchronous JavaScript

JavaScript programs in a web browser are event-driven. The JavaScript engine typically waits for client requests to arrive over the network before proceeding.
The core JavaScript language does not contain asynchronous features but powerful implementations like promises, async/await and for/await are used.

Asynchronous Javascript: Common Methods

Using Callbacks
Using Promises
Using async and await
Asynchronous Iteration

I. Synchronous Programming with Callback

• Derived from functional programming paradigm • Utilized to add interactivity to HTML documents ■ The callback function acts as a means that notifies of a specific action or event

Events

• Event driven JavaScript programs register callback functions for particular events.

Timers

■ Callback functions in timing mechanisms are executed after a specified time period or interval.

Network Events

• JavaScript running in browsers can fetch data from web servers with the use of the XMLHttpRequest class.

JavaScript Implementations

ECMAScript core language standard for JavaScript
DOM: (Document Object Model) —a structured tree representation of an HTML page
BOM (Browser Object Model): — a way to operate on web browser functionality.

The Window Object

Object properties providing access to browser APIs.
Differing implementations between browsers.
Global scope properties and methods
- innerWidth/innerHeight - Viewport dimensions
- outerWidth/outerHeight - Browser window itself's dimensions
Resizing methods resizeTo() and resizeBy()
Navigation (e.g., window.open()).

The Location Object

■ Location offers information about the current document and navigation functionality. ■ It is a property of both window and document (same object)

The Navigator Object

Contains properties showing browser capabilities.

The Screen Object

Displays details about the display outside of the browser window

DOM Document Object Model

Structure for HTML content on a webpage
DOM represents HTML as a tree, where the top object is document
DOM gives the way to access and interact with HTML content.

Retrieving a DOM Node

Nested objects are accessed using dot notation
Accessing elements using tag name using getElementsByTagName method
- Loops over obtained nodes in a sequence to do an operation.
By id attribute using getElementById() method
By class attribute using getElementsByClassName() method
By CSS selector using querySelectorAll(CSS selector) method.

Accessing DOM Node's Attributes

Element.AttributeName to target the individual attribute name for an element.
Element.attributes containing the attributes of an element
Element.hasAttribute(name) to verify if a certain element has a specific attribute.

• Element.getAttribute(name) to get the value of the specified attribute.

• Element.setAttribute(name, value) sets the value of a certain attribute • Element.removeAttribute(name) removes the specified attribute.

Accessing DOM Node's Attributes- Examples

• getAttribute() to find the value of an attribute connected to an element • setAttribute() changes the value of an attribute connected to an element ■ innerHTML is used to access and modify an element's content. Modifying styles with the style attribute, similar to those of an inline fashion.

Adding and Removing Elements

Create a new element using createElement()
Add to a parent node by using the appendChild() or insertBefore() methods.
Inserting elements before other elements
Replace a node with another one
Remove elements using the removeChild() method ▪

DOM Events and Event Flow

DOM event flow has three stages: ■ capturing ■ target ■ bubbling
Event handlers are functions that are triggered by events.
Event handler names usually start with an "on" (e.g., "onclick").

DOM Events

Attributes: ■ source element - the DOM object that triggers the event ▪ event object - provides parameters about the specific event. These parameters give details about the type, target, key code, alt key etc ▪ General (e.g., load, unload, etc.) ▪ Keyboard (e.g., keydown, keypress, keyup) ■ Mouse (e.g., mouseover, mouseout, click)

Assigning Event Handlers

DOM event handlers can be assigned in several ways.
HTML event attributes, using the on* format for attributes, like onclick.
Direct assignment using node properties (e.g., element.onclick = function() { ... }).
Using event listener methods (addEventListener/removeEventListener).

Intrinsic Events in Web Apps

Intrinsic event attributes directly connect a function to an event.

Colour Model- Colours

Light encompasses a narrow spectrum of electromagnetic frequencies, and is broken down into a spectrum of wavelengths. The human eye can perceive a visual spectrum
Luminance - The measure of the perceived light energy a human eye can perceive
Hue - The nuance or dominant colour
Saturation - How pure a colour is
Brightness - The perceived lightness or darkness of a colour
Brightness is the perceived lightness or darkness of the colour, measured as a percentage from 0% (black) to 100% (white).

Colour Systems

RGB (additive): used for displays (monitor, projector)
CMYK (subtractive): used for printing
HSB: (Hue, Saturation, Brightness) – used for intuitive selection of colours
HSL: (Hue, Saturation, Lightness) – used to represent how colours are perceived by the human eye
YIQ - based on NTSC to support black and white receivers
Lab - device-independent system based on human perception

Colour Models

■ Method for defining the properties and behavior of colour within a given context ■ Combining light from various sources to produce different colours ▪ Three fundamental colours (primaries) with varying intensities are enough to create other colours ■ Colour gamut – set of all colours created via primaries ■ Complementary colours - when two primaries are mixed produce white ■ Colour space – A mathematical model to represent how colours are represented

The RGB Colour Model

A colour model based on the three primary colours (Red, Green, Blue). ■ Colours are shown on a screen as components of RGB
RGB model uses a unit cube defined by Red, Green and Blue as axes.
Colours that are displayed on the screen are a combination of RGB components.

RGB Color Model (8 Bit Channels)

Each colour has 8 bits/channel.
That leads to 256 variations for each channel (colours)
RGB combination results in 256 * 256 *256 possible variations

The CMYK Colour Model

A colour model based on Cyan, Magenta, Yellow and Black used in printing. ■ The subtractive colour model works by subtracting colours from white (light) ■ A mixture of CMY creates a variety of colours

The HSL/HSB Colour Model

■ A newer way to represent colours in a cylindrical coordinate system rather than in a cartesian one. ■ It is often used in applications for intuitive and better colour selection, and can be presented in a hexagon rather than a cube.

The YIQ Colour Model

A colour model based on the NTSC TV signal. Used in colour TV signals for compatiblity with black and white TV receivers. ■ It is more important to display luminance information ■ Luminance- is the light intensity ■ Chromaticity- is a representation of hue (dominant colour) and purity.

The Lab Colour Model

A colour model that describes colours based on human perception rather than device capabilities
Independent of any colour display output devices

Grayscale Colour Model

Represents colours based on black to white spectrum with shades of grey in between

Comparing Colours/Colour Models

Colour models like RGB, CMYK, HSB etc provides different ways to represent colours based on the applications, and devices they are used for.

Colour Selection and Applications

Graphic packages utilise visual interfaces including sliders, and colour wheels based on colour model values,
- Colour combinations must prevent visual fatigue or eye strain
- Some colour combinations are generally better suited for applications and user experiences

CSS Colour Property

Allows for specifying colours in various ways, including colour names, hexadecimal values, RGB, and HSL values.
Using different notations across various web browsers

Colour Wheel

A visual tool for representing colours, ordered based on their chromatic relationship and mixing colours
It contains primary, secondary, and tertiary colours, aiding users in colour selection and applications

Colour Conversion

Happens when displaying an image on a device or printing
Performed via a colour management system (and colour profiles)

Canvas Element

A rendered HTML5 element used to create bitmap canvases for drawing graphics.
It provides a 2D rendering context API that allows for manipulation like drawing shapes (lines, rectangles, circles, etc.), text, and images directly on the canvas object
JavaScript API supports several drawing methods and operations

Drawing Principles

HTML 5 uses a graphic context for all operations (shape, text, and image).
- Default values of attributes are taken into account
drawImage method is used to display images
Methods "immediate mode", "path/buffered mode" which are used to expedite animation and reduce potential bottlenecks in rendering

Dynamically Processing Shapes

Drawing using a path is a commonly used method, that involves using different functions (like fillRect, strokeRect, clearRect etc.)
Functions like beginPath(), closePath(), fill(), and stroke() are used to draw shapes and contours ■ Drawing points using moveTo(), drawing line segments using lineTo(), drawing curved paths like circles, and quadratic curves are done with the given functions.

Drawing and Moving Functions

moveTo(x,y) – Sets the current drawing position
lineTo(x,y) – Draws a line to the specified point. (x, y) ■ rect(x,y, width, height) – Draws a rectangle with the given specifications. ■arc(x, y, radius, startAngle, endAngle, anticlockwise) – Draws an arc

■ arcTo(xctrl,yctrl,xPos, yPos,radius) - Draws an arc with the given parameters that creates a curved path.

quadraticCurveTo(cp1x, cp1y, epx, epy) - Creates a curved path between the starting point, the control point and the end point. ▪ bezierCurveTo(cp1x, cp1у, ср2х, ср2у, ерх, еру) - Creates a Bézier curve path between the starting point and end point using two control points

Drawing Text

fillText(string, x, y) - Draws filled text at the given coordinates (x, y), with the colour specified by the fillStyle property
strokeText(string, x, y) – draws strokes around the text at the indicated (x, y) coordinates.

■ font property - defines the styling for text (size, font type, etc).

shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor – used to create the 3D effect for text and shapes by attaching shadows to them

Canvas Attributes

•fillStyle and strokeStyle: set the fill and stroke colors. ■ lineWidth: sets the width of drawn lines. ■ lineCap: defines the shape of the end of lines. ■ lineJoin: defines the way two lines are joined. • font: defines text styling (size, font, style). ■ textAlign: sets the alignment of text relative to the x-coordinate. ■ textBaseline: defines the alignment of text relative to the y-coordinate. ▪ save() and restore(): save/restore current drawing state.

Drawing Bézier Curves

Mathematical algorithms defining curves consisting of two or more control points

2D Transformations: Canvas

translate(x, y): shifts the origin of the coordinate system
rotate(angle): rotates the coordinate system clockwise by the given angle (in radians).
scale(x, y): scales the coordinate system along the x- and y-axes.

2D Rendering Context Transformation Matrix

A 2D rendering context in a 2D array/matrix to handle transformations.
context.transform(a, b, c, d, e, f): applies a transformation to the context.
context.setTransform(a,b,c,d,e,f) replaces the current matrix with a new one
context.resetTransform(): resets the transformation matrix to the identity matrix (original state).

Drawing Images

drawImage(image, x, y): Draws an image into the canvas starting from coordinates (x, y).
getImageData(sx, sy, sw, sh) extracts a rectangular region of the canvas as an ImageData object
putImageData is used to copy the content of a canvas area defined by an ImageData object into the canvas at a specified area.

ImageData Interface

ImageData objects are used to get pixel data in RGB/Alpha format

Drawing, Resizing and Cropping Images

▪ drawImage(image, dx, dy, dw, dh) method is used to draw an image on the canvas (with resizing or cropping options)

Accessing Pixel Values

Get pixel data (x, y, W, H)=> extract a rectangular area of image using coordinates (x,y), and width(W), height(H) and returns an ImageData object for that area. Iterate, get colour components from each pixel, with the use of indexes, and manipulate colour and alpha values

Animation in JavaScript

Techniques used to produce the illusion of motion using HTML, CSS, and JavaScript. ■ Keyframe animation - used for creating smooth and varied animations by using intermediate frames (in-betweens)
Motion capture animation ▪ Recording real movements from various sources and converting into numerical codes ■ Procedural animation - defines a sequence of rules/algorithms for the creation of an animation ■ show()/hide()/toggle()- functions to turn elements visible/hidden/on/off

Animation Functions

Animation functions are used to create movement in multimedia applications using either a sequence of key frames or algorithms to calculate values based on time ■ Surprise or wonder ▪ Portrayal or representations of non-human or animate subject matter or events
Combine human and non-human characters or objects ■ Portrayal of real places, events, etc. that cannot be recorded efficiently using human actors or live cameras. ■ Presentation of content that may not be suitable for live actors ■ Enhanced interaction possibilities with the video ■ Save money ▪ Often only a substitute for live content and events ■ Greater control of the video ■ Timing is used effectively to create motion sequences using either setInerval(),setTimeout() functions.

Animation Techniques

■ Keyframe animation - animator determines key poses in the motion, and computer algorithms calculate intermediate positions ■ Motion capture animation - captures the actual movements from live subjects as data, then applies it to other animated subjects ▪ Procedural animation - rules, algorithms and initial conditions are set up, generating a simulation that animates the required content. ▪ Show/Hide/Toggle - effects to turn visual element on and off

1. Squash and Stretch

■ The squash and stretch principle creates a sense of flexibility and weight for drawings

2. Anticipation

■ Exaggerate an action to prepare the audience for an action to make it appear more realistic.

3. Staging

■ Clear presentation of ideas to provide focus and highlight certain parts of the displayed content. ■ Effective use of camera angle, framing and placement of actors, to provide clarity to the audience.

4. Straight Ahead Action and Pose to Pose

■ Straight Ahead Animation: frames are produced in a sequence, creating a spontaneous flow ■ Pose to Pose Animation : key poses are drawn, and calculated, and in-between frames are interpolated

5. Follow Through and Overlapping Action

• Follow Through: The "after-effect" motion associated with an action • Overlapping Action: Various actions do not happen at exactly the same time when combined within an animation.

6. Slow In and Slow Out

▪ The principle of slow and fast action making the actions to have a more realistic appearance ■ The actions start slowly, picking up momentum, and eventually slows down

7. Arc

▪ Animation of most actions exhibit a curved path.
▪ Animation is more natural, and believable with movement across curves.

8. Secondary Action

• Secondary actions add further detail to a larger action, adding more realism to the character or event • Can enhance the realism of character actions

9. Timing

■ The duration of the animation- a combination of how long the animation happens and how quickly the animation moves, is given to make a more believable effect

10. Exaggeration

■ Exaggeration is to make the emotions and actions of the drawn character more easily understood by the receiver, by enhancing or amplifying the features or impact. ■ Appropriate use of exaggeration, makes characters more dynamic and memorable. ■ Avoid over-exaggeration to maintain believability.

11. Solid Drawing

■ Precise and accurate drawings or models of the animated character give the animation a sense of weight, character, and emotion ■ Ensure the animation has proper balance and depth

12. Appeal

■ In animation, appeal includes personality, a wide range of emotions for the characters, and the addition of flaws (to aid in believability and relatability)

CSS Animation

@keyframes: defines animation rules across different steps, or actions.
Animation attributes include animaton-name, animaton-duration, animaton-delay, animaton-iteration-count,animaton-direction or animation-timming-function, animation-fill-mode.

Animations Using JavaScript

setInterval and setTimeout are commonly used for repetitive animations
The newer approach to animate HTML or JavaScript elements is done with requestAnimationFrame
Function for animation is provided to the given structure, using some parameters and passing/rendering the animation to the output.

Asynchronous JavaScript (2)

JavaScript programs in a web browser are typically event-driven. The JavaScript engine typically waits for client requests to arrive over the network before proceeding.
The core JavaScript language does not contain asynchronous features but powerful implementations like promises, async/await and for/await are used.

Asynchronous Javascript: Common Methods

Using Callbacks
Using Promises
Using async and await
Asynchronous Iteration

I. Synchronous Programming with Callback

• Derived from functional programming paradigm • Utilized to add interactivity to HTML documents ■ The callback function acts as a means that notifies of a specific action or event

Events

• Event driven JavaScript programs register callback functions for particular events.

Timers

■ Callback functions in timing mechanisms are executed after a specified time period or interval.

Network Events

• JavaScript running in browsers can fetch data from web servers with the use of the XMLHttpRequest class.

Promises

■ A core language feature for handling asynchronous operations in JavaScript ■ They are objects that represent the outcome of asynchronous tasks. ■ Can be used with nested callbacks to make them easier to read and manage.

then() method allows for expressing asynchronous operations in a clear and linear fashion.

Promises Based Fetch API

fetch function based on promises=> returns a promise object that resolves to a response object. ■ It contains methods for accessing the body of the response object in either text or JSON formats.

Drag and Drop Native API

Provides a way to handle drag and drop events across windows/applications. ■ Drag-and-drop events include dragstart, drag, and dragend. ■ When item is dragged over a valid target other events like dragenter, dragover, or dragleave or "drop" occurs. ■ Data stored in dataTransfer object, using methods like setData() and getData(), to transfer data during drag-and-drop operations. ☐ Draggability property
Setting draggable property on an element.
Additional methods for manipulating data during drag-and-drop operations ▪ addElement() — Adds an element to the drag operation (data handling) ▪ clearData(format) — Clears the data stored with a particular format ■ setDragImage(element, x, y) - For displaying a custom image under the cursor during the drag operation

Fundamentals of Digital Audio

■ Audio is important in creating a cohesive experience in multimedia applications. ▪ Reinforce a message or theme ▪ Set the mood within a multimedia application ▪ Help keep engagement of the viewers attention. ■ Helps to alert the viewers to specific information or sections ▪ Incorporating audio such as narration ■ Important for Training and educational purpose.

Sound Fundamentals

Sound is created by the vibration of matter, including air molecules. A complex interaction occurs involving: a vibrating object (sound source) a transmission medium (usually air) a receiver (ear) and a preceptor (brain) ■ Waveforms: Periodic waveforms repeat regularly, while non-periodic waveforms produce noise. ▪ Frequency: measured in Hertz (Hz) representing the number of cycles per second. ■ Amplitude: measured in decibels (dB), representing the volume or loudness of a sound.

Sound Wave Characteristics

Crest - maximum upward displacement
Trough – maximum downward displacement. ▪ Wavelength – the distance between successive crests or troughs. ■ Amplitude - the difference from the rest position to the maximum peak(crests or troughs) ■ Frequency -how fast the sound waves passes one single location
- Frequency is how often a sound happens - its rate of vibration. The degree of highness or lowness of the sound.
Duration – time the sound exists.

Range of Human Hearing

Human auditory range is generally from 20 Hz to 20 kHz (20,000Hz), with normal conversation between 1-4 kHz.
Beyond those ranges are inaudible sounds like ultrasound and infra-sound.

Converting Analog Sound to Digital Audio

Analog sound is a continuous phenomena. ■ Digitizing is the process of transforming continuous analog sound data into a discrete form (numbers) ▪ Sampling captures data readings at regular intervals. ■ Quantization assigns numerical values for the analog samples
The process of digitizing audio converts analog waves into digital representations

Analog-to-Digital Converter (ADC)

An electronic device turning analog signals in digital

Sampling Process

■ Sampling - a method to capture analog signals at regular intervals converting the waveforms into points in time.

Quantization

The assignment of numerical values to the sampled audio signal amplitudes.

Storing Audio in Files

■ Different applications generally use different formats for storing their audio files. ▪ WAV - high-quality but higher file sizes ▪ AIFF – Apple format - high quality

MP3 - compressed format - suitable for internet
Ogg Vorbis - open source codecs; for web
Real Audio (.ra.ram .rm) – used for streaming

Factors Affecting Digital Audio Quality

■ Sample Rate : A higher sampling rate results in better quality ■ Bit Depth/Resolution: higher sample resolution produces higher quality ▪ Channel Format - can be monophonic or stereophonic ■ Monophonic uses one channel (one speaker) to output sound ■ Stereo uses two channels (two speakers) to output sound

Audio Software Terms

Waveform: displays visual representation of the audio signals
Clip - A portion or segment of an audio signal. ■ Clip are often combined and arranged to form a track or channel
Track/Channel - a container that moves through audio information.

Audio Compression

Reduces file sizes of audio files ■Lossy codec: Compression results in some of the data being lost but not noticeable to the human ear. ■Example: MP3 ■ Lossless compression: Data is unchanged when decompression is done or processed. ▪ Example; WAV

MIDI (Musical Instrument Digital Interface)

■ A standardized communication protocol for music instruments ■ This standard allows to sequence audio events, notes, instruments, and their volume to produce music.

Audio File Formats

Different file types for storing audio data. ■ WAV, AIFF, MPEG-3 (MP3), and other codecs.

Streaming Audio

■ Allows audio data to be played quickly without needing to download the entire file first and is often delivered in real-time or near real time ■ The process is carried out using a buffer for storage that continuously adds the audio data from the internet, and the playback begins shortly after the request. ■ Reduced download times (useful) and better use of internet bandwidth (useful) ■ Audio quality varies based on the speed of your internet connection

Data Visualization: (D3.js)

D3.js – JavaScript based library for web page graphics
It is used for sophisticated and interactive data visualizations.
Has a highly-structured data model based on DOM to handle and present data information on a webpage, using data transformation and not new representation forms
D3.js uses methods to manipulate the DOM with the use of various methods, and for updating visuals when the data is changed.
Data, is bound to DOM elements to make Data-Driven Documents.
D3.js offers options for creating custom techniques for data visualization

D3.js Core Functions | Selections

d3.select() or selectAll() — Selecting elements in SVG or HTML based on CSS identifiers, attributes, or other criteria.
Using .data() to map data to elements for handling changes
enter() handles new data elements, when new data is added or removed.
update() handles changes to existing data elements
exit() handles elements that are no longer needed or are removed.

Mapping Data to Elements

■ D3.js uses data binding/mapping to attach data to the elements in your visualizations or layouts (using method data() ■ Data is represented through arrays or objects

Scales

Using D3 scales to render the data into visual spaces

Maps values from data spaces to visual spaces
Ordinal scales: map a discrete set of categories to a discrete range of values (e.g., map colors to categories) Quantitative scales: map continuous numerical values to a continuousrange of values, (e.g., map values in a large range to a small visualized range)

Lines (and Areas) Generators

■ Creates lines and regions (from data using calculated scalings)

Working with External Data

External data is used via functions such as d3.csv() to load data from CSV files or d3.json() for Json data
It is loaded asynchronously to make the process faster.
Extracted data can have functions like {filter, map, sort, ..} processed and manipulated

Data Persistence

Storing and retrieving data and data values ■ Cookies is one mechanism of storing and retrieving data and values

Workers and Messaging

■ Workers are JavaScript processes that run in the background- a separate thread to execute code, ■ They are used to handle computationally intensive tasks without freezing the main application.

Types of workers available: Dedicated Web Workers, Shared Web Worker, Service Workers.

Worker API

A Worker API object- contains properties and methods for interfacing and managing the workers as a WorkerGlobalScope.

Dedicated Worker Basics

The constructor of a dedicated Worker includes details regarding the file location and path to source the script.
Worker script files are limited to the origin/host the main page comes from

Web Games

Multiple elements or canvases can be embedded and dynamically managed
APIs are used (like the requestAnimationFrame API, to handle fast frame-rates and animations)

Progressive Web App (PWA)

Hybrid applications combining web app and native features ■ Installation possible- and use of the browser to render a PWA
Useful for developing more complex applications
It is not dependent on an App Store or native app marketplaces; it's delivered directly on the browser
manifest.json file contains information about the app, e.g., the name, the icon, and the starting URL

Testing PWAs

Using Lighthouse to check the quality of Progressive Web Applications (PWAs), helping to identify and fix any issues.

Common PWA Examples

■ Sites like Trivago, Pinterest, Twitter, OLX, Starbucks, and Forbes use PWAs

Applications with visually clear and functional content, and interactive functionalities.

How to Make a PWA

■ Design a responsive app using HTML, CSS, and JavaScript and any necessary APIs

Add a manifest file, defining the app details (name, appearance, behavior) ■ Use a Service worker to handle offline interactions and data persistence in the browser.
Using the browser, the functionality for the installation can be provided.

Digital Video Fundamentals

■ Analog video= continuous representation ■ Digital video=> sequence of images/frames ▪ Frame Rate (fps) - How often images are captured and reproduced to give the appearance of movement (higher for smoother motion) ■ Signals for Analog video: Component, Composite, and S-video ▪ Component Video - higher quality but more complex ▪ Composite Video - combining different signals into one

S-video - separates chrominance and luminance signals into different wires.

Digital Video Standards

Standards defining how digital video data can be stored or transmitted ■ Standard Definition, High Definition formats for displaying ■ Various encoding standards (like MPEG), are used.

The Term DV

DV is a common abbreviation for digital video
Some compression and format standards are described by DV

Standard Definition DV25 Format

Frame Aspect Ratio: 4:3, 16:9
Data Rate: 3.6 megabytes, 25 megabits
Audio Setting - can be 48 or 32 KHz with 16 or 12 bits.
Colour Sampling Method : YUV 4:1:1

High Definition

Video formats: HDV, DVCPRO HD, AVCH, AVC Intra
Different cameras use various formats, according to their specifications

Picture Format Notation

Example 1080/60i (1080 lines, 60 frames/sec interlaced)
Example 1080/60p (1080 lines, 60 frames/sec progressive)

Frame Size (Resolution) Comparison

Frame sizes for different standards and formats (720x480-NTSC standard, 1280x720, 1920x1080, etc)

Frame Aspect Ratio Example

4:3 (e.g., older standard definition TV)
16:9 (e.g., more modern high definition TV and video display standards)

Pixel Aspect Ratio

■ Proportion of a pixels width relative to its height

Digital video quality

Digital video quality depends on frame rate, spatial resolution (number of pixels) and chrominance resolution (number of colours in the image), and quality of individual frames.

Accessing Video Sequence

Accessing individual frames in a sequence of an image
Time Code and Frame Code give an index and time reference to the different frames of a video (analog or digital)

Digital Television (DTV) Standard

Broadcasting of digital TV content in standard/high definition, which can be played using different formats
Common aspect ratios: 4:3 or 16:9
The different digital video standards can have either progressive or interlaced scans.

Common Video File Types

Various file types (.mov, .avi, .mpg, .mpeg, .divx) used for storing different types of video files
Associated codecs (compression methods) used for each file type

Web Audio API

Features: controls audio on web, by adding effects; panning, creating visualizations and more.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on various graphic formats such as EPS and SVG. This quiz covers definitions, characteristics, and uses of these formats in the context of geospatial vector data. Challenge yourself and see how well you understand graphic content representation!

Graphic Formats Quiz

Choose a study mode

Podcast

Questions and Answers

Which of the following describes EPS?

Scalable Vector Graphics can be used only for static graphics.

What does SHP stand for in geospatial vector data formats?

Scalable Vector Graphics (SVG) uses __________ to represent graphic content.

Match the following graphic format with their characteristics:

Which method is used to add a child node to a parent node?

DOM Event Flow consists of four phases.

What is the purpose of the preventDefault() method in event handling?

The method used to insert a node before another node is called ______.

Match the following event types with their corresponding description:

Which of the following is NOT a property of the keyboard event parameters?

What advantage does addEventListener() provide over traditional event handler assignments?

What is the primary purpose of zigzag scanning in JPEG compression?

The default mode of JPEG is Progressive.

What does RLE stand for in JPEG compression?

DC components are encoded using __________ coding.

Which algorithm involves sending low-frequency DCT coefficients first?

Run Length Encoding (RLE) is applied to DC components in JPEG compression.

List one benefit of using Progressive JPEG.

Match the following JPEG modes with their descriptions:

The algorithm that sends all DCT coefficients but with lower precision is called the __________ approximation algorithm.

What coding is used to encode the difference between the current block and the previous block in JPEG compression?

Which method is used to draw a filled rectangle?

The moveTo(x,y) function is used to draw a line to a specified coordinate.

What property is used to set the color for filling text in the canvas?

To draw a Bézier curve, the method used is _______.

Match the following drawing functions with their descriptions:

Which function closes the current drawing path?

The shadowOffsetY property determines the horizontal distance of the shadow from the shape.

What method is used to draw an outline around a rectangle?

The _______ function is used to change the current position in the canvas context.

Which animation technique allows for real-time interactivity?

Motion capture animation is generally slower to produce than keyframing.

What is the most important principle of the '12 Laws' of animation?

In keyframe animation, the _____ fills the gaps between keyframes.

Match the animation techniques with their descriptions:

Which animation technique is most effective for creating realistic natural phenomena?

Colour change is a fundamental aspect of motion capture animation.

What are '12 Laws' in animation meant to ensure?

Procedural animation is based on a set of _____ that dictate how motion is generated.

What does the term 'spline interpolation' refer to in animation?

Study Notes

JavaScript Basics

JavaScript Capabilities

Deploying JavaScript in HTML

JavaScript - Overview & Definitions

JavaScript Primitive Types

JavaScript Variables & Constants

JavaScript Strings

String Methods

JavaScript Booleans

JavaScript Null & Undefined

Arrays

JavaScript Objects

Error Objects

Conditionals and Loops

JS Operators and Expressions

Comparing Objects

Declaring and Using Functions

Creating Custom Objects

Prototypes

Debugging in Javascript

Asynchronous JavaScript

Asynchronous Javascript: Common Methods

I. Synchronous Programming with Callback

Events

Timers

Network Events

JavaScript Implementations

The Window Object

The Location Object

The Navigator Object

The Screen Object

DOM Document Object Model

Retrieving a DOM Node

Accessing DOM Node's Attributes