'프로그래밍' 카테고리의 글 목록

프로그래밍

html5 오디오

레비아스 2012. 3. 12. 12:53

2012. 3. 12. 12:53

</audio>

저작자표시

'프로그래밍 > html&js' 카테고리의 다른 글

html5 캔버스를 이용한 주사위 (0)	2011.12.04

클래스, 객체, 메서드

레비아스 2012. 2. 22. 22:05

2012. 2. 22. 22:05

좀 더 쉽게 풀이 후 적도록 할것이다.

저작자표시

사각형 그리기

레비아스 2012. 1. 1. 15:47

2012. 1. 1. 15:47

#include <GLUT/GLUT.h>

void RenderScene(void)
{
    //선택된 색상으로 화면 지움.
    glClear(GL_COLOR_BUFFER_BIT);
    
    //드로잉 색상을 적색으로 지정.
    //          R     G    B
    glColor3f(0.0f, 0.0f, 1.0f);
    
    //현재 드로잉 색상으로 사각형을 그림.
    glRectf(-25.0f, 25.0f, 26.0f, -25.0f);
    
    //드로잉 명령 실행.
    glFlush();
}

void SetupRC(void)
{
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
}

//창의 크기가 변할 때 glut에 의해 호출되는 부분.
void ChangeSize(GLsizei w, GLsizei h)
{
    GLfloat aspectRatio;
    
    //0으로 나누지 못하게 함
    if(h == 0)
        h = 1;
    
    //뷰포트를 창의 크기에 맞게 설정.
    glViewport(0, 0, w, h);
    
    //좌표계 초기화
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    
    //클리핑 영역 설정(left, right, bottom, top, near, far 순서.
    aspectRatio = (GLfloat)w / (GLfloat)h;
    if (w <= h) 
        glOrtho(-100.0, 100.0, -100 / aspectRatio, 100.0 / aspectRatio, 1.0, -1.0);
    else
        glOrtho(-100.0 * aspectRatio, 100.0 * aspectRatio, -100.0, 100.0, 1.0, -1.0);
    
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
}
//메인 프로그램 시작.
int main (int argc, char * argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
    glutCreateWindow("Simple");
    glutDisplayFunc(RenderScene);
    glutReshapeFunc(ChangeSize);
    
    SetupRC();
    
    glutMainLoop();
    
    return 0;
}

저작자표시

html5 캔버스를 이용한 주사위

레비아스 2011. 12. 4. 07:32

2011. 12. 4. 07:32

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dice Game</title>
<script>
	var cwidth = 400; //캔버스 너비 
	var cheight = 300; // 캔버스 높이
	var dicex = 50; // 주사위 가로 
	var dicey = 50; // 주사위 세로 
	var dicewifth = 100;  //너비 
	var diceheifht = 100; //높이 
	var dotrad = 6; //점 
	var ctx; //캔버스 저장  
	
	function init(){
		var ch = 1 + Math.floor(Math.random() * 6);
		drawface(ch);
	}
	
	function drawface(n){
	    ctx = document.getElementById("canvas").getContext("2d")
		ctx.lineWidth = 5; //선 굵기 
		ctx.clearRect(dicex, dicey, dicewifth, diceheifht); //주사위 면 내부를 지움 
		ctx.strokeRect(dicex, dicey, dicewifth, diceheifht); //주사위 면의 윤곽선 
		ctx.fillStyle='#009966'; //원 색상 
		
		switch(n){
			case 1:	draw1();break;
			case 2: draw2();break;
			case 3:	draw2();draw1();break;
			case 4:	draw4();break;
			case 5:	draw4();draw1();break;
			case 6: draw4();draw6();break;
		}
	}
	
	function draw1 () {
		  var dotx; //그릴려는 점 1개의 가로 위치 
		  var doty; //그릴려는 점 1개의 세로 위치 
		  
		  ctx.beginPath(); //패스 시작 
		  dotx = dicex+0.5*dicewifth; //이 점 중심을 주사위면의 가로 중심에 지점 
		  doty = dicey+0.5*diceheifht; //세로 중심에도 일치하게 설
		  
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  ctx.closePath();
		  ctx.fill();
	}
	
	function draw2 () {
		  var dotx;
		  var doty;
		
		  ctx.beginPath();
		  dotx = dicex + 3 * dotrad;
		  doty = dicey + 3 * dotrad;
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  dotx = dicex + dicewifth - 3 * dotrad;
		  doty = dicey + diceheifht - 3 * dotrad;
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  ctx.closePath();
		  ctx.fill();
	}
	
	function draw4 () {
		 var dotx;
		 var doty;
		 
		 ctx.beginPath();
		 dotx = dicex + 3 * dotrad;
		 doty = dicey + 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + dicewifth - 3 * dotrad;
		 doty = dicey + diceheifht - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + 3 * dotrad;
		 ctx.closePath();
		 ctx.fill();
		 ctx.beginPath();
		 doty = dicey + diceheifht - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + diceheifht - 3 * dotrad;
		 doty = dicey + 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 ctx.closePath();
		 ctx.fill();
	}
	
	function draw6 () {
		 var dotx;
		 var doty;
		 
		 ctx.beginPath();
		 dotx = dicex + 3 * dotrad;
		 doty = dicey + 0.5 * diceheifht;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);
		 dotx = dicex + dicewifth - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);
		 ctx.closePath();
		 ctx.fill(); 
	}

</script>
</head>
<body onLoad="init ();">
	<canvas id="canvas" width="400" height="300">
		
	</canvas>

</body>
</html>