LITE Matters PDF 2021

LITE Matters AN INSTRUCTIONAL MATERIAL IN MST 101D* [LIVING IN THE INFORMATION TECHNOLOGY ERA] DEO STEPHANIE R. ANGELES Engr. MICHAEL R. BALAGTAS CHRISTIAN A. CARACTA...

LITE Matters AN INSTRUCTIONAL MATERIAL IN MST 101D* [LIVING IN THE INFORMATION TECHNOLOGY ERA] DEO STEPHANIE R. ANGELES Engr. MICHAEL R. BALAGTAS CHRISTIAN A. CARACTA AGAPE A. EUSEBIO ARCEL F. GALVEZ AUBREY ROSE T. GAN ROSALIE S. VILLAFUERTE AUTHORS SECOND EDITION 2021 LITE MATTERS 2021 CHAPTER TWO DURATION 3 HOURS LESSON OBJECTIVES At the end of the chapter, the students are expected to: 1. Differentiate and know the proper use of the Graphics and Multimedia. 2. Appreciate how the human and computer interact. 3. Define the basic IP and its issue in relation with ICT. TOPICS 1. Graphics and Multimedia 2. Human Computer Interaction 3. IPR issues in ICT ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 1 LITE MATTERS 2021 LESSON 2.1 GRAPHICS and MULTIMEDIA INTRODUCTION Graphics has an enormous definition defending how people use and appreciates its existence as a means of presenting an object. But in the sense of providing information that is pictographically presented, graphics were used to it. Generally, the term graphic refers to any sketch, design, drawing or visual image displayed on any surfaces like papers, canvas, walls or computer monitor, which aims to create for entertainment, branding or presents information meaningfully. It comes from the Greek word “graphikos” which means “written”. It is different from text which comprises characters like fonts, letters, numbers, and the like. But when it comes to creating more meaningful and effective representations of an idea, these two are best to combine. Image from behance.net Figure 1. Computer graphics of Ironman Computer graphics are any image media crafted through computer hardware and software. It is sometimes referred to as computer-generated imagery or CGI. Instead of using pencils, pens, watercolors and oil pastels, algorithms and data structures are used to create pictures. Many artists, architects, and designers nowadays are more likely to love using computers when creating designs and plans as it is more convenient and realistic. They may test and experiment with colors to use without thinking of having worry and bad thinking of how they could erase what’s not working too well on their work. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 2 LITE MATTERS 2021 Four Elements of Computer Graphics 1. Image – it is the visual representation of an object. It is commonly the 2. Models – it is the 3D representation of any object. 3. Rendering – it is the process of generating an image from a 2D or 3D model through computer programs. 4. Animation – it is a way adding creative illusive actions through successive images. Computer graphics can either be two- or three-dimensional. Image from buzzflick.com Figure 2. 2D Graphic vs the 3D Graphic of Super Mario Early computers only supported 2D monochrome graphics, which means they may black and white or black and green, depending on the monitor. 2D graphics can be in two forms: raster or vector graphics. Image from ithare.com Figure 3. Example of 2D monochrome graphics Until enhanced computers began to support color images. Image from pngwing.com Figure 4. Sample colored 2D graphics The first enhanced computer only supported 16 to 256 colors. Until now, it can now display graphics in millions of colors to add a more realistic effect. In contrast to 2D graphics, 3D computer graphics use a three-dimensional representation of an object. It has more realistic look compare with 2D. The images or models were created through the aid of digital computers and specialized 3D software. In the making, the object is used to be plotted accordingly through a 3-dimensional space. Image by https://blog.mapsystemsindia.com/ creating-characters-inspired-from- stories-some-tips/ Figure 5. Sample of 3D graphics ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 3 LITE MATTERS 2021 Two Types of Computer Graphics 1. Raster Graphics These are digital images made up of countless tiny squares called pixels. It is sometimes referred to as bitmap. Pixel is a shortened term for “Picture Element”; picture (pix) and element (el). It is the smallest unit of any digital image. These were combined to form a whole image, text, video or any presentations on a computer display. The photos you got from the web or imported from your digital camera are all raster graphics. Once you zoom-in the image, you may see tiny, enormous pixel grids by which each pixel is shaded with a specific hue. See figure 6 and 7. Figure 6. Original image on its exact resolution. Figure 7. Cropped image from enlarged image Since raster images are pixel-based, hence it more likely to suffer a malady called image degradation. Meaning the more you enlarge the image, the more it become pixelated as it its format is in resolution specific. Image resolution refers to how many pixels are displayed per inch of an image or PPI. It is usually measure in DPI or Dot per inch. The higher the number of pixels, the higher the quantity of information in the image. So, the image becomes blurrier once you put it on the size which not fit to its resolution. Meaning, to preserve the quality of the image, it must be displayed and printed at that specific resolution only. But it does not hold the same problem scaled down the image, it does not change its quality, but enlarging the bitmap image can make it blurry or “pixelated”. However, there are several image compression algorithms that may help compresses image formats on the web like BMP, TIFF, JPEG and GIF. What is Bitmap? 2. Vector Graphics Unlike with raster that consists of tiny squares, vector graphics use mathematical formulae to draw lines and curves to create the image. One of the main differences of the vector from a raster is its being scalable. Since the raster image is made up of fixed preset pixels, if you want to scale the image, you still have to use an image compressor to create a ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 4 LITE MATTERS 2021 new image file with an adjusted number of pixels. With vector graphics, there is no limit for re-sizing the image for as long as the rule of mathematics was identical and applied correctly. The formulas that hold the rendering of the image apply identically to graphics of any size. Vector graphics are not resolution dependent. It does not have fixed intrinsic resolution. It displays the resolution capability of whatever output device is rendering them. Images drawn directly through the computer are example of vector graphics. Image captured from https://creativeoverflow.net/ 30-realistic-vector-illustrations/ Figure 8. Realistic vector image Vector graphics have smaller files sizes and are easier to modify or edit. Fonts and logos are usually designed in vector formats. Common vector formats include AI, EPS, SVG and PDF. What is anti-aliasing? Anti-aliasing it is a software-based approach that aims to smoothens the jagged appearance of the image by blending the edge of the pixel with the adjacent colors. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 5 LITE MATTERS 2021 Application of Computer Graphics: Application of graphics has four main areas. 1. User Interface – it is useful in video games, digital art, and virtual reality. 2. Display information – it is used in computational biology, computational physics, information of graphics and scientific visualization. 3. Design – it is used in graphic design, computer-aided design, and web design. 4. Simulation – it is also useful in education, information visualization and computer simulation. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 6 LITE MATTERS 2021 MULTIMEDIA Multimedia is an interactive way of presenting information using audio, video, and any animation in addition to traditional media like text, graphs, and images. It was coming from the Latin word “multus,” which means “many,” and a plural word of medium, “media.” From its name itself, Multimedia, meaning multiple media types, is used in transmitting the information. This term was coined by singer-artist Bobb Goldstein in 1966. According to Edgar Dale “Cone of Learning”, on average, people remember: 10% of what they read, 20% of what they hear, 30% of what they see, 50% of what they hear and see. Multimedia aims to deliver and facilitate more excellent retention of new bits of knowledge to the humans’ memory. By integrating the elements of multimedia and information presentation, the chances of knowledge retention become higher. BASIC ELEMENTS OF MULTIMEDIA 1. Text - This refers to the characters used for creating words. This has various kinds of fonts and sizes to use depending on what would be suitable for presenting the information. Information Information Information Information 2. Graphics – It refers to any non-text information like images, drawings, or charts. Some people are not fond of reading. So, graphic is best to use as an alternative or as a supplement to the text. It makes the presentation more effective if combined with text and attractive at the same time. This can be raster or vector. Image captured from https://despicableme.fandom.com/wiki/Bob Figure 1. Sample graphics add as a design. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 7 LITE MATTERS 2021 Figure 2. Sample graphs for better presentation of data 3. Animation – These are moving images. It was created through a series of graphics that portray actions displayed in sequence to create illusions of motion. This animation can effectively attract the attention of the viewer once integrated or used in the presentation. This is very popular in the application of multimedia. Image captured from alistapart.com Figure 3. Sample series of still images that portrays animation. 4. Video – This refers to moving pictographic images accompanied by sounds. It is very useful in many multimedia applications as it views real life objects. Image captured from https://www.youtube.com/watch?v=ebzbKa32kuk Figure 4. This is a 3D model of a human heart anatomy captured from actual 3D animation of a beating heart. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 8 LITE MATTERS 2021 5. Audio – This refers to any music or sound effects. Audios can be analog and digital sounds. Analog audio or sounds are the original sound signal, while the sounds store in the computer and used in the multimedia application are digital audio. Image captured from https://icon-icons.com/icon/audio/71845 Figure 5. Example of an audio icon MULTIMEDIA SYSTEM CHARACTERISTICS 1. Multimedia systems should be computer controlled. 2. All the components of multimedia are integrated. 3. The interface to the final user may permit interactivity. 4. Information must be presented digitally. TYPES OF MULTIMEDIA PRESENTATION There are two types of multimedia presentation: 1. LINEAR PRESENTATION The active content of this presentation often progresses without the control for navigation of the user. The presentation plays typically from the start to end or is loop continually when presenting the information. The most common type of this multimedia presentation is a movie, where the viewer’s just sit and watch the presentation from the beginning to the end. Image captured from Infinity War Movie Scene Figure 6. Example of linear presentation 2. NON-LINEAR PRESENTATION Unlike the linear presentation, the non-linear presentation offers interactivity to the users where they can control the progress of the presentation. That is why it is also known as interactive multimedia. The users have the ability to move around on different paths through the information presentation. This kind of interactivity is common in video games or self-paced-based training. One of its typical examples is hypermedia. Image captured from https://www.ungeek.ph/wp-content/uploads/2020/06/LoL_WildRift_UngeekPH4.jpg Figure 7. Example of video games ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 9 LITE MATTERS 2021 What is Hypertext and Hypermedia? Hypertext refers to any text or pictures that link to other path or chains. It was coined by Ted Nelson. Hypermedia is a non-linear multimedia presentation as it uses hypertext that allows the reader to move from one path to another. FORMS OF MULTIMEDIA 1. ONLINE These are the media types that need to communicate with distant resources or distant users. These can only be utilized with the use of the internet. Examples are websites, applications and other mobile services that need the internet to progress. 2. OFFLINE These media are known to be a self-contained product where the users do not need the internet or any online connection. This can stand and progress on its own and does not communicate with anything outside its designed environment. Examples are CD, DVD, Blu- ray, multimedia kiosk. 3. HYBRID This media has the elements of both on- and offline products. Common examples are computer games. ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 10 LITE MATTERS 2021 Graphics References: https://www.explainthatstuff.com/computer-graphics.html https://www.britannica.com/topic/computer-graphics https://techterms.com/definition/pixel https://www.printcnx.com/resources-and-support/addiational-resources/raster-images-vs- vector-graphics/ https://etc.usf.edu/techease/win/images/what-is-the-difference-between-bitmap-and-vector- images/ https://nerdtechy.com/what-is-anti-aliasing https://learn.g2.com/raster-graphics https://techterms.com/definition/rastergraphic https://www.explainthatstuff.com/computer-graphics.html https://www.linkedin.com/pulse/application-computer-graphics-niropam-das Multimedia References: https://users.cs.cf.ac.uk/Dave.Marshall/Multimedia/node10.html https://www.tutorialspoint.com/multimedia/multimedia_introduction.htm https://www.ftms.edu.my/images/Document/MMGD0101%20- %20Introduction%20to%20Multimedia/MMGD0101%20chapter%201.pdf https://slideplayer.com/slide/6298510/ http://sahet.net/htm/swdev8.html https://www.diggitmagazine.com/wiki/hybrid-media-system For more information about graphics and multimedia, you may visit the following: Graphics: https://www.youtube.com/watch?v=TEAtmCYYKZA https://www.youtube.com/watch?v=LGYOgJWCINM Multimedia: https://www.youtube.com/watch?v=Av-eRu9A8_w https://www.youtube.com/watch?v=yku5GXPwa6Y https://www.youtube.com/watch?v=HJ8nkUSkG9E https://www.youtube.com/watch?v=CbvpPdxoJiI https://www.youtube.com/watch?v=0aq2P0DZqEI https://www.youtube.com/watch?v=m_buwrnFIho ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 11 LITE MATTERS 2021 ANGELES, BALAGTAS, CARACTA, EUSEBIO, GALVEZ, GAN, VILLAFUERTE 12