用javascript写了一个机械臂数据仿真效果(代码片段)

sunny开始学坏 sunny开始学坏     2022-12-24     693

关键词:

前言:

  前段时间在网上看到网友用单片机制作了一个写字机器人,我想了想应该不太难,于是就有了这个。

  先上效果图:

    

 

机械臂的运动空间(初等数学计算):

 

     如图所示,是一个平面的机械臂实现,以机械臂的原点建立笛卡尔直角坐标系,那么机械臂的末端执行机构的坐标就可以用下列两个方程组来表示:

 

    此方程可以实现通过电机的运转角度来得到末端执行机构的精确位置坐标 。

    但在实际情况下这个方程组的运用场景十分有限。因为往往对于机械臂的角度没有太大的要求和限制其运动空间。

    实际运用往往都是驱动步进电机的步进角度来实现控制机械臂的输出位移,利用这组公式就得通过映射的办法来查询,

    所以我就把他求了个逆向解,将角度1和角度2显化,结果得到一对4次方程组,显化过程也比较复杂。下面是显化结果。

 

       这个公式是比较复杂的,本来想把它像上面的函数一样把它可视化显示出来的,但是没找到好的工具。

代码实现:

  本例采用了html5的canvas画布来一帧一帧的绘制,基于h5的游戏几乎都是采用这种方法来搞的,

    编写了一些函数来方便绘图:

    画圆:

      

 

 

     画线:

 

      

   循环(vue 框架双向数据绑定):

      本例是没有编写循环函数的,利用了vue框架的双向数据绑定特性,把canvas上绘图所需要的数据放在vue里面,当数据改变时,canvas就会自动重绘。

源码:

 1 var app = new Vue(
 2         el: \'#app\',
 3         data: 
 4             x: 10,
 5             y: 10,
 6             t1: 0,
 7             t2: 0,
 8             x1: 0,
 9             y1: 0,
10             x2: 0,
11             y2: 0,
12             li: []
13         ,
14         mounted: function () 
15             this.run()
16         ,
17 
18         methods: 
19             run: function () 
20                 //绘图s
21                 function ctx_Write(X = X, Y = Y, R = R, colour = "#FF0000") 
22                     ctx.beginPath()
23                     ctx.fillStyle = colour;
24                     ctx.arc(X, Y, R, 0, 360);
25                     ctx.fill()
26                     ctx.closePath()
27                 
28 
29                 function lin_Write(x = x, y = y, X = X, Y = Y, b = b, colour = "#FF0000") 
30                     ctx.beginPath()
31                     ctx.moveTo(x, y);       //设置起点状态
32                     ctx.lineTo(X, Y);       //设置末端状态
33                     ctx.lineWidth = b;          //设置线宽状态
34                     ctx.strokeStyle = colour;  //设置线的颜色状态
35                     ctx.stroke();
36                     ctx.closePath()
37 
38                 
39                 qx = 100
40                 qy = 100
41                 l1 = 150;
42                 l2 = 150;
43                 //数学表达式,四次方程组
44                 t1 = Math.asin((l2 * Math.sin(2 * Math.atan((2 * l2 * this.y - Math.sqrt(-1 * l1 ** 4 + 2 * l1 ** 2 * l2 ** 2 + 2 * l1 ** 2 * this.x ** 2 + 2 * l1 ** 2 * this.y ** 2 - l2 ** 4 + 2 * l2 ** 2 * this.x ** 2 + 2 * l2 ** 2 * this.y ** 2 - this.x ** 4 - 2 * this.x ** 2 * this.y ** 2 - this.y ** 4)) / (-1 * l1 ** 2 + l2 ** 2 + 2 * l2 * this.x + this.x ** 2 + this.y ** 2))) - this.y) / l1) + 3.1415926;
45                 t2 = 2 * Math.atan((2 * l2 * this.y - Math.sqrt(-1 * l1 ** 4 + 2 * l1 ** 2 * l2 ** 2 + 2 * l1 ** 2 * this.x ** 2 + 2 * l1 ** 2 * this.y ** 2 - l2 ** 4 + 2 * l2 ** 2 * this.x ** 2 + 2 * l2 ** 2 * this.y ** 2 - this.x ** 4 - 2 * this.x ** 2 * this.y ** 2 - this.y ** 4)) / (-1 * l1 ** 2 + l2 ** 2 + 2 * l2 * this.x + this.x ** 2 + this.y ** 2));
46 
47                 this.t1 = t1
48                 this.t2 = t2
49                 //console.log("..............")
50                 //console.log(t1)
51                 //console.log(t2)
52                 var canvas = document.getElementById("myCanvas");
53                 var ctx = canvas.getContext("2d");
54                 canvas.width = 400;
55                 canvas.height = 400;
56                 canvas.style = "border:5px solid #000000;";
57                 // //console.log(this.x)
58                 // 画第一臂
59                 x1 = l1 * Math.cos(t1) + qx
60                 y1 = l1 * Math.sin(t1) + qy
61                 this.x1 = x1
62                 this.y1 = y1
63                 //console.log(x1, y1)
64 
65                 lin_Write(0, qx, 500, qy, 1)//画x轴
66 
67                 lin_Write(qx, 0, qy, 500, 1, "    #0000FF")//画y轴
68 
69                 lin_Write(100, 100, x1, y1, 5, "    #FFFF00")
70                 // 画第1臂
71 
72                 x2 = l2 * Math.cos(t2) + x1
73                 y2 = l2 * Math.sin(t2) + y1
74                 this.li.push([x2, y2])
75                 if (this.li.length > 500) 
76                     this.li.splice(0, 1)
77                 
78                 //console.log(this.li)
79                 for (var o = 0; o < this.li.length; o++) 
80                     ctx_Write(X = this.li[o][0], Y = this.li[o][1], R = 1, colour = "#FF0000")
81                     //画轨迹
82                 
83 
84                 this.x2 = x2
85                 this.y2 = y2
86 
87                 lin_Write(x1, y1, x2, y2, 5, "    #000000")//画关节臂
88 
89                 //console.log()
90 
91                 ctx_Write(x1, y1, 10, "#FF0000")//画第一关节点
92 
93                 ctx_Write(100, 100, 10, "#FF0000")//画起点
94 
95                 ctx_Write(x2, y2, 10, "#FF0000")//画第二关节点
96             
97         
98 
99     )

 

我的github地址:

  https://github.com/1019157263

 

  

 

        

 

 

 

 

    

 

 

    

 

工程师的浪漫:用机械臂画一个爱心(代码片段)

工程师的浪漫:用机械臂画一个爱心0写在前面1生成爱心轨迹2机械臂逆运动学实现3实现机械臂画指定轨迹3.1读取数据3.2绘制机械臂3.3反解位姿4拓展0写在前面🔥本文基于过去的博客📚平面2R机器人(二连杆)运动学与动... 查看详情

matlabsimulink基于模糊pid控制的机械臂位置仿真

...已在工业装配、安全防爆等领域得到广泛应用。机械臂是一个复杂系统,存在着参数摄动、外界干扰及未建模动态等不确定性。因而机械臂的建模模型也存在着不确定性,对于不同的任务,需要规划机械臂关节空间的... 查看详情

matlab|机械臂可视化综合仿真平台

 项目地址:​​https://github.com/borninfreedom/matlab-robotics-GUI-tool​​      项目地址:​​https://github.com/borninfreedom/matlab-robotics-GUI-tool​​ 查看详情

stm32控制机械臂抓取的代码

...取的流程,通过编写程序来实现代码。参考技术A以下是一个基于STM32的机械臂控制代码示例(伪代码):1.设置引脚:通过GPIO初始化,设置机械臂各个部位所需的引脚。2.控制舵机:利用PWM信号控制舵机动作,将其旋转到预设位... 查看详情

机械仿真基于matlab简化几何解法六轴机械臂位置规划含matlab源码2128期

...代码方式获取代码方式1:完整代码已上传我的资源:【机械仿真】基于matlab简化几何解法六轴机械臂位置规划【含Matlab源码2128期】点击上面蓝色字体,直接付费下载,即可。获取代码方式2:付费专栏物理应用(Matlab)备注:点... 查看详情

机械仿真基于matlab简化几何解法六轴机械臂位置规划含matlab源码2128期

...代码方式获取代码方式1:完整代码已上传我的资源:【机械仿真】基于matlab简化几何解法六轴机械臂位置规划【含Matlab源码2128期】点击上面蓝色字体,直接付费下载,即可。获取代码方式2:付费专栏物理应用(Matlab)备注:点... 查看详情

三维仿真在智慧城市中的运用,机械臂智能垃圾分类

前言随着城市建设的高速发展,优化环境管理与服务一直是关注的重点,也是一项民生重要工程。不断改善市民的生活居住环境,将融入了新一代的信息技术,打造智慧城市建设。首要是解决城市垃圾作为一大难题,而且对智慧... 查看详情

matlabsimulink基于自抗扰控制的机械臂位置仿真

...已在工业装配、安全防爆等领域得到广泛应用。机械臂是一个复杂系统,存在着参数摄动、外界干扰及未建模动态等不确定性。因而机械臂的建模模型也存在着不确定性,对于不同的任务,需要规划机械臂关节空间的... 查看详情

frankaemikapanda连接真实机械臂(代码片段)

FrankaEmikaPanda连接真实机械臂(二)虚拟环境下已经可以进行机械臂的拖动了,下一步就是PC连接机械臂,并通过plan控制机械臂运动。前文【FrankaEmikaPanda连接真实机械臂(一)】已经提到如何配置机械臂环... 查看详情

Kinect 机械臂检测

...(KUKALBRiiwa7R800)的运动并计算它的链接角度,以使其控制另一个机械臂。【问题讨论】:使用Kinect准确检测和跟踪机械臂及其所有关节听起来过于复杂。你不能连接第一个机械臂(通过串行连接或它支持的接口)来简单地读取每个... 查看详情

运动控制机械臂的分散控制(decentralizedcontrol)

本篇博文以二连杆模型为例,具体参见->【机器人算法】机器人动力学、运动学和基于动力学模型的仿真与控制。分散控制属于关节空间的多关节控制。分散控制有以下假设:惯量不太大,可以用等效惯量代替;... 查看详情

毕设——机械臂dh建模

...用于学习使用,祝各位毕业生顺利完成毕设!毕设(1)——机械臂DH建模毕设中使用到的机械臂是越疆出品的DObot魔术师机械臂,它的机械结构类似于IRB660的码垛机械臂,用两个步进电机控制作者:Dragonet-Z出处:https://www.cnblogs.com/d... 查看详情

gazebo仿真时实时循环启动控制器失败问题解决(代码片段)

在进行机械臂仿真时,使用gazebo进行仿真,使用ROS控制器。在gazebo中启动ros控制器,命令如下$:roslaunchseven_dof_arm_gazeboseven_dof_arm_gazebo_control.launch gazebo中出现了机械臂的的模型,但是有些需要的话题没有生成。不能去控制机械... 查看详情

如何绘制一个可以在 OpenGL 中拾取物体的机械臂?

】如何绘制一个可以在OpenGL中拾取物体的机械臂?【英文标题】:HowtodrawaroboticarmwhichcanpickobjectsinOpenGL?【发布时间】:2013-10-2301:03:42【问题描述】:我在实现一个可以拾取物体的机械臂时遇到了麻烦,因为我在实现中调用了glTran... 查看详情

matlab机械臂仿真中,已知起点坐标(x0,y0,z0)终点(x1,y1,z1),怎样求变换矩阵t?用的robotics工具箱

...也不太懂为什么。。参考技术A用D-H法则,这是最经典的机械臂坐标变换方法。追问您好,用这两个函数可以算出来么?transl([24.461,14.682,-1.44]);ctraj(T1,T2,length(t));为什么我总提示说不能收敛啊?谢谢~追答我要是告诉你,我这两天... 查看详情

[cqoi2014]排序机械臂

...从低到高排好序,工程师发明了一种排序机械臂。它遵循一个简单的排序规则,第一次操作找到摄低的物品的位置P1,并把左起第一个至P1间的物品反序;第二次找到第二低的物品的位置P2,并把左起第二个至P2间的物品反序...最终... 查看详情

[cqoi2014]排序机械臂(代码片段)

...:“写代码半小时,debug一下午”。这题其实就是让你搞一个数据结构,支持一下操作:1.区间翻转。2.查询区间最小值所在位置。刚开始我想错了,想直接维护点权最小的点所在位置,但是这样旋转的时候就彻底的乱了,不知咋... 查看详情

bzoj3506:[cqoi2014]排序机械臂

...从低到高排好序,工程师发明了一种排序机械臂。它遵循一个简单的排序规则,第一次操作找到摄低的物品的位置P1,并把左起第一个至P1间的物品反序;第二次找到第二低的物品的位置P2,并把左起第二个至P2间的物品反序...最终... 查看详情