精华内容
下载资源
问答
  • 用于p5.js的音乐和音频编程。 这是的薄包装,可轻松进行音乐排序和音频信号处理。 ##用法该库位于dist文件夹中。 在p5草图中使用它: 包含p5.js 包括p5.gibber.js 包括您的sketch.js文件 包含的示例目录中有...
  • P5.js-Semestre2:P5.js模板-Esthétique算法
  • 意见: CSDN太难用了,审核太难受,发表了看不了,不方便文章预览修改格式。 QQ空间待审核的话自己还是可以看的,求改进!...p5.js是一个为艺术家、设计师而开发的Javascript库,可以看作是Processing的We...

    一、什么是p5.js

     

    最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js。

    主讲老师就是开发者之一……还是挺激动的。

    p5.js是一个为艺术家、设计师而开发的Javascript库,可以看作是Processing的Web版本。如果有Processing学习经验的话,p5.js上手会非常快。

    至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者。

    我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫。

     

    二、使用p5.js

    p5.js拥有在线的代码编辑器,网址如下:

    http://alpha.editor.p5js.org/

    (新地址为 https://editor.p5js.org/

     

    左边输入代码,点击运行按钮,就可以在右边看到代码运行效果。

    你可以注册一个p5.js帐号,每次你的代码都可以保存在官方网站,无论是修改、测试或展示都十分方便。

    下图是用ellipse()函数画了一个圆:

     

     

    三、上手p5.js

    当你新建了一个p5.js工程后,便会生成以下的代码:

     

    function setup() { //setup函数,每次程序开始运行时执行一次,用于初始化。
      createCanvas(400, 400);//生成一个400x400的画布
    } 
    function draw() { //draw函数,每秒运行60次,不断地在画布上绘制图形
      background(220);//绘制背景,颜色为RGB(220,220,220)
    }

    p5.js程序总是从setup()开始执行,执行过一次setup()后,便进入draw()函数的不断循环调用。

    可以发现,语法和JavaScript并没有什么太大的不同,只是多了很多特殊的函数以供调用罢了。

     

    四、绘制基本图形

    在p5.js中,绘制图形是件很容易的事情,有很多相关函数:

     

    function setup() { 
      createCanvas(400, 400);
    } 
    
    function draw() { 
      background(220);
    	ellipse(100,100,100,100);//绘制椭圆(x,y,宽,高)
    	triangle(150,150,150,200,200,200);//绘制三角形(x1,y1,x2,y2,x3,y3)
    	quad(180,100,200,150,270,150,250,100);//绘制四边形(x1,y1,x2,y2,x3,y3,x4,y4)
    	rect(30, 20, 50, 50);//绘制矩形(x,y,宽,高)
    	line(0,0,100,100);//绘制线段(x1,y1,x2,y2)起点至终点
    	arc(200, 50, 50, 50, 0, HALF_PI);//绘制弧(x,y,宽,高,起始角度,终止角度)
    }

    效果如下图所示:

    当然,线条色和填充色都是可以替换的,也可以修改线条粗细:

    function setup() { 
      createCanvas(400, 400);
    } 
    
    function draw() { 
      background(220);
    	
    	stroke(255,128,128);
    	strokeWeight(5);
    	fill(255,200,0);
    	ellipse(100,100,100,100);
    	triangle(150,150,150,200,200,200);
    	
    	noStroke();
    	fill(100,255,0);
    	quad(180,100,200,150,270,150,250,100);
    	rect(30, 20, 50, 50);
    	
    	stroke(0);
    	line(0,0,100,100);
    	arc(200, 50, 50, 50, 0, HALF_PI);
    }

     

    效果如下图所示:

     


     

    五、查阅Reference

    p5.js提供了许多函数用来进行创作,并且许多函数都有多种重载函数,这里不一一讲解。

    p5.js官网提供了Reference,对每一种函数都进行了详细的解释,可以通过查阅这些函数的用法来进一步学习p5.js,网址如下:

    https://p5js.org/reference/

    展开全文
  • LearningProcessing-p5.js, 使用 p5.js 将所有学习处理示例移植到 JavaScript LearningProcessing-p5.js从学习处理到使用 p5.js的所有示例的端口。 例如处理示例访问 github/shiffman/LearningProcessing 。
  • p5.j​​s 用于学习p5.js的示例代码和相关材料
  • p5.js Welcome! p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free ...
  • 该项目将涉及开发用于通过p5.js进行教学的工具,添加功能以对形状进行动画处理以及以不同的格式(mp4或webm)导出动画。 主要重点是介绍一个简单易用的库来制作动画和制作场景。 这还将利用p5.js核心库-p5.sound.js...
  • 使用p5.js-Library在JavaScript中可视化的排序算法的集合。 可行的github.io示例: ://michaelholley.github.io/p5.js_SortingAlgorithmVisualization/ 您可以在这里找到p5.js-Library: ://p5js.org/
  • p5.js-web-editor, 正在进行 p5.js 网络编辑器,即将进行 p5.js-网络编辑器这个项目目前正在开发中。 它将在( public ) 测试版发布时宣布。插件开发安装fork 这里存储库。将分支存储库和cd克隆到其中$ npm install...
  • p5.j​​s-website-translator 是一个平台,旨在帮助贡献者翻译 p5.js 网站。 如何使用 p5.js-website-translator : 打开 。 选择要翻译的 p5.js 网站部分。 选择要翻译文本的语言。 (目前只能编辑 p5.js-...
  • p5.sound由Tone.js (由Yotam Mann开发的交互式音乐框架)的几个模块(时钟,TimelineSignal和信号数学组件)构建而成。 参考与启示 Yotam Mann和TONE.js Boris Smus Web Audio API书籍 Wavesurfer.js 网络音频...
  • p5.SVG的主要目标是为p5.js提供SVG运行时,以便我们可以在<svg>中使用p5强大的API进行绘制,将内容保存到svg文件中,并且无需光栅化即可处理现有的SVG文件。 文件 对于贡献者 建立 npm run build 确保已安装...
  • P5.js

    2019-10-20 11:50:23
    P5.js P5.js绘制动态图形 一、实现效果 P5.js是一个JavaScript库,是Processing的Web版本,应用于艺术和设计领域。 二、代码 (1)第一张图片是基于P5.js的2D图形创作出来的,每一个3/4圆都是运用arc()...

    P5.js

    P5.js绘制动态图形

    一、实现效果

    P5.js是一个JavaScript库,是Processing的Web版本,应用于艺术和设计领域。
    在这里插入图片描述
    在这里插入图片描述

    二、分析与代码

    (1)第一张图片基于P5.js的2D图形,首先分析一下这个动态图的特点:
    1.图案完全由3/4圆构成,每个3/4圆的的差异仅仅体现在旋转方向和缺口朝向的位置不同;
    2.每行或每列次序为奇数或者偶数的3/4圆旋转方向和缺口朝向相同;
    3.相邻两行两列的对应位置的3/4圆的旋转方向和缺口朝向均相反。
    根据以上分析,首先实现一个3/4圆的旋转,需要注意的是,为了让图形以自己为中心旋转而不是以原点为中心旋转,需要在rotate()前后增加translate()函数,假设图形中心坐标为(x,y)不同于上次用过的计算机图形学函数,在旋转之前首先要把图形中心平移到(2x,2y),即translate(x,y),现在调用rotate()相当于让图形绕(x,y)旋转(相当于平移之后的原点),然后调用translate(-x,-y),将图形平移回原始位置(x,y)。
    在这里插入图片描述

    function shape(x, y, R,angle,direction)
    //x,y是圆心坐标,R是半径,angle调整初始缺口朝向,direction决定旋转方向
    {
      push();
      translate(x,y);
      rotate(angle);//将3/4圆形的缺口旋转到合适角度
      translate(-x,-y);
      
      translate(x,y);//使3/4圆绕图形中心旋转
      if(millis() / 800>=HALF_PI*(num+1))
        num++;
      rotate(direction*cnt);
      translate(-x,-y);
      noStroke();
      arc(x,y,R,R,0,PI*(3/2),PIE);
      pop();
    }
    

    以上为绘制每个3/4圆的代码。

    关于缺口朝向和旋转方向,根据分析过的特点2和3,利用奇数和偶数的区别来决定。首先假设初始朝向第四象限的位置,即上图所示方向。
    缺口朝向:奇数行奇数列,第四象限,
    奇数行偶数列,第三象限,即顺时针旋转90°
    偶数行偶数列,第二象限,即逆时针旋转180°
    偶数行奇数列,第一象限,即顺时针旋转90°
    旋转方向:相邻两个相反,又因为每行每列都是偶数个3/4圆,所以实际上只需要一个初始值为-1的参数循环与-1相乘即可。

    最后关于旋转的速度,可以看出来它是以正弦曲线的绝对值的斜率大于0那一部分的速度来旋转的,即y=|sinx|的[180k,90+180k],k=0,1,2……的部分。当旋转速度为0的时候,就直接跳过半个周期,进入下一个周期的函数曲线上升部分,否则会出现图形回转的情形,下图中绿色部分为实际用到的部分:在这里插入图片描述
    (2)第二张图片基于P5.js的3D图形,即WebGL,图形特点如下:
    1.图元为一个小球,以正弦曲线y=sinx的规律沿着z轴运动,同时也向着x轴正方向和y轴负方向做短距离的移动;
    2.整体上像是一个球从图像中间凸起来然后凹下去,实际上可以以中心位置的小球为基础,按照据这个小球的远近,以正弦规律规定其余小球的初相位。

    function shape(x,y,phase)
    {//x,y为小球的位置,phase为初相
    	push();
    	translate(x,y,0);
    	translate(-20,20,120*sin(phase+millis()/500));
      noStroke();
      ambientMaterial(255,255,255);
      sphere(5);
      pop();
    }
    

    放置小球和规定小球初相的代码如下:

      var num=20;
      var l=20;
      for (var i = num - 1; i >= 0; i--) {
      	for (var j = num - 1; j >= 0; j--) {
      		var t=sin(HALF_PI*(num/2-i)/10)+sin(HALF_PI*(num/2-j)/10);
      		shape(i*l,j*l,t);
      		shape(-i*l,j*l,t);
      		shape(i*l,-j*l,t);
      		shape(-i*l,-j*l,t);
      	}
      }
    

    两层循环中的四个shape()分别在x,y平面的四个象限上摆放小球,参数t是根据小球距离画布中心的距离来确定初相,两个sin函数中都用到了num/2-i或者num/2-j是为了保证在同一个时间,有的小球初相为正,有的小球初相为负,是为了保证突出的球半径足够小,使得运行时能够看出一个球形突出。

    三、拓展

    (1)去除了在绕自身中心旋转前后的平移操作后,图像的平移会呈现一种破碎重组的规律:在这里插入图片描述
    (2)增大了参数t中sin的自变量的值之后(t=sin(HALF_PI*(num/2-i)/5)+sin(HALF_PI*(num/2-j)/5)),突出的一个球成功变成了四个球,加上减少自然光,立体效果更加突出:
    在这里插入图片描述
    (3)添加随机颜色之后的效果更加显著:
    在这里插入图片描述

    展开全文
  • p5.j​​s-text_by_cicrcles 使用p5.js通过cicles绘制文本的脚本
  • 完成有关此问题的工作后, 针对p5.js main分支 。 在PR的描述字段中,包括“解决#XXXX”标签,以解决您要解决的问题。 如果PR解决了该问题,但未能完全解决(即,在PR合并后问题应保持打开状态),请写“ addresses...
  • 这是p5.js的类,它将用作计时器。 它封装了millis()函数和各种您可以用来执行异步计时操作的变量。 将其添加到index.html 使用此库的最简单方法是将其放置在与草图相同的文件夹中。 然后,将以下行添加到index....
  • p5.collide2D, 2d p5.js 冲突库 p5.collide2D p5.js的2d 冲突检测库p5.collide2D 提供了使用 p5.js. 计算 2D 几何图形碰撞检测的工具p5.collide2D 包含一些版本,以及对探测书( )的 Jeffrey碰撞的函数
  • p5.js中,它主要致力于处理2D形状,粒子系统,噪声和物理。 完整的文档可以在找到 产生 该文档是使用生成的。 通过运行gen_docs.sh或使用来构建文档 jsdoc -r ./js -R README.md -d ./docs 您可以找到自己的作品...
  • p5.play, 用于游戏和playthings的p5.js 库 p5.play 是用于创建游戏和playthings的p5.js 库。你可以在 p5play.molleindustria.org 找到示例和更多信息。p5.play 提供了一个,类来管理 2D 个空间和特性,如动画支持。...
  • 代码性质示例p5.js 这是《 代码示例库。 如果您要查找本书的原始内容(文本,插图,图像,CSS等),请查看。 原始的示例以及的。
  • 康威的生活游戏 使用P5.js 这是我尝试使用p5.js制作Conway的生活游戏。 这是我第一次使用p5,所以可能有比我在这里做的更好的工作方式。 此处演示: : 阅读有关生活游戏的精彩文章: :
  • p5.js

    2020-12-09 02:00:00
    t figure out how to start using p5.js I downloaded the zip folder but don't know where to go from there. I try to open different folders but it gives me error messages. I even unzipped it and I ...
  • p5动画 p5.animS通过渲染其绘制过程来对p5.js形状进行动画处理。
  • 使用P5.JS和Tensorflow.js模拟线性回归算法 概述 我已经使用P5.JS图形库和Tensorflow.js深度学习库创建了线性回归的仿真。 用户可以在运行时在画布上插入数据点,因此,最佳拟合线将更改其参数。 Tensorflow.js用于...
  • 使用P5.JS和Tensorflow.js模拟Logistic回归算法 概述 我已经使用P5.JS图形库和Tensorflow.js深度学习库创建了Logistic回归的仿真。 用户可以在画布上插入数据点以及在运行时更改数据点的类,因此二进制分类器行将...
  • p5-模板 启动p5.js项目的模板! 包括dat.gui,stats.js和gif.js
  • p5.j​​s SceneManager被全世界无数的p5.js开发人员用来向其p5.js草图添加场景管理功能。 如果您在项目中使用“ p5.js SceneManager”,那么如果您与我共享项目的详细信息将非常有用(我甚至可以在此页面上展示您...
  • 使用d3.js实用程序在p5.js中进行数据可视化 在d5.js中最少使用d3.js实用工具的一系列示例,而无需将它们的不同范例混合在一起。 本教程适用于谁? 本教程无意鼓励将d3.js与p5.js一起使用。 这两个库使用不同的范式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,387
精华内容 1,354
关键字:

p5.js