[HTML] HTML을 이용해 만들어본 자기소개 웹사이트.

HTML을 이용해 만들어본 자기소개 웹사이트 입니다.
깃헙에 업로드를 했습니다.

https://minseokpark1999.github.io/introduce/

[게임] Visual Studio 2017 OpenFrameworks로 만들어본 닷지류 게임.

숭실대학교 2018년 1학기 정기철 교수님의 '프로그래밍1및기초실습' 수업에서 배운 내용을 기반으로 직접 만든 게임입니다.

*******************
만든이 : 박민석
제작기간 : 2018.05.17 ~ 2018.06.03
게임 이름 : AVoid Void
*******************

곰플레이어의 이스터에그 게임인 '닷지'에 영감을 받아 만든 게임입니다. 소스코드 및 파일 공유합니다.

AVoid Void.7z

오픈프레임웍스 관련 정보(Visual Studio 2017 설치법 포함)

오픈프레임웍스VS2017설치법

게임 개발 관련 게임 프로그래밍을 위해서는 전체적인 코드의 구조를 설계하는 것이 중요합니다. 게임의 상태등을 체계적으로 관리할 필요가 있기 때문이죠. 이 내용은 아래의 페이지를 참고하세요. http://openframeworks.cc/ofBook/chapters/game_design.html 본 교재에는 오픈프레임웍스의 전체적인 구조에 대한 자세한 설명은 하지 않고 있습니다.다만, 간단한 형식의 게임을 만들기에 필요한 내용만을 소개합니다. 자세한 설명이 필요하신 분은 아래의 페이지를 참고하세요. http://makeho.tistory.com/23 오픈프레임웍스 Visual Studio 2017 버젼에서 설치 가능 openFrameworks 라이브러리를 Visual Studio 2017 버젼에서도 사용할 수 있습니다.  2015버젼 설치와 유사합니다. 다만 몇가지 다른 점이 있습니다. 비주얼 스튜디오 2017 을 설치하실때 아래의 2가지를 설치해야합니다. Windows 8.1 SDK 및 UCRT SDK 데스크톱용 VC++ 2015.3 V140 도구 집합 이를 설치하지 않았다면 Visual Studio Installer를 실행해서 추가 설치할 수 있습니다. VS 2017에서의 openFrameworks 설치법은 아래의 첨부 파일을 참고하세요. Android Studio에 설치(아래 페이지 참고) http://openframeworks.cc/setup/android-studio/ 설치가 쉽지 않네요 오픈프레임웍스 사용 C 언어만을 배운 상태라면 C 언어와 C++의 차이를 조만만 이해한다면 오픈프레임웍스를 사용할 수 있습니다. 아래 페이지의 하단에 있는 링크들을 참고하세요. http://openframeworks.cc/about/ 큰 원을 그리기 위해서 원의 resolution을 높이려면 아래와 같이 하면 됩니다. 이와 유사한 함수들을 한번 찾아보세요(예, ofSetLineResolution()  ) void ofApp::setup(){          ofSetCircleResolution(100); }

[프로세싱] 객체 사용하기:자세하게 접근하기

모든 클래스는 반드시 네 가지 구성요소 (이름, 데이터, 생성자, 메소드)를 가진다.

//클래스 이름
class Car {
//데이터,
   color c;
   float xPos;
   float yPos;
   float xspeed;

//생성자
Car() {
   c=color(255);
   xPos=width/2;
   yPos=height/2;
   xspeed=1;
 }

//함수
void display() {
   rectMode(CENTER);
   fill(c);
   rect(xPos,yPos,20,10);
  }
void move() {
   xPos=xPos+xspeed;
   if(xPos>width) {
    xPos=0;
  }
 }
}

객체의 방법들 불러오기.

//객체 선언하기
Car myCar;

//객체 초기화하기
void setup() {
   myCar = new Car();
}

//객체의 방법들 불러오기
void draw() {
   background(255);
   myCar.move();
   myCar.display();
}

[프로세싱] 객체란 무엇인가? (객체에 대한 이해)

프로세싱에서 객체지향 프로그래밍이 어떻게 사용되는지 알아보기전에 '객체'란 무엇인지 먼저 알아보자. 객체란 논리적 구조체계의 집합과 같은 내용이다. 여러분이 프로세싱 프로그래밍을 하지 않는다고 가정하고, 하루의 일상적인 행동을 적어보자. 아마 다음과 같을 거이다.
-일어나기
-커피나 차 마시기
-아침식사하기
-지하철 타기

이 안에는 어떤 요소들이 있는가? 이 요소들의 중심은 바로 여러분, 사람이다. 이처럼 객체란 바로 특징이 있으면서 어떠한 동작을 할 수 있는 것을 가리킨다.

이것이 프로그래밍과 어떤 관련이 있는가? 객체의 환경이 변수이고 동작을 할 수 있는 것이 함수인 것이다.

객체 사용하기
실제 프로그래밍을 배우기 앞서 객체가 어떤 장점을 가지는지 살펴보자.
달리는 자동차를 만드는 의사코드를 예로 들어보자.
정보(전역변수) :
자동차의 색상
자동차의 x 위치
자동차의 y 위치
자동차의 속도

설정:
자동차 색상을 초기화
자동차가 달리기 시작하는 위치를 초기화
자동차가 달리는 속도를 초기화

그리기:
배경색 채우기
자동차의 색상과 위치 나타내기
자동차의 위치 증가시키기(즉,속도)

객체지향 프로그래밍은 주 프로그램 밖에서 변수들을 가져와 사용할 수 있게 해주고 또한 그것들을 객체 안에 저장하는 것을 가능하게 해준다.
객체지향 디자인을 사용하여 의사코드를 적용하면 다음과 같다.

정보(전역변수) :
자동차 객체

설정:
자동차 객체 초기화

그리기:
배경색 채우기
자동차 객체 나타내기
자동차 객체 움직이기

첫 번째 예와 비교하여 전역변수를 제거한 부분에 집중하자. 자동차의 색상,위치,속도를 각각 부여하는 대신에 우리는 하나의 변수, 자동차 변수만을 가졌다.
각 세가지 변수를 정희나느 대신 우리는 자동차 객체만을 정의하였따. 이 변수들은 어디에 있가? 그것들은 여전히 존재하지만 자동차 객체 변수 속에 위치하게 된다.(그리고 그 변수들은 곧 살펴보게 될 자동차 클래스 안에서 정의될 것이다.)

[프로세싱] 이미지의 픽셀과 기본적인 필터

loadPixels() - 이 함수는 픽셀 배열에 접근하기 이전에 불러오는 함수인데 "픽셀을 불러와. 난 픽셀들하고 이야기 할 거야" 라고 말하는 것과 같다.
updateixels() - 이 함수는 여러분이 픽셀 배열 사용을 끝마치고 불러오는 함수인데 "계속 진행하고 업데이트 해, 난 끝냈어!" 라고 말하는 것과 같다.




픽셀과 관련된 프로그래밍을 할 때 우리는 모든 픽셀의 위치를 이차원적인 세상에서 생각해야 한다. 그러나 원래 픽셀은 일차원으로만 접근 가능하다는 것을 기억하자. 우리는 이것을 다음과 같은 공식으로 해결 할 수 있다.
1. 화면이나 이미지가 너비와 높이를 가지고 있다고 가정해 보자.
2. 그렇게 하면 전체 픽셀 배열의 길이는 이미지, 화면의 너비*높이와 같다.
3. 어떤 화면 안에 주어진 X,Y 좌표를 일차원적인 픽셀 배열로 바꾸면 다음과 같다.
위치= X + Y * 너비

아래 코드를 잘 살펴보자. 아래의 코드는 이미지의 RGB 픽셀 값을 수정해서 밝게 만드는 코드이다.



//원본과의 비교를 위한 클래스 선언
PImage img;
PImage newimg;

void setup() {
  size(518,194);
  img = loadImage("sunflower.jpg");
  newimg = createImage(img.width,img.height,RGB);

  for(int y=0; y<img.height; y++) {
    for(int x=0; x<img.width; x++) {
//2차원의 픽셀을 1차원으로 표현한 것.
      int loc = y*img.width+x;
   
//원본 이미지의 픽셀을 하나씩 복사
      float r=red(img.pixels[loc]);
      float g=green(img.pixels[loc]);
      float b=blue(img.pixels[loc]);
   
//r,g,b 값에 1.6을 곱해서 전체적으로 밝은 느낌을 표현.
      r*=1.6;
      g*=1.6;
      b*=1.6;
   
//r,g,b 값을 0에서 255로 제한.
      r=constrain(r,0,255);
      g=constrain(g,0,255);
      b=constrain(b,0,255);
   
      color c = color(r,g,b);
   
      newimg.pixels[loc] = c;
    }
  }
}

void draw() {
  image(img,0,0);
  image(newimg,width/2,0);
}

[프로세싱] 이미지 배열

이미지 하나를 불러오는 것은 쉽다. 하지만 많은 이미지를 불러오게 되면 곧 문제에 맞닥뜨리게 된다. 그러한 경우에 배열을 사용하면 편하다.

첫째로, 이미지의 배열을 전체 변수로 설정한다.
PImage[] images = new PImage[5];

둘째로, 각 이미지 파일을 배열이 정해진 장소에 불러온다. setup()에서 이루어진다.
//이미지들을 배열로 불러오기
images [0] = loadImage("1.jpg");
images [1] = loadImage("2.jpg");
images [2] = loadImage("3.jpg");
images [3] = loadImage("4.jpg");
images [4] = loadImage("5.jpg");

반복문과 String 배열을 사용해서도 배열의 요소를 초기화 할 수 있다.
String[] filenames = {"1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"};
for (int i=0; i<filenames.length; i++) {
  image[i] = loadImage(filenames[i]);
}