VS-openGL 绘制五角星

Dear 丶 2023-09-27 10:36 224阅读 0赞

#### 目录 ####

*  前言
 *  一、核心思路
 *  二、源码
 *  三、其他小知识

--------------------

## 前言 ##

初学计算机图形学以及VS、OpenGL，只作为参考，无权威性可言，有问题欢迎大家在评论区提出，如果帮到你了，可以留个点赞再走。

## 一、核心思路 ##

五角星的十个顶点由同心圆的十个顶点构成。通过同心圆的圆心坐标、大圆半径R、小圆半径r计算出十个顶点的坐标，然后通过绘制线段/三角形来绘制五角星。（计算比较简单，根据下图即可计算出十个顶点的坐标，这里就省略了）  
![在这里插入图片描述][845c7eff3e3e4086944f1488768deb92.png]

## 二、源码 ##

#include <GL/glew.h>//OpenGL扩展库
    #include <GL/glut.h>//OpenGL工具库
    #include <stdio.h>
    #include <math.h>
    
    // 绘制五角星核心思路：求出五角星的十个顶点再通过绘制线段/三角形连接起来即可
    
    // 定义Π
    #define PI 3.14159265
    
    // 定义坐标结构体
    struct Vertex {
        
    	double x;
    	double y;
    };
    
    // 绘制线段函数
    void drawLine(Vertex Vertex_Fir, Vertex Vertex_Sec) {
        
    	// 设置颜色
    	glColor3f(1, 0, 0);
    	// 设置绘制类型
    	glBegin(GL_LINES);
    	// 第一个坐标
    	glVertex2f(Vertex_Fir.x, Vertex_Fir.y);
    	// 第二个坐标
    	glVertex2f(Vertex_Sec.x, Vertex_Sec.y);
    	glEnd();
    }
    
    // 绘制红色三角形函数
    void drawRedTriangle(Vertex Vertex_Fir, Vertex Vertex_Sec, Vertex Vertex_Thi) {
        
    	// 设置填充的颜色
    	glColor3f(1, 0, 0);
    	// 设置绘制类型
    	glBegin(GL_TRIANGLES);
    	// 第一个坐标
    	glVertex2f(Vertex_Fir.x, Vertex_Fir.y);
    	// 第二个坐标
    	glVertex2f(Vertex_Sec.x, Vertex_Sec.y);
    	// 第三个坐标
    	glVertex2f(Vertex_Thi.x, Vertex_Thi.y);
    	glEnd();
    }
    
    // 绘制蓝色三角形函数
    void drawBlueTriangle(Vertex Vertex_Fir, Vertex Vertex_Sec, Vertex Vertex_Thi) {
        
    	// 设置填充的颜色
    	glColor3f(0, 0, 255);//深蓝色
    	// 设置绘制类型
    	glBegin(GL_TRIANGLES);
    	// 第一个坐标
    	glVertex2f(Vertex_Fir.x, Vertex_Fir.y);
    	// 第二个坐标
    	glVertex2f(Vertex_Sec.x, Vertex_Sec.y);
    	// 第三个坐标
    	glVertex2f(Vertex_Thi.x, Vertex_Thi.y);
    	glEnd();
    }
    
    // 获取外圆五角星的五顶点(参数：大圆圆心坐标以及半径)
    Vertex* getExternalVertex(Vertex Center_Vertex, double R) {
        
    	// 定义Vertex结构体数组，包括五个顶点和一个圆心
    	Vertex* externalVertex = new Vertex[6];
    	double alpha = 2*PI / 5;
    	double thet = PI / 10;
    	double bet = 2*PI / 10;
    	// 圆心坐标
    	externalVertex[0].x = Center_Vertex.x, externalVertex[0].y = Center_Vertex.y;
    	// 其余五个顶点
    	externalVertex[1].x = Center_Vertex.x, externalVertex[1].y = Center_Vertex.y+R;
    	externalVertex[2].x = Center_Vertex.x+R*cos(thet), externalVertex[2].y = Center_Vertex.y+R*sin(thet);
    	externalVertex[3].x = Center_Vertex.x+R*sin(bet), externalVertex[3].y = Center_Vertex .y-R*cos(bet);
    	externalVertex[4].x = Center_Vertex.x-R*sin(bet), externalVertex[4].y = Center_Vertex.y-R*cos(bet);
    	externalVertex[5].x = Center_Vertex.x-R*cos(thet), externalVertex[5].y = Center_Vertex.y+R*sin(thet);
    	
    	return externalVertex;
    }
    
    // 获取内圆五角星的五顶点(参数：小圆圆心坐标以及半径)
    Vertex* getInternalVertex(Vertex Center_Vertex, double r) {
        
    	// 定义Vertex结构体数组，包括五个顶点和一个圆心
    	Vertex* internalVertex = new Vertex[6];
    	double alpha = 2 * PI / 5;
    	double thet = PI / 10;
    	double bet = (PI-alpha) / 2;
    	// 圆心坐标
    	internalVertex[0].x = Center_Vertex.x, internalVertex[0].y = Center_Vertex.y;
    	// 其余五个顶点
    	internalVertex[1].x = Center_Vertex.x + r * cos(bet), internalVertex[1].y = Center_Vertex.y + r * sin(bet);
    	internalVertex[2].x = Center_Vertex.x + r * cos(thet), internalVertex[2].y = Center_Vertex.y - r * sin(thet);//
    	internalVertex[3].x = Center_Vertex.x, internalVertex[3].y = Center_Vertex.y - r;//
    	internalVertex[4].x = Center_Vertex.x - r * cos(thet), internalVertex[4].y = Center_Vertex.y - r * sin(thet);
    	internalVertex[5].x = Center_Vertex.x - r * cos(bet), internalVertex[5].y = Center_Vertex.y + r * sin(bet);
    	
    	return internalVertex;
    }
    
    // 设置背景颜色
    void setBackgroundColor(void) {
        
    	glClearColor(0.2, 0.3, 0.3, 0.5);
    }
    
    // 绘制五角星
    void draw(void) {
        
    	// 清除清缓存
    	glClear(GL_COLOR_BUFFER_BIT);
    
    	// ### 绘制线框五角星 ###
    	// 1. 定义圆心、大小圆半径
    	Vertex Center_Vertex;
    	Center_Vertex.x = 500, Center_Vertex.y =150;//圆心以显示窗口的左下角为原点，向右x轴正方向，向上y轴正方向
    	double R = 100;
    	double r = 40;
    	// 2. 获取内外顶点
    	Vertex* externalVertex = getExternalVertex(Center_Vertex, R);
    	Vertex* internalVertex = getInternalVertex(Center_Vertex, r);
    	// 3. 绘制线框五角星
    	for (int i = 1; i < 6; i++) {
        
    		drawLine(externalVertex[i], internalVertex[i]);
    		if (i < 5) {
        
    			drawLine(internalVertex[i], externalVertex[i + 1]);
    		}
    		else {
        
    			drawLine(internalVertex[i], externalVertex[1]);
    		}
    	}
    
    	// ### 绘制红色五角星 ###
    	// 1. 定义圆心、大小圆半径
    	Center_Vertex.x = 500, Center_Vertex.y = 350;
    	R = 100, r = 40;
    	// 2. 获取内外顶点
    	externalVertex = getExternalVertex(Center_Vertex, R);
    	internalVertex = getInternalVertex(Center_Vertex, r);
    	// 3. 绘制红色五角星
    	for (int i = 1; i < 6; i++) {
        
    		drawRedTriangle(Center_Vertex, internalVertex[i], externalVertex[i]);
    		if (i < 5) {
        
    			drawRedTriangle(Center_Vertex, internalVertex[i], externalVertex[i+1]);
    		}
    		else {
        
    			drawRedTriangle(Center_Vertex, internalVertex[i], externalVertex[1]);
    		}
    	}
    
    	// ### 绘制多色五角星 ###
    	// 1. 定义圆心、大小圆半径
    	Center_Vertex.x = 500, Center_Vertex.y = 550;
    	R = 100, r = 40;
    	// 2. 获取内外顶点
    	externalVertex = getExternalVertex(Center_Vertex, R);
    	internalVertex = getInternalVertex(Center_Vertex, r);
    	// 3. 绘制多色五角星
    	for (int i = 1; i < 6; i++) {
        
    		// 绘制红色三角形
    		drawRedTriangle(Center_Vertex, internalVertex[i], externalVertex[i]);
    		// 绘制蓝色三角形
    		if (i < 5) {
        
    			drawBlueTriangle(Center_Vertex, internalVertex[i], externalVertex[i + 1]);
    		}
    		else {
        
    			drawBlueTriangle(Center_Vertex, internalVertex[i], externalVertex[1]);
    		}
    	}
    	glutSwapBuffers();//交换缓冲（双缓冲时使用）
    }
    
    void reshape(int width, int height)
    {
        
    	glViewport(0, 0, width, height);//设置视区
    
    	glMatrixMode(GL_PROJECTION);
    	glLoadIdentity();
    	gluOrtho2D(0, width, 0, height);//设置图形数据范围
    	glMatrixMode(GL_MODELVIEW);
    	glLoadIdentity();
    }
    
    int main() {
        
    	// 窗口的坐标是电脑屏幕左上角为原点，向右为x轴正方向；向下为y轴正方向
    	glutInitWindowPosition(100, 100); //定义窗口位置与大小
    	glutInitWindowSize(1200, 700);
    	glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE); //初始化显示模式
    	glutCreateWindow("五角星"); //定义窗口名称
    
    	setBackgroundColor(); // 设置背景色
    
    	glutDisplayFunc(draw); //图形绘制函数
    	glutReshapeFunc(reshape); //窗口重绘函数
    	glutMainLoop(); //无限循环函数 
    	return 0;
    }

## 三、其他小知识 ##

1.  定义显示窗口位置与大小时：参考坐标系是电脑屏幕左上角为原点，向右为x轴正方向；向下为y轴正方向  
    ![在这里插入图片描述][b8269ffa65064f2898ad5cc9ab5cad14.png]
2.  绘制图形时使用的坐标：参考坐标系是显示窗口的左下角为原点，向右x轴正方向，向上y轴正方向  
    ![在这里插入图片描述][ce0328eea1784543a4114bf7d275930b.png]

[845c7eff3e3e4086944f1488768deb92.png]: https://img-blog.csdnimg.cn/845c7eff3e3e4086944f1488768deb92.png
[b8269ffa65064f2898ad5cc9ab5cad14.png]: https://img-blog.csdnimg.cn/b8269ffa65064f2898ad5cc9ab5cad14.png
[ce0328eea1784543a4114bf7d275930b.png]: https://img-blog.csdnimg.cn/ce0328eea1784543a4114bf7d275930b.png