1. 程式人生 > >使用opengl繪製五角星圖形

使用opengl繪製五角星圖形

最近開始學習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) 對於繪製複雜些的二維圖形,建議讀者可以自己拿紙筆繪製草圖,先對其幾何原理進行推導和演算,瞭解計算過程,這樣在後面編寫程式碼時就比較容易,思路也很清晰。

相關推薦

使用opengl繪製五角星圖形

最近開始學習opengl的開發方法,專門下載了<<OpenGl入門教程>>電子書,當看到使用opengl繪製五角星例項時,發現示例程式碼有錯誤,繪製不出正確圖形,並且與程式說明中提出的計算公式有出入。本人經過重新梳理概念,查閱了相關資料,編寫了正確的

直接在MFC的對話方塊上利用OpenGL繪製圖形

    而我的這篇文章是沒有使用WM_TIMER訊息在MFC對話方塊中使用OpenGL,從而揭示了一個困擾我很久的問題,而這個問題其實本身與MFC自身相關的,上傳的程式可以在如下的連結下載:http://download.csdn.net/detail/hurricane

openGL繪製簡單二維圖形

// aa.cpp : 定義控制檯應用程式的入口點。 #include "stdafx.h" #include <gl/glut.h> void Initial(void)

OpenGL 繪製二維圖形

每次繪圖需要在OnDraw(CDC* pDC)中呼叫,例如:void CStepinGLView::OnDraw(CDC* pDC) { CStepinGLDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); if (!pDoc) return; // T

opengl學習筆記 五 ——繪製複雜圖形

                本小節的程式碼參考了 http://www.cppblog.com/doing5552/arc

Android openGl開發詳解(一)——繪製簡單圖形

學習五部曲,弄清楚5個W一個H(when(什麼時候使用)、where(在哪個地方使用?)、who(對誰使用)、what(是個什麼東西)、why(為什麼要這麼用?).一個H即:how(到底該怎麼用?)),基本的概念篇主要圍繞這幾個方面進行分析

OpenGL原始碼之五繪製3D圖形

#include <Windows.h> //Windows的標頭檔案 #include <gl/glut.h> //包含OpenGL實用庫 HGLRC hRC=NULL; //視窗著色描述表控制代碼 HDC hDC=NULL;//OpenGL渲染描述表控制代碼 HWND hWnd=N

OpenGL ES繪製3D圖形

package com.example.tyxiong.myapplication; import android.app.Activity; import android.opengl.GLSurfaceView; import android.os.Bun

OpenGL 繪製長方體 計算機圖形

不同面填充模式顯示出不同的效果,如下面三幅截圖: 上圖通過glPolygonMode(GL_FRONT, GL_LINE);函式的呼叫,實現了顯示前面面上的邊線,而下面的面顯示為預設的面填充,顯示效果為如上圖。 上圖通過glPolygonMode(GL_FRONT_AND_BAC

Quartz 2d 用CGContextRef 繪製各種圖形 (文字、圓、直線、弧線、矩形、扇形、橢圓、三角形、圓角形、貝塞爾曲線、圖片)

首先了解下 CGContextRef  Graphics Context是圖形上下文,可以將其理解為一塊畫布,我們可以在上面進行繪畫操作,繪製完成後,將畫布放到我們的View 中顯示即可,View看著是一個畫框。 自己學習時實現的Demo,希望對大家有幫助,具體的實現看程式碼,並有

opengl繪製三角形

#include <iostream> #include <glad/glad.h> #include <GLFW/glfw3.h> void framebuffer_size_callback(GLFWwindow* window, int width,

OpenGL繪製方式

什麼是圖元:圖元是組成3D物體的基礎單元,是頂點的集合以預定義的方式結合在一起。而預定義的方式可以是一維的點,二維的線,甚至是三維的多邊形等。 常見的圖元型別如圖所示: 繪製點常用介面:點的圖元為GL_POINTS呈正方形狀,不受透視除法影響(也就是不近大遠小)。點的大小都會自動修

CAD技巧-怎麼在CAD中繪製螺旋圖形

CAD技巧,怎麼在CAD中繪製螺旋圖形?小夥伴們都知道,在CAD行業中,日常的工作就是繪製編輯CAD圖紙,在編輯CAD圖紙檔案的時候都需要藉助CAD編輯器的繪製,CAD編輯器中有許多的功能可以提供我們使用,比如說繪製長方體,繪製多邊形等一些操作,但是怎麼在個繪製螺旋圖形?小夥伴們知道要怎麼進行操作嗎?下面我們

matplotlib繪製常見圖形

Matplotlib 是一個 Python 的 2D繪相簿,它以各種硬拷貝格式和跨平臺的互動式環境生成出版質量級別的圖形 [1]  。 通過 Matplotlib,開發者可以僅需要幾行程式碼,便可以生成繪圖,直方圖,功率譜,條形圖,錯誤圖,散點圖

python matlibplot繪製3D圖形

散點圖使用scatter from mpl_toolkits.mplot3d import Axes3D import numpy as np from matplotlib import pyplot as plt

Android下使用OpenGL繪製三角形

在Android下影象渲染基本都用的是OpenGL ES,在使用opengl過程中需要注意幾個關鍵點: 1、頂點著色器 2、色彩著色器 3、座標 特別提到座標,是因為opengl中的座標與手機螢幕的座標是不一致的,在使用opengl座標時需要自己進行轉換一下:

plotly繪製簡單圖形<6>--箱線圖

箱形圖(英文:Box plot),又稱為盒須圖、盒式圖、盒狀圖或箱線圖,是一種用作顯示一組資料分散情況資料的統計圖。因型狀如箱子而得名。在各種領域也經常被使用,常見於品質管理。不過作法相對較繁瑣。 主要包含六個資料節點,將一組資料從大到小排列,分別計算出他的上邊緣,上四分位

css繪製特殊圖形

一、三角形 border邊框設定 程式碼: width: 300px; height: 300px; background: red; border: 40px solid black; border-left-color: blue; border-bottom-color: yellow; bo

1. Canvas繪製基礎圖形

Canvas是在web畫面中繪製點陣圖的技術。 步驟: 1.取得Canvas物件。(相當於畫布) 2.從Canvas物件中獲取繪圖用的上下文。(相當於繪畫用的筆) 3.使用上下文中的方法和屬性進行繪圖。 1.簡單例子: <style type="text/

R語言繪製基本圖形

條形圖 函式barplot() > library(vcd) 載入需要的程輯包:grid > counts <- table(Arthritis$Improved) > counts None Some Marked 42