吳映廷 計算機圖學 week18 期末作品

吳映廷 計算機圖學 week17

本週的主題是製作期末作品。

這週的進度是將基本的HUD(分數，血量)加入

以及敵人的生成.。

以下是分數和血量的部分程式碼。

    public void Score()

    {

        bonusHealthText.SetActive(false);

        stick_man_combo += 1;

        if (stick_man_combo % 5 == 0)

        {

            stick_man_health += 10;

            bonusHealthText.SetActive(true);

            healthText.text = "Health: " + stick_man_health.ToString();

        }

        comboText.text = "Combo: " + stick_man_combo.ToString();

        stick_man_score += stick_man_combo * 10;

        scoreText.text = "Score: " + stick_man_score.ToString();

    }

    public void Hurt()

    {

        stick_man_combo = 0;

        comboText.text = "Combo: " + stick_man_combo.ToString();

        stick_man_health -= 10;

        healthText.text = "Health: " + stick_man_health.ToString();

        if (stick_man_health <= 0)

        {

            gameoverText.SetActive(true);

            gameover = true;

        }

    }

以下是敵人經過時間隨機生成的程式碼。

if (gameover == false)

        {

            System.Random rnd = new System.Random();

            GenTime = rnd.Next(1, 50);

            GenTime2 = rnd.Next(1, 50);

        }

        if (enemyGenCounter > GenTime)

        {

            GameObject.Instantiate(enemy);

            enemyGenCounter = 0;

        }

        if (enemyGenCounter > GenTime2)

        {

            GameObject.Instantiate(enemy_R);

            enemyGenCounter2 = 0;

        }

吳映廷 計算機圖學 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);
        }
    }
}

吳映廷 計算機圖學 week15

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

吳映廷 計算機圖學 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();
}

執行結果:

吳映廷 計算機圖學 week13

色彩系統 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);
    }

}











執行老師的軌跡程式

吳映廷 計算機圖學 week12

今天上課主要是把一些library的程式試跑

可以在下面看到一些跑的捷圖

吳映廷 計算機圖學 week11

1.先把把音樂檔放在bin 然後用以下程式碼撥放

#include "CMP3_MCI.h"(在FB下載外掛)
CMP3_MCI mp3;
int main()
{
mp3.Load("filename.mp3");
mp3.Play();
int a;
scanf("%d", &a);(要等待輸入才不會結束程式)
}
這樣可以撥放MP3檔案，如果要播放wav可以用以下的程式碼，檔案記得放在bin
#include <mmsystem.h>
    PlaySoundA("file.wav", NULL,  SND_ASYNC);

2.在Processing添加Minim library

3. 打上程式碼播放MP3
import ddf.minim.*;
Minim minim;
AudioPlayer player;
AudioPlayer player2;
void setup(){
minim = new Minim(this);
player = minim.loadFile("file.mp3");
player.play;
}
void draw(){
}

吳映廷 計算機圖學 week10

1.先下載並安裝Processing，右上角選AddMode加入Android模式
安裝完後選取Android並自動安裝Android SDK
沒有Android手機可以裝虛擬機
2.小畫家
void setup()
{
  fullScreen();
}
void draw()
{
  if(mousePressed) background(255,0,0);
  else background (0,255,0);
}



3.彈力球遊戲
 void setup() {
size(500, 500);
}
float ballX=250, ballY=450, ballVX=1.3, ballVY=-10;
float ball2X=250, ball2Y=50;
void draw() {
if ( dist(ballX, ballY, ball2X, ball2Y)<100 ) {
float cx=(ballX+ball2X)/2, cy=(ballY+ball2Y)/2;
float nx=ballX-ball2X, ny=ballY-ball2Y;
line(ballX,ballY, ball2X,ball2Y);
PVector N=new PVector(nx, ny);
N.normalize();
PVector v0=new PVector(ballVX, ballVY);
float len= -N.dot(v0);
v0.add(N.mult(len*2));
line(cx,cy, cx+10*ballVX, cy+10*ballVY);
line(cx,cy, cx+20*v0.x, cy+20*v0.y);
ellipse(cx, cy, 10, 10);
stroke(0);
line(ballX, ballY, ball2X, ball2Y);
stroke(255, 128, 0);
line(cx, cy, cx+5*ballVX, cy+5*ballVY);
stroke(255, 128, 0);
line(cx, cy, cx+5*v0.x, cy+5*v0.y);
stroke(255, 0, 0);
line(cx, cy, cx+N.x, cy+N.y);
//return;
ballVX=v0.x;
ballVY=v0.y;
}
background(255);
ballX+=ballVX;
ballY+=ballVY;
if(ballX<50 || ballX>500-50) ballVX = -ballVX;
if(ballY<50 || ballY>500-50) ballVY = -ballVY;
ellipse(ballX, ballY, 100, 100);
ellipse(ball2X, ball2Y, 100, 100);
}
void mouseDragged(){
ball2X=mouseX; ball2Y=mouseY;
}

吳映廷 計算機圖學 week09

1.去https://www.openprocessing.org/sketch/249457觀看程式碼

2.去moodle下載processing程式，並把程式碼貼進去執行

3.找一張哆啦A夢的圖，存下來並放進資料夾裡

之後寫可以讀圖片的程式碼
PImage img=loadImage("doraemon.jpeg");
size(600, 600);
image(img, 0,0, 600,600);

4.找一張windows錯誤的圖存下來，並放入以下程式碼

PImage img;
void setup(){
  size(1280, 800);
  img=loadImage("error.jpg");
}

void draw(){
  image(img, mouseX,mouseY, 400,250);
}

5.

找瑪莉歐，問號方塊和普通磚塊的圖，存為mario, brick1, brick2

並複製以下程式碼貼上

int [][]map={{0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,1,1,2,2,1,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},

             {1,1,1,1,1,1,1,1,1,1,1,1,1,1}};

PImage imgMario, imgBrick, imgBrick2;

void setup(){

  size(800, 600);

  imgMario=loadImage("mario.png");

  imgBrick=loadImage("brick.png");

  imgBrick2=loadImage("brick2.png");

}

float marioX=200, marioY=100, marioVX=0, marioVY=0;

boolean marioOnFloor=false;

void draw(){

  background(255);

  for(int x=0;x<14;x++){

    for(int y=0;y<11;y++){

      if(map[y][x]==1) image(imgBrick, x*50, y*50, 50,50);

      if(map[y][x]==2) image(imgBrick2, x*50, y*50, 50,50);

    }

  }

  image(imgMario, marioX, marioY, 50,50);

  marioY += marioVY; marioX += marioVX;

  marioVY += 0.98;

  if(marioY>=500-50)

  {marioY=500-50; marioVY=0; marioOnFloor=true;}

}

void keyPressed(){

  if(keyCode==UP && marioOnFloor) {marioVY=-15; marioOnFloor=false;}

  if(keyCode==RIGHT) marioVX=5;

  if(keyCode==LEFT) marioVX=-5;

}

void keyReleased(){

  if(keyCode==RIGHT || keyCode==LEFT) marioVX=0;

}

吳映廷 計算機圖學 week08

1.這禮拜先上老師網站把之前的老師東西下載下來(dll, source, data)

2.下載openCV, 在安裝時路徑選2

3.把這三個資料夾(lib, bin, include)記好

4.開啟console project

5.下載世界地圖的圖

6.照圖做library連結

7.打上程式碼
#include <opencv/highgui.h>
int main()
{
IplImage * img=cvLoadImage("a.jpg");
cvNamedWindow("hello");
cvShowImage("hello", img);
cvWaitKey(0);
return 0;
}

8.就可以看到世界地圖了

9.之後自己下載week08-2,08-3編譯看看

吳映廷 計算機圖學 week7

1.在main裡面加入

glutMotionFunc(motion);

在main外面上面加入

void motion(int x, int y)

{

    light_position[0]= (x-150)/150.0*2;

    light_position[1]= -(y-150)/150.0*2;

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glutPostRedisplay();

}

就可以用滑鼠調整光源了

吳映廷 計算機圖學 week6

1.編譯上次的程式之後，在main加入GLfloat pos[] = { 0.0, 0.0, -1.0, 0.0 };
    在glutCreateWindow("week05");和glutMainLoop();間加入以下程式碼
    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glLightfv(GL_LIGHT0, GL_POSITION, pos);
    glEnable(GL_DEPTH_TEST);
執行後就可以看到有打光的人

2.在程式的開頭加入#include <stdio.h>
然後在那之後加入程式碼
void keyboard(unsigned char key, int x, int y)
{
    printf("now: %c (%d %d)\n", key, x, y);
}
void mouse(int button, int state, int x, int y)
{
 
}
在glutDisplayFunc(display);和glutMainLoop();間加入
    glutKeyboardFunc(keyboard);
    glutMouseFunc(mouse);
    glutMainLoop();
執行之後按鍵盤可以看到按的按鍵和滑鼠現在的位置

3.

在void mouse裡面加入 printf("button:%d state:%d (%d %d)\n", button, state, x, y);

按滑鼠按鍵可以印出按下的按鍵和滑鼠位置

之後在void keyboard內加入

if(key=='1') rotateX++;

    if(key=='2') rotateY++;

    if(key=='3') rotateZ++;

    glutPostRedisplay();

然後修改display函數

 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glPushMatrix();

    glRotatef(rotateX, 1, 0, 0);

    glRotatef(rotateY, 0, 1, 0);

    glRotatef(rotateZ, 0, 0, 1);

    drawmodel();

    glPopMatrix();

    glutSwapBuffers();

這樣執行時按1,2,3鍵就可以旋轉模組

4.在main加入glutMotionFunc(motion);

修改mouse和motion

void mouse(int button, int state, int x, int y)

{

    printf("button:%d state:%d (%d %d)\n", button, state, x, y);

    if(state==GLUT_DOWN)

    {

        oldX=x, oldY=y;

    }

}

void motion(int x, int y)

{

    rotateX += -(x-oldX);

    rotateY += -(y-oldY);

    oldX=x, oldY=y;

    glutPostRedisplay();

}

這樣執行就可以用滑鼠旋轉模組了

吳映廷 計算機圖學 week5

1.前往 jsyeh.org/3dcg10 下載win32, glut32.dll, data

 2.解壓到同個地方，並把後兩個檔案放入windows

 3.執行Transformation

 4.執行Projection，並按右鍵來切換函數

gluPerspective(fovy[field of view y視野], aspect y/x[y/x 比例], zNear, zFar);

glOrtho(左、右、上、下、近、遠);

glFrustum(左、右、上、下、近、遠);

gluLookAt(eyeX, eyeY, eyeZ,

                 centerX, centerY, centerZ,

                 upX, upY, upZ);

5. 下載並執行老師的檔案

吳映廷 計算機圖學 week4

今天練習了Translate, Rotate, Scale 3種函式。
1.
在新的glut專案裡面加上
glColor3d(1,1,0);
glutSolidTeapot(1);
畫3個茶壺

2.
程式碼是
 glPushMatrix();
        glTranslated(-2.4,1.2,-6);
        glRotated(60,1,0,0);
        glRotated(a,0,0,1);
        glColor3d(1,1,0);
        glutSolidTeapot(1);
        glutSolidSphere(1,slices,stacks);
    glPopMatrix();

上面的rotated是照x軸轉動60度

下面是隨時間變化照z軸轉a度

把程式碼註解掉就可以看到差別

3.

接下來可以玩玩Scale, 在程式碼裡面加上glScaled(2, 2, 2);

可以發現他x,y,z三軸都放大了2倍

4.

老師最後說明，記得使用glPushMatrix();和glPopMatrix();維持矩陣的乾淨。

吳映廷 計算機圖學 week3

編譯學姐的檔案
1.
把學姐的程式碼貼到GLUT專案裡

2.
把學姐的小小兵檔案丟掉freeglut的bin裡面

3.
這樣就可以看到不會破圖的小小兵了

編譯老師的足球檔案
1.下載3D Exploration並把老師的足球丟進去

 2.另存新CPP檔

 3.把檔案形式調成APP

 4.開一個新OpenGL專案，把main.c改名為main.cpp之後把程式碼貼進去

 5.把編譯有問題的程式碼刪掉後就可以執行了，可以看到足球了