1

Taif University

Faculty Of Computers And Information

Technology

TA. Kholood Alharthi & TA. Maha Thafar

First Semester 1433 -1434 AH

Lab LecturesElective Topic(1)Multimedia

Lect#1

2

Objectives

In this Lecture:

Introduction To Multimedia: The term ‘Multimedia’. Media Components. Multimedia Systems. Multimedia Applications. The tools to create Multimedia Applications.

Getting Started With Processing: What is Processing? Processing Output. The Processing Development Environment. First Processing Sketch.

References.

3

Composed of 2 parts:

1) Multi - many; much; multiple

2) Media (medium): “middle, center ”

Means for distribution and presentation of information

Classification based on perception (text, audio, video,….etc)

is appropriate for defining multimedia.

The term ‘Multimedia’

4

The term “Media”

Can be categorized based on a few criteria:

Perception media Representation media Presentation media Storage media Transmission media

5

What is Multimedia?

Any computer based presentation or application that integrates different forms of media together

Multimedia can be further classified as Interactive

Non-interactive

Time always takes separate dimension in the media representation Based on time-dimension in the representation space, media can be

Time-independent (Discrete) e.g. Text, Graphics Time dependent (Continuous) e.g. Audio, Video

6

Media components

multimedia defined as the usage of multiple agents, this agents (components) as the following:

Text.

Graphics.

Audio.

Animations.

Video.

Links.

Virtual Reality (VR).

7

Multimedia Systems

The dictionary definitions: Multimedia system is any system that supports more than a single kind of media

The correct definitions:Multimedia system is characterized by computer-controlled, integrated production, manipulation, storage and communication of independent information, which is encoded at least through a continuous (time-dependent) and a discrete (time-independent) medium.

8

Multimedia Applications

Multimedia plays major role in

following areas:Business

Training materials Presentations Customer support services Virtual Shopping

Entertainment Interactive Games

Enabling Technology Websites Training/Teaching/ Learning

9

>Multimedia Applications

In Medicine

In training

VR

10

The Tools necessary to create a Multimedia Application

I. Hardware: Graphics card

Scanner Digital Camera Keyboard Mouse Sound Card:

Voice Reader Loudspeaker

Storage tools with large Capacity: CD-ROM DVD

11

The Tools necessary to create a Multimedia Application

II. Software:

A software which can include: Text Sound Animation Graphics Video images/clips

There are 2 types of tools that can be used to create multimedia applications:

Authoring tools: are generally quicker to learn and can be used by non-programmers but may have limited flexibility, for example macromedia flash

Programming tools: are more difficult to use and require good programming knowledge but can be much more flexible, for example HTML programming language, Processing programming language.

12

What is Processing ?

Open Source Programming Language.

Integrated Development Environment(IDE).

Java-like

Processing is based on Java but the conceptual model (how programs work, how interfaces are built, and how files are handled) is somewhat different from Java. “sketch” ideas in code .

for people who want to create images, animations, and interactions.

Today, there are 10,000 of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production .Originally developed at the MIT Media Lab , 2001 . developed into a tool for creating finished professional work as well (electronic arts and visual design).

13

So what is Processing Output ?

Graphics application .

Live video Application.

Mobile Application .

Visual Designs .

Electronic arts.

Animation .

17

The Processing Development Environment

A Processing program is called a sketch . Sketches are stored in the sketchbook, a folder that's used as the default location for saving all of your projects in .pde format.

18

The Processing Development Environment

TASK ICON

Run

Stop

New

Open

Save

Export

19

First Processing Sketch

Hello world

The Processing equivalent of a "Hello World" program is simply to draw a line :

line(15, 25, 70, 90) ;

Hello mouse

A program written as a list of statements (like the previous examples) is called a static sketch. In a static sketch, a series of functions are used to perform tasks or create a single image without any animation or interaction. Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below. These are built-in functions that are called automatically.

First Processing Sketch

20

This program creates a window that is 480 pixels wide and 120 pixels high, and then starts drawing white circles at the position of the mouse. When the mouse button is pressed, the circle color changes to black.We’ll explain more about elements of this program in detail later. For now, run the code, move the mouse, and click to experience it.

21

First Processing Sketch

setup)(The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution. Note: Variables declared within setup() are not accessible within other functions, including draw(). Returns: void.

size)(Defines the dimension of the display window in units of pixels. The size() function must be the first line of code, or the first code inside setup(). Any code that appears before the size() command may run more than once, which can lead to confusing results.The system variables width and height are set by the parameters passed to this function. If size() is not used, the window will be given a default size of 100x100 pixels. The size() function can only be used once inside a sketch, and it cannot be used for resizing.

Syntax: size(w, h) size(w, h, renderer)

Parameters: w int: width of the display window in units of pixels

h int: height of the display window in units of pixels

renderer: String: Either P2D, P3D, or PDF

Returns: void

22

First Processing Sketch

draw)( Called directly after setup ,)(

the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously.

The number of times draw() executes in each second may be controlled with the frameRate() function.

There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed)(

.

23

First Processing Sketch

ellipse() Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. The origin may be changed with the ellipseMode() function.

Syntax: ellipes(a, b, c, d)

Parameters:

• a float: x – coordinates of the ellipse.

• b float: y – coordinates of the ellipse.

• c float: width of the ellipse by default.

• d float: height of the ellipse by default.

Returns: void

First Processing Sketch

fill() Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255.)

When using hexadecimal notation to specify a color, use "#" or "0x" before the values (e.g., #CCFFAA or 0xFFCCFFAA).

The value for the "gray" parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255.

24

Syntax: fill(rgb), fill(rgb , alpha), fill(gray) , fill(gray , alpha)

fill(v1,v2,v3) , fill(v1,v2,v3,alpha)

Parameters:

• rgb int: color variable or hex value.

• alpha float: opacity of the fill - gray float: number specifying value between white & black.

• v1 float: red or hue value - v2 float: green or saturation value

• v3 float: blue or brightness value (v1,v2,v3 depending on current color mode).

Returns: void

25

Sheet # 1

Write a program that draw a bigger circle every time the user press the mouse?

26

References

WebSites:

The Homepage of Processing Programming Language:http://processing.org/

The Exercises webpage:http://wiki.processing.org/w/Main_Page

Videos for learning creative programming about Processing:http://www.funprogramming.org/

Read more in Wikipedia:http://en.wikipedia.org/wiki/Processing_(programming_language)

Learn computer programming the easy way with Processing, a simple language that lets you use code to create drawings, animation, and interactive graphics. Programming courses usually start with theory, but this book lets you jump right into creative and fun projects. It's ideal for anyone who wants to learn basic programming, and serves as a simple introduction to graphics for people with some programming skills.Written by the founders of Processing, this book takes you through the learning process one step at a time to help you grasp core programming concepts. You'll learn how to sketch with code ,creating a program with one a line of code, observing the result, and then adding to it.

• Quickly learn programming basics, from variables to objects

• Understand the fundamentals of computer graphics• Get acquainted with the Processing software development

environment• Create interactive graphics with easy-to-follow projects• Use the Arduino open source prototyping platform to control

your Processing graphics

Getting Started with Processing Casey Reas and Ben Fry.

Book

27