企业官网建设流程全解析

免费教育网站建设,怎样做销售产品网站,加大网站和微信号建设发挥宣传平台实效性,wordpress小程序直播JavaScript的p5.js库使用介绍 简要说明 p5.js 是一个基于 JavaScript 的库#xff0c;它的核心目标是 “让写代码像画画一样简单”。p5.js 是 Processing 的 JavaScript 版本#xff0c;继承了 Processing 的易用性和哲学#xff0c;但可以在浏览器中直接运行。 p5.js支持…JavaScript的p5.js库使用介绍简要说明p5.js 是一个基于 JavaScript 的库它的核心目标是 “让写代码像画画一样简单”。p5.js 是 Processing 的 JavaScript 版本继承了 Processing 的易用性和哲学但可以在浏览器中直接运行。p5.js支持2D/3D图形、声音、视频、DOM 操作、WebGL 渲染甚至可以通过扩展库连接硬件如 Arduino或处理数据。https://p5js.org/p5.js 的官网有非常完善的中文文档参见下图官方示例https://p5js.org/examples/下面简要介绍如何使用。它两个最重要的函数Function通过 setup() 和 draw() 函数就能快速创建动画和交互。丰富的功能。setup()这个函数用于准备工作。draw()这个函数会无限循环运行默认每秒 60 次就像动画片的每一帧。【p5.js 的坐标系在默认状态下2D 模式p5.js 的坐标系与原生 HTML5 Canvas 的坐标系在原点位置、轴的方向以及旋转方向上是完全一样的。• X 轴 向右增加和数学一样。• Y 轴 向下增加和数学相反。这意味着Y 越大物体越靠下。在 p5.js 支持3D 模式若开启了 3D 模式createCanvas(400, 400, WEBGL);3D 模式下p5.js 的原点 (0,0,0) 在画布的最中心而不是左上角x轴右左-y轴下上-z轴后前- 。】最简单的本地开发环境创建一个html文件下面先给出单文件实验的主体结构——这种单文件方案比较方便新建一个文本文件命名例如为测试.html用浏览器运行之即可。!DOCTYPE htmlhtmlheadscript srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js/script/headbodyscript// 在这里写你的p5.js代码/script/body/html示例下面给出2个示例一个 2D、一个3D 的例子为便于学习尽量有趣而简短。一个2D交互例子紧盯鼠标的眼睛无论你的鼠标移到哪里这两个眼球都会转过去盯着看如果你点击鼠标它会吓得“眨眼”。效果图源码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 title紧盯鼠标的眼睛/title !-- 引入p5.js官方库必须否则代码无法运行 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js/script /head body p紧盯鼠标的眼睛无论你的鼠标移到哪里这两个眼球都会转过去盯着看/p p如果你点击鼠标它会吓得“眨眼”。/p script function setup() { createCanvas(400, 400); } function draw() { background(255, 200, 200); // 粉色背景 // 画两只眼睛 drawEye(120, 200); drawEye(280, 200); } function drawEye(x, y) { push(); // 1. 保存当前坐标系状态 translate(x, y); // 2. 把原点移到眼睛中心 // 交互如果鼠标按下就闭眼画一条线 if (mouseIsPressed) { stroke(0); strokeWeight(10); line(-50, 0, 50, 0); } else { // 正常睁眼 noStroke(); // 画眼白 fill(255); ellipse(0, 0, 120, 120); // 核心数学计算鼠标相对于眼睛中心的角度 // atan2(y, x) 是计算角度的神器 let angle atan2(mouseY - y, mouseX - x); // 旋转画布让正前方对准鼠标 rotate(angle); // 画瞳孔 (因为旋转了所以只要往 X 轴正方向画就一定是指向鼠标的) fill(0); ellipse(30, 0, 40, 40); // 30是瞳孔偏离中心的距离 // 画个高光更有神 fill(255); ellipse(40, -10, 10, 10); } pop(); // 3. 恢复坐标系准备画下一只眼睛 } /script body /html3D螺旋的例子这是一个由方块组成的3D螺旋你可以移动鼠标来改变观看的角度和旋转速度。效果图源码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 title3D螺旋/title !-- 引入p5.js官方库必须否则代码无法运行 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js/script /head body p这是一个由方块组成的3D螺旋你可以移动鼠标来改变观看的角度和旋转速度。/p script function setup() { // 1. 开启 3D (WebGL) 模式 createCanvas(400, 400, WEBGL); } function draw() { // 3D 模式下背景最好是深色 background(30); // 2. 交互让整个场景随鼠标旋转 // map 把鼠标坐标映射到旋转角度 rotateY(map(mouseX, 0, width, 0, TWO_PI)); rotateX(map(mouseY, 0, height, 0, TWO_PI)); // 3. 材质使用法线材质 (自动赋予漂亮的彩虹色) normalMaterial(); // 或者试试发光材质 // ambientLight(50); directionalLight(255,0,0, 0, 0, -1); // 4. 循环生成螺旋方块 for (let i 0; i 20; i) { push(); // 每一层方块的动态旋转 // frameCount 让它动起来i 让每一层有时间差 (波浪效果) rotateY(frameCount * 0.02 i * 0.2); // 或是把它们稍微推开一点形成螺旋半径 translate(80, 0, 0); // 绘制方块 box(30); pop(); // 每一层向下移动一点 translate(0, 10, 0); // ※ 注意因为这里 translate 在 push/pop 外面 // 所以它会累积影响下一次循环形成长链。 } } /script body /html附、p5.js和原生 HTML5 Canvas代码写法对比任务画一个红色的圆原生 HTML5写法!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML5 Canvas 画圆/title /head body !-- Canvas画布设置width/height属性 -- canvas idcircleCanvas width400 height300/canvas script // 1. 获取Canvas元素 const canvas document.getElementById(circleCanvas); // 2. 获取2D绘图上下文所有绘制操作的核心对象 const ctx canvas.getContext(2d); // 3. 开始绘制路径画圆前必须先开启新路径 ctx.beginPath(); /* 4. 核心arc()方法绘制圆形路径 参数说明必记 arc(x, y, radius, startAngle, endAngle, anticlockwise) - x: 圆心的水平坐标画布左侧为0 - y: 圆心的垂直坐标画布顶部为0 - radius: 圆的半径像素 - startAngle: 起始角度弧度0 右侧水平方向 - endAngle: 结束角度弧度2*Math.PI 完整一圈360度 - anticlockwise: 是否逆时针绘制可选默认false顺时针 */ ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 要自己算弧度 ctx.fillStyle red; // 填充颜色 ctx.fill(); // 执行填充绘制 /script /body /htmlp5.js写法!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlep5.js 画圆/title !-- 引入p5.js官方库必须否则代码无法运行 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js/script /head body script // 1. setup函数p5.js的初始化函数只执行一次 function setup() { // 创建画布宽度400px高度300px createCanvas(400, 300); } // 2. draw函数p5.js的主循环函数每秒执行约60次 function draw() { fill(red); // 设置图形的填充颜色为红色 /* circle绘制圆形 说明 circle(圆心的水平坐标x 轴,圆心的垂直坐标y 轴,圆的直径); */ circle(100, 75, 50); // 绘制圆形 } /script body /html