在使用 p5js 进行 processing 练习或者创作的时候，要经常查阅到p5js的官方 api 文档[1]，但你知道吗？这个文档里面有一个“隐藏”的大佬。 为啥称之为“隐藏”？...因为这个属性其实是 html 中 canvas 绘画系统的一个重要组成，在 p5js 中只是提供了这个属性的访问，而这个属性内部有大量的方法，却是 p5js 中没有提到的。...类的所有 api 在这里[3]。...绘制阴影 效果：一个跟随鼠标运动的圆，圆的阴影色为黑色，且阴影的模糊范围是 100。...绘制的代码思路分析，欢迎关注不迷路。
Processing 的 PixelFlow 是一个高性能的流体粒子物理仿真库，为数不多的代码可以呈现出非凡的视觉效果，在互动交互中使用比较广泛。...，封装的好处不言而喻，我们很容易将太极的绘制类共享，且代码进行了分离，使得代码更具可读性、维护性。...1）引入流体库 PixelFlow，这里首先导入流体库，菜单栏的速写板 -> 添加库文件 -> PixelFlow，就可以导入PixelFlow库，但import的类有些多。....*; import processing.opengl.PGraphics2D; 2）我们要将画布的渲染模式修改成 P2D，使得 Processing 可以使用 GPU 高效渲染。...，使得流体的扩散不能流到边界之外。
默认的绘制速度是每秒 60 个画面，但是您也可以通过调用 frameRate（） 函数来更改这个速度。 此外，还可以使用 noLoop（） 和 draw（） 来控制在何时绘制画面。...noLoop（） 函数会导致绘制停止，而使用 loop （）函数则可以重新开始绘制。通过调用redraw（） 可以控制 draw 在何时调用。 ...要想快速访问，可以使用pixels 数组（与 loadPixels 和 updatePixels 函数一致）。 在 Processing 内使用单个函数绘制形状十分简单。...要设置在绘制形状时使用何种颜色，可以利用 stroke （）函数。此函数可接受一个单独的灰度参数或三个 RGB 参数。此外，还可以用 fill 命令定义这个形状的填充色。 ...参考资料：http://www.ibm.com/developerworks/cn/opensource/os-datavis/ 下面是在Processing客户端运行的一个demo（当然也可以在Eclipse
前言 Processing 开始使用的是 Java 语言，由于 Java 语言的跨平台，我们可以在 Windows、Mac、Linux 系统上安装 Processing 软件来进行创作。...有其他路子吗 iOS 平台没办法运行 Java 虚拟机，Processing Java 以及 Android 版本显然不符合要求，而 Python 版还有点希望。...需要注意的是，每一种移植的版本，如 p5js、Processing Android、Processing Python 或多或少在处理比如文件、视频、音频等都有一些不同。...这里我们聚焦的是绘制部分。 另一个重磅功能 Swift 语言可以在开发软件 Xcode 中运行 Playground 模式，而 SwiftProcessing 恰好支持 Playground。...在 Playground 中可以使用 Live View 快速测试自己想要做的动画或特效。这种形式非常适合创意图形，或者制作教程。 下面是小菜运行的官方源代码中 Playground 的一个例子。
在命令窗口中，你可以输入MATLAB命令，例如：1+2，系统会返回结果3。 除此之外，MATLAB还有其他的界面，包括Script编辑器、变量窗口和图形窗口。...Script编辑器可以用来编写MATLAB脚本文件。变量窗口可以显示当前MATLAB工作空间中的所有变量。图形窗口可以用来绘制数据和图表。...例如，如果您想在MATLAB中计算1+2，您可以键入以下命令： >> 1+2 系统将输出结果3。 变量和数组 在MATLAB中，变量可以用来存储各种类型的数据，例如数字、字符串和矩阵。...您可以将此函数保存在名为“myfunc.m”的文件中，并从命令窗口中调用该函数： >> y = myfunc(2) y = 4 绘图 MATLAB包含了许多绘制数据和图表的功能。...图像处理工具箱（Image Processing Toolbox） Image Processing Toolbox可以进行图像处理和计算机视觉应用程序的开发，例如图像增强、分割和特征提取等。
下次绘制交互 (INP) 下次绘制交互 (INP) 是一项新的指标，浏览器计划于 2024 年 3 月将其取代取代首次输入延迟 (FID) ，成为最新的 Web Core Vitals（Web 核心性能指标...良好的响应能力意味着页面可以快速响应并且与用户进行的交互。当页面响应交互时，最直接的结果就是视觉反馈，由浏览器在浏览器渲染的下一帧中体现。...这意味着，当任务在主线程上运行时，该任务将运行必要的时间才能完成。任务完成后，控制权交会还给主线程，这样主线程就可以处理队列中的下一个任务。...除了任务永远不会完成的极端情况（例如无限循环）之外，屈服是 JavaScript 任务调度逻辑不可避免的一个方面。屈服迟早会发生，只是时间问题，而且越早越好。...每个小的任务完成后，控制权就会交还给主线程，浏览器就有了时间去及时的完成用户的交互或页面的绘制，所以页面会很丝滑： 这个思路太棒了，在原生的 JavaScript 代码，或者其他框架中我们也想要这样的能力怎么办
在成熟的游戏引擎如 Unity、UE 上都有自己的粒子系统： 粒子系统的构成 从系统设计的角度来看的话，粒子系统一般可以分为发射器、运动器、渲染器、回收器这样 4 个模块。...，就是渲染绘制，如粒子的大小、颜色、贴图或者 shader 这样的控制，使用渲染器来进行渲染绘制出来。...） Processing入口类：MultipleParticleSystems，根据鼠标点击的位置，加入一个粒子系统，上面 GIF 图中小菜加了 4 个粒子系统在不同的位置上 Particle CrazyParticle...有什么办法能避免这种不必要的计算吗？ 类似这种优化，就涉及到了一个很重要的优化思想，空间分区。...在经过空间分割优化后，性能相比未优化平均提升三倍。 空间分区在粒子系统优化的时候，是一个非常有效的手段。感兴趣的读者可以尝试实现下。
本文是小菜的一篇关于在 Processing 中使用 SVG 的学习笔记，一起来跟着小菜来看看吧:) 读懂 SVG 文件 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable...此示例加载怪物机器人面部的 SVG 文件并将其显示在屏幕上。...这时候我们可以遍历子形状，然后再遍历他们的顶点。可以看下面代码的详细注释。...); // Exit the program println("Finished."); exit(); } 2）窗口式输出 通过beginRecord()和endRecord()函数在屏幕上绘制的时候保存.../reference/libraries/svg/index.html[4] ---- 小菜与老鸟后期会不定期更新一些 Processing 绘制的代码思路分析，欢迎关注不迷路。
一.简介 Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。 Processing.js提供了教学可视化的编程语言及运行环境。...通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。...Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。...Processing.js使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。...cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100); } 可以看得出
眼睛函数 猜猜这个函数在极坐标情况下，绘制的图像是什么？第一看到的时候，绝对会被惊艳到的~ 没错，这个函数绘制的就是一只眼睛。...我在processing中进行绘制： 画出来的眼睛长这样： 当然啦，我们可以绘制一双眼睛~，只要调节整个图形的X轴坐标即可： 我们得到了一双看向右边的眼睛： 羽扇函数 这个函数在极坐标情况下，...我们在processing上绘制一下： 实验效果如下： 心形函数 形状像心形的函数就有太多啦~ 在这里我放一个我经常使用的心形函数~ 在processing中进行绘制 绘制结果如下： - END
我在用 processing 绘制瓷片线，这就是 tiled lines，咋样，好看不？ ? 小菜：哇塞，好神奇耶！ 老鸟：想了解不？ 小菜：想！Show me the code！...Processing 是一门开源编程语言和与之配套的集成开发环境（IDE）的名称。Processing 在电子艺术和视觉设计社区被用来教授编程基础，并运用于大量的新媒体和互动艺术作品中。...2）在每一个瓷片中，随机绘制左上到右下或者右上到左下的对角线。 瞧，我画了一张图： ?...---- 小菜与老鸟后期会不定期更新一些 Processing 绘制的代码思路分析，欢迎关注不迷路。...也可以公众号后台发送关键字 processing，加我微信好友，拉你进 Processing 讨论群。
Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。...比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。...Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。...Processing.js使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。...cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100); } 可以看得出
我们使用processing绘制的每一个图形，都需要指定它在坐标系统中的位置，一般是用两个点来表示：x和y。在传统的几何数学中，原点一般在图像的中心位置。 ?...在processing中，可以很容易的把坐标上的任何图形放到想放的地方。让我们从一个简单的例子开始。 转移函数 你可能还记得在几何课堂上使用纸和铅笔，如何费力的做几何图形的转换。...在计算机中图形转换变得非常有趣而且容易。在processing中，可以很容易的移动或旋转一个三角形或类似的图形。...旋转单独的方块 因为在processing中旋转是围绕着原点的，在循环中我们需要首先移动到我们需要旋转的方块，然后旋转，最后绘制这个方块。...现在我们可以擦掉所有已经绘制的三角形，通过在draw函数的第1行加入下面的代码： background(255) 这行代码会擦掉原来绘制的旋转的三角形，所以我们在屏幕上只剩下一个等边三角形。
（3）粒子该怎么绘制？一个粒子是有两层圆形，背景层黑色，前景层白色，真的是这样吗？ （4）一直在不停的动是怎么实现的？并且这些粒子无论怎么动都不跑出字体的路径范围，如何实现呢？...因为字体放大后，我们可以看到边缘，并不是完全的黑色，而是具有一定的灰度，这种边缘的处理，使得字体在正常的情况下，视觉上看着就更加平滑。...display2()：绘制前景圆 读者朋友们可以回到文章开头，再仔细观察下视频中的效果，可以体会体会，一些生动往往体现在细节中。...否则该位置则可以通过，玩家的位置 y -= speed; } 所以思路就是： 预见未来：按照我的操作，或者我的速度，在下一次帧计算中，我可以到达那个位置吗？...改变现在：如果可以，我就过去，如果不可以，我就不动，或者反向运动等。 同样的编程思维可以用在这里，气泡的运动时时刻刻都在问，按照我现在的速度，下一帧我还在字体像素的范围中吗？
聊一聊Processing中PImage类和loadImage()、createImage()函数。因为要借P5做多媒体创意展示，图片是一个很重要的媒体。有必要就图片的获取和展放作总结。...PGraphics是继承自PImage的，看源码： public class PGraphics extends PImage implements PConstants { ... } 因此，理论上所有的绘制函数其实它的绘制对象都是...save()是可以保存带有alpha通道的图像的。 PImage类要使用必须要new实例对象，一般的，无外乎是使用loadImage()、createImage()这两个函数来获得这一对象。...，如果要绘制则必须转换成PGraphics; 二、 如果要复制PImage以实例多个对象，可以使用copy()或者clone(),比如： PImage op; PImage op2; try {...PImage)img2.clone(); 使用clone方法 注意转换类型 } catch(Exception e) { } op2 = img2.copy(): 使用copy方法 三、 绘制在
直接加载 GIF 在 Processing 中，loadImage函数支持 4 种类型的图片：gif,png,jpg,tga。...gif image(loopingGif, 10, height / 2 - loopingGif.height / 2); // 绘制不循环gif，mousePressed函数中点击鼠标可以再次播放一次...)' 默认安装的是 2.3 版本（图中 3.0 版本是小菜后面在github上下载 3.0 包解决后显示的） 经过小菜尝试，该库的 3.0 分支中的 gifAnimation.zip 是可以使用的。...在 Processing 官网中也给出了一个例子，地址为：animatedsprite[2]。...这里生成的配置文件内容大概是这样的： 小菜用 Processing 处理的最后效果如下： 源码地址：Processing速写Day042[6] 我们根据配置文件的内容格式，编写我们的动画类，重点是如何解析配置
确定主题 - 2．数据获得 - 3.图表选择（表达）- 4图表绘制。 当然了我们也可以看到可视化是要一个不断迭代的过程，步骤之间都需要多次的迭代修改的。...我们只需要PM2.5的数据，所以我们把其他不需要的数据都可以去除掉，同时把Json的数据转换为CSV的数据格式，这里转换数据只是为了下一步处理方便，我这边是选用Processing来做数据可视化处理的。...在平时我们可能用到最多的就是通过Excel来做的图表，在Excel2010的版本里面，提供了10类共53个图表，还提供了什么数据透视图，自定义图表等等，总之种类非常多。...国外专家Andrew Abela他将图表展示的关系分为4 类：比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候，可以参考下这个图。...日期时间轴是按照1月到12月排列的，通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾，就是1-2月，11-12月之间，也就是每年冬天就是PM2.5污染程度高的时间。
在上章内容中，提到了关于【数据可视化迭代过程】的步骤，这也能看出整个过程包含的步骤，大致有： 确定主题 - 2．数据获得 - 3.图表选择（表达）- 4图表绘制 当然了我们也可以看到可视化是要一个不断迭代的过程...我们只需要PM2.5的数据，所以我们把其他不需要的数据都可以去除掉，同时把Json的数据转换为CSV的数据格式，这里转换数据只是为了下一步处理方便，我这边是选用Processing来做数据可视化处理的。...平时可能用到最多的就是通过Excel来做图表，在Excel2010的版本里面，提供了10类共53个图表，还提供了什么数据透视图，自定义图表等等，总之种类非常多。...国外专家Andrew Abela他将图表展示的关系分为4 类：比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候，可以参考下这个图。...日期时间轴是按照1月到12月排列的，通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾，就是1-2月，11-12月之间，也就是每年冬天就是PM2.5污染程度高的时间。 ?
jcode 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。...纹理可以是图片，也可以是视频。我先用图片资源举例。 加载资源需要在 preload() 这个生命周期里处理，我在 《p5.js 光速入门》 里有讲到，忘记这知识点的工友可以去看看。...除此之外，我们还要了解 frameCount，这是 p5.js 提供的一个全局系统变量，它记录了 p5.js 运行了多少帧。...先提一嘴 processing 和 p5.js 的关系：processing 是用 Java 编写的，而 p5.js 是 processing 的 JS 版。...想了解 processing 可以找 『南方者哥哥』，他写过 Processing 相关的文章。
领取专属 10元无门槛券
手把手带您无忧上云
