JavaScript Basics Quiz

JavaScript Language - The Basics

• HTML & CSS are used for static web content
• JavaScript allows for dynamic web content that changes based on user input
• Web browsers have an engine to generate dynamic content using JavaScript
• JavaScript can be used to:
  • Interact with HTML and CSS content of a document and respond to events
  • Use standard JavaScript APIs defined in W3C standard
  • Use numerous APIs in addition to DOM and selector APIs (multimedia, drawing, animation, geolocation, webcam, etc)
  • Work with remote data from a remote HTTP web server

Deploying JavaScript in HTML

• Include JavaScript in HTML files (external script using <script> element with src attribute)
• External scripts can be located on a web server
• Embedded scripts can be included in HTML documents using <script> tags within HTML
• A browser console (like Chrome’s REPL– read evaluate print loop) can be used to evaluate JavaScript code
• JavaScript files (*.js) can be run in a runtime environment such as Node.js.
• <noscript> tags are useful for situations where scripts cannot or have been disabled.

JavaScript - Overview & Definitions

• Derived from the ECMAScript standard
• Originally designed to run on Netscape Navigator
• Not related to Java
• A JavaScript interpreter is embedded in web browsers to add dynamic behavior to static web content
• Scripts can run when HTML documents load, accompany forms to process input, be triggered by events, and dynamically create multimedia resources.
• JavaScript types are divided into primitive types and object types

JavaScript Primitive Types

• Numbers (5, 1.24, 1.1e5) are stored using floating-point notation. Includes Infinity, -Infinity, and NaN (Not a Number).
• Strings ("Hello")
• Booleans (true, false)
• Null (null)
• Undefined (undefined)
• Boolean, if, delete, var, function, etc. are reserved words in JavaScript.
• Primitive data types do not have associated methods or behaviors.
• Some primitive types have wrapper objects (Boolean, Number, String).

JavaScript Variables & Constants

• Variables can begin with "$", "_", "a"–"z", or "A"–"Z".
• A variable can hold a number, string, or Boolean.
• Variables have global and block scopes.
• var keyword is for declaring local variables or objects (var keyword omitted declares global variables).
• typeof operator is useful for knowing the type of a variable depending on its value.
• The new keyword is used to create instances of wrapper objects

JavaScript Strings

• JavaScript strings are series of 16-bit unsigned integers representing characters.
• Escape characters use a backslash (\).
• Strings are immutable - manipulation results in a new string.
• String methods can be used for string manipulation (e.g., indexOf(), substring()).

String Methods

• indexOf(): Searches for a substring, returning its position or -1 if not found.
• substring(): Extracts a substring from a given starting index to an ending index (exclusive)

JavaScript Booleans

• Any value can be used as a Boolean in JavaScript when used in logical operators.
• Falsy values: null, undefined, 0, NaN, ""
• Truthy values: "true", 6...

JavaScript Null & Undefined

• Null: a value that can be assigned to represent "no value".
• Undefined: a variable was declared but no value has been assigned.

Arrays

• Arrays may be declared using array literal notation (e.g., [1, 2, 3]) or using array constructor notation (e.g., new Array(1, 2, 3)).
• Arrays are zero-indexed. Array indices are used to access array elements.
• Arrays grow dynamically by adding elements using push().
• Elements can be removed using pop().

Array Indices

• Use a zero-based indexing scheme.
• length property = largest integer index in the array.
• arrayVar[index] adds an element at that index if index >= arrayVar.length.
• Creating a mapping from the index to the element if index < 0.

Objects

• JavaScript objects store key-value pairs.
• Access values using myobject.property or myobject['property'].
• Key-value pairs can be added after initial declaration.

Error Objects

• Error objects are created when an exception is thrown.
• Properties contain information about the error (e.g., Message, Name).
• Custom error objects can be made (e.g., throw new Error("Only positive values are permitted")).

Conditionals and Loops

• if statement for conditional execution.
• else statement for alternative execution.
• for loop for repeating execution.
• while loop for repetitive execution.
• JavaScript first tries to convert strings to numbers.

JS Operators and Expressions

• Unary operators: typeof, ++, -- (opposite of a number)
• Binary operators: +, -, /, *, % (modulo)
• Concatenation operators: +, +=
• === operator compares both type and value (strict equality)

Comparing Objects

• Objects are only equal if the variables are aliases (refer to the same object).

Declaring and Using Functions

• Functions use the function keyword.
• Functions can have parameters in parentheses.
• Functions often return a value using the return statement.
• Default return value is undefined.
• Functions can also be declared as expressions that can be stored in variables (rez = functionName(parameters)).

Creating Custom Objects

• The new keyword creates objects.

Prototypes

• Object instances inherit properties and methods from their prototype.
• Prototypes of built-in objects exist.
• Scripts can add or override custom properties and methods to the prototype, which applies to current working instances.
• Modifying an object’s prototype alters its associated template (how it behaves in future instances).

Debugging JavaScript

• Write messages in the browser's developer console.
• Use functions such as addXToThePage() within the Web page to display messages in the browser console.

Asynchronous JavaScript (1)

• JavaScript programs in a browser are typically event-driven.
• Asynchronous means that your function does not block any other tasks or functions, but rather it runs concurrently.

Asynchronous JavaScript (2)

• No fundamental features in JavaScript are asynchronous by default.
• JavaScript provides powerful tools for working with asynchronous operations. Tools include promises, async/await, and for/await

Asynchronous JavaScript – Common Methods

• Using Callbacks;
• Using Promises;
• Using async and await;
• Using Asynchronous Iteration.

Asynchronous Programming with Callbacks

• Derived from functional programming.
• Used for adding interactivity to HTML.
• Functions (callback) are passed to other functions containing logic that execute that callback function when a particular condition is met.
• May include arguments based on a condition or event.
• Common callback-based asynchronous programming includes events, timers, and network events (such as XMLHttpRequest class).

DOM Events & Event Flow

• Events result from user actions or from the browser.
• Event handlers are functions that execute when an event occurs,
• They are named with on prefix (e.g., onclick or onchange)
• Event flow involves capturing, target, and bubbling phase (ordering of how events are handled).

DOM Source Events

• How to access and use events from the source element
• General events (target, type, preventDefault())
• Keyboard events (key, keyCode, altKey, ctrlKey, shiftKey)
• Mouse events (pageX, pageY, button, altKey, ctrlKey, shiftKey)
• Standard events (e.g., load, DOMContentLoaded, keydown, keypress, keyup, mouse events)

Assigning DOM Event Handlers

• Handling events through HTML attribute notation. Example: <element EventAttribute=FunctionName()></element>.
• Defining event handlers within JavaScript, using the property approach.
• Example: btn.onclick = function(){}
• Handling multiple event handlers via addEventListener() and removeEventListener().
• Example: element.addEventListener(‘type’, function, phase).

Intrinsic Events in Web App

• Intrinsic events are those that are implemented directly as methods of the element

Colours - Colour Models

• Colour models in computer graphic programs for defining colours used by computer. The specific method of defining how colours should function is determined by the particular software used.

Properties of Light

• Light is a narrow band of the electromagnetic spectrum.
• The electromagnetic spectrum includes various types from gamma rays to radio waves.
• Red light has a frequency of around 3.8x1014 Hz; Violet is from 7.9x1014 Hz.
• The spectrum of light source describes the distribution of light intensities according to wavelengths. It refers to how the light is related or transmitted and the colour produced.

Colour Fundamentals

• Luminance: measures the strength of light in a particular colour.
• Hue: refers to the nuance (red, green, blue) and the basic colour
• Saturation: is the intensity or purity of colour
• Brightness: a psychological measure of the perceived intensity; the relative degree of black mixed in with a particular hue.

Humans Only Perceive Relative Brightness

• Humans perceive brightness according to the relative amount of blackness mixed in the image.

Colour Properties

• Psychological colours characteristics: ■ Dominant frequency (hue, colour), ■ Brightness = total light energy ■ Purity (saturation)
• Chromaticity – collectively refers to purity and dominant frequency.
• Colours can be created by artificial or natural light
• Chemical pigments may be used to produce or change colours
• Shades, tints and tones ■ Intuitively color concepts– Shades, tints and tones (using white and black to modify hues)

Colour Systems

• Additive (RGB) - Used for devices that emit light (TV sets, monitors, projectors, lighted displays, cameras, scanners)
• Subtractive (CMYK) used for devices that absorb light (prints, paper-based, and stained glass)
• The addition of colors in RGB can produce white; in CMYK it is black.

Complementary Colours

• Additive complementary colours ▪ Blue is one-third of the red, green, and a bit of blue. ▪ Yellow is two-thirds red, and green, with a bit of blue.
• Subtractive complementary colours ■ Orange is between red and yellow ■■ Green-cyan <=> magenta-red

Colour Models

• Method for explaining behaviour or properties of colours in particular contexts
• Combining light sources with different dominant frequencies produces new colours with varying intensities.
• Different types of colour systems use different sets of colours that are essential for applications such as printers.
• Different applications (e.g. graphic design programs) have different types of colour gamut, based on available primary colours.
• Colour space describes the range of different colours that can be produced using a particular method.

RGB Colour Model

• The tristimulus theory of vision states that human eyes perceive colour through the stimulation of red, green and blue cone cells of the retina.
• The RGB colour model can be visually represented by a unit cube.

RGB Colour Model (cont.)

• The 3 primary colours – red, green, and blue – are used to generate colours on monitors.
• An increase in intensity of each primary colour results in a wide range of different colours.

RGB Colour Model (cont.)

• Using 8 bits per channel allows for a range of colours (from 0-255) for each colour component (red, green, and blue); to produce a total number of 2563 =16.77 million colours
• Pixel values are defined by intensities (0 to 255) for red, green, and blue.

CMYK Colour Model

• Cyan, Magenta, Yellow, Black
• Used in printing
• A subtractive color model
• Colour is produced by mixing the primary colours cyan, magenta, and yellow with black pigment.
• Printing pictures using colours is based on the reflectance of light by pigments (subtractive process).

CMYK Colour Model (cont.)

• Black Pigment was introduced to reduce drying time of inks.
• Spot colours can be fluorescent inks or lacquered colours.
• CMYK model-used by various devices (and often results in images with a different color-representation-when compared to an RGB image)

CMYK Colour Model (cont.)

• Transformations between RGB and CMY color spaces use mathematical matrices.
• RGB to CMY transformations include matrices and are used to reproduce colors from an RGB image to a CMY image.

HSB Colour Model

• Hue, Saturation, Brightness (also known as HSV) and HSL (Hue, Saturation, and Lightness); are
• Cylindrical-coordinate representations of colours. Used for better intuitive understanding (as opposed to RGB) and to be perceptually relevant
• Useful in programs where users interact directly with defining colours (e.g programs for graphic design)

HSB Colour Model (cont.)

• Hue: measured as the colour location on the colour wheel (0° - 360°);
• Saturation: the intensity or purity of a colour. Measured as a percentage from 0% to 100%.
• Brightness: the lightness or darkness of a colour. Measured as a percentage from 0% (black) to 100% (white).

HSB Colour Model

• Hue - the most notable quality of a colour
• Saturation - high saturation means rich and full color; low means dull, grayish
• Brightness - lightness vs darkness; tints and shades are related terms for lightness and darkness of colours.

HSB Colour Model (cont.)

• HSB is useful for selection of colors in programs that involve user interaction.
• It is based on intuitive ideas rather than sets of primary colours
• It is derived from relating HSB parameters to the direction of the RGB cube.

Transformation RGB->HSB

• Method for transforming RGB color space to HSB color space. The transformation is non-linear, and uses minimum and maximum values for transformations.

HLS Colour Model

• hue, lightness, saturation
• another color space model that uses cylindrical-coordinate representation of colours. Provides intuitive and perceptually relevant color definitions.

YIQ and Related Colour Models

• YIQ-used in the NTSC analog video signal
• Y - luminance
• I and Q - chrominance (hue and saturation)
• YIQ format converts a RGB color image into a new representation to allow older analog TV's to represent the image.

YIQ and Related Colour Models (cont.)

• Matrices can be used to convert between RGB and YIQ colour spaces.

Lab Colour Model

• Uses human colour perception to define colours.
• Includes luminance (L; 0-100), and two color components: green-red (a) and blue-yellow (b).
• Device-independent model, showing color as it appears, rather than how it is created (e.g. additive or subtractive).

Grayscale Colour Model

• A grayscale model generates only shades of gray (from black to white)
• An image consisting entirely of shades of grey has a fixed number of shades determined by the bit depth per pixel.

Comparison

• Compare types of colour systems from different images in terms of properties.

Colour Selection and Applications

• Graphic packages for color selection usually include tools such as sliders and color wheels.
• Guidelines for color design may involve considerations such as colour pairs that may result in eye fatigue.

CSS Colour Property

• CSS (Cascading Style Sheets) syntax can specify colors in multiple ways.
• Options include named colors (red or green), hexadecimal values (#RRGGBB or #RGB), RGB values (rgb(R, G, B)), and HSL values (hsl(h, s, l)).
• Packages and tools often offer visual representations or utilities to aid in selection.

Colour Wheel

• Circular visual representation of colours using a chromatic relationship.
• Used to represent and visualize colour relationships in graphic design.
• Primary colours include red, yellow and blue.
• Secondary colours include a combination of two primary colours (e.g. red and yellow result in orange)
• Tertiary colours result from a mix of primary and secondary colours

Colour Conversion

• The need to convert colours in graphic design or presentation tools (e.g. converting from RGB to grayscale or CMYK).
• The process often involves some data loss in quality of color details.

Canvas Element

• HTML5 feature that provides a 2-D bitmap canvas for graphics or animation.
• Used for rendering different types of shapes (lines, rectangles, ellipses, arcs, curves) and visual effects
• Functions for drawing operations (drawImage(), getImageData(), putImageData())
• Several drawing styles that can be manipulated (colour, drawing width, shadows, alpha channel and advanced drawing modes)

Drawing Principles

• Graphic Operations in HTML5 use a graphic context that controls shape, text, and image properties.
• Drawing operations can be grouped for efficient optimization (path mode vs. immediate mode) when performing drawing on the canvas.
• The Graphic Processing Unit (GPU) of graphics hardware can handle processing for functions that allow parallelism
• Buffers can be created, filled, drawn and altered using canvas element API.

Drawing with Canvas Elements

• Using the Canvas 2D Context API (http://www.w3.org/TR/2dcontext2) to configure the canvas element.
• Use methods to get the graphical context element reference (id of canvas to obtain element)

Summary of Path Mode Principles

• Path mode drawing groups drawing operations into a buffer for efficient processing (e.g. drawing multiple figures at once).

Dynamically Processing Shapes

• Direct drawing involves rendering shapes directly on the canvas using functions (like fillRect(), strokeRect(), clearRect());
• Drawing using path involves creating a path using a sequence of functions; followed by using functions (like fill() or stroke()) to draw operations on the path.

Drawing and Moving Functions

• moveTo(x, y): Changes the current drawing position.
• lineTo(x, y): Draws a line.
• rect(x, y, w, h): Draws a filled rectangle.
• arc(x, y, radius, startAngle, endAngle, anticlockwise): Adds an arc
• arcTo(xctrl, yctrl, xPos, yPos, radius):
• quadraticCurveTo(cp1x, cp1y, epx, epy): Adds a quadratic curve.
• bezierCurveTo(cp1x,cp1y,cp2x, cp2y, epx, epy): Adds a Bézier curve

Drawing Text

• fillText(text, x, y): Draws filled text
• strokeText(text, x, y) draws an outline of text
• font property describes text size and font
• shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor for effects.

Canvas Attributes

• fillStyle / strokeStyle : colour used for drawing
• lineWidth: thickness of lines.
• lineCap: style of line endings (butt, round, square)
• lineJoin: style of line corners (bevel, round, miter)
• font: text size and font.
• textAlign: text position relative to the x-coordinate (left, right, center)
• textBaseline: text position relative to the y-coordinate (top, hanging, middle, alphabetic, bottom).
• save() / restore(): saving and restoring contexts.

Drawing Bézier Curves

• Bézier curves are smooth curves that are determined by a sequence of points.
• D3JS supports drawing Bézier curves of various orders (quadratic (one control point), cubic (2 control points)) using functions.

2D Transformations - Canvas

• translate(x, y) - translates (moves) the coordinate system.
• rotate(angle) - rotates the coordinate system.
• scale(x, y) - scales the coordinate system.
• Transformations affect all elements drawn after the transform method is called.

2D Transformations

• translation: Moves the origin (0, 0) of the coordinate space
• rotation: Rotates the coordinate space by a given angle
• scale: Scales the coordinate space by a given factor

rotation

• Rotation-Rotates the coordinate system. It is defined by the angle and the center of rotation.

Scaling/Zoom

• scale(x-factor, y-factor) scales the drawing canvas by a ratio

Drawing Images

• Motivation: Using images together with 2D drawing functions.
• Image data can be obtained using getImageData() to then work with the pixels of the image, or putImageData() to place the data into a canvas. Note: getImageData() requires a web server in some cases for security reasons.

ImageData Interface

• ImageData objects are used for representing rectangular areas of a canvas. The parameters provided define the area of interest in the canvas (using coordinates).
• ImageData functions use pixel coordinates (and sizes)

Drawing, Resizing and Cropping Images

• drawImage(imageData, x, y) : draws an existing image at the given coordinates
• drawImage(image, x, y, width, height) draws, and scales the image
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) : draws an area of an image

Accessing Pixel Values

• getImageData(x, y, width, height) extracts pixels from a canvas.

Animation

• Computer animation involves creating illusions of movement using technology.
• Includes 2D and 3D animation.
• 2D animators utilize bitmap graphics to generate/edit images.
• 3D animators utilize geometric/multimedia primitives to model and manipulate objects to generate images.

Animation Functions

• Animation is used to provide wonder or surprise
• animation is useful to represent things more easily and effectively
• animation is used to provide entertainment

Animation Techniques

• Keyframe animation
• Motion capture animation
• Procedural animation
• Color change animation
• Show/hide/toggle animation

Keyframe Animation

• Keyframes are used in animation as a sort of checkpoints (images) that help determine how transitions should occur between frames.
• Several methods of interpolation exist to transform between keyframes and provide smooth transition.

Motion Capture Animation

• capturing movements and using the data for animation
• Capture movements in 3D space to represent the movement of a character
• More realistic than other types of animation; secondary movements can also be captured to produce more realistic animation

Procedural Animation

• Animation based on set of rules and initial conditions
• Used in natural phenomena simulations

The 12 Basic Principles of Animation

• Set of rules to achieve consistent and beautiful animation.
• Several rules for techniques in animation (e.g., Squash and Stretch, Anticipation, Staging)

Squash and Stretch

• used to impart that objects such as living things have a sense of weight and flexibility to drawn objects
• it involves emphasizing motion/impact by exaggerating the deformations of an object as if it were a pliable material
• it must be remembered that although objects may distort like rubber, the volume of the object must be retained throughout the operation.

Anticipation

• A technique that prepares an audience for action, and helps make an action seem more natural

Staging

• A technique to focus attention and enhance understanding of a scene using camera viewpoint, framing and character positioning

Straight Ahead Action & Pose to Pose Animation

• Straight Ahead: Draws frames in sequence to create spontaneous motion
• Pose to Pose: Creates strong poses (keyframes) first, and then adds in-between frames.

Follow Through & Overlapping Action

• Follow Through: parts of an object continue to move after the main action has ended to impart a sense of weight & flexibility to animations
• Overlapping Actions: involves motion occurring simultaneously with the main action

Slow In & Slow Out

• Slow in / slow out or ease in / ease out: used to create a more natural or realistic feel to animations.
• It involves starting and finishing an action slowly to enhance how the motion appears.

Arc

• Arc motion creates a more natural motion in animation.
• The motion follows a curved or arc-like path.

Secondary Action

• secondary actions are minor actions or movements that enhance the main action
• it is not independent of the primary action, but rather a result or an enhancement

Timing

• Timing refers to the speed and duration of an action in animation.
• The timing of an action will contribute to emotional response & impact.

Exaggeration

• Exaggeration: ■used to enhance and increase the clarity of emotions and actions, ■ often used for exaggerated characteristics or poses

Solid Drawing

• Solid drawing: ■ Used to generate animated characters with weight, character, and emotion, ■ Involves proper drawing of characters ■ Often used for generating images or objects with greater sense of depth, balance, and realism

Appeal

• The appeal is what makes a character sympathetic to an audience (e.g. through flaws and unique characteristics).
• It's what makes the animation appealing (and often relatable).

CSS Animation

• Uses the @keyframes rule for defining animations.
• animation-name, duration, delay, iteration-count, direction, timing-function, fill-mode

Animations Using JavaScript

• Procedural animation is used to improve the animation of single objects.

Procedural Animation - One Animated Object

• Using setInterval to implement animation based on changes in HTML or CSS to animate objects

Procedural Animation – Several Simultaneous Animations

• Uses requestAnimationFrame() for multiple, simultaneous animations that are smoother than setInterval-based animations. It is more efficient in terms of CPU and memory usage.

Procedural Animation (cont.)

• Animation functions (e.g. animate) can use parameters for defining the duration of the animation, the calculation for the timing (using a function) and what should be drawn in different stages of the simulation.

Asynchronous JavaScript (2)

• JavaScript programs in a web browser are usually event-driven
• JavaScript-based servers typically wait on incoming client requests.
• Fundamental JavaScript commands are not usually asynchronous. However, promises, async/await, and for/await allow asynchronous operations to occur in JavaScript.

Asynchronous JavaScript – Common Methods

• Using Callbacks
• Using Promises
• Using async and await
• Using Asynchronous Itertaion

Asynchronous Programming with Callbacks

• Derived from functional programming
• Used to add interactivity in HTML
• Function (callback) gets passed to another function and then executes afterward
• Common: events, timers, external network events

Events and Event Handlers

• Listener determine if an element should act on an event
• Handler is a function that executes when the event occurs

JavaScript Timing Events / Timers

• Used to run some code after a certain amount of time has elapsed.
• The window object lets calls occur at specified time intervals that are often used to perform timing events.

Promises

• A Promise object is a representation of an asynchronous computation.
• A callback function returns when a Promise value is ready.

Promises Based Fetch API

• A promise-based API.
• The fetch() API allows for processing, error handling, and asynchronous tasks in a chain using .then()and .catch().

Drag-and-Drop API

• Drag & drop operations across windows and applications
• It relies on DOM (document object model) for data
• A dataTransferobject is part of the event, and is used to handle string data and MIME data type.

Draggability

• Images, links and text are often pre-configured and draggable.

Fundamentals of Digital Audio

• Sound's importance in multimedia
• Types of sound in the context of multimedia

Sound Fundamentals

• Sound is created by vibration of matter.
• Involves a sound source, transmitting medium and a receiver.
• Sounds can be classified as periodic wave formats (e.g. musical instruments) and noise (e.g. random sounds).
• Characterized by frequency and amplitude.

Sound Wave Charactersitics

Frequency; Amplitude

Range of Human Hearing

Anatomy of a Sound Wave

Converting Analog Sound to Digital Audio

• Analog sound is continuous (e.g. microphone signal).
• Converting it to digital sound requires conversion and digitization (sampling & quantization).

Phases of Analog Audio Digitizing Process

• Input: Acquiring analog signal.
• Anti-aliasing: Filters high frequencies before sampling
• Sampling: capturing the signal at regular intervals
• Quantization: Rounding or allocating samples numeric values in the code
• Storage/Transmission: Storing the digital data.

Analog to Digital Converter (ADC)

• Converts analogue signals to digital signals
• Analog signals have continuous values
• digital signals have discrete values

Sampling Process

• Sampling involves extracting samples at a constant frequency from a continuous analog signal

Digital Sampling Frequency

• Specifies a rate for sampling of a continuous analog signal

Quantization

• Used to assign numbers to amplitude, based on available numeric values in the code.
• Determines the quality resolution

Storing Audio in Files

• WAV (.wav): For storing uncompressed audio of high quality (lossless).
• AIFF (.aiff): For storing high quality (lossless) audio.
• MP3 (.mp3): Uses MPEG layer 3 codec, good for web and is efficient for storing audio.
• Ogg vorbis (.ogg): An open source format well suited for web and often used for gaming.
• Real Audio (.ram): a format well suited for streaming in real-time (requires special player)

Factors Affecting Digital Audio Quality

• Sample Rate (frequency of sampling),
• Bit Rate (or Bit Depth); (vertical resolution and describes how many bits are used to describe a sample)
• Channel (number of sound channels: e.g. mono/stereo)
• Sample size

Sample Size

• Number of bits (8 bit, 16 bit or 24 bit) per sample
• Used for audio data; greater sample size results in higher quality

Audio Software Terms

• Waveform – a graph representing the analog signal.
• Clip – a small piece of audio
• Track/Channel – an area that plays audio content

Audio Software Terms (Cont.)

• Channel – refers to mono (single audio channel used for reproduction) or stereo (two channels)

Sound Compression

• Reducing audio file size.
• Lossy and lossless codecs used for different purposes (e.g mp3 is lossy; used for web), while other codecs (such as WAV) are lossless

MIDI (Musical Instrument Digital Interface)

• MIDI is a standard that allows music instruments to connect, and transfer commands to each other; these include notes, volumes and instruments, rather than transmitting sound data.
• MIDI files have smaller file size.
• MIDI files are not capable of storing natural sounds.

MIDI Audio File

• MIDI files: contain sequenced commands
• These include commands like note, instrument and volume as a form of coded instructions for a device

Audio File Formats

• Wave files (.wav) are relatively uncompressed
• MPEG Layer-3 files (.mp3) are compressed, reducing file size.
• Other formats include formats like ogg and wma for more specialized settings and reduced file sizes

Audio File Formats (cont)

• WAV – a common, uncompressed audio format commonly used in programs such as Adobe Audition, and used on Windows PCs.
• MP3 - a popular, compressed audio file format; reduces file size when compared to .wav files but the quality will be reduced.
• Real Audio (.ra, .ram, .rm) – Proprietary format that is suitable for streaming audio over a network in real-time.

Streaming Audio

• Streaming audio occurs by sending data continuously to the client so that there is instant access and playback,
• it avoids the problem of long downloads and waiting for entire files of data before being able to listen

What is Streaming?

• Streaming involves sending data to a user continuously with data being stored in a buffer
• The buffer usually stores the current data being viewed by the user, as well as other data that are near the current point being viewed.

Data Visualization - An Introduction

• Data visualization involves converting data into visual representations to improve and ease the understanding of the data
• D3.js – a JavaScript-based framework for handling and performing complex tasks/operations related to data visualization. The framework offers a rich set of functions and can be used for generating interactive visualizations.

D3.js Overview

• A JavaScript framework for handling sophisticated data visualization tasks
• It is data driven, rather than generating new data representation, and provides high interactivity
• It provides a set of functions for managing DOM (document object model), to build, construct and update the view in response to changes in data

Why do we use D3?

• D3 uses existing web standards
• it is future-proofed for use with existing web tools
• Has a lower entry barrier because data is easily manipulated using familiar web tools and functions

Data Visualization with D3.js

• D3.js facilitates data visualizations, ranging (e.g.) from basic charts, hierarchical layouts, networks to maps.

Core Functions | Selections

• Selections are an atomic unit in D3 to select elements based on criteria (e.g. CSS classes, IDs, etc.)
• Selections can be used to alter elements via attributes, properties and styles.

Core Functions | Selections

• D3 selections have 3 categories of information (styles, attributes, properties) that influence behaviour/appearance of elements

Core Functions | Selection.append

• D3 provides append functions to add new elements to the DOM

Mapping data to elements

• Data in array/object formats can be mapped.
• Useful for generating dynamic visuals in response to data changes (e.g. enter, update, or exit).

Thinking with Data-Elements Joins

• .enter(): used to figure out what has changed in the dataset
• .update(): assigns data items to visual elements
• .exit(): deletes items that are no longer displayed in datasets.

A D3 example

• Example code illustrating use of D3 methods to create/manipulate/alter circle elements. D3 methods operate on selections to compute joins (e.g. enter, update, and exit) to produce results.

Working with external data

• D3 uses asynchronous methods to work with external data
• This involves using the .csv() and .json functions in asynchronous processes.

Scales

• Scales are used to map data to visual elements.
• Different types of scales (Ordinal scale maps a discrete domain to a discrete range)
• Quantitative scale maps a continuous domain to a continuous range (e.g. d3.scaleLinear())

Ordinal scales

• Used to map a discrete range (e.g. a list of strings) to a discrete set of values. Often, this is used to give visual representation in a data visualization, rather than numeric values

Quantitative scales

• Scales that map continuous numerical values to a continuous visual range.
• Useful for numerical data (e.g. d3.scaleLinear(), d3.scaleSqrt(), d3.scaleLog())

Line (and Area) Generators

• Used to create lines or shapes

Further Samples

• Includes links/references to other sources with D3.js examples and sample code. 

Data Persistence

• Persisting information on a web application.

Persisting Information with Cookies

• How cookies are used to track user information
• Cookies are tied to particular domains and cannot be accessed by other domains.

Workers and Messaging

• The need for thread based processing.

Worker's Purpose

• Workers provide a way to run concurrent tasks outside the main browser thread.
• A WorkerGlobalScope global object object exists along with the self keyword in workers.

When to create Workers?

• Use Worker when working with computationally intensive tasks or in applications where responsiveness is required. Avoid use of Worker for trivial, non-intensive tasks.

Types of Workers

• Dedicated Workers,
• Shared Workers, and
• Service Workers

Worker API

• Worker object: how workers are created and access the environment from JavaScript
• WorkerGlobalScope: is the global object for a JavaScript Worker; it resembles the window object in a typical JavaScript environment but has more limited properties.
• self keyword can be used in place of window.

Worker Object — Properties & Methods

• onerror: Assigns an event handler, and receives error events
• onmessage: Assigns an event handler, and receives message or other types of events

WorkerGlobalScope Properties & Methods

• Various properties and methods are available (e.g., navigator, location, `performance