Post on 14-Dec-2015
transcript
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