Intro to Interactive Multimedia Design PDF

IMD-1000 / ITEC-1100 Intro to Interactive Multimedia Design Introduction Copyright © 2024 Ali Arya, School of Information Technology, Carleton University  Instructor ◼ Ali Arya ◼ arya@carleto...

IMD-1000 / ITEC-1100 Intro to Interactive Multimedia Design Introduction Copyright © 2024 Ali Arya, School of Information Technology, Carleton University  Instructor ◼ Ali Arya ◼ [email protected] ◼ http://www.Ali-Arya.com ◼ PhD, Computer Engineering ◼ University of British Columbia, 2004 ◼ School of Information Technology since 2006 ◼ Teaching experience: ◼ computer programming, software design, games, and digital media ◼ https://www.csit.carleton.ca/~arya/arya-cv-2024.pdf ◼ Research area: ◼ educational technology, human-computer interaction, virtual reality, and computer games ◼ http://img.csit.carleton.ca Copyright © 2024 Ali Arya, 2 School of Information Technology, Carleton University  Brightspace ◼ All course material can be found on Brightspace, Carleton University’s learning management system. ◼ The course content is divided into sections: ◼ General: Basic information such as course outline and links to major parts ◼ Modules: Nine sections corresponding to groups of content ◼ Exams: Information needed for midterm and final exam ◼ Extra Material: Optional content for further reading ◼ In addition to the Lecture Notes (these slides), any Module in the course includes a series of Units with supplementary material such as videos and samples. ◼ The symbol  shows that the related material is on Brightspace. ◼ The symbol  means that it is optional material on Brightspace. ◼ External material are linked. They are optional unless specified. Copyright © 2024 Ali Arya, 3 School of Information Technology, Carleton University  Units ◼ Module 1. Introduction ◼ Unit 1.1. Course Review (slides 5-12) ◼ Unit 1.2. Computers (slides 13-25) ◼ Unit 1.3. Digital Media (slides 26-40) ◼ Unit 1.4. Ethics and Intellectual Property (slides 41-44) Copyright © 2024 Ali Arya, 4 School of Information Technology, Carleton University  M1U1 Course Description ◼ Introduction to interactive multimedia and design, focused on the production and processes of animation, visual effects, game design and development, web design and development, and user experience/interfaces. Topics include mark-up languages, design process/problem- solving tools, human-centered design, product development, ethics, and copyright and intellectual property. ◼ For details, see Course Outline  Copyright © 2024 Ali Arya, 5 School of Information Technology, Carleton University  M1U1 Learning Objectives ◼ Understand the basic design and development process for animation, web, and games, ◼ Create simple products for the above three streams, using 2D graphics, HTML, and Javascript, ◼ Perform basic use case analysis, ◼ Design simple user experience/interface, ◼ Consider the most important ethical and social aspects of multimedia design and development such as accessibility, inclusion, and intellectual property. Copyright © 2024 Ali Arya, 6 School of Information Technology, Carleton University  M1U1 Course Structure ◼ The course is structured around three projects: ◼ 2D graphics and animation using easy-to-use free software. This project: ◼ Aims at introducing the basic concepts in 2D graphics and animation. ◼ Covers the concepts of copyright and intellectual property. ◼ Is done individually. ◼ Basic web application using simple HTML and simple Javascript. This project: ◼ Aims at introducing mark-up languages and UX/UI. ◼ Covers the concepts of documentation and planning. ◼ Is done individually. ◼ 2D web-based game using HTML5 and Javascript. This project: ◼ Aims at introducing computer programming and interactive systems. ◼ Covers the concepts of project management and production process, and simple collaboration tools. ◼ Is done in groups. Copyright © 2024 Ali Arya, 7 School of Information Technology, Carleton University  M1U1 Grading Scheme Copyright © 2024 Ali Arya, 8 School of Information Technology, Carleton University  M1U1 Support and Communication ◼ Discord Server: https://discord.gg/aGjKaEnarG ◼ Email: [email protected] ◼ Expect up to 24 hours for an answer. ◼ All emails must be from your Carleton account. ◼ Send an email to the instructor with your Discord username for proper identification. ◼ Office Hours: M/W, 2:30-3:30. Azrieli Pavilion (AP), room 230K ◼ Appointment: By email. Canal Building, room 4202 ◼ BrightSpace Discussion Board is for non-urgent communication on topics related to the course and not specific to one student. Copyright © 2024 Ali Arya, 9 School of Information Technology, Carleton University  M1U1 Class Participation ◼ Brief review of your experience with the course over the past week ◼ Explicit story: what happened ◼ Implicit story: how it made you feel and think ◼ Upcoming story: how it affects you in upcoming weeks and beyond ◼ See About Reflection  ◼ Optional self-learning points ◼ See Self-Learning Challenge  ◼ Find errors in AI-generated slides content ◼ See AI Challenge  Copyright © 2024 Ali Arya, 10 School of Information Technology, Carleton University  M1U1 Schedule Copyright © 2024 Ali Arya, 11 School of Information Technology, Carleton University  M1U1 Optional Game: Ali’s Alley ◼ An optional treasure-hunt game to play for fun and to get to know the school. ◼ Look for physical and online clues to get points and move to the next levels. ◼ Get rewards and learn! ◼ See Game Details Copyright © 2024 Ali Arya, 12 School of Information Technology, Carleton University  M1U2 Computers: What Are They? Copyright © 2024 Ali Arya, 13 School of Information Technology, Carleton University  M1U2 Computers ◼ Electronic modules capable of executing “programs” ◼ processing data ◼ performing instructions ◼ Data/Information: Binary values saved as electronic signal that can be on or off, 0 or 1 (binary system) ◼ bit, byte (8 bits) ◼ Everything (image, text, etc.) is “coded” as binary numbers ◼ Code/Instruction: Similar to data but means a certain operation ◼ Code can mean binary equivalent of any information or the instruction/program to be executed. Copyright © 2024 Ali Arya, 14 School of Information Technology, Carleton University  M1U2 Number Systems ◼ Roman (single-value) number system ◼ I, II, II, IV, V, VI, VII, VII, IX, X, … ◼ Symbols have a single value regardless of where they are ◼ Arabic/Decimal (base 10, positional) number system ◼ Only 10 symbols (0 to 9). ◼ Digits have positional value, base to the power of position ◼ Example: 463 = 4*10^2 + 6*10^1 + 3*10^0 ◼ Binary Number System ◼ Same as decimal but base is 2 ◼ Only 2 symbols Copyright © 2024 Ali Arya, 15 School of Information Technology, Carleton University  M1U2 Analog vs. Digital Electronics ◼ In analog electronic systems, each point on a circuit could have any value (voltage) between zero and max (power source). ◼ Electro-magnetic noise could affect the value. ◼ In digital electronic systems, each point can have two valid values: zero or max, with some range for each, and between them is invalid. ◼ It can detect noise and faulty circuit better. So, it is more precise. ◼ Two values are called zero and one, false and true, but can have any actua values based on the power source (usually 5 volts). ◼ Binary system is a good math for digital electronics. ◼ Each point, BIT, or a binary digit. Copyright © 2024 Ali Arya, 16 School of Information Technology, Carleton University  M1U2 Binary Data ◼ Binary data is the numeric code for any data type ◼ Text: Alpha-numeric characters are coded using ASCII (1-byte) and UNICODE (2-byte) standards. ◼ Image: Pixels are coded based on the colour values. More in Module 2. ◼ Audio: Sound volume at sampling times is the numeric value. ◼ Hexa-decimal (Hex) number system is base 16. ◼ Symbols are 0-9 and A-F (10 to 15). ◼ Each for bits in binary are one digit in Hex. ◼ Hex is used to simplify showing binary values. Copyright © 2024 Ali Arya, 17 School of Information Technology, Carleton University  M1U2 Text Encoding ◼ ASCII ◼ https://www.ascii-code.com ◼ To enter text using ASCII code: ◼ Select NumLock ◼ Hold ALT key ◼ Enter 4-digit code on keypad ◼ 0048 for 0 ◼ Release ALT key Copyright © 2024 Ali Arya, 18 School of Information Technology, Carleton University  M1U2 Activity: Online Binary Viewer ◼ Use Notepad and create a simple text file. ◼ Go to https://hexed.it ◼ Upload the text file and check the content in binary and hex Copyright © 2024 Ali Arya, 19 School of Information Technology, Carleton University  M1U2 Von Neumann Model https://en.wikipedia.org/wiki/Von_Neumann_architecture Copyright © 2024 Ali Arya, 20 School of Information Technology, Carleton University  M1U2 Hardware ◼ Main/Mother Board ◼ CPU and control “chips” ◼ Graphics Card ◼ Random Access Memory (RAM) ◼ Permanent Storage ◼ Hard Disc Drive, ◼ Solid State Drive) ◼ Input/Output (IO) Copyright © 2024 Ali Arya, 21 School of Information Technology, Carleton University  M1U2 Programs ◼ Software refers to programs copied/installed by users to be executed by computers ◼ Stored in permanent storage and copied to RAM for execution (Load). ◼ Results can be copied back to storage (Save). ◼ Firmware refers to programs that are built into the computer and can’t be changed by users ◼ Stored in a special type of memory called Read-Only Memory (ROM) https://www.scienceabc.com/innovation/difference-between-ram-rom-speed-volatile-read-only-random-access-size.html Copyright © 2024 Ali Arya, 22 School of Information Technology, Carleton University  M1U2 Software ◼ Operating System (OS) is a program manages all other programs and the hardware. ◼ Software is written in various programming languages ◼ C/C++, C#, Java, Javascript, Python, HTML, etc ◼ Programs are translated to the binary language of the target “platform” (machine code), that depends on: ◼ CPU ◼ Operating System Copyright © 2024 Ali Arya, 23 School of Information Technology, Carleton University  M1U2 Networking ◼ Local Area Network (LAN) ◼ Group of computers connected directly to each other ◼ Wired (Ethernet) or wireless (WiFi) ◼ The Internet ◼ All local networks connected through gateways and routers ◼ Each computer is identified with a unique 4-byte (or 6-byte) number called IP Address (or IPv6). ◼ Many services such as email, social apps, and web ◼ World-Wide Web (WWW) ◼ Specific computers (called Server) that offer information to any computer running a web browser (called Client) Copyright © 2024 Ali Arya, 24 School of Information Technology, Carleton University  M1U2 Activity: Computer Identity on the Internet ◼ Open Command Prompt (type cmd in the start menu) ◼ Type ipconfig ◼ Identify your computer’s IP address and compare to others ◼ Identify Domains ◼ 2 or 3 parts of IP address ◼ domainName.domainType (Carleton.ca, Google.com, etc) ◼ Identify parts of a Uniform Resource Locator (URL) ◼ Protocol://computerName.domainName.domainType/filePath ◼ www is the default computerName on the web Copyright © 2024 Ali Arya, 25 School of Information Technology, Carleton University  M1U3 Multimedia ◼ Audio and visual (single image and motion picture) ◼ Touch, smell, and taste are less used senses (media). ◼ Analog ◼ Paper, canvas, celluloid film ◼ Film vs. Video ◼ Optical/mechanical (actual audio- visual data) vs. Magnetic (a signal that can be converted) ◼ Both transmission and storage were analog. Copyright © 2024 Ali Arya, 26 School of Information Technology, Carleton University  M1U3 Digital Media https://en.wikipedia.org/wiki/Pong https://www.youtube.com/watch?v=Oy5DAxGhV_c Copyright © 2024 Ali Arya, 27 School of Information Technology, Carleton University  M1U3 Properties of Digital Media ◼ Procedural (programable) ◼ Rule-based, algorithmic ◼ Not necessarily sequential ◼ Participatory (interactive) ◼ Spatial (multi-functional) ◼ Multi-dimensional ◼ Encyclopedic (high storage) ◼ Informative, massively data-storing ◼ Distributed (location-aware/independent) ◼ Mobile, networked Copyright © 2024 Ali Arya, 28 School of Information Technology, Carleton University  M1U3 Interactivity ◼ A cyclic process between two or more active agents in which each agent alternately (or at the same time) ◼ Listens (receives input) ◼ Thinks (processes the data) ◼ Speaks (creates output) ◼ Input and Output Modalities ◼ Visual: 2D and 3D displays, computer vision ◼ Audio: Sound generation, speech recognition ◼ Tactile: haptic feedback, mouse/keyboard, tangible objects ◼ Other: immersive, mobile, wearable, combined, etc Copyright © 2024 Ali Arya, 29 School of Information Technology, Carleton University  M1U3 Activity ◼ Identify different ways you interact with any of our computing devices. ◼ Identify different dimensions (functions) of a social media app you use. Copyright © 2024 Ali Arya, 30 School of Information Technology, Carleton University  M1U3 Digital Storytelling ◼ Sharing a narrative ◼ Fiction or non-fiction ◼ Engaging ◼ Interactive ◼ Immersive ◼ Multimodal ◼ Purposeful ◼ Tools ◼ Adobe Express ◼ Canva ◼ Figma ◼ Twine Copyright © 2024 Ali Arya, 31 School of Information Technology, Carleton University  M1U3 Activity: Storytelling ◼ Go to Adobe Express and create a flyer that tells a story (about yourself, someone else, a product, an experience, etc.). ◼ You can use your Google account to log into most of the tools we discuss in the course. ◼ Use templates or start with a plain document and add images an text. ◼ Explore the attributes (properties) of various elements. ◼ Save as image or PDF file. Copyright © 2024 Ali Arya, 32 School of Information Technology, Carleton University  M1U3 Computer Games ◼ What is a game? ◼ Interactive rule-based play ◼ Tools ◼ GameMaker  (see Brightspace for simple version) ◼ Unity Copyright © 2024 Ali Arya, 33 School of Information Technology, Carleton University  M1U3 Virtual and Augmented Reality https://touchstone.org.au/news/assistive-tech-meets-augmented-reality Copyright © 2024 Ali Arya, 34 School of Information Technology, Carleton University  M1U3 Activity: Reality-Virtuality ◼ The image on the previous slide shows the virtuality-reality spectrum (or continuum), sometimes called extended reality. ◼ What is mixed reality? ◼ What are face masks/filters? ◼ https://www.cosmopolitan.com/sex-love/a14381720/snapchat-filter-quiz Copyright © 2024 Ali Arya, 35 School of Information Technology, Carleton University  M1U3 Artificial Intelligence ◼ Algorithms to make computers think, solve problems, create new content, etc ◼ AI ◼ Symbolic, Rule-based, etc ◼ Neural networks ◼ Deep learning ◼ Large Language Models ◼ GPT ◼ ChatGPT (text) ◼ Diffusion Image Models ◼ DALL-E (image) ◼ Stable Diffusion ◼ Midjourney Copyright © 2024 Ali Arya, 36 School of Information Technology, Carleton University  M1U3 Artificial Intelligence ◼ Current AI models (based on deep learning) lack structured knowledge the way humans have. They predict the next word/pixel based on common patterns they have seen (training data), not based on what is “correct”. ◼ AI-generated content has the risk of only “looking good”. ◼ Incorrect information, sub-optimal design, lack of creativity, etc. ◼ Find the errors in this image? >> Copyright © 2024 Ali Arya, 37 School of Information Technology, Carleton University  Copyright © 2024 Ali Arya, 38 School of Information Technology, Carleton University  M1U3 Artificial Intelligence ◼ AI tools are here to stay but using them requires non-AI skills so you can detect the errors and work with AI tool to create a suitable outcome. ◼ All AI-generated content needs to be properly identified. ◼ See next section on ethics and intellectual property. ◼ Some believe that all AI-generated content is plagiarism. ◼ You should learn to critically and ethically use AI. ◼ In this course, you should not use AI unless it is explicitly allowed for a task. Copyright © 2024 Ali Arya, 39 School of Information Technology, Carleton University  M1U3 Activity: AI ◼ Find and discuss applications for AI. ◼ What are advantages? ◼ What are suitable and appropriate usages? ◼ What are drawbacks? ◼ What ethical and other concerns we may have? ◼ Try asking ChatGPT. Copyright © 2024 Ali Arya, 40 School of Information Technology, Carleton University  M1U4 Ethics ◼ Systems of moral principles (personal to societal) concerned with what is good for individuals and society ◼ Everything we create has ethical implications, and so needs guidelines that can be dependent on each society/culture. ◼ Canadian Association of Journalists’ Ethical Guidelines ◼ Association for Computing Machinery Code of Ethics and Professional Conduct ◼ Free speech doesn’t mean free from rules or consequences. ◼ Remember that creator is not the judge! ◼ Think about your own values. ◼ Think about your employer/client’s values and ethical concerns. Copyright © 2024 Ali Arya, 41 School of Information Technology, Carleton University  M1U4 Activity ◼ Check out the links on the previous slide. ◼ What are the highlights and principles? ◼ What do you think is the most important? ◼ What are some examples of unethical practices in the fields related to digital media (web, games, journalism, etc)? What are the solutions and regulations? ◼ Plagiarism ◼ Fake and unreliable content ◼ Promoting violence, hate, or discrimination ◼ Inappropriate content Copyright © 2024 Ali Arya, 42 School of Information Technology, Carleton University  M1U4 Intellectual property ◼ Industrial IP includes patents, trademarks, and wordmarks. ◼ Copyright is a type of IP that deals with created content. ◼ Facts, government works, ideas, phrases, and names are not covered by copyright unless part of an industrial IP. ◼ Your employer/client may own the IP for your work! ◼ There are various copyright systems with different rights. ◼ Fair dealing/use is not copyright infringement. ◼ Carleton has policies ◼ https://library.carleton.ca/copyright-carleton ◼ There are regulations for using AI-generated content. Copyright © 2024 Ali Arya, 43 School of Information Technology, Carleton University  M1U4 Activity ◼ Discuss the ethical and IP implications of using AI-generated content. ◼ Check out the extended (optional) discussions on ethics  and intellectual property  on Brightspace. ◼ Share the highlights and what seemed more important to you on the Discussion Board . Copyright © 2024 Ali Arya, 44 School of Information Technology, Carleton University  Self Assessment ◼ What are the main evaluation components for the course? ◼ What are the rules for using AI? ◼ Where can you find the assignments and due dates? ◼ What is von Neumann model? ◼ How does binary number system work? ◼ What are the main properties of digital media? ◼ How are virtual and augmented reality related? ◼ How does ChatGPT work? ◼ Where can you find the university policy on copyright? Copyright © 2024 Ali Arya, 45 School of Information Technology, Carleton University  Suggested Tasks ◼ Explore Brightspace. ◼ Read the course outline. ◼ Make sure you have access to the free tools introduced in the slides. ◼ Join LinkedIn and start establishing your professional network Copyright © 2024 Ali Arya, 46 School of Information Technology, Carleton University  Extra Material ◼ Video on how CPU works ◼ History of Computing ◼ AI short courses ◼ https://www.coursera.org/learn/introduction-to-generative-ai ◼ https://www.cloudskillsboost.google/course_templates/536 ◼ https://www.codecademy.com/learn/intro-to-generative-ai ◼ Specifically for programmers ◼ AI articles ◼ https://www.coursera.org/articles/what-is-generative-ai ◼ https://www.assemblyai.com/blog/introduction-generative-ai/ ◼ https://news.mit.edu/2023/explained-generative-ai-1109 ◼ https://exploreai.org/p/generative-ai ◼ https://codesubmit.io/blog/ai-code-tools/ ◼ Specifically for programmers Copyright © 2024 Ali Arya, 47 School of Information Technology, Carleton University