开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在P5 js中查找围绕其中心点旋转的正方形平面顶点的坐标(x，y，z)

在P5.js中，可以使用rotate()函数来实现围绕中心点旋转的正方形平面顶点的坐标(x, y, z)。

首先，我们需要定义正方形的边长，可以使用变量来表示，例如：

let sideLength = 100;

然后，我们可以定义正方形的中心点坐标，假设中心点坐标为(cx, cy, cz)：

let cx = 0;
let cy = 0;
let cz = 0;

接下来，我们可以定义正方形的顶点坐标，根据正方形的边长和中心点坐标计算得出。正方形的顶点坐标可以通过在中心点坐标的基础上加上或减去边长的一半来得到。例如，左上角顶点的坐标为(cx - sideLength/2, cy - sideLength/2, cz)。

let vertex1 = createVector(cx - sideLength/2, cy - sideLength/2, cz);
let vertex2 = createVector(cx + sideLength/2, cy - sideLength/2, cz);
let vertex3 = createVector(cx + sideLength/2, cy + sideLength/2, cz);
let vertex4 = createVector(cx - sideLength/2, cy + sideLength/2, cz);

如果我们想要围绕中心点旋转正方形，可以使用rotate()函数来实现。rotate()函数接受一个参数，表示旋转的角度。例如，如果我们想要将正方形绕z轴旋转45度，可以使用rotateZ(45)。

rotateZ(45);

最后，我们可以使用translate()函数将坐标系的原点移动到中心点的位置，然后绘制正方形的顶点。

translate(cx, cy, cz);
beginShape();
vertex(vertex1.x, vertex1.y, vertex1.z);
vertex(vertex2.x, vertex2.y, vertex2.z);
vertex(vertex3.x, vertex3.y, vertex3.z);
vertex(vertex4.x, vertex4.y, vertex4.z);
endShape(CLOSE);

这样，就可以在P5.js中找到围绕中心点旋转的正方形平面顶点的坐标(x, y, z)了。

关于P5.js的更多信息和使用方法，你可以参考腾讯云的P5.js产品介绍页面：P5.js产品介绍。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

OpenGL ES透视投影实现方法（四）

在之前的学习中，我们知道了一个顶点要想显示到屏幕上，它的x、y、z分量都要在[-1,1]之间，我们回顾一下渲染管线的图元装配阶段，它实际上做了以下几件事：剪裁坐标、透视分割、视口变换。...图元装配剪裁坐标当顶点着色器写入一个值到gl_Position时，这个点要求必须在剪裁空间中，即它的x、y、z坐标必须在[-w,w]之间，任何这个范围之外的点都是不可见的。...剪裁实际上就是判断每一个最小三角形、直线、点单元的坐标是否规范。透视除法对上面的剪裁坐标的点的x、y、z坐标除以它的w分量，除以w的坐标叫做归一化设备坐标。...public static native void glViewport( int x, int y, int w, int h ); 从归一化设备坐标(x,y,z)到窗口坐标(X,Y...投影矩阵主要是为w产生正确的值，这样在渲染管线的后续操作中做透视除法，远处的物体就看起来比进出物体小，很容易想到，可以利用顶点位置的z分量，将这个距离映射到w分量上，z越大，w也越大。

1.3K3 0

【GAMES101-现代计算机图形学课程笔记】Lecture 04 Transformation Cont.

=(x, y, z, 0)^{\top} image.png image.png Euler angles常用在飞机的旋转，即旋转划分成roll,pitch,yaw三个操作。...模型中的有很多顶点，这些顶点坐标是模型空间下的，而我们通常做变化都是以世界坐标为基准的，所以我们需要做模型变换。...远平面挤压前后的Z值都保持为 f 不变远平面的中心点X,Y,Z坐标保持不变注意远近平面之间的点在做变换之后的Z轴坐标可能是会变的！！！...point（即挤压之后的点）坐标为 P'=(x',y', m) ,而 Q 是 P' 在近平面上的投影点，即二者的X、Y坐标值相等，Z轴坐标不相等。...但是我们根据相似三角形可以得到挤压后的点Y轴坐标等于 Q 点的Y轴坐标，即 y^{\prime}=\frac{n}{z} y ，同理在X轴上的坐标为 x^{\prime}=\frac{n}{z} x ,

1.8K2 0

【OpenGL ES】 Android OpenGL ES -- 透视投影和正交投影

摄像机位置摄像机参数 : -- 摄像机位置 : 摄像机的三维坐标位置 x, y, z 坐标; -- 观察方向 : 摄像机镜头的朝向, 是一个三维向量, 指向一个三维坐标方向; -- up 方向 :...android.opengl.GLES20.glViewport(int x, int y, int width, int height) -- int x, int y 参数 : x, y 是视口在手机屏幕左上角的坐标...x 坐标 * @param cy * 摄像机位置的 y 坐标 * @param cz * 摄像机位置的 z 坐标 * @param tx...y 坐标 * @param cz * 摄像机位置的 z 坐标 * @param tx * 摄像机朝向 x 坐标 * @param ty...将本次触摸的 y 坐标记录为历史坐标 mPreviousX = x;// 将本次触摸的 x 坐标记录为历史坐标 return true; } /** * 场景渲染器 * 创建六角星数组中得六角星对象

2.6K3 0

双目视觉理论篇

我们现在需要知道的是黑色的点是如何变成像平面中的一个像素。中间的灰色部分是相机的透镜，而该部分中心点称为光心。真实世界的黑点会经过各种模型(线性或非线性的)，通过光心在像平面中得到一个像素点。...\(P(x_c,y_c,z_c)\)是真实世界的一个点在相机坐标系中的坐标， \(PO_c\)与像平面相交于P'，A是P点在\(X_cZ_c\)平面上的投影，其坐标即为\(A(x_c,0,z_c)\)...θ角得到了P点在新的相机坐标系中的坐标\((X_W,Y_W,Z_W)\)；第二个式子表示相机坐标系围绕相机坐标系的自己的Y轴逆时针进行旋转了φ角得到了P点在新的相机坐标系中的坐标\((X_W,Y_W,Z_W...)\)；第三个式子表示相机坐标系围绕相机坐标系的自己的X轴逆时针进行旋转了β角得到了P点在新的相机坐标系中的坐标\((X_W,Y_W,Z_W)\)。...第四个式子表示(这里的\(R_c\)有问题，改为\(R_c=R_1R_2R_3\))依次围绕X、Y、Z轴旋转β、φ、θ角后得到最终的P点在新的相机坐标系中的坐标\((X_W,Y_W,Z_W)\)。

931 0

用Three.js建模

Three.js网格对象类型为THREE.Geometry，包含一系列的顶点（其类型为THREE.Vector3）。...x = 20 * (u - 0.5); // x and z range from -10 to 10 z = 20 * (v - 0.5); y = 2*(Math.sin(x/2)...LatheGeometry不是从曲线上构建的，而是从曲线上的一系列点构建的。点是Vector2型的对象，曲线位于xy平面中。表面是通过围绕y轴旋转曲线生成的。...第二个是当一个点围绕轴旋转时沿圆产生的表面细分的数量。在示例程序中，通过调用cosine.getPoints（128）从余弦类型的曲线对象创建点阵列。...调用obj.rotateX(angle)与在obj.rotation.x值上增加角度不同，因为它在其他可能已有旋转之上应用了关于 x 轴的旋转。

7.5K0 2

css笔记 - transform学习笔记(二)

D name 含义 中心点 备注 2 rotate(angle) 旋转默认中心点就是盒模型的中心点 angle值 3D rotate3d(x,y,z,angle) N°旋转同上 3D rotateX...(angle) N°旋转同上围绕x轴做水平方向翻转 3D rotateY(angle) N°旋转同上围绕y轴做垂直方向翻转 3D rotateZ(angle) N°旋转同上 translate...(x,y)：相对于当前位置向水平(x)/垂直(y)方向移动，正值向右/下，负值向左/上 D name 含义 中心点 备注 2 translate(x,y) 2d两点位移默认中心点就是盒模型的中心点...3D translate3d(x,y,z) 3d三点位移同上 2 translateX(x) 只是用 X 轴的值位移同上 2 translateY(y) 只是用 Y 轴的值位移同上 3D translateZ...x-axis 定义该视图在x轴上的位置、 y-axis 定义该视图在y轴上的位置 perspective-visibility 定义元素在不面对屏幕时是否可见混合写法多个属性值之间用逗号隔开即可。

1.7K1 0

【笔记】《Surface-from-Gradients: ...》的思路

都以像素中心为中心建立起一个四边形小面片, 这个面片以四个顶点v为边界每一个顶点vij是初始化在法线图xoy坐标系中的((i-1/2)h,(j-1/2)h,0)中, 此处的h是输入像素的宽, 这里可以发现这个计算其实就是像素坐标系的像素边界...首先对于每个小面片, 其都拥有自己的面片中心, 记为cij, 这个cij的坐标是像素坐标和其像素边界的四个顶点坐标在z轴上的平均 ?...然后此时如下图定义一个平面, 这个平面无限延展, 其中心是cij, 平面的朝向是法线图所指示的像素法线朝向, 由于这里我们只改变顶点的z, 因此我们可以用下面的公式将当前的顶点投影到其对应的中心cij所生成的这个平面上...在进行了这个投影后, 模型中的每个顶点都获得了4个对应的投影顶点(因为这是环绕于顶点的四个面片旋转后的效果)....写成Ax=b后, 对于这样的一个大型方程组, 我们通过下面的式子可以求解出x的取值, 从矩阵的尺寸中我们可以很明显的明白x是点数 X 1 的向量, 储存了求解后这次迭代的顶点深度值z. ?

7872 0

「音视频直播技术」OpenGL渲染之距阵变换

即我们通常说的降维。下面我们介绍下实现 MVP 转换需要的数学知识。距阵在三维图形学用(x,y,z,w)代表一个顶点，它是一个齐次坐标。其中的 x,y 我们都知道是横轴和纵轴。...z 代表深度，比如按右手坐标来说，离我们眼睛越远的深度越深，z值也就越小。 w 是为了距阵做乘法运算而增加的。因此，我们在三维图形学中只用到4x4矩阵，它能对顶点(x,y,z,w)作变换。...顶点变换使用距阵左乘的方法，其公式如下：矩阵 x 顶点 = 变换后的顶点。距阵左乘左手指着a，右手指着x，得到ax。左手移向右边一个数b，右手移向下一个数y，得到by。...距阵的旋转旋转矩阵比较复杂，绕 X 轴旋转使用的距阵：绕X轴旋转绕 Y 轴旋转使用的距阵：绕Y轴旋转绕 Z 轴旋转使用的距阵：绕Y轴旋转累积距阵变换前面已经学习了如何旋转、平移和缩放向量...距阵的正投影正投影矩阵也比较复杂，我们这里直接给出，大家可以在网上查找相关资料，自己推导出这个距阵：正投影距阵小结上面介绍了三维图型学中需要的一些数学基础知识。

1.1K2 0

【GAMES101-现代计算机图形学课程笔记】Lecture 09 Shading 3 （纹理映射）

(x,y)在二维的纹理平面的坐标（u,v），然后得到该坐标的纹理信息（通常是漫反射系数$k_d$）,最后将纹理信息设置到对应像素即可。...[纹理放大] 由于要渲染的物体大于纹理平面，所以物体中的一些部分对应到纹理平面坐标可能就不是整数了，而是小数，比如下面的红点，那此时红点的纹理应该怎么表示呢？...[z8s5bhwiew.png] 双线性插值就是为了解决上面的问题，下面做具体介绍：以红点左下角的像素中心点作为原点可以计算出横轴和纵轴两个方向上的坐标$(s,t)$。...除了纹理分辨率大于要渲染的物体，在如下情况中也会出现纹理缩小的问题。左边是我们要达到的效果。我们知道左边其实通过透射投影来将物体映射到平面，因此会造成近处纹理大，远处纹理小的视觉效果。...前面也提到了Mipmap其还是对正方形做的近似，下图（左）是超采样的结果，看起来还是不错的，中间是Mipmap的效果，可以看过在远处很明显都模糊掉了，一个改进的算法是各向异性过滤（Anisotropic

9730 0

OpenGL ES——导入.stl格式的3D模型

前言在上一章中，我们使用OpenGL ES绘制了一个平平无奇的三角形。那么如何绘制3D模型呢？其实，在计算机的世界中，所有的3D模型都是由无数的三角平面拼接而成。...顶点坐标和上一章我们画三角形的原理类似，三角形的三个顶点坐标，将决定三角平面的位置与形态。法向量三点只能确定一个三角形的平面，但平面有两面，到底哪一面是对外的，却无法确定。...在这一段解析中，我们不仅会获得三角形平面的顶点坐标和法向量数组，我们还提供了计算最大半径，计算中心点等方法。...(float x, float y, float z) { this.x = x; this.y = y; this.z = z; } } public..., center.z, up.x, up.y, up.z); //为了能有立体感觉，通过改变mDegree值，让模型不断旋转 gl.glRotatef(mDegree,

1.9K4 0

CSS3变形属性

在三维空间里，使用rotateX()、rotateY() 和rotateZ()函数让一个元素围绕X、 Y、 Z 轴旋转，其基本语法如下： rotateX( a) rotateY( a) rotateZ...rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，但不是在2D平面旋转。...其基本语法如下： rotate3d( x, y, z, a) rotate3d() 中取值说明。 ·x： 0 ～ 1 的数值，用来描述元素围绕X轴旋转的矢量值。...·y： 0 ～ 1 的数值，用来描述元素围绕Y轴旋转的矢量值。 ·z： 0 ～ 1 的数值，用来描述元素围绕Z轴旋转的矢量值。...·a：角度值，用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。当 x、y、z 三个值同时为0时，元素在3D空间不做任何旋转。

2K1 0

iOS动画-CALayer布局属性详解

换句话来讲就是：position是当前layer的anchorPoint在superLayer中的位置。...，可能会需要设置此属性来决定图层是围绕哪一个点旋转的；但这时候我们又不得不考虑一个问题：修改锚点可以让我们的动画围绕非中心点旋转，但是这也改变了原有视图的位置frame，这是我们不想要的结果，该如何解决呢...(view.center.x - transition.x, view.center.y - transition.y); } 下面再来具体演示一下修改锚点改变动画状态的用法，我们分别创建橙色视图默认围绕中心旋转...，而紫色视图围绕左顶点旋转，关键代码如下： #import "TestLayerFiveVC.h" @interface TestLayerFiveVC () @property (nonatomic...(或视图)坐标系下的点或者矩形转换为另一个图层(或视图)坐标系下的点或者矩形；开发过程中我们通常操作的对象都是视图，所以下面以视图为例简单演示其用法：首先创建添加两个宽高都是100*100的橙色、紫色视图在控制器的

2.3K2 0

第4章-变换-4.1-基础变换

在三个维度上，常用的旋转矩阵有、和，它们分别围绕x轴、y轴和z轴旋转一个实体弧度。...对于每个旋转矩阵，它围绕任何轴旋转弧度，其迹（即矩阵中对角线元素的总和）是独立于轴的常数，并计算为[997]： image.png 旋转矩阵的效果可以在第65页的图4.4中看到。...4.1.3 缩放缩放矩阵分别沿x、y和z方向使用因子、和缩放实体。这意味着缩放矩阵可用于放大或缩小对象。其中的越大，缩放的实体在该方向上就越大。...示例：在某个方向上缩放。缩放矩阵仅沿x、y和z轴缩放。如果要在其他方向进行缩放，则需要进行复合变换。假设应该沿着正规化的、右向坐标系下的、和的轴进行缩放。...观察下标可以用来求参数s在下面矩阵中的位置；x(其数字索引为0)标识第0行，z(其数字索引为2)标识第二列，因此s位置如下所示： image.png 将此矩阵与点相乘的效果是产生一个点：。

4K11 0

图形学入门（一）：坐标变换

观察空间到裁剪空间的变换这个过程就是将物体的每个顶点坐标从三维空间投影到相机的二维成像平面上，这也就相当于相机拍照时在胶片上记录下当时的画面。...这里需要略微说明的是，由于坐标系中的一个点本身可以看作是一个从原点开始指向该点的向量，因此，在许多图形库中也常直接用向量来表示顶点。...对于一个二维的图形的每一个顶点 p = (x,\ y)^\mathrm{T} 我们希望对其应用一个 2 \times 2 的矩阵，使得其绕原点逆时针旋转一个 \theta 角后得到 (x^\prime,...，例如我们想让一个图形在 x 轴方向平移 1 个单位长度，在 y 轴方向平移 2 个单位长度，那么，我们只需要对其每一个顶点 p = (x,\ y)^\mathrm{T} 进行如下操作： \[\begin...模型变换模型空间到世界空间是比较简单的情况，它其实就是一些基础的变换或者是基础变换的组合，将物体的顶点从模型中定义的坐标系移动到世界坐标系中，例如一个正方体的盒子的一个顶点在 (1,\ 1,\ 1)

1.8K2 0

第2章还记得点、线、面吗(二)

图片图中右边那个手对应的坐标系，就是右手坐标系。在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。...5、线条的深入理解在Threejs中，一条线由点，材质和颜色组成。...6、画高中时深爱的坐标平面我还深爱着高中时的那个坐标平面，它勾起了我关于前排同学的细细长发的回忆…这个平面的效果如下所示,截图不完整哦：图片它横竖分别绘制了20条线段，在摄像机的照射下，就形成了这般模样...把网格虚拟成正方形，在正方形边界上找到几个等分点，用这些点两两连接，就能够画出整个网格来。1、定义2个点在x轴上定义两个点p1(-500,0,0)，p2(500,0,0)。...同理，将p1p2这条线先围绕y轴旋转90度，然后再复制20份，平行于z轴移动到不同的位置，也能形成一组平行线。经过上面的步骤，就能够得到坐标网格了。

7283 0

从零打造一个Web地图引擎

x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8 目前各大地图厂商的瓦片服务遵循的规则是有不同的：谷歌XYZ规范：谷歌地图、OpenStreetMap...，原点在经纬度都为0的位置，也就是中间，向右为X正方向，向上为Y正方向谷歌和TMS的瓦片区别可以通过该地址可视化的查看：虽然规范不同，但原理基本是一致的，都是把地球投影成一个巨大的正方形世界平面图，...这两种坐标系都是地理坐标系，球面坐标，单位为度，这种坐标方便在地球上定位，但是不方便展示和进行面积距离计算，我们印象中的地图都是平面的，所以就有了另外一种平面坐标系，平面坐标系是通过投影的方式从地理坐标系中转换过来...，所以也称为投影坐标系，通常单位为米，投影坐标系根据投影方式的不同存在多种，在Web开发的场景里通常使用的是Web墨卡托投影，编号为EPSG:3857，它基于墨卡托投影，把WGS-84坐标系投影成正方形...y = Math.floor(_y / resolution) return [x, y] } 计算中心经纬度对应的像素坐标： // 中心点对应的像素坐标 let centerPos = getPxFromLngLat

3.9K1 0

Android多媒体之GL-ES战记第二集--谜团立方

恩...好吧，哥要开始吹牛了我这么随便一想,在满足正方形的条件下，动一下p5点，就行了,然后让p5上漂 p5上漂.png static float sCoo[] = { //以逆时针顺序...，先转要变立体了守关boss要发大招了，勇士们，hold住 1.第一关卡：沿着y轴旋转起来关于变换第一集讲了一些，忘了的可以回去看看下面是转一圈的效果，感觉少了一半旋转.gif /.../围绕y轴旋转 Matrix.setRotateM(mOpMatrix, 0, currDeg, 0, 1, 0); 我让她一边移动一边旋转,好像可以看出一点东西不过是转起来了，等到转讲视野的时候再详细论述吧...4; // 3*4=12 static final int COORDS_PER_VERTEX = 3;//数组中每个顶点的坐标数 static final int c = 1;//数组中每个顶点的坐标数...0.0f,1.0f, 1.0f,0.0f, }; static final int TEXTURE_PER_VERTEX = 2;//数组中每个顶点的坐标数

5944 1

模型矩阵、视图矩阵、投影矩阵

这时可用多个变换的叠加构建矩阵：首先将顶点(x, y, z)平移到原点，绕X轴旋转角度p使指定的旋转轴在x-z平面上，绕Y轴旋转角度q使指定的旋转轴与Z轴重合，绕指定旋转轴（也就是z轴）旋转角度θ，绕...Y轴旋转角度-q，绕X轴旋转角度-p,将顶点平移到向量(x，y，z)。...比如：来看个具体的例子：一个绕z轴匀速螺旋匀速上升的立方体，在某一帧中（即在这一帧对应的时刻t下），其向z轴正方向平移的长度和绕z轴旋转的角度分别为：则模型矩阵（注意上文齐次坐标下的基本变换矩阵）为...考虑一辆行驶中的汽车的轮胎，其模型视图矩阵是局部模型矩阵（描述轮胎的旋转）左乘汽车的模型矩阵（描述汽车的行驶）再左乘视图矩阵得到的。投影矩阵投影矩阵将视图坐标系中的顶点转化到平面上。...顶点在其中的坐标，其x值和y值直接就是顶点在屏幕上的坐标，而z坐标值可以用来表示顶点深度，如果两个不同顶点投影到平面上时重合了，深度可以来确定那个点在前面。

2.2K2 0

2.5D(伪3D)站点可视化第一弹楔子2.5D的思想火花2.5D技术概述三维空间定义模型定义投影算法。

三维空间定义为了能够实现2.5D的效果，我们需要把原来的平面二维空间延伸到三维立体空间。三维立体空间中存在着X、Y、Z三个坐标轴，比原来的二维空间多出了一个Z坐标轴。...在2.5D中，只需要定义一个立方体的模型即可。前面说过，2.5D只是呈现了三维对象的某个角度的一个面，因此其模型只需要这个面的一张图片即可，图片就是模型。...在定义了投影矩阵之后，便可以通过投影算法计算出立方体上面每个顶点在平面坐标上的位置： /** * 布局，前面四个点 p1 - p4, 后面四个点p 5 - p8 * *...z: -d3 / 2 + pos.z, }, // p5 { x: w3 / 2 + pos.x, y: -h3 / 2 + pos.y,...绘制图片绘制图片的时候，并不需要每个面都去绘制图片，只需要把图片绘制到立方体投影的8个顶点所占据的区域里面,需要做到的是，其8个顶点的位置正好和图片的顶点重合，比如下图：首先计算出投影顶点所占据的二维区域大小

2.1K3 1

Css3之高级-5 Css转换(简介、2

X轴和 Y轴平面上发生变化，改变其形状、尺寸和位置 ? ...转换的原点 - transfor-origin 属性用来指定元素的转换原点位置 - 默认情况下，转换的原点在元素的中心点 - 或者是 X轴和 Y轴的 50% 处 - transform-origin...2D 转换 - translate() 方法将元素从其当前位置移动 - 移动到 x 坐标和 y 坐标位置参数 - translate(x) 或者 translate(x,y) -...2D 倾斜 - skew() 方法用于让元素倾斜 - 以原点位置，围绕 X轴和 Y轴按照一定的角度倾斜 - 可能会改变元素的形状 - skew(x)或者 skew(x...- 3D 位移可以改变元素在 Z轴位置 - 3D 位移主要包含 - translateZ(z) - translate3d(x,y,z) 3D 旋转 - 3D 旋转主要包含

7282 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭