首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在p5.js中的点数组之间绘制正方形?

在p5.js中,可以使用rect()函数来绘制正方形。要在点数组之间绘制正方形,可以按照以下步骤进行操作:

  1. 创建一个点数组,其中包含了正方形的四个顶点的坐标。
  2. 使用beginShape()函数开始绘制形状。
  3. 使用vertex()函数将点数组中的每个点添加到形状中。
  4. 使用endShape(CLOSE)函数结束形状的绘制,并指定CLOSE参数以闭合形状。
  5. 使用rect()函数绘制正方形的边框。

下面是一个示例代码:

代码语言:txt
复制
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 创建点数组
  let points = [
    createVector(100, 100),
    createVector(200, 100),
    createVector(200, 200),
    createVector(100, 200)
  ];
  
  // 绘制正方形
  beginShape();
  for (let i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
  }
  endShape(CLOSE);
  
  // 绘制正方形的边框
  rect(points[0].x, points[0].y, points[2].x - points[0].x, points[2].y - points[0].y);
}

在这个示例中,我们创建了一个点数组points,其中包含了正方形的四个顶点的坐标。然后使用beginShape()函数开始绘制形状,并使用vertex()函数将点数组中的每个点添加到形状中。最后使用endShape(CLOSE)函数结束形状的绘制,并指定CLOSE参数以闭合形状。同时使用rect()函数绘制正方形的边框。

请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。关于p5.js的更多信息和详细的API文档,你可以参考腾讯云的p5.js产品介绍链接地址:p5.js产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

p5.js 光速入门

您可以将您整个浏览器页面当作您绘图,这包括了 HTML5 物件,文字、输入框、视频、摄像头及音频。 简单来说,p5.js 能让“切图仔”更容易做出具有艺术感作品(很能整活)。...p5.js 第一个测试版在 2014年8月 发布。 更多故事可在 p5.js 官网 寻找,本文目标是光速入门 p5.js 。...p5.js 提供了 rect() 方法绘制矩形,而且会根据参数数量判断绘制矩形还是绘制正方形。...语法如下: rect(x, y, w, [h], [tl], [tr], [br], [bl]) x 和 y 是矩形左上角坐标位置 w 是边长 如果只传3个参数,绘制出来正方形(长和宽值都使用第三个参数...用法和正方形一样,自己动手试试看吧~ 更多说明可查看 rect()说明文档 四边形 quad 如果需要绘制四边形,使用 quad() 即可。

5.2K41
  • p5.js 状态管理

    p5.js ,push() 提供了“存档”功能,pop() 提供了“读取存档”功能。 那么“存档”到底能存什么内容呢?常见存储内容是样式和变形。...比方说,你一开始设置了正方形填充色是绿色,边框粗细是10,然后创建了一个正方形。之后你还想创建其他正方形,而且希望使用 p5.js 默认样式,而不是使用绿色正方形。...看代码可能更直观一: // 创建画布 function setup() { createCanvas(500, 500) background(255) } function draw()...} 上面的例子,在设置样式之前使用了 push() 进行“存档”,在创建第二个正方形之前使用了 pop() “读取存档”,所以右侧正方形使用了默认样式。...} 如果没有使用 push() 和 pop() ,那么这个例子两个正方形都会被旋转。

    1.4K20

    Processing手部追踪

    Handtrack如何在p5js中使用?...1) 引入 handtrack.js 我们在 html 除下引入 p5.js、p5.sound.min.js(如果用到声音处理)等 p5 核心 js 文件后,引入 <script src="https...<em>数组</em><em>中</em><em>的</em>单个元素<em>的</em>数据结构如下: { "bbox": [ 125.76276779174805, 43.020243644714355, 215.00505447387695...一些应用例子 其实手势应用很广泛,放在 processing ,我们常常可以这么做: 1)将原来鼠标移动控制改为手部移动控制 2)当手和其他物体重叠时,可以表示有意义交互信号,物体碰撞,选择物体等...---- 小菜与老鸟后期会不定期更新一些 Processing 绘制代码思路分析,欢迎关注不迷路。 如果有收获,能一键三连么?

    2.8K50

    在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    ,我们将讨论如何在Python中转移学习和部署我们模型。...该算法只是简单地估计关键身体关节位置。 检测到关键设置为“Part”和“ID”索引,置信度得分在0.0和1.0之间(1.0是最高)。 ? 以下是PoseNet给出输出类型示例: ?...以下是完成此项工作所需步骤: 加载PoseNet模型并从网络摄像头捕获视频 检测身体关节关键 显示检测到身体关节 绘制估计身体骨骼 让我们从第一步开始。...我们已经看到,PoseNet给出了一个检测到的人体关节列表,每个关节及其x和y位置置信度评分。 我们将使用20%阈值(keypoint.score > 0.2)置信度得分,以便绘制一个关键。...在下一篇文章,我们将探讨如何在浏览器应用迁移学习,并使用TensorFlow.js部署机器学习或深度学习模型。

    2.2K00

    p5.js 开发点彩画派绘画工具

    本文简介 这几天在整理书柜时看到这套书,看到梵高,想起他彩画。 想到点彩画派,不得不提一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他画作。...我引用一下维基百科对彩画派解析: 彩画派(又称描派;英文:Pointillism)是一种用很粗堆砌,创造整体形象油画绘画方法。...然后我又继续想啊想,想到我们用 canvas 好像也能做出一款彩画绘图工具,但用原生方式写是不可能,因为我懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名艺术库。...绘制过程代码写在 draw 周期里,使用了 circle() 方法创建圆形,圆形坐标就是鼠标绘画时的当前坐标,圆形尺寸是取滑块值,圆形颜色取了颜色选择器值。...以下是完整代码,可以结合上面的讲解和代码注释一起理解。

    35631

    p5.js 到底怎么设置背景图?

    本文就把背景图这部分内容补充完整,并且会提到在 p5.js 里使用背景图一些注意。 背景图用法 在 p5.js 里使用背景图只需做以下几步操作即可。.../images/bg.png') // 设置背景图 background(bg) } 上面这种写法是错!!! 正确写法是先加载好图片再绘制p5.js 官网上案例是这样写。.../images/bg.png') } function draw() { // 将图片添加到背景里 background(bg) } 出来结果是这样 在这个例子,我准备图片尺寸是 3073...而使用 image() 方法渲染图片时候默认是按照图片自身尺寸进行渲染。 这是两者之间不同。 更优写法 结合前面的几个例子,可能有工友会有点疑问。...所以在 p5.js 官网例子,会在 setup() 里加载图片资源,然后在 draw() 里再把图片绘制出来。 但其实还有更安全写法。

    40630

    独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    ,我们将讨论如何在Python中转移学习和部署我们模型。...该算法只是简单地估计关键身体关节位置。 检测到关键设置为“Part”和“ID”索引,置信度得分在0.0和1.0之间(1.0是最高)。 ? 以下是PoseNet给出输出类型示例: ?...以下是完成此项工作所需步骤: 加载PoseNet模型并从网络摄像头捕获视频 检测身体关节关键 显示检测到身体关节 绘制估计身体骨骼 让我们从第一步开始。...我们已经看到,PoseNet给出了一个检测到的人体关节列表,每个关节及其x和y位置置信度评分。 我们将使用20%阈值(keypoint.score > 0.2)置信度得分,以便绘制一个关键。...在下一篇文章,我们将探讨如何在浏览器应用迁移学习,并使用TensorFlow.js部署机器学习或深度学习模型。

    1.6K20

    从0到1教你如何使用 p5.js 绘制简单动画

    在本文中,我们将学习在 p5.js 通过使用线条、 矩形和椭圆来制作房屋各个部分来制作房屋简单动画。...( 像不像你小时候上画画课和微机课画那个) 目录 1.什么是p5.js? 2.什么是动画? 3.绘制方案 4.代码实现 5.结尾 1.什么是p5.js?...p5.j​​s 是一个 JavaScript 库,它以 Processing 原始目标开始,使艺术家、设计师、教育工作者和初学者可以访问编码,并为当今网络重新解释这一。...使用软件速写本原始比喻,p5.js 具有全套绘图功能。但是,您不仅限于绘图画布,您可以将整个浏览器页面视为您草图!...为此,p5.js 具有插件库,可以轻松与其他 HTML5 对象交互,包括文本、输入、视频、网络

    2.7K31

    使用CDSWCML构建交互式机器学习应用程序

    您将使用手机连接到应用程序,在屏幕上一个方框画一个数字,并在CML上运行经过训练模型来预测绘制内容。可以在github repo找到此代码。 建立模型来预测手绘数字是机器学习“世界”。...您用手指在黑色正方形绘制图像,然后单击“预测”。 该Web应用程序提取图像数据,并对CML服务器模型API进行REST调用。...您所见,部署起来并不难,机器学习魔力在于在CML训练和提供模型以进行准确预测。 训练模型 对于此演示,我研究了如何使用由PyTorch构建卷积神经网络训练和提供模型。...我没有注意到用于模型服务GPU和基于非GPU模型之间任何显着性能差异,但是我没有运行任何时序测试。 文件第一部分创建类并加载先前训练模型。...绘制图像后,需要将其传递到CML模型API接口。您需要对index.html 文件javascript进行一些更改才能使其正常工作。

    1.8K20

    5000个matlab常见问题锦集雄关路(001)

    右键快捷方式,选择属性,并在 Start in 设置启动时工作路径。 需要注意是,上述三种方法互有冲突,因此仅建议通过一种方式进行设置。 2、如何在新版本 MATLAB 绘制多边形?...实心 x 叉号 s 正方形 d 钻石形 ^ 上三角形 v 下三角形 > 右三角形 < 左三角形...使用字符向量元胞数组指定标签。如果不希望显示刻度标签,请指定空元胞数组{}。若要在标签包含特殊字符或希腊字母,请使用 Tex 标记, \pi。...A=magic(3); value=max(A(:)); [row col]=find(value==A); 7、在MATLAB,如何计算两个矢量之间夹角?...如果您 MATLAB 搜索路径有问题,请运行以下 MATLAB 命令, 然后重新启动 MATLAB。 9、MATLAB ,如何在一组子图上插入标题?

    4.8K10

    iOS多边形马赛克实现(下)

    手指移动时候从touch回调里获取坐标点,在这些之间进行插值,然后以插值之后路径为圆心将马赛克图层里对应区域贴过去,这样就完成了对图像特定区域打码处理。...在这样设定下,我们将多边形相交运算简化为之间距离计算,复杂度大大降低。 ? 第二步:绘制 前面详述了如何找出手指移动区域所覆盖马赛克块,那么如何给这些马赛克块上色呢?...因此这里我们将求平均rgb值改为直接取该马赛克区域重心颜色,以简化整个绘制过程。以正方形马赛克为例,下面两图分别是取平均值和重心(正方形中心)颜色所生成全图马赛克效果。 ?...设计师期望是,在手指移动过程,这种素材能以正方形单元格为整体一起显示出来。而且他们叠加顺序也是固定:先绘制4个角,最后再绘制中间圆形以免圆形区域被遮挡。...对于这样素材,我给它额外添加了一个subType来做区分处理。在手指移动时用前面的方法判断移动区域是否包含该单元格中心,包含,将该单元格马赛克块按顺序依次绘制出来即可。 ?

    1.7K130

    p5.js 3D图形-立方体

    theme: smartblue 本文正在参加「金石计划」 本文简介 带尬猴,我嗨德育处主任 前面写了几篇 p5.js 文章 都还没涉及到3D图形,但其实 p5.js 是提供了基础3D图形。...加载资源需要在 preload() 这个生命周期里处理,我在 《p5.js 光速入门》 里有讲到,忘记这知识工友可以去看看。...除此之外,我们还要了解 frameCount,这是 p5.js 提供一个全局系统变量,它记录了 p5.js 运行了多少帧。...setup() { createCanvas(200, 200, WEBGL) } function draw() { // 每次刷新都要重新填充画布颜色,不然会留下上一次绘制立方体...先提一嘴 processing 和 p5.js 关系:processing 是用 Java 编写,而 p5.js 是 processing JS 版。

    2.2K40

    Android OpenGL ES(三)-平面图形

    使用GLES20.GL_TRIANGLE_STRIP可以在定义3个的确定三角形情况下,每多一个,就多绘制一个三角形。这种方式需要注意数组中点顺序。 1. 修改矩阵数组。...将其改成正方形 按照上图中顺序定制我们矩阵数组。...正方形2.png 三:使用GL_TRIANGLES和顶点矩阵数组加位置矩阵数组方式 这种方法就是根据我们数组,自己来定义绘制顺序来,完成绘制两个三角形完成正方形任务。 1....是通过绘制切分三角形来形成。三角形切分越细,越接近圆。 1.更新代表圆形矩阵数组 计算绘制圆所需要 因为是通过切分方式来构成圆。...纹理Id,在这里就是代表我们复制到内存bitmap 绘制时候,重新绑定绘制就可以了 总结 总结一下,我们从这第一章节内容了解到了下面这些使用知识绘制正方形多种方式和绘制方式。

    1.5K30

    p5.js 视频播放指南

    可以传一个字符串类型视频路径;也可以传入字符串数组类型,指定多个路径支持不同浏览器。 callback: 回调函数(非必传)。在视频加载完成时触发。...preload() 是 p5.js 提供一个生命周期,我们通常会将“加载静态资源”这个步骤放在 preload() 里执行。在 《p5.js光速入门》图片 章节里介绍过。...传入多个视频地址 createVideo() 方法第一个参数除了传入一个字符串类型视频地址外,还可以传入字符串数组,作用就是兼容处理。...volume() 设置视频音量,该方法接受1个参数,参数值在 0~1 之间。...playing; } 上面的代码,我在 setup() 里使用了 video.hide() 方法将 createVideo() 创建出来 元素隐藏起来,因为这次我们需要将视频渲染到画布

    32050

    【愚公系列】2022年09月 微信小程序-WebGL画正方形

    : 包含顶点属性Buffer,顶点坐标,纹理坐标数据或顶点颜色数据。...// 沿z轴方向两裁面之间距离近处(正数) const zNear = 0.1; // zFar:到更远深度裁剪平面的距离 // 沿z轴方向两裁面之间距离远处(正数) const...offset); //指定顶点属性数组第一部分字节偏移量 // 属性有多个,为了激活属性,以便可用 // 作用于顶点数据会先储存在attributes。...// 通过调用 drawArrays() 方法来画出对象 // void gl.drawArrays(mode, first, count); // drawArrays()方法用于从向量数组绘制图元...4.创建摄像机透视距阵,把元件放到适当位置。 5.给着色器变量绑定值。 6.调用gl.drawArrays,从向量数组开始绘制

    84810

    NumPy 秘籍中文第二版:五、音频和图像处理

    内存映射文件仅加载大文件一小部分。 NumPy 内存映射类似于数组。 在此示例,我们将生成彩色正方形图像并将其加载到内存映射中。...其他数组使用numpy.random包函数初始化,这些函数生成随机整数。 下一步是生成正方形。 我们在上一步中使用数组创建正方形。 使用clip()函数,我们将确保正方形不会在图像区域外徘徊。...random_integers() 此函数返回一个数组数组随机整数值在上限和下限之间。...这可以在复平面上绘制,水平轴显示实数值,垂直轴显示虚数值。 我们将使用所谓逃逸时间算法绘制分形。 该算法以大约 2 个单位距离扫描原点周围小区域中。...我们使用了以下函数: 函数 描述 gaussian_filter() 此函数应用高斯过滤器 random_integers() 此函数返回一个数组数组随机整数值在上限和下限之间 polar() 该函数使用极坐标绘制图形

    1.2K10

    iOS基于GPUImage图像形变设计(复杂形变部分)

    Part3:基于自定义vertices局部图像形变设计 区别于Part2自定义vertices和fragment数组简单图像形变,这里自定义vertices数组不仅仅局限于图像4个顶点,而是可以任意指定...,需要同时设置多组vertices和textureCoordinates,并且在绘制三角形时也应该绘制GL_TRIANGLES而非GL_TRIANGLE_STRIP,这是因为很难得到连续顶点三角形数组...,否则会形成空洞(对于上图例子,需要在最外围设置一个正方形,保持正方形4条边不动情况下,调整正方形区域内顶点,从而可以达到形变后图像任然连续这一个结果)。...,可以依据该像素与锚定点之间关系,计算得到该像素点在新图像位置,从而达到形变目的。...该方法通过设定一些具体规则(比如,某个像素A邻域内往方向v移动x个像素,则对于任意一个像素,判断它与A之间关系,如果落在A邻域内,则往v方向移动x个像素)。

    2.2K110

    如何实现直播手绘礼物?

    :(UITouch *)touch; 为了保证在不同手机上,绘制区域不超过屏幕范围与绘制方便,规定绘制区域为正方形,并且长度为屏幕宽度,中心与屏幕正中心对齐。...,判断两个距离是否大于最小间隔; 最终把合法位置和当前选择图案编号,转换为本地点数据结构存入数组。...绘制预览 3、消息传输 消息传输首先要和安卓端协商好数据格式,把本地点数据结构转为json串或者字节流,再放入房间消息; 规定数据格式包括以下信息: square_size:�绘制正方形大小;...4、解析并显示 显示要求是与绘制效果一致,不变形与视频相对位置不变; 上一步已经规定好数据格式,当收到数据时按照对应格式进行转换,得到正方形大小、位置、图案和数量信息,传给显示类。...注意,显示区域与屏幕中心对齐,同时显示区域也是长为屏幕宽度正方形位置信息需要做一次转换,得到当前屏幕坐标。 总结 总结需求要点:操作简单,绘制预览与显示结果一致。

    1.2K60

    canvas 快速入门

    canvas 快速入门 在本文中,我们将学习Canvas特性,包括如何在HTML文档引入Canvas以及在Canvas上绘制图形和各种对象。...3.2 圆形 要理解圆形与矩形之间存在很大区别并不难。然而,认识这一能够说明为什么在Canvas绘制圆形与矩形也有很大区别。...在前一个例子,我们赋值了一个“rgb(红、绿、蓝)”颜色值,但是你也可以使用任何有效 CSS 颜色值,十六进制码(例如,#FF0000)或单词“red”。...绘制文本 Canvas 不仅能绘制图形,还能够显示文本。老实说,与使用传统HTML元素(p元素)创建文本相比,使用Canvas绘制文本通常并不是好方法,原因如下。...在我们例子,我们将准备擦除区域原点(左上角)移动到正方形左上角(40, 40),并将准备擦除区域宽度和高度设置为正方形宽度和高度(100)。其结果是只将正方形所在特定区域清除。

    1.7K20
    领券