James的圖學筆記Week14

光柵化

Part1.繪製三角形

mode1.描邊
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);
  stroke(255,255,0);vertex(500,500);
  stroke(0,0,255);vertex(100,500);
endShape();

mode2.填滿
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  fill(255,0,0);vertex(300,100);//顏色填滿
  fill(255,255,0);vertex(500,500);//顏色填滿
  fill(0,0,255);vertex(100,500);//顏色填滿
endShape();

mode3.重疊
void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
beginShape(TRIANGLE);
fill(255,0,0);vertex(100,100,0);
fill(255,0,255);vertex(100,500,100);
fill(255,255,0);vertex(500,500,0);
endShape();
beginShape(TRIANGLE);
fill(0,255,0);vertex(500,100,0);
fill(0,255,255);vertex(500,500,100);
fill(255,255,0);vertex(100,500,0);
endShape();
}

Week14

三角形繪圖

計圖筆記week14

畫三角形:

程式碼:

size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);
  stroke(255,255,0);vertex(500,500);
  stroke(0,0,255);vertex(100,500);
endShape();

填滿圖案

size(600,600,P3D);

background(255);

beginShape(TRIANGLE);

  fill(255,0,0);vertex(300,100);

  fill(255,255,0);vertex(500,500);

  fill(0,0,255);vertex(100,500);

endShape();

重疊三角形

void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
beginShape(TRIANGLE);
fill(255,0,0);vertex(100,100,0);
fill(255,0,255);vertex(100,500,100);
fill(255,255,0);vertex(500,500,0);
endShape();

beginShape(TRIANGLE);
fill(0,255,0);vertex(500,100,0);
fill(0,255,255);vertex(500,500,100);
fill(255,255,0);vertex(100,500,0);
endShape();

}

Hello World_OpenGL_note_Week14

Week 14

本週開始皆為期末作品的研究。

老師還有介紹到關於: 在建立3D圖形時，遇到重疊問題，電腦的採樣判斷!

接下來幾周也有說明關於作圖時的網格問題，詳細情形請參考老師上學期的ppt。

Claire's Note #14

WEEK14

Topic:

1. 期末作品Q&A
2. Rasterization 光柵化

A. Rasterization 光柵化

STEP 1: Rasterization 光柵化：

將向量圖形格式表示的圖像轉換成點陣圖，用於顯示器或者印表機輸出。

STEP 2: 三角形

STEP 3: 實心三角形

STEP 4: 空間三角形

魏建新的第十四週學題單

1.主題:期末作品Q&A
2.主題:Rasterization光柵化

張鈞法的老師上網站:http://cg.csie.ntnu.edu.tw/CG/

Processing:

1.Processing三角形 ->滿色三角形

 

size(600,600,P3D);                                                               size(600,600,P3D);
background(255);                                                                  background(255);
beginShape(TRIANGLE);                                                      beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);                                           fill(255,0,0);vertex(300,100);
  stroke(255,255,0);vertex(500,500);                                       fill(255,255,0);vertex(500,500);
  stroke(0,0,255);vertex(100,500);                                           fill(0,0,255);vertex(100,500);
endShape();                                                                           endShape();

2.重疊三角形


void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
beginShape(TRIANGLE);
fill(255,0,0);vertex(100,100,0);
fill(255,0,255);vertex(100,500,100);
fill(255,255,0);vertex(500,500,0);
endShape();
beginShape(TRIANGLE);
fill(0,255,0);vertex(500,100,0);
fill(0,255,255);vertex(500,500,100);
fill(255,255,0);vertex(100,500,0);
endShape();
}

Claire 的課堂作業 week14

計算機圖學 Computer Graphics

1. 主題：期末作品 Q & A
2. 主題：Rasterization 光柵化

[補充] 張鈞法老師的上課投影片資料：Link

Processing - 漸層色三角形

著色點的部分就是使用 Rasterization，他在判斷圖形外還是圖形內，直接來實作看看他的效果

我們先用 Processing 畫出一個三角形

如果想將三角形填滿，則只要將上面程式碼的 stroke 改為 fill 就好了

接著讓我們來看疊圖的效果，用P3D畫出有空間感的兩個三角形，

因為他們的Ｚ值不一樣，而每一個點都有自已的 Z 值，因此可以這樣呈現出來

這樣看線條是平滑的，但是在放大後，

圖形不只是點出他的邊界，還另外在邊緣加上了不同深淺的線外框，讓他能看起來更平滑

有些點在右邊，有些點在左邊，因此在做運算取捨後，所得到的pixel就是這樣

學姊的馬力歐範例

40147027S-Week14

Processing 畫三角形

1. 邊緣上色：
   size(600,600,P3D);
   background(255);
   beginShape(TRIANGLE);
     stroke(255,0,0);vertex(300,100);
     stroke(255,255,0);vertex(500,500);
     stroke(0,0,255);vertex(100,500);
   endShape();
   
2. 填滿上色：
   size(600,600,P3D);
   background(255);
   beginShape(TRIANGLE);
     fill(255,0,0);vertex(300,100);//顏色填滿
     fill(255,255,0);vertex(500,500);//顏色填滿
     fill(0,0,255);vertex(100,500);//顏色填滿
   endShape();
   
3. 雙三角形重疊
   void setup()
   {size(600,600,P3D);
   }
   void draw()
   {
   background(255);
   beginShape(TRIANGLE);
   beginShape(TRIANGLE);
   fill(255,0,0);vertex(100,100,0);
   fill(255,0,255);vertex(100,500,100);
   fill(255,255,0);vertex(500,500,0);
   endShape();
   beginShape(TRIANGLE);
   fill(0,255,0);vertex(500,100,0);
   fill(0,255,255);vertex(500,500,100);
   fill(255,255,0);vertex(100,500,0);
   endShape();
   }
   

abcqq week14

Rasterization

1.畫三角形:

程式碼:

size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);
  stroke(255,255,0);vertex(500,500);
  stroke(0,0,255);vertex(100,500);
endShape();

2.填滿:

程式碼:

size(600,600,P3D);

background(255);

beginShape(TRIANGLE);

  fill(255,0,0);vertex(300,100);

  fill(255,255,0);vertex(500,500);

  fill(0,0,255);vertex(100,500);

endShape();

俊凱的week14筆記

1.畫三角形
邊線上色
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);//邊線上色
  stroke(255,255,0);vertex(500,500);//邊線上色
  stroke(0,0,255);vertex(100,500);//邊線上色
endShape();

圖案填滿
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  fill(255,0,0);vertex(300,100);//顏色填滿
  fill(255,255,0);vertex(500,500);//顏色填滿
  fill(0,0,255);vertex(100,500);//顏色填滿
endShape();

重疊三角形
void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
beginShape(TRIANGLE);
fill(255,0,0);vertex(100,100,0);
fill(255,0,255);vertex(100,500,100);
fill(255,255,0);vertex(500,500,0);
endShape();

beginShape(TRIANGLE);
fill(0,255,0);vertex(500,100,0);
fill(0,255,255);vertex(500,500,100);
fill(255,255,0);vertex(100,500,0);
endShape();

}

Mengting計圖筆記Week14

主題:

1. 期末作品Q & A

2. Rasterization光柵化(OpenGL、WebGL)

張鈞法老師上課投影片

Rasterization光柵化

將向量圖格式表示的圖像轉換成點陣圖，最基礎的柵格化算法將多邊形表示的三維場景渲染到二維表面。(參考wiki)

繪製三角形

繪製實心三角形

將stroke改成fill

繪製重疊三角形

void setup(){
 size(600,600,P3D);
}
void draw(){
 background(255);
 beginShape(TRIANGLE);
   fill(255,0,0); vertex(100,100,0);
   fill(255,0,255); vertex(100,500,100);
   fill(255,255,0); vertex(500,500,0);
 endShape();
 beginShape(TRIANGLE);
   fill(0,255,0); vertex(500,100,0);
   fill(0,255,255); vertex(500,500,10);
   fill(255,255,0); vertex(100,500,0);
 endShape();
}

3D Mario 程式解說

周欣融 week14

*因本週生病請假，以下筆記是參考老師FB講義及同學課堂筆記而成

Processing -- 畫小雞

1. 程式碼
   

結果

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

Processing -- Rasterization

1. 先畫三角形
   
2. 把stroke改成fill，可以填滿顏色
   
3. 加入Z軸的值，產生3D重疊三角形
   

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

Processing -- 3D Mario

結果

圖學筆記乄Week14

Rasterization:

3D的圖投影在2D的方格空間上，有好像柵欄一樣，最後予以著色

EX:

以三角形教學，若標頂點畫凹多邊形，其結果可能不如預期

=>
多了一個點後的結果
=>
-----------------------------------------------------------------------
期末作品Q&A!!

本次學習到:
1.地面設置!
========>當初我為了這個做不出來卡好幾天，最後還是上網找到資源post出來的，
老師現場3分鐘結束QAQ。

2.人物設置(動作):這個OK，已經學習到。不過倒是有學到不童設置方法移動速度的不同。

蒲立年的學習筆記 Week 14

一、Rasterization(光柵化)

>3D的圖投影在2D的方格空間上，有好像柵欄一樣，最後予以著色

程式碼範例1:

size(600,600,P3D);

background(255);

//glBegin(GL_POLYGON);

beginShape(TRIANGLE);

  //glColor3f(r,g,b);

  //glVertex3f(x,y,z);

  stroke(255,0,0);vertex(300,100);

  stroke(255,255,0);vertex(500,500);

  stroke(0,0,255);vertex(100,500);

//glEnd();

endShape();

程式碼範例2:

size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
fill(255,0,0);
vertex(300,100);
fill(255,255,0);
vertex(500,500);
fill(0,0,255);
vertex(100,500);
endShape();

//stroke改成fill來填滿顏色 

程式碼範例3:

void setup(){

  size(600, 600, P3D);

}

void draw(){

 background(255);

 //first triangle

 beginShape(TRIANGLE);

  fill(255,0,0); vertex(100,100,0);

  fill(255,0,255); vertex(100,500,100);

  fill(255,255,0); vertex(500,500,0);

 endShape();

 //second triangle

 beginShape(TRIANGLE);

  fill(0,255,0); vertex(500,100,0);

  fill(0,255,255); vertex(500,500,100);

  fill(255,255,0); vertex(100,500,0);

 endShape();

}

//畫出重疊三角形

吳映廷 計算機圖學 week14

今天講的是Rasterization(光柵化)
簡單來說就是3D投影成2D後在投影的範圍內上色
有兩個範例程式碼

size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  fill(255,0,0);vertex(300,100);
  fill(255,255,0);vertex(100,500);
  fill(0,0,255);vertex(500,500);
endShape();

執行結果:

void setup(){
  size(600,600,P3D);
}
void draw(){
  background(255);
  beginShape(TRIANGLE);
    fill(255,255,0);vertex(100,100,0);
    fill(255,0,255);vertex(100,500,100);
    fill(255,255,0);vertex(500,500,0);
  endShape();
  beginShape(TRIANGLE);
    fill(0,255,0);vertex(500,100,0);
    fill(0,255,255);vertex(500,500,100);
    fill(255,255,0);vertex(100,500,0);
  endShape();
}

執行結果:

周承翰_計圖學習筆記_Week14

Week14 

主題：Rasterization



size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
  stroke(255,0,0);vertex(300,100);
  stroke(255,255,0);vertex(500,500);
  stroke(0,0,255);vertex(100,500);
endShape();

把上面的stroke改成fill 可以把圖型塗滿





圖像前後效果
void setup(){
  size(600,600,P3D);
}
void draw(){
  background(255);
  beginShape(TRIANGLE);
  fill(255,0,0); vertex(100,100,0);
  fill(255,0,255); vertex(100,500,100);
  fill(255,255,0); vertex(500,500,0);
  endShape();
  beginShape(TRIANGLE);
  fill(0,255,0); vertex(500,100,0);
  fill(0,255,255); vertex(500,500,100);
  fill(255,255,0); vertex(100,500,0);
  endShape();
}