Guest Tutorial #3: Spring Animations and p5.js with Val Head

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


Category:
Tutorial
Duration: 9:42
34,580 views
645

In this guest tutorial, Val Head uses the p5.js library to create a simple spring animation (without the use of a separate physics engine!)

This video has some audio problems towards the end. Sorry about that and I hope that you still enjoy this tutorial!

Val is a designer and web animation consultant with a talent for getting designers and developers alike excited about the power of animation. She is the author of The Pocket Guide to CSS Animations and Designing Interface Animation. She shares her passion for animation and UX by curating the UI Animation Newsletter, hosting the All The Right Moves screencast, and cohosting the Motion and Meaning podcast.

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

Codepen links:
The one built in this video: http://codepen.io/valhead/pen/fa66f4df2b783d245632f1cc24e71929?editors=0010
Version with sliders: http://codepen.io/valhead/full/7d0081669a31715fe9f3997a3cb4d8f4/
Mouse chaser: http://codepen.io/valhead/pen/71a2bbae0d73c5c66b9c6707fc3f9d44?editors=0010

Val Head's website: http://valhead.com/
Twitter account: https://twitter.com/vlh
Val's Book - Designing Interface Animation: http://rosenfeldmedia.com/books/designing-interface-animation/
Web Animation Workshops: https://webanimationworkshops.com/

For more Guest Tutorials and Interviews: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bYBG4PsCJpsvMka3boE9pR
For more Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

http://amara.org/v/72pQ/

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



Other Videos By The Coding Train


2017-01-17Coding Challenge 51.2: A* Pathfinding Algorithm - Part 2
2017-01-16Coding Challenge 51.1: A* Pathfinding Algorithm - Part 1
2017-01-13Live Stream #72: A* Pathfinding Algorithm
2017-01-10Coding Challenge #50.2: Animated Circle Packing - Part 2 (Kitten Addendum)
2017-01-09Coding Challenge #50.1: Animated Circle Packing - Part 1
2017-01-06Coding Challenge #49: Photo Mosaic with White House Social Media Images
2017-01-06Coding Challenge #48: White House Social Media Data Visualization
2017-01-05Coding Train Live 71: Coding Challenges: Circle Packing and White House Data Visualization
2016-12-23ITP Winter Show 2016
2016-12-21Coding Challenge #47: Pixel Sorting in Processing
2016-12-20Guest Tutorial #3: Spring Animations and p5.js with Val Head
2016-12-19Guest Tutorial #2: Web Animations and Mo.js with Sarah Drasner
2016-12-16Coding Challenge #46.2: Asteroids with p5.js - Part 2
2016-12-15Coding Challenge #46.1: Asteroids with p5.js - Part 1
2016-12-14Live Stream #70: Coding Challenges: Asteroids and Pixel Sorting
2016-12-11Coding Challenge #45: Saving p5.js Drawings to Firebase
2016-12-109.3: Firebase: Retrieving Data - Programming with Text
2016-12-099.2: Firebase: Saving Data - Programming with Text
2016-12-089.1: What is Firebase? (Database as a Service) - Programming with Text
2016-12-08Live Stream #69.2: Session 9 - Programming from A to Z - Part 2
2016-12-08Live Stream #69.1: Session 9 - Programming from A to Z - Part 1


Tags:
guest tutorial
guest coding tutorial
animation javascript
animation javascript browser
web animation
codepen
sfpc
coding tutorial
daniel shiffman
guest talk
live coding
green screen coding
animations
guest
javascript (programming language)
creative coding
programming
tutorial
spring animation
spring animation p5.js
spring animation browser
val head
p5js
p5.js
p5.js library