Course: Study / Web Design and Web Development, Topic: Module18: p5.js III Image Sound Video

Topic outline

General

Collapse all Expand all

Module18: p5.js III Image Sound Video
Image in p5. Video in p5. Sound in p5.

Image in p5

Video in p5

Sound in p5

Image in p5.In this submodule, we will learn how we can insert images in p5.js. Moreover, we will see how we can manipulate their pixel and display the result in our canvas.

Video in p5.In this submodule, we will see how we can insert videos in p5.js and create different things by "playing" with their pixel. We will also see how we can capture video from our webcam and display it on our canvas.

Sound in p5. In this submodule, we will learn how we can insert sound in p5.js using the appropiate p5.js library. We will also see how we can create controls for audio play/pause. Moreover, we will learn how we can capture audio from our computer's microphone and use it to create sketches that "respond" to this audio.
- Download the zip file module18Assets ,unzip it and place it inside the p5yourName/module10 folder.
  
  You will see the three folders images, sounds, videos which contain the media files of this module.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions p5.js III Page
  
  View
- Book
  
  Submodule 18.1: Image in p5.js I Book
  
  View
  Images in p5.js
  
  get() and set()
  
  pixels array
- Book
  
  Submodule 18.2: Video in p5.js Book
  
  View
  Insert video
  
  play with video
  
  createCapture()
- Book
  
  Submodule 18.3: Sound in p5.js Book
  
  View
  load and play sound
  
  play and pause buttons
  
  capture sound

Topic outline

General

Module18: p5.js III Image Sound Video

Image in p5. Video in p5. Sound in p5.