p5.js绘制旋转的正方形

使用p5.js绘制旋转的正方形，供大家参考，具体内容如下

要还原的效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

首先建立画布大小，按照比例应该是5：3

function setup() {
 createCanvas(500, 300);
}

设定矩形绘制格式，以及边线粗细

function setup() {
 createCanvas(500, 300);
 rectMode(100);
 strokeWeight(4);
}

让我们根据画布坐标先把静态的图形画出来

(关于颜色的rgb数据可以通过ps取色器获得）

只需要用到rect（）进行绘制即可

仔细观察可以发现，图中的矩形为圆角矩形，绘制圆角矩形可以直接在rect（）里加入四个角的弧度
以左一黑色矩形为例

rect(77.5,122.5, 55, 55, [5], [5], [5], [5]);

[ ]里的则是每个角的圆角弧度，按顺序分别是左上，右上，左下，右下

经过修改后的图像

目前基本图形已经构建好了，目前我们需要做的就是让他旋转起来
这里需要用到几个函数

translate（）
rotate()

我们用translate()将旋转中心设定为矩形中心，再调用rotate（）让图像旋转起来
但是我们会发现一个问题，经过设定后，启动程序，我们会发现整个图形进行了旋转，这并没有达到我们想要的效果，所以现在需要使用到push（）和pop（）两个函数将矩形分隔开来

push();
angle=angle+0.01;
let c=angle+PI;
translate(100,150);
rotate(c);
stroke(255,255,255);
fill(0,0,0);
rect(-22.5-22.5, 55, 55, [5], [5], [5], [5]);
pop();

运行即可让左边第一个矩形旋转起来。要介绍的是，angle后所加的数值（此处为0.01）所代表的含义为旋转速率的大小

如果需要反向旋转，将rotate()中的参数转换为负数即可

按照第一个矩形将另外三个矩形也更改过来，就可以得到图中的效果啦！

最后完成的效果↓

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • p5.js绘制创意自画像

    p5.js绘制创意自画像

    本文实例为大家分享了p5.js绘制自画像的具体代码,供大家参考,具体内容如下 绘制结果 人物头上的呆毛会一直运动,鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动,而且人物的眼睛也会一直看向小猫的方向 代码介绍 整个图全部由贝塞尔曲线,直线和圆组成 贝塞尔曲线的代码结构大概就是 beginShape(); vertex(180,600);//曲线起点 bezierVertex(180,600,300,100,420,600); //第一个控制点坐标,第二个控制点坐标,终点坐标 endShap

  • p5.js入门教程和基本形状绘制

    一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二

  • p5.js绘制旋转的正方形

    使用p5.js绘制旋转的正方形,供大家参考,具体内容如下 要还原的效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 首先建立画布大小,按照比例应该是5:3 function setup() { createCanvas(500, 300); } 设定矩形绘制格式,以及边线粗细 function setup() { createCanvas(500, 300); rectMode(100); strokeWeight(4); } 让我们根据画布坐标先把静态的图形画

  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋

  • 微信小游戏之使用three.js 绘制一个旋转的三角形

    three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样.接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤: 一. 初始化项目 下载微信官方的开发者工具,然后新建项目 appid选择测试号即可,项目路径自行指定 用编辑器打开项目,得到如下目录: 然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空. game.js是

  • p5.js码绘“跳动的小正方形”的实现代码

    p5.js码绘“跳动的小正方形”的实现代码

    作业成果展示 实验原理 主要是要实现小正方形的上下来回运动,并且每个小正方形的跳动有一定的时间差视觉上要呈现依次跳动的感觉. 本来我想用一个if语句来实现这个功能!但是想了很久没想到正确的代码--后来经同学提醒用了sin函数!真的很好用! var y1=posY+30sin(t); var y2=posY+28sin(t-1); var y3=posY+26sin(t-2); var y4=posY+24sin(t-3); var y5=posY+22sin(t-4); var y6=posY+

  • js绘制一条直线并旋转45度

    本文实例为大家分享了js绘制一条直线并旋转45度的具体代码,供大家参考,具体内容如下 绘制一条直线,并旋转45度 html 页面 <canvas id="canvas" width="300" height="300" style="background-color: orange;"></canvas> js页面 <script> var canvas = document.getElem

  • p5.js 毕达哥拉斯树的实现代码

    p5.js 毕达哥拉斯树的实现代码

    本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下: 效果如下: 主要方法 translate() rotate() rect() push() pop() map() 主要思想 递归 草图 过程分解 一.毕达哥拉斯树的递归函数 function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色 rect(0,0,x,x);//绘制当前的正方形 if(x <=

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记 效果如下: 主要方法 translate() rotate() arc() 斐波那契螺旋 斐波那契螺旋线也称"黄金螺旋",是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋. 草图 过程分解 一.定义一个空的斐波那契数组: var Fibonacci = []; 二.初始化 默认情况下draw()函数会无限重复绘图, frameRate()函

  • 使用p5.js实现动态GIF图片临摹重现

    使用p5.js实现动态GIF图片临摹重现

    前言 根据互动媒体技术老师的实验要求,临摹了一张GIF动态图,使用p5.js进行重现. 博客里面会有实现逻辑以及实现代码,在最后还会有一张自己实现的扩展图. 原图 实现步骤 规律总结 1.观察图片可以看到,整个图是由两个部分组成的,其中一个是棍状体,一个是螺旋状体. 2.棍状体从外到内越来越窄,整个图形在做绕固定旋转圆心的匀速圆周运动. 3.螺旋状体也是在做绕固定旋转圆心的匀速圆周运动. 4.螺旋状体的旋转角速度比棍状体的旋转角速度大. 具体实现逻辑 为了方便分析,我截取了一个静态的瞬间: 那么

随机推荐