2017年12月30日 星期六

吳映廷 計算機圖學 week16

本週的主題是製作期末作品。
這次開始使用Unity,把主角和基本的game manager 弄好了。
以下是基本的game manager程式碼。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
public class GM : MonoBehaviour
{
    public static GM instance;
 
    void Awake()
    {

        {
            if (instance == null)

                instance = this;

            else if (instance != this)
                Destroy(gameObject);
        }
        Application.targetFrameRate = 60;
    }
void Update()
    {
        //每frame會自動呼叫一次的函式
    }
}
以下是主角的程式碼。
public class stick_man : MonoBehaviour
{
    public bool isAttack = false;
    public bool isAttack_R = false;
    public float attackTime = 0,attackTime_R = 0;
    private bool isDead = false;         

    private Animator anim;               
    private Rigidbody2D rb2d;
    void Start()
    {
        anim = GetComponent<Animator>();
        rb2d = GetComponent<Rigidbody2D>();
    }
    void Update()
    {
        if (isDead == false)
        {
            if (Input.GetKeyDown(KeyCode.LeftArrow))
            {
                Vector3 theScale = transform.localScale;
                theScale.x = Math.Abs(theScale.x);
                transform.localScale = theScale;

                System.Random rnd = new System.Random();
                var attackType = rnd.Next(0, 3);

                isAttack = true;

                switch (attackType)
                {
                    case 0:
                        anim.SetTrigger("punch");
                        break;
                    case 1:
                        anim.SetTrigger("elbow");
                        break;
                    case 2:
                        anim.SetTrigger("kick");
                        break;

                }

            }
            if (Input.GetKeyDown(KeyCode.RightArrow))
            {
                Vector3 theScale = transform.localScale;
                theScale.x = -Math.Abs(theScale.x);
                transform.localScale = theScale;

                System.Random rnd = new System.Random();
                var attackType = rnd.Next(0, 3);

                isAttack_R = true;

                switch (attackType)
                {
                    case 0:
                        anim.SetTrigger("punch");
                        break;
                    case 1:
                        anim.SetTrigger("elbow");
                        break;
                    case 2:
                        anim.SetTrigger("kick");
                        break;

                }

            }
            if (attackTime >= 1.5)
            {
                isAttack = false;
                attackTime = 0;
            }
            if (attackTime_R >= 1.5)
            {
                isAttack_R = false;
                attackTime_R = 0;
            }
            attackTime += Time.deltaTime;
            attackTime_R += Time.deltaTime;

        }
        if (isDead == true)
        {
            Destroy(this.gameObject);
        }
    }
}

2017年12月28日 星期四

LBH的計圖學習筆記_week 16

一 、 上課內容

1. 期末專題製作

Hello World_OpenGL_note_Week 08

Week 08


步驟一: 目前是我的暫時測試:
本圖是將老師所給的檔案,以另外一個圖片取代原圖片,
卻有解析度上的問題,正在嘗試resize

步驟二: 發現有奇怪的點,自從換一個旋轉軸後。
為了保護原圖的版權,反白以示修過,附帶一提: 沒有針對任何人身或是動物攻擊

步驟三:  嘗試使用 Cylinder 後的結果。(有改變參數)






Hello World_OpenGL_note_Week13

Week 13


主題一: 今天先體驗VR,並說明其使用。

主題二: 介紹蟑螂足球: 即為結合數個圖形的動作,同時呈現在一個畫面中。

             本次使用OpenGL。
       
        步驟一: 加入茶壺至原程式

        步驟二: 使用Timer來控制時速

        步驟三:

主題三: Processing的色彩範例。

Hello World_OpenGL_note_Week16

week 16


本周進度:

進入期末作品的設計。

尋找靈感。參考: http://madebyevan.com/webgl-water/

網頁中介紹詳細的水波紋設計,可以試著簡化來做。

7Hao-計算機圖學-Week15

1.專題進度檢視, Q&A

2.主題:Antialias

黃筱婷計圖筆記week15

主題:antialias
anti aliasing(反鋸齒)(AA)
          投影片講解
期末作品Q&A

俊凱的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();

}

俊凱的week13筆記

1.AR體驗
 cool
2.Processing 色彩
RGB色彩
size(255,255);
colorMode(RGB,255);
for(int x=0;x<255;x++)
{
    for(int y=0;y<255;y++)
    {
      stroke(x,y,255);
      point(x,y);
    }
}
HSB色彩
size(255,255);
colorMode(HSB,255);
for(int x=0;x<255;x++)
{
    for(int y=0;y<255;y++)
    {
      stroke(x,y,255);
      point(x,y);
    }
}
3.執行roach檔
多重貼圖

2017年12月27日 星期三

吳映廷 計算機圖學 week15

本週主題有期末作品的製作和Anti-aliasing的講解。
Anti-aliasing主要就是透過在會有鋸齒狀的斜線或是直線周圍追加灰階的顯示,達成視覺上去鋸齒的效果。
期末作品的部分,由於被老師推薦從原本的題目換成其他比較好做的,所以大部分時間都在和同學討論,完全沒有實作。

2017年12月26日 星期二

楊喻文的學習手札 20171221

week15

Antialias

取樣的時候會無法完美呈現最細緻的細節,所以可以運用antialias、dithering的技術
Antialias:反鋸齒
Dithering:抖動,將墨點往四周移一些
「Antialias」的圖片搜尋結果Antialias
「Dithering」的圖片搜尋結果Dithering

運用人類視覺,用灰階呈現,使圖形看起來很對
圖像裡可能有文字明明是直線,卻因為視覺問題看起來是扭曲的








2017年12月21日 星期四

我只是一只可愛的麻雀(._.)Week08 筆記

第八週主題:貼圖Texture

openCV的安裝、讀圖
openGL貼圖設定


1. 去老師的網站載東西 http://jsyeh.org/3dcg10 
下載>> source data win32 glut32.dll



把windows內的項目跟glut32.dll放在一起
另外data跟source可以解壓縮到資料夾中

開啟 texture.exe


調整參數 觀察圖片的變化

glTexCoord2f(0.0,0.0); //前面是調整X軸, 後面調整Y軸
↑調整貼圖的位置


2. 下載安裝 openCV
搜尋OpenCV2.1並下載安裝
或者直接從moodle上下載安裝 OpenCV-2.1.0-win32-vs2008.exe

安裝選項!!
↓↓↓



接著打開codeblocks -> new project -> console application



project (右鍵選取) build options



Linker settings




Search directories -> compiler -> 找到openCV2.1的include資料夾路徑


Search directories -> linker -> 找到openCV2.1的 lib資料夾路徑




3. 打code囉!! main.cpp輸入

#include <opencv/highgui.h>


int main()
{
    IplImage *img = cvLoadImage("earth.jpg"); ///讀進一個圖檔
    cvNamedWindow("opencv starting");
    cvShowImage("opencv starting",img);
    cvWaitKey(0);

    return 0;

}



compile失敗了怎麼辦?!

遇到的問題:
libcv-dev: error: 'ptrdiff_t' does not name a type

Not only the package itself fails to build, but any other package depending on libcv-dev also fails with the new g++ with this error:
error: 'ptrdiff_t' does not name a type
The solution is very simple: to add an #include <stddef.h> to /usr/include/opencv/cxcore.hpp.



↑↑↑ 在cxcore.hpp (opencv2.1/lib中找到這個檔案) 新增這行 #include <stddef.h>
就可以解決這個問題了:3

4. 執行結果



*讓glut跟opencv共存*

1. 開啟一個glut專案檔
2. 修改main的程式碼
就是把剛才在opencv寫的程式碼放上去



3. 一樣修改剛才做過的setting (include lib等等的)
4. 把圖片丟到freeglut/bin的資料夾裡才能到正確的路徑讀圖



5. 執行結果

會先跑出 opencv的地球圖
此時在這個視窗按任意鍵就會跑出左邊glut的程式了~



*讓opencv的圖可以在glut中旋轉*

去moodle把老師的檔案載下來~ week08-3earth.zip
然後取用老師的code (這樣比較快)




執行結果

這圖會轉喔XD (看起來好噁心www)




Weiting的計圖第十五週

主題: Antialias
          期末作品Q&A


aliasing
「aliasing 影像」的圖片搜尋結果

取樣時無法完美呈現最細緻的細節,
於是有了antialias, dithering的技術

antialias 反鋸齒

dithering 抖動: 將墨點往四周移一些

運用人類視覺的問題,用灰階呈現,使得圖形看起來很對


期末作品





Hello World_OpenGL_note_Week15

Week 15


本周正在進行期末作業的各自作業。

我先從開始的範例,進行複習並熟悉其技巧。

步驟一: 開啟OpenGL 範例,改code。












步驟二: 實際執行更動結果。





















然後,進行processing的複習。

步驟: 添加library,像是Minim,LiquidFunProcessing等。
              (因為LiquidFunProcessing較複雜,因此還在研究技巧中)

上方為Minim的示範,右邊是我自己的練習。
本次練習含有圖片檔的使用。
可喜可賀,自己寫出超過20行的程式!











左邊兩張是剩下的完整code,只是作備用。





因為會有版權問題,因此執行結果不上傳。


羅浩倫的學習筆記 Week15

本週學習重點

1.主題:Antialias
2.期末作品Q&A

上課紀錄

因為電腦是以像素格(pixel)來顯示畫面的,就算看起來在精細的圖畫,只要放大有限的N倍一定可以看到一格一格粗糙的樣子,就類似離散訊號系統的奈奎斯特頻率一樣,取樣的頻率必須要高於取樣目標的頻率的兩倍才可以,否則就會造成"失真"。(奈奎斯特頻率Wikipedia)

另外提到的一個技術就是Antialias,大致上來說是為了解決像素格顯示的粗糙問題,在原本應該被取樣成黑色和被取樣成白色交界處的點可以有灰階的像素,這樣看起來就會平滑許多了。

專題進度
上週的目標是sound.h(prototype)的撰寫,除了上禮拜決定要有的功能以外,我還新增了isValid()來判斷一個音樂物件是不是可用的(有載入音樂檔案), 還有可以從指定時間開始播放音樂檔案的play(int from),另外,關於在main()裡面的應用,我利用同時開啟兩個一樣的音檔,然後用極小的時間差同時播放來製造類似演唱會場的回音效果,不過也有可能有人不喜歡這個效果,所以我也有寫可以關閉回音效果的功能。

目前大致上的雛形已經差不多了,比較大的問題點是背景的部分,網路上看了很多資料都還沒有找到比較適合的應用方法。


更新:
請教過老師後決定先試試看用貼圖的方式在畫面上貼一張圖,
並利用關閉深度偵測的方式讓圖片永遠在畫面最後方。

圖學筆記乄Week15

  Antilias


=>去除鋸齒狀。
=>狀況:就是當繪圖的頻率(或是解析度)高於你的電腦的解析度時候,
某些部分會因為同一格像素格子都要畫上某個顏色而造成share同一格,結果圖形有點偏差變成不是我們想像的  如圖:





期末專題:

=>今日進度
1.環境設置:
2.移動與空間變換:

=>
1)
->glutSolidSphere(1,10,10); 以此球體當目標點(未來會匯入模型)
->移動  只用keyboard(); Week04有教;

2)
=>

->設置到達橘色牆面時候(y=200時)
轉換到下一張地圖(傳送點概念)
->目前只有兩張測試 所以以bool作判定,
預計有多張環境,正在思考用什麼判定。


進度:(5~10)%





















LBH的計圖學習筆記_week 15

一 、 上課內容

1. Antialias

2. 期末作品 Q & A

Mengting計圖筆記Week13-VR體驗

VR、AR器材體驗

GoPro運動攝影機
OMNI
Ricoh Theta
ASUS Zenfone AR holo

Processeing色彩系統-RGB、HSB

size(255,255);
colorMode(HSB); //S:飽和度
for(int x=0; x<255; x++)
{
    for(int y=0; y<255; y++)
   {
        stroke(x,255,y);//可嘗試調換參數順序
        point(x,y);
   }
}

RGB色彩系統: stroke(R, G, B)





HSV色彩系統: stroke(hue, saturation, brightness)





多重貼圖-Roach蟑螂跑步機

切勿在display()讀圖檔,記憶體會被耗盡,應該要選擇在main()讀就只會讀一次。
時機點在glutMainLoop()之前,glutCreate()之後。

Roach蟑螂跑步機
從moodle下載roach.zip,練習多重貼圖






[耍廢]WEEK13

主題1:VR 體驗
GoPro 運動攝影機
OMNI 六台GoPro
Ricoh theta 





主題2:色彩系統、multi-Texture ( TextureID )、畫面等速 ( Timer )

 void timer(int t)
    {
        /******code******/ //執行你要定速的程式碼
        glutTimerFunc(100, timer, t+1); //過了100ms後,再呼叫一次Timer副程式
        glutPostRedisplay();
    }

int main(){
      /******code******/
      glutTimerFunc(500, timer, 0); //過了500ms後,呼叫Timer副程式
      /******code******/
    }
如此一來,timer裡的code會隨著設定的時間執行,適合背景物品。
   

funkyjlee李嘉恩的學習筆記week15

1.
(1)主題:antialias
(2)期末作品Q&A
2.
PVector [] star=new PVector[300];
void setup(){
  size(800,600,P3D);
  for(int i=0;i<300;i++){
    star[i]=new PVector(random(200)-100,random(200)-100,random(200)-100);
  }
}
float nowX=0,nowY=0,nowZ=0,dz=3;
void draw(){
  background(0);
  translate(width/2,height/2);
  beginShape(POINTS);
  stroke(255);
  for(int i=0;i<300;i++){
    vertex(star[i].x,star[i].y,star[i].z);
    star[i].z+=dz;
    if(star[i].z>300){
      star[i].x=random(200)-100;
      star[i].y=random(200)-100;
      star[i].z=random(200)-100;
    }
  }
  endShape();
  nowZ++;
}
3.執行

4.
float gaussian(float x){
  return 1/sqrt(2*PI)*exp(-0.5*x*x);
}
void setup(){
  size(800,600);
}
void draw(){
  background(0);
  beginShape(POINTS);
  for(int x=0;x<800;x++){
    for(int y=0;y<600;y++){
      stroke(color(1000*gaussian((x+y-600)/300)));
      vertex(x,y);
    }
  }
  endShape();
}
5.執行