---- theme: smartblue 本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。...本文简单讲讲如何使用 P5.js 播放视频。 播放视频文件 p5.js 除了可以使用 video 元素播放视频外，还支持使用 image 控件播放视频。...方式1：video元素播放视频 基础用法 p5.js 的 createVideo() 方法可以创建一个 元素。...preload() 是 p5.js 提供的一个生命周期，我们通常会将“加载静态资源”这个步骤放在 preload() 里执行。在 《p5.js光速入门》的图片 章节里介绍过。...接入摄像头 如果你的设备有摄像头，p5.js 是支持调用摄像头并将内容展示在画布上的。
---- 本文简介 点赞 + 关注 + 收藏 = 学会了 在 《p5.js 光速入门》 中都是使用 CDN 的方式去使用 p5.js 的，不太符合当下的开发习惯。...不管是使用 Vue 还是 React，我们日常项目大部分应该都是使用脚手架的方式进行开发了，按照 《p5.js 光速入门》 的方式在 module 模式下使用 p5.js ，如果不出意外的话肯定会有意外...安装 p5.js 进入 p5-demo 项目后，使用以下命令安装 p5.js npm install p5 --save 安装完成后再使用 npm run dev 运行项目。...创建画布 在创建画布前，需要先引入 p5.js。引入后可以尝试输出 p5.js 的版本。...p5.js 版本，在写本文时所用的是 v1.5.0 此时如果你打算像 《p5.js 光速入门》 那样直接使用 setup() 创建画布是不可能的了，因为在 module 模式下引入的 p5.js 的
下面援引下“官方”介绍，建议去网页体验一下： AwardPuzzel 是一个全国美展油画类获奖画作的数据视觉化作品，收录了美展第六届至第十二届的2276幅获奖作品，通过动态交互的方式呈现了中国油画30...本作品可以被当作研究工具为研究者和评论家使用，亦可作艺术作品欣赏。 我们希望通过这个平台分享我们的视角，也希望使用者通过自己的浏览和观察得到自己的结论。...幸运地找到了作品的出处：Generative Art #146 via:おかず，欣喜地发现附有 Processing 实现代码，而且该系列有更多不错的作品，遂萌发了想将其所有作品用 P5.js 实现一波并开源的想法...但在复现这个作品时发现 Processing 和 P5.js 真的很像，很多函数接口官方设计成统一的，极大降低了门槛。 ?...上图就是古柳用 P5.js 复现的效果，虽然还有些小问题，代码也不一定最规范，但先行分享，后续再优化哈！
p5.js 作为一个 canvas 库，也理所当然的提供了状态管理的方法。在 p5.js 里这两个方法叫 push() 和 pop()。...本文主要讲解 p5.js 的 push() 和 pop() 的用法。...之后你还想创建其他正方形，而且希望使用 p5.js 默认的样式，而不是使用绿色正方形。...以上就是 p5.js 的状态管理功能。...这是原生 canvas 就已经提供的能力，想了解原生方面的知识可以看 《canvas 状态管理》 推荐阅读 《p5.js 光速入门》 《p5.js 使用npm安装p5.js后如何使用？》
本文简介 p5.js 为开发者提供了很多有用的方法，这些方法实现起来可能不难，但却非常实用，能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。...什么是映射 从 p5.js 文档 中可以看到对映射的说明 说明：从一个范围内映射一个数字去另一个范围。 好家伙，使用映射来说明映射。...map() 语法 除了普通的映射规则外，p5.js 的 map() 方法还提供了映射后最大值和最小值的限制。...let gray = map(mouseX, 0, windowWidth, 0, 255, true) background(gray) } mouseX 是 p5...我在 《# p5.js 光速入门》 里有讲到。 再举个例子 根据当前鼠标所在位置x轴设置画布背景色的色调，根据鼠标所在位置y轴设置画布背景色的饱和度。
p5.js 同样具备变换功能，而且还封装了很多方便的函数去实现变换功能。本文就简单介绍一下 p5.js 的变换操作方法。 为了方便讲解(我懒)，本文使用 CDN 的方式引入 p5.js。...如果你在项目中使用 npm 的方式安装 p5.js ，可以参考 《p5.js 使用npm安装p5.js后如何使用？》 的用法。...40) } 你也可以试试语法2的方式 // 省略部分代码 translate(createVector(60, 60)) 在画布只有1个元素的情况下，也可以使用 translate() 的方式实现 《p5....js 使用npm安装p5.js后如何使用？》...pop() 和 push() 用法请看 《p5.js 状态》 旋转 rotate 旋转分为2D和3D，本文只讲2D的旋转。3D的旋转放在之后讲3D案例的文章再讲解。
简单来说，p5.js 能让“切图仔”更容易做出具有艺术感的作品（很能整活）。 举个例子，p5.js 很擅长实现下面这种效果。...于是，p5.js 应运而生！ p5.js 第一个测试版在 2014年8月 发布。 更多的故事可在 p5.js 官网 中寻找，本文的目标是光速入门 p5.js 。...找到 p5.js p5.js 官网 p5.js github地址 p5.js npm地址 快速上手 本文的目标是和各位工友快速上手 p5.js，所以 CDN 的方式引入 p5.js，因为这样非常快！...但在光速入门阶段我们只需掌握基础的图形，再加上自己的创意就可以做出很漂亮的作品。 文本 创建文本的方法叫 text()。...很多时候保留上一帧的数据会产生不错的艺术作品。
说简单点，就是用圆点画画，比如秀拉的这幅作品《检阅》。 这种风格除了用在艺术绘画方面，在眼科医院体检的时候也会用到，比如测红绿色盲。...思前想后，还是觉得用 p5.js 写会好点，毕竟这个库也是个比较知名的艺术库。 于是查了一下 p5.js 的 api ，做了一个简陋版的工具。...主要工作就是以上几步，而且这几步都用了 p5.js 提供的方法去实现。 主要用到的生命周期有 setup 和 draw，这部分我在 p5.js 光速入门 里有讲到。...创建颜色选择器、滑块、按钮分别用了 p5.js 的 createColorPicker() 、createSlider() 和 createButton() 方法。....js，用法上和 npm 下载的 p5.js 是有一丢丢区别的，想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用？》
内容简介 今天分享的内容，是收到的FME作品集。相对上一篇推送的用R实现的方式，用FME实现的更多。 下面我将按照：整体思路、关键转换器的方式对各个作品进行逐一解读。...点是空间中只有位置，没有大小的图形 线是由点形成的图形，只具有位置和长度，没有宽度 面是由线围合而成的图形 作品集 总的来说，使用三角网思路来查找缝隙的作品比较多，有四个（加油＿琦、傻狗、鹦鹉拔牙、以及我...下面对各个作品进行详细解读。...需要注意的是，这次征集的作品，都是针对样例数据（如图所示的几个面）的解决方案。在更换数据源的时候，上述方案可能会找得到狭长面，也可能找不到。...我希望以后的作品征集，能有更多的作者参与进来，我们一起来交流学习。
3.拥有置于前台的服务，实现Notification的播放、暂停按钮与其他界面同步。
正经人谁用p5.js啊？...（ 狗头保命） 但是当学校课程要求（比如今年UCL的DFPI），或者没有其他前端基础的情况下，想把processing里的一些效果在网页上展示，这时候可能就不得不使用p5.js了。...---- 废话不多说，今天讲一些在p5.js里写3D的体会。WEBGL模式，在没有任何设置的情况下，相机的默认位置在（0，0，625），你画在原点（0，0，0）的物件会出现在画面的正中央。...如果想要在创作时快速尝试相机位置，亦或是希望作品本身能有3D的漫游体验，这时就免不了需要制作一个相机控制系统。在p5.js中，p5.EasyCam这个library被用于简单的相机控制。
---- theme: smartblue 本文简介 p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。...p5.js 作为一款 canvas 库，很自觉的提供了 drawingContext 给开发者访问 canvas 上下文。 我们就可以通过这个方法去实现渐变。...上面的代码用到 width 和 height 是 p5.js 提供的变量，这是画布的宽度和高度的意思。...小题目 在 《Canvas 从进阶到退学》 里提到 canvas 可以设置描边渐变，那在 p5.js 里应该如何实现描边渐变呢？
知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" />本作品由
theme: smartblue 本文正在参加「金石计划」 本文简介 带尬猴，我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形，但其实 p5.js 是提供了基础的3D图形的。...jcode 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。...除此之外，我们还要了解 frameCount，这是 p5.js 提供的一个全局系统变量，它记录了 p5.js 运行了多少帧。...先提一嘴 processing 和 p5.js 的关系：processing 是用 Java 编写的，而 p5.js 是 processing 的 JS 版。....js 变换操作》 和 《p5.js 状态管理》 里讲到的知识。
---- theme: smartblue 本文简介 在 《p5.js 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。...本文就把背景图这部分内容补充完整，并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法 在 p5.js 里使用背景图只需做以下几步操作即可。...p5.js 官网上的案例是这样写的。...所以在 p5.js 官网的例子中，会在 setup() 里加载图片资源，然后在 draw() 里再把图片绘制出来。 但其实还有更安全的写法。....js 生命周期方面的知识还不太了解的工友可以看看 《p5.js 光速入门》 。
最近在家也不能出门，突然想到自己之前hackathon上面用P5.js做的一些小项目，虽然在本地上面写完了，但是在演示环节还是要部署在网页上，因为我自己也没有接触过网页搭建，所以当时比赛的时候，硬生生的没搞出来...正好我最近也在研究一些GitHub的玩法，很多人都用github pages搭建自己的网站，那我也寻思了一下，是不是也可以用github pages部署自己的p5.js代码呢，稍微尝试了一下，发现还是很容易的...所以这个时候只需要把gameoflife加在网址后面，就可以看到部署好的P5.js啦，所以说也就是可以在一个repositories里面放很多个，不需要每次都创建新的了。 ?
原文链接：http://code.tutsplus.com/tutorials/javascript-animation-that-works-part-4-o...
本次推荐中科大的三位大佬2020年集创赛arm杯的作品！赛题要求实现"基于 Arm 处理器核的智能化 SoC 设计",该作品成功晋级决赛，并获得国奖,下面是他们的作品介绍！
毕设作品线上可看，「清华大学美术学院2020届线上毕业作品展」，这也是之前在某群友朋友圈看到后了解到的，非常值得一看。 ? ? ?...虽然古柳一直对地图没啥兴趣、没啥想复现的地图可视化作品，但之前注意到群里几次谈论地图相关内容时蛮多人活跃；而且11月份刷推特看到参加30天地图挑战活动打卡的人也很多，看起来对地图感兴趣的人比我想的要多。...先翻出古柳那篇用到径向图的文章：财新网「星空彩绘诺贝尔奖」可视化作品复现，简单回顾下几个要点，如极坐标系与直角坐标系下坐标转换函数写法。 ?...不过也更有向帆老师全国美展油画获奖作品的可视化作品 「AwardPuzzle」 内味了。...重新看了下该作品主要是 Processing 实现，最近古柳打算重新学习下 P5.js，后续可以用 P5.js 也实现一遍目前 D3.js 完成的图片/颜色可视化效果。
theme: smarblue 文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。...学习本文前你需要具备一点 p5.js 的知识，想了解的请查看 《p5.js 光速入门》。...创建画布 在 p5.js 里创建画布的方法叫 createCanvas，但其实如果你不使用该方法一样可以创建画布。...如果你使用了p5.js 的 setup() 或者 draw() 之类的生命周期函数，它们也会默认在页面上创建一个画布。...让画布绑定指定元素 使用前面提到的方法创建画布，p5.js 默认会帮我们把画布添加到 标签的最后面。如下图所示。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
