https://github.com/processing/p5.js
https://p5js.org/examples/
https://p5js.org/libraries/
https://processing.org/
https://openprocessing.org/
https://github.com/generative-light/p5.scribble.js/
https://p5play.org/
https://github.com/molleindustria/p5.play/
《p5.js互聯網創意編程》李子暘，蔡蔚妮，李偉編著 電子工業出版社
https://share.weiyun.com/5xCNNia
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
<video id="duvideo" src="myHead.mp4"
controls = "" /*禁掉默認控制條-- 必要*/
poster="poster.jpg" /*視頻封面*/
preload="auto" /*預加載*/
webkit-playsinline="true" /*iOS 10中設置可以讓視頻在小窗內播放*/
playsinline="true"
x-webkit-airplay="allow" /*啓用AirPlay支持*/
x5-playsinline
x5-video-player-type="h5" /*對於x5內核聲明啓用同層H5播放器*/
x5-video-player-fullscreen="true" /*全屏設置設置爲 true 是防止橫屏*/
x5-video-orientation="portraint" /*播放器的方向，默認爲豎屏*/
x5-video-orientation="portraint" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值爲豎屏*/
style="object-fit:fill" /*去除黑邊*/
></video>
sketch.js
let video;
let c=0;
function preload(){
video = createVideo("myHead.mp4");
}
function setup() {
createCanvas(480, 360);
colorMode(HSB,360,100,100,1);
video.hide();
}
function draw() {
background(c);
c += 0.1;
if(c>360){
c=0;
}
tint(c,100,100);
image(video,0,0);
}
function mousePressed() {
video.play();
video.loop();
}
