---- 本文简介 点赞 + 关注 + 收藏 = 学会了 在 《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 是支持调用摄像头并将内容展示在画布上的。
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 基础2D图形 文字 图形样式设置 图片 事件(交互相关的) 基础动画 其中还会讲解部分 p5.js 全局方法。 本文不涉及3d部分(放到下一篇吧)。...自己动手试试吧~ 图片 在打算将图片加入到画布之前,我们需要了解 preload() 函数。 preload() 函数也是 p5.js 的一个生命周期函数,它会在 setup() 前执行。...所以一般会把图片和视频等资源加载写在 preload() 里。 了解完 preload() 后,我们就可以使用 loadImage() 方法加载图片,使用 image() 方法渲染图片。...} loadImage() 方法传入图片地址 image(img, x, y) 方法第一个参数是图片对象。...x 和 y 是图片左上角的坐标。 除了可以渲染 jpg 和 png 外,p5.js 还可以渲染动图gif。
theme: smartblue 本文正在参加「金石计划」 本文简介 带尬猴,我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形,但其实 p5.js 是提供了基础的3D图形的。...纹理可以是图片,也可以是视频。我先用图片资源举例。 加载资源需要在 preload() 这个生命周期里处理,我在 《p5.js 光速入门》 里有讲到,忘记这知识点的工友可以去看看。...将纹理贴到立方体上,有以下几个步骤: 加载纹理资源(图片或者视频) 设置纹理 创建立方体 let myTexture = null function preload() {...除此之外,我们还要了解 frameCount,这是 p5.js 提供的一个全局系统变量,它记录了 p5.js 运行了多少帧。...frameCount * 0.01) // 设置纹理贴图 texture(myTexture) box(100) } 视频纹理 设置视频纹理其实和设置图片纹理差不多
,p5.js 基础教程 1-7,并全部跟着敲了遍代码,虽然无字幕,但还蛮好啃的,有很多针对初学编程的知识讲解。...Programming with p5.js - YouTube) ? 习得新技能后,立马用明星关系图谱的图片简单粗暴的拼了下照片墙,虽然离美展油画的效果差了十万八千里,但也算是卖出了第一步。...其实以前就没少拼照片墙,想来大家也都见过爬取微信好友然后拼图的文章,但古柳还是安利下这篇旧文,里面的图片绝对值得一看(如果你看完觉得也不咋地,那......也就随它去吧):用python的PIL库轻松拼接一百张照片...当然因为目前 P5.js 不够熟练,JavaScript / ES6 之类也只是入门,难免有所担心和顾虑。...上图就是古柳用 P5.js 复现的效果,虽然还有些小问题,代码也不一定最规范,但先行分享,后续再优化哈!
---- theme: smartblue 本文简介 在 《p5.js 光速入门》 里我们学过加载图片元素,学过过背景色的用法,但当时没提到背景图要怎么使用。...本文就把背景图这部分内容补充完整,并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法 在 p5.js 里使用背景图只需做以下几步操作即可。...正确的写法是先加载好图片再绘制。 p5.js 官网上的案例是这样写的。...所以在 p5.js 官网的例子中,会在 setup() 里加载图片资源,然后在 draw() 里再把图片绘制出来。 但其实还有更安全的写法。...p5.js 提供了一个 preload() 的生命周期,这个生命周期的执行时间比 setup() 要早。preload() 通常用作资源加载,比如需要加载图片或者视频的时候会写在这里。
---- theme: smartblue 本文简介 p5.js 作为一款艺术类的 canvas 库,对颜色方面的支持是挺下功夫的,比如本文要介绍的渐变方法。...p5.js 作为一款 canvas 库,很自觉的提供了 drawingContext 给开发者访问 canvas 上下文。 我们就可以通过这个方法去实现渐变。...上面的代码用到 width 和 height 是 p5.js 提供的变量,这是画布的宽度和高度的意思。...小题目 在 《Canvas 从进阶到退学》 里提到 canvas 可以设置描边渐变,那在 p5.js 里应该如何实现描边渐变呢?
正经人谁用p5.js啊?...( 狗头保命) 但是当学校课程要求(比如今年UCL的DFPI),或者没有其他前端基础的情况下,想把processing里的一些效果在网页上展示,这时候可能就不得不使用p5.js了。...---- 废话不多说,今天讲一些在p5.js里写3D的体会。WEBGL模式,在没有任何设置的情况下,相机的默认位置在(0,0,625),你画在原点(0,0,0)的物件会出现在画面的正中央。...在p5.js中,p5.EasyCam这个library被用于简单的相机控制。 但,我就是不用 今天讲一个超傻瓜、全程使用原生function的方法,能基本实现在第一人称游戏里的移动效果。
最近在家也不能出门,突然想到自己之前hackathon上面用P5.js做的一些小项目,虽然在本地上面写完了,但是在演示环节还是要部署在网页上,因为我自己也没有接触过网页搭建,所以当时比赛的时候,硬生生的没搞出来...正好我最近也在研究一些GitHub的玩法,很多人都用github pages搭建自己的网站,那我也寻思了一下,是不是也可以用github pages部署自己的p5.js代码呢,稍微尝试了一下,发现还是很容易的...所以这个时候只需要把gameoflife加在网址后面,就可以看到部署好的P5.js啦,所以说也就是可以在一个repositories里面放很多个,不需要每次都创建新的了。 ?
思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名的艺术库。 于是查了一下 p5.js 的 api ,做了一个简陋版的工具。...主要工作就是以上几步,而且这几步都用了 p5.js 提供的方法去实现。 主要用到的生命周期有 setup 和 draw,这部分我在 p5.js 光速入门 里有讲到。...创建颜色选择器、滑块、按钮分别用了 p5.js 的 createColorPicker() 、createSlider() 和 createButton() 方法。...isDrawing = false } function resetCanvas() { background(255) } 上面的写法是用 CDN 的方式引入 p5....js,用法上和 npm 下载的 p5.js 是有一丢丢区别的,想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用?》
theme: smarblue 文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。...学习本文前你需要具备一点 p5.js 的知识,想了解的请查看 《p5.js 光速入门》。...创建画布 在 p5.js 里创建画布的方法叫 createCanvas,但其实如果你不使用该方法一样可以创建画布。...如果你使用了p5.js 的 setup() 或者 draw() 之类的生命周期函数,它们也会默认在页面上创建一个画布。...让画布绑定指定元素 使用前面提到的方法创建画布,p5.js 默认会帮我们把画布添加到 标签的最后面。如下图所示。
在本文中,我们将学习在 p5.js 中通过使用线条、 矩形和椭圆来制作房屋的各个部分来制作房屋的简单动画。...( 像不像你小时候上画画课和微机课画的那个) 目录 1.什么是p5.js? 2.什么是动画? 3.绘制方案 4.代码实现 5.结尾 1.什么是p5.js?...使用软件速写本的原始比喻,p5.js 具有全套绘图功能。但是,您不仅限于绘图画布,您可以将整个浏览器页面视为您的草图!...为此,p5.js 具有插件库,可以轻松与其他 HTML5 对象交互,包括文本、输入、视频、网络
以下是 prompt 分享: 标题屏幕(使用 GPT-4 里的 DALL・E 3):名为「Angry Pumpkins」电子游戏的横向主屏幕图片。设计参考「愤怒的小鸟」美术风格,但又有所不同。...背景图(使用 Midjourney),作者使用了一张图片作为背景(并进行了多次修补),图片的 prompt 为:iPhone 截图中「愤怒的小鸟」的天际线,万圣节版,墓地,风格为浅海蓝宝石和橙色,新传统主义...他使用了一些小技巧和 prompt,首先从简单的事情开始做起,比如「我能不能使用 matter.js 和 p5.js 创建一个愤怒的小鸟风格的游戏?...再比如「把怪物设计成圆形」、「我想用粒子效果制作一个火炬,是否可以通过 p5.js 来实现?」如此种种,不断与 GPT-4 进行交互试验,最终有了现在的游戏效果。
MobileNet创建图像分类模型 const classifier = ml5.imageClassifier('MobileNet', onModelReady); // Step 2: 选择一张图片...const img = document.querySelector("#myImage") // Step 3: 预测图片分类结果 let prediction = classifier.predict...ml5js 如何入门 学习ml5.js最佳方式是从官方实例入手:examples.ml5js.org 大家可以通过 p5.js web editor查看案例,不但可以实时看到效果,还有具体代码: p5....script> 模型实现在 sketch.js,代码如下: const image = document.getElementById('image'); // 需要识别的图片...results[0].label; probability.innerText = results[0].confidence.toFixed(4); }); 在image目录下放我们要识别的图片
CCD 角色动画研究 —— IK 的三种结算方法 Cyclic Coordinate Descent in 2D CCD - p5.js Fullscreen: https://editor.p5js.org...FABRIK - p5.js Fullscreen: https://editor.p5js.org/YunYouJun/embed/bS8jB3EsC Editor: https://editor.p5js.org
-- load processing library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/<em>p5.js</em>/0.8.0/p5...我们还利用<em>P5.js</em>(https://p5js.org/)库来处理视频输入并在视频本身上显示标签。 我不需要在电脑上安装任何东西。...ml5.js是一个基于TensorFlow.js和<em>p5.js</em>的库。<em>p5.js</em>是另一个库可以使你更容易在浏览器中访问网络摄像头。...-- load <em>p5.js</em> --> <
1) 引入 handtrack.js 我们在 html 中除下引入 p5.js、p5.sound.min.js(如果用到声音处理)等 p5 核心 js 文件后,引入 <script src="https://cdnjs.cloudflare.com/ajax/libs/<em>p5.js</em>/1.4.0/addons/p5
领取专属 10元无门槛券
手把手带您无忧上云