javascript: P5.js 画图形 处理图片 视频等

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();
}

　　

 

posted @ 2023-03-07 15:06  ®Geovin Du Dream Park™  阅读(104)  评论(0)    收藏  举报