---- 本文简介 点赞 + 关注 + 收藏 = 学会了 在 《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 的
---- theme: smartblue 本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。...本文简单讲讲如何使用 P5.js 播放视频。 播放视频文件 p5.js 除了可以使用 video 元素播放视频外，还支持使用 image 控件播放视频。...方式1：video元素播放视频 基础用法 p5.js 的 createVideo() 方法可以创建一个 元素。...preload() 是 p5.js 提供的一个生命周期，我们通常会将“加载静态资源”这个步骤放在 preload() 里执行。在 《p5.js光速入门》的图片 章节里介绍过。...接入摄像头 如果你的设备有摄像头，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 同样具备变换功能，而且还封装了很多方便的函数去实现变换功能。本文就简单介绍一下 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 为开发者提供了很多有用的方法，这些方法实现起来可能不难，但却非常实用，能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 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 很擅长实现下面这种效果。...于是，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 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。...本文就把背景图这部分内容补充完整，并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法 在 p5.js 里使用背景图只需做以下几步操作即可。...p5.js 官网上的案例是这样写的。...所以在 p5.js 官网的例子中，会在 setup() 里加载图片资源，然后在 draw() 里再把图片绘制出来。 但其实还有更安全的写法。....js 生命周期方面的知识还不太了解的工友可以看看 《p5.js 光速入门》 。
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 状态管理》 里讲到的知识。
最近在家也不能出门，突然想到自己之前hackathon上面用P5.js做的一些小项目，虽然在本地上面写完了，但是在演示环节还是要部署在网页上，因为我自己也没有接触过网页搭建，所以当时比赛的时候，硬生生的没搞出来...正好我最近也在研究一些GitHub的玩法，很多人都用github pages搭建自己的网站，那我也寻思了一下，是不是也可以用github pages部署自己的p5.js代码呢，稍微尝试了一下，发现还是很容易的...所以这个时候只需要把gameoflife加在网址后面，就可以看到部署好的P5.js啦，所以说也就是可以在一个repositories里面放很多个，不需要每次都创建新的了。 ?
本次推荐中科大的三位大佬2020年集创赛arm杯的作品！赛题要求实现"基于 Arm 处理器核的智能化 SoC 设计",该作品成功晋级决赛，并获得国奖,下面是他们的作品介绍！
原文链接：http://code.tutsplus.com/tutorials/javascript-animation-that-works-part-4-o...
毕设作品线上可看，「清华大学美术学院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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
