9.14: Loading Animation - p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=UWgDKtvnjIU


Category:
Tutorial
Duration: 22:30
38,086 views
498

In this p5.js tutorial, I demonstrate how to create a loading animation (progress bar) in JavaScript. The preload() method is covered, as well as how to use callbacks to track loading multiple media files asynchronously.

Support this channel on Patreon: https://patreon.com/codingtrain

Send me your questions and coding challenges!

Contact: https://twitter.com/shiffman

Links discussed in this video:
JavaScript Closure video: https://youtu.be/-jysK0nlz7A

Source Code for the Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For more p5.js videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZmA-d3D0iFIvgrB5_7kB8H

Help us caption & translate this video!

http://amara.org/v/Qz5g/

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct



Other Videos By The Coding Train


2016-07-299.2: Genetic Algorithm: How it works - The Nature of Code
2016-07-299.1: Genetic Algorithm: Introduction - The Nature of Code
2016-07-27Live Stream #54 - Phyllotaxis and More on Genetic Algorithms
2016-07-25Coding Train Live 52: Genetic Algorithms
2016-07-2111.10: Computer Vision: Adding Lifespan to Blobs - Processing Tutorial
2016-07-2011.9: Computer Vision: Blob Tracking with Persistence - Processing Tutorial
2016-07-19Q&A #3: How to contribute to p5.js
2016-07-19Q&A #4: Loading Animation in p5.js
2016-07-18Coding Train Live 51: Loading Animation Q&A and Blob Detection with Persistence
2016-07-189.15: 2D Arrays in JavaScript - p5.js Tutorial
2016-07-169.14: Loading Animation - p5.js Tutorial
2016-07-15Coding Challenge #28: Metaballs
2016-07-14Live Stream #50: Loading Animation, Metaballs and 2D Arrays in JS
2016-07-13Q&A #2: What is WEBGL in p5.js?
2016-07-1311.8: Computer Vision: Improved Blob Detection - Processing Tutorial
2016-07-13Coding Train Live 49b - Blob Detection Addendum and Q&A
2016-07-12Coding Train Live 49a: Q&A on WebGL and Improved Blob Detection
2016-07-0711.7: Computer Vision: Blob Detection - Processing Tutorial
2016-07-0611.6: Computer Vision: Motion Detection - Processing Tutorial
2016-07-0511.5: Computer Vision: Color Tracking - Processing Tutorial
2016-07-02Coding Challenge #27: Fireworks!


Tags:
js
p5
p5.js
tutorial
loading
animation
javascript
javascript (programming language)
creative coding
p5.js tutorial
p5 js
p5js
asynchronous callbacks
callbacks
javascript loading bar
javascript progress bar
loading animation javascript
loading animation
preload()
javascript callbacks
p5.js callbacks
loadSound()
loadImage()