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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 @   ®Geovin Du Dream Park™  阅读(89)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript： vue.js 2
·  vue.js: number addition
·  p5js: JavaScript 创意绘画
·  P5JS学习笔记
·  js插件---videojs的使用
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示