Q&A #6: p5.js Sketch as Background

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


Duration: 10:22
45,110 views
1,148

In this Q&A, I look at how to place a p5.js sketch as a full background on a web page. I cover HTML/CSS concepts such as the CSS property "z-index") as well as p5.js functions like windowResize() and resizeCanvas().

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

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact: https://twitter.com/shiffman

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

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

For More Creative Coding Q&A: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Z1JcqC1iG1oEsJrLX1IK5L

For More HTML/CSS/DOM Videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Help us caption & translate this video!

http://amara.org/v/YS3o/

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



Other Videos By The Coding Train


2016-10-31Coding Challenge #43: Context-Free Grammar
2016-10-297.3: Context-Free Grammar with RiTa.js - Programming with Text
2016-10-287.2: Context-Free Grammar with Tracery - Programming with Text
2016-10-277.1: Intro to Session 7: Context-Free Grammar - Programming with Text
2016-10-26Live Stream #65: Session 7 - Programming from A to Z
2016-10-266.2: Homework Assignment Session 6 - Programming with Text
2016-10-25Coding Challenge #42: Markov Chains - Part 2
2016-10-24Coding Challenge #42: Markov Chains - Part 1
2016-10-226.1: Intro to Session 6: Markov Chains - Programming with Text
2016-10-21Live Stream #64: Session 6 - Programming from A to Z
2016-10-21Q&A #6: p5.js Sketch as Background
2016-10-20Coding Challenge #41: Clappy Bird!
2016-10-1917.11: Sound Visualization: Frequency Analysis with FFT - p5.js Sound Tutorial
2016-10-1817.10: Sound Visualization: Radial Graph - p5.js Sound Tutorial
2016-10-1717.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial
2016-10-1717.8: Microphone Input - p5.js Sound Tutorial
2016-10-15Live Stream #63: Sound in p5.js Continued + Q&A
2016-10-14Live Stream #62: Week 5 of Programming from A to Z
2016-10-135.3: Homework Assignment Week 5 - Programming with Text
2016-10-12Coding Challenge #40.3: TF-IDF
2016-10-11Accessibility with Claire Kearney-Volpe and Chancey Fleet


Tags:
js
p5
javascript
p5.js
javascript (programming language)
p5.js tutorial
creative coding
tutorial
p5 js
p5js
programming
html (programming language)
html5 canvas
full background
background html
canvas background
z-index
javascript resize event
coding
daniel shiffman
q&a
windowResized
resizeCanvas
CSS z-index
animated background web