1 Taif University Faculty Of Computers And Information Technology TA. Kholood Alharthi & TA. Maha Thafar First Semester AH

2 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.

4 Can be categorized based on a few criteria :  Perception media  Representation media  Presentation media  Storage media  Transmission media

5  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 multimedia defined as the usage of multiple agents, this agents (components) as the following:  Text.  Graphics.  Audio.  Animations.  Video.  Links.  Virtual Reality (VR ).

7

8 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

10 I.Hardware:  Graphics card  Scanner  Digital Camera  Keyboard  Mouse  Sound Card:  Voice Reader  Loudspeaker  Storage tools with large Capacity:  CD-ROM  DVD

11 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  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, developed into a tool for creating finished professional work as well (electronic arts and visual design).

13  Graphics application.  Live video Application.  Mobile Application.  Visual Designs.  Electronic arts.  Animation.

17  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 TASK ICON Run Stop New Open Save Export

19 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.

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 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 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 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

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 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 Write a program that draw a bigger circle every time the user press the mouse ?

26 WebSites:  The Homepage of Processing Programming Language:  The Exercises webpage:  Videos for learning creative programming about Processing:  Read more in Wikipedia:

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. Book27