使用opengl绘制五角星图形
2015-10-25 13:30
561 查看
最近开始学习opengl的开发方法,专门下载了<<OpenGl入门教程>>电子书,当看到使用opengl绘制五角星实例时,发现示例代码有错误,绘制不出正确图形,并且与程序说明中提出的计算公式有出入。本人经过重新梳理概念,查阅了相关资料,编写了正确的代码,具体内容如下:
1 几何学基本概念和公式
(1) 正多边形
各边相等,各角也想等的多边形叫做正多边形。
(2) 正多形的中心角
正多边形的每一边所对的外接圆的圆心角叫做正多边形的中心角,正n边形有n个中心角,每个中心角相等,且每个中心角为360/n。正三角形中中心角120度,正五边形是72度。
(3) 余弦定理
描述三角型中三边长度与一个角的余弦值关系的数学定理,是勾股定理在一般三角形情形下的推广,如下图所示:
C²=a²+b²-2abcos(γ)
同理,也可描述为:
b²= a²+c²-2accos(β)
a²= b²+ c²-2bccos(α)
2 五角星坐标点位置计算过程
五角星五个顶点分布图如图所示:
(顶点A,E,B,D,C,中心点为O)
几个重要的角度值和条件
∠BOC=72°,∠BOX=18°,∠COX=54°,五角星中心点O到各定点距离相等,所以三角形BOC是等腰三角形,假设中心点O到各顶点距离为a,五个点组成的正五边形边长为m,Pi=3.1415926536f,则根据余弦定理有:
m²=a²+a²-2a²cos(72*Pi/180)
推导:
m²=2a²(1-cos(72*Pi/180))
a²= m²/(2*(1-cos(72*Pi/180)))
则 :
由此推出各点坐标值,如下:
A:{0,a}
B:(a*cos(18*Pi/180),a*sin(18*pi/180))
C:(a*cos(54*Pi/180),-a*sin(54*pi/180))
D:(-a*cos(54*Pi/180),-a*sin(54*pi/180))
E:(-a*cos(18*Pi/180),a*sin(18*pi/180))
3 绘制五角星图形的OpenGl代码
基于以上公式推导,编写的代码如下:
#include “math.h”
Const GLfloatPi=3.1415926536f;
Const GLfloatm=1.0f; //设边长为1
Void StarDisplay(void)
{
GLfloat a=m/sqrt(2*(1-cos(72*Pi/180));
GLfloat bx=a*cos(18*Pi/180);
GLfloat by=a*sin(18*Pi/180);
GLfloat cx=a*cos(54*Pi/180);
GLfloat cy=-a*sin(54*Pi/180)
GLfloat PointA[2]={0,a};
GLfloat PointB[2]={bx,by};
GLfloat PointC[2]={cx,cy};
GLfloat PointD[2]={-cx,cy};
GLfloat PointE[2]={-bx,by};
glClear(GL_COLOR_BUFFER_BIT);
//按照A->C->E->B->D->A 的顺序,可以一笔将五角星画出
glBegin(GL_LINE_LOOP);
glVertex2fv(PointA);
glVertex2fv(PointC);
glVertex2fv(PointE);
glVertex2fv(PointB);
glVertex2fv(PointD);
glEnd();
}
4 总结
(1) 网上OpenGL的参考资料及绘图实例介绍的不够详细,有很多只贴出来代码,没有把绘图原理讲清楚,并且有很多错误的代码存在,容易将读者带入错误方向。
(2) 对于绘制复杂些的二维图形,建议读者可以自己拿纸笔绘制草图,先对其几何原理进行推导和演算,了解计算过程,这样在后面编写代码时就比较容易,思路也很清晰。
1 几何学基本概念和公式
(1) 正多边形
各边相等,各角也想等的多边形叫做正多边形。
(2) 正多形的中心角
正多边形的每一边所对的外接圆的圆心角叫做正多边形的中心角,正n边形有n个中心角,每个中心角相等,且每个中心角为360/n。正三角形中中心角120度,正五边形是72度。
(3) 余弦定理
描述三角型中三边长度与一个角的余弦值关系的数学定理,是勾股定理在一般三角形情形下的推广,如下图所示:
C²=a²+b²-2abcos(γ)
同理,也可描述为:
b²= a²+c²-2accos(β)
a²= b²+ c²-2bccos(α)
2 五角星坐标点位置计算过程
五角星五个顶点分布图如图所示:
(顶点A,E,B,D,C,中心点为O)
几个重要的角度值和条件
∠BOC=72°,∠BOX=18°,∠COX=54°,五角星中心点O到各定点距离相等,所以三角形BOC是等腰三角形,假设中心点O到各顶点距离为a,五个点组成的正五边形边长为m,Pi=3.1415926536f,则根据余弦定理有:
m²=a²+a²-2a²cos(72*Pi/180)
推导:
m²=2a²(1-cos(72*Pi/180))
a²= m²/(2*(1-cos(72*Pi/180)))
则 :
由此推出各点坐标值,如下:
A:{0,a}
B:(a*cos(18*Pi/180),a*sin(18*pi/180))
C:(a*cos(54*Pi/180),-a*sin(54*pi/180))
D:(-a*cos(54*Pi/180),-a*sin(54*pi/180))
E:(-a*cos(18*Pi/180),a*sin(18*pi/180))
3 绘制五角星图形的OpenGl代码
基于以上公式推导,编写的代码如下:
#include “math.h”
Const GLfloatPi=3.1415926536f;
Const GLfloatm=1.0f; //设边长为1
Void StarDisplay(void)
{
GLfloat a=m/sqrt(2*(1-cos(72*Pi/180));
GLfloat bx=a*cos(18*Pi/180);
GLfloat by=a*sin(18*Pi/180);
GLfloat cx=a*cos(54*Pi/180);
GLfloat cy=-a*sin(54*Pi/180)
GLfloat PointA[2]={0,a};
GLfloat PointB[2]={bx,by};
GLfloat PointC[2]={cx,cy};
GLfloat PointD[2]={-cx,cy};
GLfloat PointE[2]={-bx,by};
glClear(GL_COLOR_BUFFER_BIT);
//按照A->C->E->B->D->A 的顺序,可以一笔将五角星画出
glBegin(GL_LINE_LOOP);
glVertex2fv(PointA);
glVertex2fv(PointC);
glVertex2fv(PointE);
glVertex2fv(PointB);
glVertex2fv(PointD);
glEnd();
}
4 总结
(1) 网上OpenGL的参考资料及绘图实例介绍的不够详细,有很多只贴出来代码,没有把绘图原理讲清楚,并且有很多错误的代码存在,容易将读者带入错误方向。
(2) 对于绘制复杂些的二维图形,建议读者可以自己拿纸笔绘制草图,先对其几何原理进行推导和演算,了解计算过程,这样在后面编写代码时就比较容易,思路也很清晰。
相关文章推荐
- 如何成为一名专家级的开发人员
- 解决Vista系统OpenGL驱动问题的方法整理
- Delphi下OpenGL2d绘图之画四边形的方法
- Delphi下OpenGL2d绘图之画点的方法
- Delphi下OpenGL2d绘图之初始化流程详解
- C#实现图形位置组合转换的方法
- .NET微信公众号开发之公众号消息处理
- C#实现判断图形文件格式的方法
- C#实现图形路径变换的方法
- 使用nodejs开发cli项目实例
- nodejs开发微博实例
- Egret引擎开发指南之创建项目
- Delphi使用OpenGL2d绘图之画图片Bmp的方法
- Android开发自学笔记(二):工程文件剖析
- Java开发人员需知的十大戒律
- Web 开发常用工具 大家自己查找下载
- php生成图形验证码几种方法小结
- 三种Web开发主流技术的性价评价
- 在B/S开发中经常用到的JavaScript技术第1/3页
- 深入Android开发FAQ的详解