HTML5-11강 캔버스2 - 드로잉 확장

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "HTML5-11강 캔버스2 - 드로잉 확장"

Transcription

1 표준화문서를기반으로하는지침서 속이깊은 HTML5 & CSS3 김명진지음 11 강 캔버스 Part-2 - 드로잉확장

2 학습목표 앞장에서캔버스에서드로잉작업에필요한기본적인내용들을살펴보았다. 이번장에서는기본드로잉기능에원및원호를그리는방법, 베지에곡선을그리는방법을학습한다. 그리고다양한색상으로도형을채울수있는그라데이션스타일, 와인딩에따른도형의다양한채우기스타일, 패턴에의한스타일, 그리고그림자스타일에대하여학습하도록한다. Section 1 원그리기 2 베지에곡선 3

3 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 3

4 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 예제 Canvas_11-01_Arc.html Script for (var i = 0; i < 2; i++) { for (var j = 0; j < 3; j++) { var x = 75 + j * 125; // 좌표 X var y = 75 + i * 125; // 좌표 Y var radius = 50; // 반지름 var startangle = 0; // 시작각도 var endangle = Math.PI + (Math.PI * j) / 2; // 종료각도 var anticlockwise = i % 2 == 0? false : true; // 그리는방향 } } context.linewidth = 4; context.arc(x, y, radius, startangle, endangle, anticlockwise); // 호를그린다 context.stroke(); 4

5 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 예제살펴보기 예제 Canvas_11-01_Arc.html Script for (var i = 0; i < 2; i++) { for (var j = 0; j < 3; j++) { var x = 75 + j * 125; // 좌표 X var y = 75 + i * 125; // 좌표 Y var radius = 50; // 반지름 var startangle = 0; // 시작각도 var endangle = Math.PI + (Math.PI * j) / 2; // 종료각도 var anticlockwise = i % 2 == 0? false : true; // 그리는방향 } } context.linewidth = 4; context.arc(x, y, radius, startangle, endangle, anticlockwise); // 호를그린다 context.stroke(); 5

6 01 원그리기 원 / 원호그리기 arc() 메서드 실습 Canvas_Study11-01_Arc.html Script // 첫번째부채꼴을그린다 context.moveto(120,120); context.arc(120,120,100,0,270*math.pi/180, true); context.closepath(); context.stroke(); // 두번째원의첫번째호를그린다 context.arc(350,120,100,90*math.pi/180,360*math.pi/180,false); context.stroke(); // 두번째원의두번째채워진호를그린다 context.arc(350,120,100,90*math.pi/180,360*math.pi/180,true); context.fill(); // 세번째원의첫번째부채꼴을그린다 context.moveto(570,120); context.arc(570,120,100,90*math.pi/180,360*math.pi/180,false); context.closepath(); context.stroke(); // 세번째원의두번째채워진부채꼴을그린다 context.moveto(580,130); context.arc(580,130,100,90*math.pi/180,360*math.pi/180,true); context.closepath(); context.fill(); 6

7 01 원그리기 직선과연결된원호그리기 arcto() 메서드 context.arcto(x1, y1, x2, y2, radius) 직선과연결된호를그린다. 현재경로에하나의지점이추가되고그지점은직선에의해직전지점에연결된다. 그리고현재경로에두번째지점이추가되고그지점은속성이인수에지정된호에의해직전지점에연결된다. 주어진반지름의크기가음수인경우, indexsizeerror 예외오류가발생한다. 7

8 01 원그리기 직선과연결된원호그리기 arcto() 메서드 arcto() vs. arc() 8

9 01 원그리기 직선과연결된원호그리기 arcto() 메서드 9

10 01 원그리기 직선과연결된원호그리기 arcto() 메서드 실습 Canvas_Study11-02_RoundRect.html Script function roundrect(context, x, y, width, height, radius) { if(width < 1) return; context.moveto(x + radius, y); // 오른쪽상단모서리를그리기위한시작점으로이동 context.arcto((x+width), y, (x+width), (y+height), radius); // 오른쪽상단모서리 context.arcto((x+width), (y+height), x, (y+height), radius); // 오른쪽하단모서리 context.arcto(x, (y+height), x, y, radius); // 왼쪽하단모서리 context.arcto(x, y, (x+radius), y, radius); // 왼쪽상단모서리 context.stroke(); } function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); } roundrect(context, 50, 50, 100, 100, 10); roundrect(context, 200, 50, 100, 100, 20); roundrect(context, 350, 50, 100, 100, 30); roundrect(context, 500, 50, 100, 100, 40); 10

11 02 베지에곡선 2 차베지에곡선 베지에곡선은 n 개의점으로부터얻어지는 (n-1) 차곡선을의미 베지에곡선은 2 차곡선과 3 차 ( 다항 ) 곡선으로이루어져있다. 2 차베지에곡선은 2 개의기준점 ( 시작점과종료점 ) 과한개의제어점을필요로한다. context.quadraticcurveto(cpx, cpy, endx, endy) 2 차베지어곡선을그린다. 주어진제어포인트와 2 차 (quadratic) 베지어곡선에연결되는현재의서브패스로지정된포인트를추가한다. 11

12 02 베지에곡선 2 차베지에곡선 Script 예제 Canvas_11-02_quadraticCurve.html var X = 50, Y = 280; // 시작점의위치지정 var cpx = 100, cpy = 50; // 제어점의위치지정 var endx = 400, endy = 260; // 종료점의위치지정 // 2 차베지어곡선을그린다. context.linewidth = 10; // 곡선두께지정 context.strokestyle = "rgba(255, 0, 0, 0.5)"; // 선색지정 context.moveto(x, Y); // 시작점으로이동 context.quadraticcurveto(cpx, cpy, endx, endy); //2 차베지에곡선을그린다 context.stroke(); // 가상의보조선을그린다. context.linewidth = 1; // 보조선두께지정 context.strokestyle = "rgba(0, 0, 0, 0.5)"; context.moveto(x, Y); // 시작점으로이동 context.lineto(cpx, cpy); // 제어점까지연결선 context.lineto(endx, endy); // 종료점까지연결선 context.stroke(); // 시작점, 보조점, 종료점을표시한다 context.fillrect(x-3, Y-3, 6, 6); // 시작점표시 context.fillrect(cpx-3, cpy-3, 6, 6); // 제어점표시 context.fillrect(endx-3, endy-3, 6, 6); // 제어점표시 12

13 02 베지에곡선 2 차베지에곡선 실습 Canvas_Study11-03_quadraticCurve.html Script context.linewidth = 5.0; context.strokestyle = "red" context.moveto(175, 25); // 시작점을중앙상단으로옮긴다 context.quadraticcurveto(325, 25, 325, 100); // 제어점 cp1 과종료점 (325,100) context.quadraticcurveto(325, 175, 175, 175); // 제어점 cp2 와종료점 (175,175) context.quadraticcurveto(25, 175, 25, 100); // 제어점 cp3 과종료점 (25,100) context.quadraticcurveto(25, 25, 175, 25); // 제어점 cp4 과종료점 (25,25) context.stroke(); 13

14 02 베지에곡선 3 차베지에곡선 베지에곡선은 n 개의점으로부터얻어지는 (n-1) 차곡선을의미 3 차베지에곡선은 2 개의기준점 ( 시작점, 종료점 ) 과 2 개의제어점으로정의된다. 4 개의점에서중간점 3 개를구하고, 중간점 3 개에서의중간점을 2 개를다시구한다. 마지막으로중간점 2 개에서마지막중간점을구하는식 context.beziercurveto(cp1x, cp1y, cp2x, cp2y, endx, endy) 3 차베지에곡선을그린다. 직선에의한이전포인트와연결된현재의서브패스로지정된포인트를추가한다. 14

15 02 베지에곡선 3 차베지에곡선 예제 Canvas_11-02_bezierCurve1.html Script var X = 100, Y = 320; // 시작점의위치지정 var cp1x = 60, cp1y = 50; // 제어점1의위치지정 var cp2x = 320, cp2y = 50; // 제어점1의위치지정 var endx = 400, endy = 280; // 종료점의위치지정 // 3차베지어곡선을그린다. context.linewidth = 10; // 곡선두께지정 context.strokestyle = "rgba(255, 0, 0, 0.5)"; // 선색지정 context.moveto(x, Y); // 시작점으로이동 context.beziercurveto(cp1x, cp1y, cp2x, cp2y, endx, endy); context.stroke(); // 가상의보조선과각지점을그린다. context.linewidth = 1; // 보조선두께지정 context.strokestyle = "rgba(0, 0, 0, 0.5)"; context.moveto(x, Y); context.lineto(cp1x, cp1y); context.lineto(cp2x, cp2y); context.lineto(endx, endy); context.stroke(); context.fillrect(x-3, Y-3, 6, 6); // 시작점의표시 context.fillrect(cp1x-3, cp1y-3, 6, 6); // 제어점1의표시 context.fillrect(cp2x-3, cp2y-3, 6, 6); // 제어점2의표시 context.fillrect(endx-3, endy-3, 6, 6); // 종료점의표시 15

16 02 베지에곡선 3 차베지에곡선 예제 Canvas_11-02_bezierCurve2.html Script var X = 100, Y = 320; // 시작점의위치지정 var cp1x = 60, cp1y = 50; // 제어점1의위치지정 var cp2x = 320, cp2y = 50; // 제어점2의위치지정 var endx = 400, endy = 280; // 종료점의위치지정 16

17 채우기스타일 (Fill Style) 지정 context.fillstyle [ = value ] 도형을채우기위해사용되는현재의채우기스타일을반환한다. fillstyle 속성은도형내부에사용하는색상이나스타일을나타내는것으로지정한값 (value) 으로변경할수있다. 스타일은 CSS 색상을포함하는문자열이나 CanvasGradient 또는 CanvasPattern 객체가될수있으며, 잘못된값은무시된다. context.globalalpha [= value] 렌더링처리에적용하는현재의투명도값을반환한다. 전역 (global) 알파 (Alpha) 값을설정하는속성으로, 0( 완전투명 ) ~ 1.0( 완전불투명 ) 사이의값을지정할수있으며기본값은 1.0이다. rgba() 또는 hsla() 를이용하여투명도를지정할수있지만, 이속성을사용하면, 이후에계속해서그리게되는모든도형과이미지에이속성에지정된값이적용된다. 17

18 채우기스타일 (Fill Style) 지정 예제 Canvas_11-03_fillStyle.html Script context.linewidth = 10; context.strokestyle = "blue" polygon(context,125, 125, 100, 4, -Math.PI/2); // 사각형을그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.stroke(); context.strokestyle = "green" polygon(context,350, 125, 100, 5, -Math.PI/2); // 오각형을그린다 context.fillstyle="rgba(51,128,255,0.75)"; context.fill(); context.stroke(); context.strokestyle = "red" polygon(context,550, 125, 100, 6, -Math.PI/2); // 육각형을그린다 context.fillstyle="rgba(11,227,93,0.75)"; context.fill(); context.stroke(); context.strokestyle = "black" polygon(context,750, 125, 100, 8, -Math.PI/2); // 팔각형을그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.stroke(); 18

19 채우기스타일 (Fill Style) 지정 예제 Canvas_11-03_fillStyle.html Script context.linewidth = 10; //context.globalalpha = 1; // 투명도를완전불투명하게지정 context.globalalpha = 0.5; // 투명도를 50% 투명하게지정 context.strokestyle = "blue" polygon(context,125, 125, 100, 4, -Math.PI/2); // 사각형을그린다 context.fillstyle="rgb(227,11,93)"; context.fill(); context.stroke(); 이하생략 ( 앞의예제참고 ) globalalpha = 1.0 globalalpha =

20 와인딩규칙 (Winding Rule) 현재패스가자기자신을통과하거나현재패스와교차하는여러개의서브패스가있을경우에, fill() 메서드는내부를어떻게채울까? 20

21 와인딩규칙 (Winding Rule) 컴퓨터그래픽에서의와인딩방식 21

22 와인딩규칙 (Winding Rule) 짝 - 홀와인딩 (even-odd winding) 어떤한지점이패스내부에있는지를확인하려면, 다음그림과같이다시한번그지점을통해서선을그려보면알수있다. 선을통과할때마다교차횟수를누적한다. 누적된교차횟수가짝수라면패스외부라고판단하고채우지않는다. 그러나, 교차횟수가홀수이면패스내부라고판단하고지정한스타일로채우게된다. 22

23 와인딩규칙 (Winding Rule) 넌제로와인딩 (non-zero winding) 패스의각부분에대한드로잉을하는방향 ( 시계방향및시계반대방향 ) 에의존하는방법 모든시계방향회전의경우에는 1 씩감소시키고, 모든시계반대방향회전의경우에는 1 씩증가시킨다. 마지막으로계산된카운터가 0 이아니면, 해당영역은패스안에존재한다고판단하여브라우저에서는 fill() 메서드를호출해서해당영역의내부를채운다. 그러나, 마지막카운터가 0 이라면해당영역은패스안에존재하지않는것으로판단하여브라우저에서는해당영역내부를채우지않는다. 23

24 와인딩규칙 (Winding Rule) 넌제로와인딩 (non-zero winding) 왼쪽그림 지점 1. Total = 1, 따라서내부라고판단하여내부를채운다. 지점 2. Total = 1 1( 시계방향 ) = 0, 따라서외부라고판단하여내부를채우지않는다. 지점 3. Total = 1 1( 시계방향 ) 1( 시계방향 ) = -1, 따라서내부라고판단하여내부를채운다. 오른쪽그림 지점 1. Total = 1, 따라서내부라고판단하여내부를채운다. 지점 2. Total = 1 + 1( 시계반대방향 ) = 2, 따라서내부라고판단하여내부를채운다. 지점 3. Total = 1 + 1( 시계반대방향 ) + 1( 시계반대방향 ) = 3, 따라서내부라고판단하여내부를채운다. 24

25 와인딩규칙 (Winding Rule) 수정된다각형그리기 //function polygon( 컨텍스트, 좌표 (x, y), 반지름, 면의수, 시작각도, 그리는방향 ) function polygon(context, x, y, radius, sides, startangle, anticlockwise) { 수정 if (sides < 3) return; //3 각형이하는그리지않도록한다. var degree = (Math.PI * 2)/sides; // 각면에대한각도를계산한다. degree = anticlockwise? -degree : degree; // 각도의방향을반대로계산하도록한다. 추가 } context.save(); // 드로잉상태를저정한다. context.translate(x,y); // 드로잉좌표공간을다각형중심좌표로이동한다. context.rotate(startangle); // 시작각도를중심으로그리도록하기위하여회전한다. context.moveto(radius,0); // 다각형의시작위치로이동한다. for (var i = 1; i < sides; i++) { // 면의수만큼루프를반복한다 // 다음꼭지점까지선을그린다. context.lineto(radius*math.cos(degree*i),radius*math.sin(degree*i)); } context.closepath(); // 패스를닫는다. context.restore(); // 기존드로잉상태를복구한다. 25

26 와인딩규칙 (Winding Rule) Script 수정된다각형그리기 예제 사각형 오각형 육각형 팔각형 Canvas_11-03_fillStyleWinding.html polygon(context,125, 125, 100, 4, -Math.PI/2, false); // 사각형외부를그린다 polygon(context,125, 125, 50, 4, -Math.PI/2, true); // 사각형내부를그린다 polygon(context,350, 125, 100, 5, -Math.PI/2, false); // 오각형외부를그린다 polygon(context,350, 125, 50, 5, -Math.PI/2, true); // 오각형내부를그린다 polygon(context,550, 125, 100, 6, -Math.PI/2, false); // 육각형외부를그린다 polygon(context,550, 125, 50, 6, -Math.PI/2, true); // 육각형내부를그린다 polygon(context,750, 125, 100, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context,750, 125, 50, 8, -Math.PI/2, false); // 팔각형내부를그린다 26

27 와인딩규칙 (Winding Rule) HTML Living Standard 명세서 enum CanvasFillRule { "nonzero", "evenodd" }; void fill(optional CanvasFillRule fillrule = "nonzero"); void fill(path2d path, optional CanvasFillRule fillrule = "nonzero"); 짝 - 홀와인딩 넌제로와인딩 context.fill("evenodd"); context.fill("nonzero"); 예제 Canvas_11-03_fillRule.html 27

28 그라데이션 (Gradient) 스타일지정 선형그라데이션 (Linear Gradient) 시작좌표 (x0, y0) 와종료좌표 (x1, y1) 를지정함으로써, 시작좌표와종료좌표간의위치에따라서색상변화가있는그라데이션효과 gradient = context.createlineargradient(x0, y0, x1, y1) 선형그라데이션객체를생성한다. 인수로표시되는좌표로지정된라인을따라서그리는선형그라데이션을나타내는 CanvasGradient 객체를반환한다. 만일, x0 = x1 그리고 y0 = y1 이면, 선형그라데이션은아무것도그리지않는다. 방사형그라데이션 (Radial Gradient) 원의중심좌표 (x0, y0), 원의반지름 (r0), 또다른원의중심좌표 (x1, y1), 또다른원의반지름 (r1) 을지정함으로써, 두개의가상의원이생성되고그두개의가상의원사이의위치에따라서색상변화가있는그라데이션으로효과 gradient = context.createradialgradient(x0, y0, r0, x1, y1, r1) 방사형그라데이션객체를생성한다. 인수로표시되는원에의해주어진원뿔을따라서그리는방사형그라데이션을나타내는 CanvasGradient 객체를반환한다. 지정된반지름 (r0, r1) 중에하나가음수일경우에는 IndexSizeError 예외오류가발생한다. 28

29 그라데이션 (Gradient) 스타일지정 변환점색 ( 경계색 ) 지정 두좌표간또는두가상의원사이의변환점색상을지정 context.addcolorstop(offset, color) 주어진오프셋위치에변환점색상 (color-stop) 을추가한다. 주어진오프셋 (offset) 위치에그라데이션의변환점색상을추가한다. 0.0 은한쪽끝의오프셋위치이고 1.0 은다른한쪽끝의오프셋위치에해당된다. 중간의변환점색상을지정하기위해서는소수점으로지정하면된다 ( 변환점색상은색상과색상사이의경계색을의미 ) 그라데이션적용방법 var 객체 = context.createlineargradient(x0, y0, x1, y1); // 또는 context.creatradialgradient(x0, y0, r0, x1, y1, r1); 객체.addColorStop( 시작지점오프셋, 시작색상 ); 객체.addColorStop( 끝지점오프셋, 색상 ); context.fillstyle = 객체 ; 29

30 그라데이션 (Gradient) 스타일지정 Script 예제 Canvas_11-03_GradientLinear.html // 첫번째사각형을그린다. var rectstyle = context.createlineargradient(20,20,200,200); // 선형그라데이션객체생성 rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.5,"red"); // 중간빨간색의옵셋을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(20,20,200,200); // 두번째사각형을그린다. rectstyle = context.createlineargradient(230,20,420,10); rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.3,"red"); //30% 위치의빨간색상을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(230,20,200,200); // 세번째사각형을그린다. rectstyle = context.createlineargradient(450,20,430,210); rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.7,"red"); //70% 위치의빨간색상을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(440,20,200,200); 30

31 그라데이션 (Gradient) 스타일지정 Script 예제 Canvas_11-03_GradientRadial.html // 첫번째원을그린다. // 방사형그라데이션객체를만든다. var gradient = context.createradialgradient( 100, 100, 10, 100, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(100, 100, 90, 0, 360*Math.PI/180, true); context.fill(); // 두번째원을그린다. gradient = context.createradialgradient( 350, 100, 10, 300, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(300, 100, 90, 0, 360*Math.PI/180, true); context.fill(); // 세번째원을그린다. gradient = context.createradialgradient( 480, 120, 10, 510, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(510, 100, 90, 0, 360*Math.PI/180, true); context.fill(); 31

32 그라데이션 (Gradient) 스타일지정 실습 Canvas_Study11-04_LinearGradient.html HTML 1 <button id="mybutton"> 색상변경하기 </button> Script var gradarray = ["red","purple","blue","green","yellow","orange"]; var gradient; // 그라데이션을위한변수 document.getelementbyid("mybutton").addeventlistener("click", changecolor, false); dogradient(); // 처음지정된색상으로그라데이션효과를적용한다. // 배열 gradarray[] 에있는색상으로그라데이션효과를적용한다. function dogradient() { gradient = context.createlineargradient(0, 0, canvas.width, 0); // 그라데이션객체생성 gradient.addcolorstop("0", gradarray[0]); // 시작색상 gradient.addcolorstop(".20", gradarray[1]); //20% 지점의색상 gradient.addcolorstop(".40", gradarray[2]); //40% 지점의색상 gradient.addcolorstop(".60", gradarray[3]); //60% 지점의색상 gradient.addcolorstop(".80", gradarray[4]); //80% 지점의색상 gradient.addcolorstop("1.0", gradarray[5]); // 마지막색상 } context.fillstyle = gradient; // 채우기속성에그라데이션객체스타일을적용한다. context.fillrect(0, 0, 350, 150); // 그라데이션스타일로채워진첫번째사각형을그린다. context.fillrect(0, 155, 600, 10); // 그라데이션영역을비교하기위한사각형을그린다. context.fillrect(200, 170, 600, 150); // 그라데이션스타일로채워진두번째사각형을그린다. // 배열의첫번째색상을제거해서마지막색상으로이동시켜서배열의색상을변경하고그라데이션효과를적용한다. function changecolor() { var temp = gradarray.shift(); gradarray.push(temp); 32 dogradient(); // 변경된색상으로그라데이션효과를다시적용시킨다. }

33 그라데이션 (Gradient) 스타일지정 실습 Canvas_Study11-04_LinearGradient.html 33

34 패턴 (Pattern) 스타일지정 패턴은불투명한 CanvasPattern 인터페이스를구현하는객체로표현 pattern = context.createpattern(image, repetition) CanvasPattern 객체를반환한다. 첫 번째 인수 image 는 패턴으로 사용할 이미지를 지정한다. 이미지는 HTMLImageElement, HTMLCanvasElement, 그리고 HTMLVideoElement 중에서지정해야한다. 두번째인수 repetition는주어진 image의반복되는방향을나타낸다. 반복 (repetition) 으로지정될수있는값은다음과같으며, 그이외의값을지정하면 SyntaxError 예외 오류가 발생한다. 이 값이 생략되면 기본적으로 repeat 값이 된다. - repeat( 양방향 ), repeat-x( 수평방향만 ), repeat-y( 수직방향만 ), no-repeat( 반복안함 ) 패턴채우기적용과정 1. 이미지파일의 Image 객체를생성한다. 2. onload 이벤트처리기를사용하여이미지로드가완료되면 createpattern() 메서드를사용하여패턴객체를생성한다. 3. fillstyle 속성에패턴객체를지정한다. 4. 원하는도형등을그리면내부를패턴으로채울수있게된다. 34

35 패턴 (Pattern) 스타일지정 예제 Canvas_11-03_Pattern.html Script var img = new Image(); // 이미지객체를만든다. img.src = "images/pattern.png"; // 이미지객체에이미지를지정한다. img.onload = function () { // 이미지가로드될때까지기다렸다가처리를계속한다. context.beginpath (); var pattern = context. createpattern (img, ""); // 이미지로패턴객체를생성한다. context.fillstyle = pattern; // 패턴객체를채우기스타일로지정한다. context.arc(100, 100, 70, 0, 2 * Math.PI, false); // 원을그린다. polygon(context, 270, 100, 70, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context, 270, 100, 40, 8, -Math.PI/2, true); // 팔각형내부를그린다 polygon(context, 440, 100, 70, 5, -Math.PI/2, false); // 오각형을그린다 context.fill (); // 원내부를채운다. } 35

36 패턴 (Pattern) 스타일지정 실습 Canvas_Study11-05_Pattern.html HTML Script <div> <img id="myimage" src="images/love.png" /> <p id="msg"> 이미지패턴이 repeat 으로지정되었습니다.</p> </div> <button onclick="draw('repeat')">repeat all</button> <button onclick="draw('repeat-x')">repeat-x</button> <button onclick="draw('repeat-y')">repeat-y</button> <button onclick="draw('no-repeat')">no-repeat</button><br /> var image, pattern, message; // 이미지와패턴, 메시지를위한객체를생성한다.. function draw(direction) { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); } context.clearrect(0, 0, canvas.width, canvas.height); // 캔버스영역을지운다. pattern = context.createpattern(image, direction); // 패턴객체를생성한다. context.fillstyle = pattern; // 채우기스타일을패턴으로지정한다. context.fillrect(0, 0, canvas.width, canvas.height); // 캔버스영역을지운다. message.innerhtml = " 이미지패턴이 " + direction + " 으로지정되었습니다 "; message = document.getelementbyid("msg"); //P 요소의아이디를가져온다. image = document.getelementbyid("myimage"); // 이미지의아이디를가져온다. // 이미지리스너를통해이미지가로드되면, draw() 메서드를호출한다. image.addeventlistener("load", function () { draw("repeat"); // 초기 repeat 값으로패턴을채우도록 draw() 메서드를호출한다. }, false); 36

37 패턴 (Pattern) 스타일지정 실습 Canvas_Study11-05_Pattern.html 37

38 그림자스타일지정 어떤도형이나텍스트, 또는이미지등에입체감을주기위한방법 그림자를지정하면, 도형이나텍스트등이캔버스위에마치떠있는듯한느낌이들도록하는시각적효과를가진다 context.shadowcolor [= value] 현재그림자의색상을반환한다. CSS로지정할수있는값을사용하여그림자의색상을변경할수있다. CSS 색상으로구문분석할수없는값은무시된다. 기본값은완전히투명한검정 (rgba(0, 0, 0, 0)) 으로초기화된다. context.shadowoffsetx [= value] 현재그림자의수평 (X 좌표 ) 오프셋을반환한다. 도형이나텍스트로부터그림자까지의수평오프셋을픽셀단위로지정한다. 기본값은 0 으로초기화되며, 변환행렬의영향을받지않는다. context. shadowoffsety [= value] 현재그림자의수직 (Y 좌표 ) 오프셋을반환한다. 도형이나텍스트로부터그림자까지의수직오프셋을픽셀단위로지정한다. 기본값은 0 으로초기화되며, 변환행렬의영향을받지않는다. context.shadowblur [= value] 그림자의흐림정도 ( 크기또는범위 ) 를지정한다. 값을지정하여그림자의흐림정도를지정할수있다. 값이작을수록그림자는선명해진다. 컨텍스트가생성될때, shadowblur 속성은 0 으로초기화된다. 38

39 그림자스타일지정 예제 Canvas_11-03_Shadow.html Script context.shadowblur = 15; // 그림자의흐림정도를크게지정하여많이흐리게한다. context.shadowcolor = "rgb(0, 0, 0)"; // 그림자의색상을검은색으로지정한다. polygon(context, 125, 125, 100, 4, -Math.PI/2, false); // 사각형외부를그린다 polygon(context, 125, 125, 50, 4, -Math.PI/2, true); // 사각형내부를그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.shadowblur = 0; // 그림자의흐림정도를주지않는다. context.shadowoffsetx = 6; // 그림자를도형의 6 픽셀만큼오른쪽으로위치시킨다. context.shadowoffsety = 6; // 그림자를도형의 6 픽셀만큼아래쪽으로위치시킨다. context.shadowcolor = "rgba(125, 125, 125, 0.5)"; // 그림자를 50% 투명하게지정한다. polygon(context, 350, 125, 100, 5, -Math.PI/2, false); // 오각형외부를그린다 polygon(context, 350, 125, 50, 5, -Math.PI/2, true); // 오각형내부를그린다 context.fillstyle="rgba(51,128,255,1.0)"; context.fill(); context.shadowblur = 10; context.shadowoffsetx = -10; // 그림자를도형의 10 픽셀만큼왼쪽으로위치시킨다. context.shadowoffsety = -10; // 그림자를도형의 10 픽셀만큼위쪽으로위치시킨다. context.shadowcolor = "rgba(227,11,93,0.75)"; // 그림자를 25% 투명하게지정한다. polygon(context, 550, 125, 100, 6, -Math.PI/2, false); // 육각형외부를그린다 polygon(context, 550, 125, 50, 6, -Math.PI/2, true); // 육각형내부를그린다 context.fillstyle="rgba(11,227,93,1.0)"; context.fill(); 39

40 그림자스타일지정 예제 Canvas_11-03_Shadow.html Script context.shadowblur = 10; context.shadowoffsetx = 10; // 그림자를도형의 10 픽셀만큼오른쪽으로위치시킨다. context.shadowoffsety = 10; // 그림자를도형의 10 픽셀만큼아래쪽으로위치시킨다. context.shadowcolor = 'rgba(0,0,0,0.75)'; // 그림자의색상을 25% 투명한검은색으로지정한다. polygon(context, 750, 125, 100, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context, 750, 125, 50, 8, -Math.PI/2, true); // 팔각형내부를그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); 40

41 다음학습 1 도형합성및변환 2 텍스트그리기 3 이미지처리하기 4 애니메이션 (Animation) 5 히트영역 (Hit Regions)

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 11 곡선과곡면 01 Spline 곡선 02 Spline 곡면 03 Subdivision 곡면 C n 연속성 C 0 연속성 C 1 연속성 2 C 2 연속성 01 Spline 곡선 1. Cardinal Spline Curve 2. Hermite Spline Curve 3. Bezier Spline Curve 4. Catmull-Rom Spline Curve 5.

More information

PowerPoint Presentation

PowerPoint Presentation Canvas and SVG(Scalable Vector Graphics) 류관희 충북대학교 HTML5 Canvas? (1/2) The HTML5 Canvas is an Immediate Mode bit-mapped area of the screen that can be manipulated with JavaScript and CSS. The HTML5

More information

Chapter 4. LISTS

Chapter 4. LISTS C 언어에서리스트구현 리스트의생성 struct node { int data; struct node *link; ; struct node *ptr = NULL; ptr = (struct node *) malloc(sizeof(struct node)); Self-referential structure NULL: defined in stdio.h(k&r C) or

More information

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

Microsoft PowerPoint - ch02-1.ppt

Microsoft PowerPoint - ch02-1.ppt 2. Coodinte Sstems nd Tnsfomtion 20 20 2.2 Ctesin Coodintes (,, ) () (b) Figue 1.1 () Unit vectos,, nd, (b) components of long,, nd. 직각좌표계에서각변수 (,, ) 들의범위 < < < < < < (2.1) 직각좌표계에서임의의벡터 는,, 가그림 1.1 에서와같이,,

More information

슬라이드 1

슬라이드 1 한국산업기술대학교 제 5 강스케일링및회전 이대현교수 학습안내 학습목표 3D 오브젝트의확대, 축소및회전방법을이해한다. 학습내용 3D 오브젝트의확대및축소 (Scaling) 3D 오브젝트의회전 (Rotation) 변홖공갂 (Transform Space) SceneNode 의크기변홖 (Scale) void setscale ( Real x, Real y, Real z)

More information

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public Chapter 9 Lab 문제정답 1. public class Circle private double radius; static final double PI=3.141592; // PI 이름으로 3.141592 로초기화된정적상수 (1) public Circle(double r) radius = r; (2) public double getradius() return

More information

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.

More information

<4D6963726F736F667420576F7264202D20C3A520BCD2B0B32DC0CCB7B2B0C5B8E9B3AAB6FBBFD6B0E1C8A5C7DFBEEE322E646F63>

<4D6963726F736F667420576F7264202D20C3A520BCD2B0B32DC0CCB7B2B0C5B8E9B3AAB6FBBFD6B0E1C8A5C7DFBEEE322E646F63> 다툼과 상처에서 벗어나 행복한 부부로 사는 법 이럴 거면 나랑 왜 결혼했어? (이수경 지음/라이온북스/2012년 5월/340쪽/14,000원) - 1 - 이럴 거면 나랑 왜 결혼했어? (이수경 지음/라이온북스/2012년 5월/340쪽/14,000원) 책 소개 지고는 절대 못사는 부부 를 위한 결혼생활 코칭! 이 책은 아내가 먼저 읽고 남편에게 건네야 하는 책이다.

More information

* Factory class for query and DML clause creation * tiwe * */ public class JPAQueryFactory implements JPQLQueryFactory private f

* Factory class for query and DML clause creation * tiwe * */ public class JPAQueryFactory implements JPQLQueryFactory private f JPA 에서 QueryDSL 사용하기위해 JPAQuery 인스턴스생성방법 http://ojc.asia, http://ojcedu.com 1. JPAQuery 를직접생성하기 JPAQuery 인스턴스생성하기 QueryDSL의 JPAQuery API를사용하려면 JPAQuery 인스턴스를생성하면된다. // entitymanager는 JPA의 EntityManage

More information

% Rectangular Value 입력 t = -50 : 1 : 50; % 시간영역 for i = 1 : 101 if abs ( t ( i ) ) < 10 x ( i ) = 1; else x ( i ) = 0; % 화면을 2 열 1 행으로나눈후 % 2 열 1 행에 R

% Rectangular Value 입력 t = -50 : 1 : 50; % 시간영역 for i = 1 : 101 if abs ( t ( i ) ) < 10 x ( i ) = 1; else x ( i ) = 0; % 화면을 2 열 1 행으로나눈후 % 2 열 1 행에 R % sin 그래프계산및출력 t = -50 : 1 : 50; T = 10; f = 1/T; Nsin = sin ( ( 2 * pi * f * t ) ) % 시간영역 % 주기 % 주파수 % sin(2πft) % F(sin) 계산 Fsin = fftshift ( fft ( Nsin ) ); % 화면을 2 열 1 행으로나눈후 % 2 열 1 행에 Sin 그래프출력 subplot

More information

차 례 4

차 례 4 제 50 회전국과학전람회 2004. 07. 20 차 례 4 - 1 - 표 2. 천체의화각 표 1. 초점거리와화각 - 2 - 그림 1. 목성의표면구조 - 3 - 그림 2. 목성위성의상호현상 - 4 - π 공전속도 원궤도의반지름 π 그림 3. 케플러회전 - 5 - 표 3. 목성의궤도자료 표 4. 목성의물리자료 표 5. 4 대위성의궤도자료및물리자료 - 6 - 그림

More information

Week3

Week3 2015 Week 03 / _ Assignment 1 Flow Assignment 1 Hello Processing 1. Hello,,,, 2. Shape rect() ellipse() 3. Color stroke() fill() color selector background() 4 Hello Processing 4. Interaction setup() draw()

More information

Open GL

Open GL Graphics Basic Windows & OpenGL Programming 컴퓨터그래픽스연구실 OpenGL 관련참고사이트 OpenGL 공식사이트 http://www.opengl.org/ Khronos Group http://www.khronos.org/ Nehe Productions http://nehe.gamedev.net/ OpenGL 파일설정 압축을푼후다음경로로파일을복사

More information

<4D F736F F F696E74202D20B8B6C0CCC5A9B7CEC7C1B7CEBCBCBCAD202834C1D6C2F7207E2038C1D6C2F729>

<4D F736F F F696E74202D20B8B6C0CCC5A9B7CEC7C1B7CEBCBCBCAD202834C1D6C2F7207E2038C1D6C2F729> 8주차중간고사 ( 인터럽트및 A/D 변환기문제및풀이 ) Next-Generation Networks Lab. 외부입력인터럽트예제 문제 1 포트 A 의 7-segment 에초시계를구현한다. Tact 스위치 SW3 을 CPU 보드의 PE4 에연결한다. 그리고, SW3 을누르면하강 에지에서초시계가 00 으로초기화된다. 동시에 Tact 스위치 SW4 를 CPU 보드의

More information

윈도우즈프로그래밍(1)

윈도우즈프로그래밍(1) 제어문 (2) For~Next 문 윈도우즈프로그래밍 (1) ( 신흥대학교컴퓨터정보계열 ) 2/17 Contents 학습목표 프로그램에서주어진특정문장을부분을일정횟수만큼반복해서실행하는문장으로 For~Next 문등의구조를이해하고활용할수있다. 내용 For~Next 문 다중 For 문 3/17 제어문 - FOR 문 반복문 : 프로그램에서주어진특정문장들을일정한횟수만큼반복해서실행하는문장

More information

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로 한국어 표준 설정안내 서브 초침 시간 및 설정 1. 용두를 2의 위치로 뽑아냅니다. 2. 용두를 시계방향 또는 반시계방향으로 돌려(모델에 따라 다름) 를 전날로 설정합니다. 3. 용두를 3의 위치로 당기고 현재 가 표시될 때까지 시계방향으로 돌립니다. 4. 용두를 계속 돌려 정확한 오전/오후 시간을 설정합니다. 5. 용두를 1의 위치로 되돌립니다. 169 쓰리

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

More information

Microsoft Word - FunctionCall

Microsoft Word - FunctionCall Function all Mechanism /* Simple Program */ #define get_int() IN KEYOARD #define put_int(val) LD A val \ OUT MONITOR int add_two(int a, int b) { int tmp; tmp = a+b; return tmp; } local auto variable stack

More information

SBR-100S User Manual

SBR-100S User Manual ( 1 / 13 ) SBR-100S 모델에 대한 사용자 펌웨어 업그레이드 방법을 안내해 드립니다. SBR-100S 는 신규 펌웨어가 있을시 FOTA(자동업데이트) 기능을 통하여 자동 업그레이드가 되며, 필요시 사용자가 신규 펌웨어를 다운받아 수동으로 업그레이드 할 수 있습니다. 1. 준비하기 1.1 연결 장치 준비 펌웨어 업그레이드를 위해서는 SBR-100S

More information

Microsoft PowerPoint - CSharp-10-예외처리

Microsoft PowerPoint - CSharp-10-예외처리 10 장. 예외처리 예외처리개념 예외처리구문 사용자정의예외클래스와예외전파 순천향대학교컴퓨터학부이상정 1 예외처리개념 순천향대학교컴퓨터학부이상정 2 예외처리 오류 컴파일타임오류 (Compile-Time Error) 구문오류이기때문에컴파일러의구문오류메시지에의해쉽게교정 런타임오류 (Run-Time Error) 디버깅의절차를거치지않으면잡기어려운심각한오류 시스템에심각한문제를줄수도있다.

More information

슬라이드 1

슬라이드 1 한국산업기술대학교 제 4 강프레임리스너 (Frame Listener) 이대현교수 학습안내 학습목표 프레임리스너를이용하여게임루프를구현하는방법을이해한다. 오우거엔짂의키입력처리방식을이해한다. 학습내용 프레임리스너의개념프레임리스너를이용한게임캐릭터의이동캐릭터의이동속도조절 OIS 입력시스템을이용한키보드입력의처리 기본게임루프 Initialization Game Logic

More information

슬라이드 1

슬라이드 1 핚국산업기술대학교 제 14 강 GUI (III) 이대현교수 학습안내 학습목표 CEGUI 라이브러리를이용하여, 게임메뉴 UI 를구현해본다. 학습내용 CEGUI 레이아웃의로딩및렌더링. OIS 와 CEGUI 의연결. CEGUI 위젯과이벤트의연동. UI 구현 : 하드코딩방식 C++ 코드를이용하여, 코드내에서직접위젯들을생성및설정 CEGUI::PushButton* resumebutton

More information

7) 다음의 다음 9) 남학생과 9. zb 여학생 각각 명이 갖고 있는 여름 티 셔츠의 개수를 조사하여 꺾은선그래프로 나타낸 것 이다. 이 두 그래프의 설명으로 옳지 않은 것은? ㄱ. ㄴ. 회째의 수학 점수는 점이다. 수학 점수의 분산은 이다. ㄷ. 영어점수가 수학 점

7) 다음의 다음 9) 남학생과 9. zb 여학생 각각 명이 갖고 있는 여름 티 셔츠의 개수를 조사하여 꺾은선그래프로 나타낸 것 이다. 이 두 그래프의 설명으로 옳지 않은 것은? ㄱ. ㄴ. 회째의 수학 점수는 점이다. 수학 점수의 분산은 이다. ㄷ. 영어점수가 수학 점 1) 은경이네 2) 어느 3) 다음은 자연수 그림은 6) 학생 학년 고사종류 과목 과목코드번호 성명 3 2012 2학기 중간고사 대비 수학 201 대청중 콘텐츠산업 진흥법 시행령 제33조에 의한 표시 1) 제작연월일 : 2012-08-27 2) 제작자 : 교육지대 3) 이 콘텐츠는 콘텐츠산업 진흥법 에 따라 최초 제작일부터 년간 보호됩니다. 콘텐츠산업 진흥법

More information

1. 상속의기본개념 다음과같은문제를위한클래스설계 자동차 속성 : 색상, 배기량, 현재속도 메서드 : 가속하라, 멈춰라, 시동을켜라 트럭 속성 : 색상, 배기량, 현재속도, 최대중량 메서드 : 가속하라, 멈춰라, 시동을켜라 택시 속성 : 색상, 배기량, 현재속도, 요금,

1. 상속의기본개념 다음과같은문제를위한클래스설계 자동차 속성 : 색상, 배기량, 현재속도 메서드 : 가속하라, 멈춰라, 시동을켜라 트럭 속성 : 색상, 배기량, 현재속도, 최대중량 메서드 : 가속하라, 멈춰라, 시동을켜라 택시 속성 : 색상, 배기량, 현재속도, 요금, 8 장상속 상속의기본개념상속관련문제제기 base 클래스의접근제어와 protected 멤버상속관계에서의생성자와소멸자함수재정의 (function overriding) 디폴트액세스지정자와구조체 derived 클래스로부터의상속다중상속 virtual base 클래스 derived 클래스의디폴트복사생성자와디폴트대입연산자 private 생성자의사용 C++ 프로그래밍입문

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Verilog: Finite State Machines CSED311 Lab03 Joonsung Kim, joonsung90@postech.ac.kr Finite State Machines Digital system design 시간에배운것과같습니다. Moore / Mealy machines Verilog 를이용해서어떻게구현할까? 2 Finite State

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

......-....4300.~5...03...

......-....4300.~5...03... 덕수리-내지(6장~8장)최종 2007.8.3 5:43 PM 페이지 168 in I 덕수리 민속지 I 만 아니라 마당에서도 직접 출입이 가능하도록 되어있다. 이러한 장팡뒤의 구조는 본래적인 형태라 고 할 수는 없으나, 사회가 점차 개방화되어가는 과정을 통해 폐쇄적인 안뒤공간에 위치하던 장항 의 위치가 개방적이고 기능적인 방향으로 이동해가는 것이 아닌가 추론되어진다.

More information

슬라이드 1

슬라이드 1 핚국산업기술대학교 제 9 강캐릭터컨트롤러 이대현교수 학습안내 학습목표 씬노드의구성및회전방법을응용하여, 구면카메라및캐릭터컨트롤을구현해본다. 학습내용 구면카메라구현을위한씬노드구성및회전캐릭터컨트롤을위한씬노구구성및회전 카메라및캐릭터컨트롤구현목표 카메라컨트롤 WOW의카메라컨트롤 ( 구면카메라 ) 마우스를이용한좌우패닝, 상하피칭. 휠스크롤을이용한줌인및줌아웃. 캐릭터를중심으로회전됨.

More information

슬라이드 1

슬라이드 1 UNIT 16 예외처리 로봇 SW 교육원 3 기 최상훈 학습목표 2 예외처리구문 try-catch-finally 문을사용핛수있다. 프로그램오류 3 프로그램오류의종류 컴파일에러 (compile-time error) : 컴파일실행시발생 럮타임에러 (runtime error) : 프로그램실행시발생 에러 (error) 프로그램코드에의해서해결될수없는심각핚오류 ex)

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 Power Java 제 11 장상속 이번장에서학습할내용 상속이란? 상속의사용 메소드재정의 접근지정자 상속과생성자 Object 클래스 종단클래스 상속을코드를재사용하기위한중요한기법입니다. 상속이란? 상속의개념은현실세계에도존재한다. 상속의장점 상속의장점 상속을통하여기존클래스의필드와메소드를재사용 기존클래스의일부변경도가능 상속을이용하게되면복잡한 GUI 프로그램을순식간에작성

More information

PART 8 12 16 21 25 28

PART 8 12 16 21 25 28 PART 8 12 16 21 25 28 PART 34 38 43 46 51 55 60 64 PART 70 75 79 84 89 94 99 104 PART 110 115 120 124 129 134 139 144 PART 150 155 159 PART 8 1 9 10 11 12 2 13 14 15 16 3 17 18 19 20 21 4 22 23 24 25 5

More information

2015 경제ㆍ재정수첩

2015 경제ㆍ재정수첩 Contents 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Part 01 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 Part 02 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

More information

<3230313320B5BFBEC6BDC3BEC6BBE74542532E687770>

<3230313320B5BFBEC6BDC3BEC6BBE74542532E687770> 58 59 북로남왜 16세기 중반 동아시아 국제 질서를 흔든 계기는 북로남 왜였다. 북로는 북쪽 몽골의 타타르와 오이라트, 남왜는 남쪽의 왜구를 말한다. 나가시노 전투 1. 16세기 동아시아 정세(임진전쟁 전) (1) 명 1 북로남왜( 北 虜 南 倭 ) : 16세기 북방 몽골족(만리장성 구축)과 남쪽 왜구의 침입 2 장거정의 개혁 : 토지 장량(토지 조사)와

More information

6. Separate HDD by pulling in the arrow direction. * Cautions Avoid lifting HDD excessively, because Connector can be damaged ODD Remove

6. Separate HDD by pulling in the arrow direction. * Cautions Avoid lifting HDD excessively, because Connector can be damaged ODD Remove 3-1. Disassembly and Reassembly R510 [Caution] Attention to red sentence. 2 2 1. Before disassembling, the AC adaptor and Battery must be separated. 2. AS mark No.1/2 put KNOB-Battery to end of each side,

More information

vi 사용법

vi 사용법 네트워크프로그래밍 6 장과제샘플코드 - 1:1 채팅 (udp 버전 ) 과제 서버에서먼저 bind 하고그포트를다른사람에게알려줄것 클라이언트에서알려준포트로접속 서로간에키보드입력을받아상대방에게메시지전송 2 Makefile 1 SRC_DIR =../../common 2 COM_OBJS = $(SRC_DIR)/addressUtility.o $(SRC_DIR)/dieWithMessage.o

More information

BMP 파일 처리

BMP 파일 처리 BMP 파일처리 김성영교수 금오공과대학교 컴퓨터공학과 학습내용 영상반전프로그램제작 2 Inverting images out = 255 - in 3 /* 이프로그램은 8bit gray-scale 영상을입력으로사용하여반전한후동일포맷의영상으로저장한다. */ #include #include #define WIDTHBYTES(bytes)

More information

ÃູÀÇÅë·Î

ÃູÀÇÅë·Î Special Section 17 20 22 26 04 3 4 2006 vol.11 CONTENTS 06 10 28 30 34 36 40 42 44 46 48 50 53 56 59 60 62 64 66 1 2 2 1 1 1 2 6 PATH OF BLESSING 2006 3/4 7 8 PATH OF BLESSING 1 2 2 2006 3/4 9 1 10 PATH

More information

<B3EDB4DC28B1E8BCAEC7F6292E687770> 1) 초고를읽고소중한조언을주신여러분들게감사드린다. 소중한조언들에도불구하고이글이포함하는오류는전적으로저자개인의것임을밝혀둔다. 2) 대표적인학자가 Asia's Next Giant: South Korea and Late Industrialization, 1990 을저술한 MIT 의 A. Amsden 교수이다. - 1 - - 2 - 3) 계량방법론은회귀분석 (regression)

More information

슬라이드 1

슬라이드 1 마이크로컨트롤러 2 (MicroController2) 2 강 ATmega128 의 external interrupt 이귀형교수님 학습목표 interrupt 란무엇인가? 기본개념을알아본다. interrupt 중에서가장사용하기쉬운 external interrupt 의사용방법을학습한다. 1. Interrupt 는왜필요할까? 함수동작을추가하여실행시키려면? //***

More information

프로덕트 아이덴티티의 유형별 특성에 관한 연구

프로덕트 아이덴티티의 유형별 특성에 관한 연구 A Study on specific characteristic pattern of Product Identity - - - - (Smart & So ft) (Balance of Reason and Feeling). - - - - - - - - - - - - - (Originality),

More information

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠?

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠? 실무 인테리어를 위한 CAD 프로그램 활용 인테리어 도면 작도에 꼭 필요한 명령어 60개 Ⅷ 이번 호에서는 DIMRADIUS, DIMANGULAR, DIMTEDIT, DIMSTYLE, QLEADER, 5개의 명령어를 익히도록 하겠다. 라경모 온라인 설계 서비스 업체 '도면창고' 대 표를 지낸 바 있으며, 현재 나인슈타인 을 설립해 대표 를맡고있다. E-Mail

More information

Requirement Definition Wheel Motor 작동하는경우장애물인식후 - Ultrasonic Sensor 홀수번누를경우 +10 Touch Sensor 누를경우 TouchSensor 계속누르고있을경우 (0.5) +10 짝수번누를경우 -10 빛이어두워졌다다

Requirement Definition Wheel Motor 작동하는경우장애물인식후 - Ultrasonic Sensor 홀수번누를경우 +10 Touch Sensor 누를경우 TouchSensor 계속누르고있을경우 (0.5) +10 짝수번누를경우 -10 빛이어두워졌다다 AutoDriveRobot Analysis Requirement Definition Wheel Motor 작동하는경우장애물인식후 - Ultrasonic Sensor 홀수번누를경우 +10 Touch Sensor 누를경우 TouchSensor 계속누르고있을경우 (0.5) +10 짝수번누를경우 -10 빛이어두워졌다다시밝아졌을경우 - Light Sensor Break

More information

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp 1 0 1.7 6 5 'A ' '/ u 4 4 2 2 ' " JS P 프로그래밍 " A ', 'b ', ' 한 ', 9, \ u d 6 5 4 ' c h a r a = 'A '; 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 < % @ p a g e c o n te n

More information

140109_다본다 레전드 매뉴얼

140109_다본다 레전드 매뉴얼 DBL-1000H SD 카드 / SD 카드 분리 방법 제품 사용 12 13 16~19 20 21 4G 8G 16G 32G 4G 8G 16G 32G 모드버튼 이벤트버튼 RED LED BLUE LED 시큐리티 (보안)LED 1. 함께 동봉된 메모리카드를 기기의 방향에 맞게 삽입 합니다. 2. 기기 상단부 거치대에 양면 테잎 보호 비닐을 제거해 주세요.

More information

설계란 무엇인가?

설계란 무엇인가? 금오공과대학교 C++ 프로그래밍 jhhwang@kumoh.ac.kr 컴퓨터공학과 황준하 9 강. 클래스의활용목차 멤버함수의외부정의 this 포인터 friend 선언 static 멤버 임시객체 1 /17 9 강. 클래스의활용멤버함수의외부정의 멤버함수정의구현방법 내부정의 : 클래스선언내에함수정의구현 외부정의 클래스선언 : 함수프로토타입 멤버함수정의 : 클래스선언외부에구현

More information

컴파일러

컴파일러 YACC 응용예 Desktop Calculator 7/23 Lex 입력 수식문법을위한 lex 입력 : calc.l %{ #include calc.tab.h" %} %% [0-9]+ return(number) [ \t] \n return(0) \+ return('+') \* return('*'). { printf("'%c': illegal character\n",

More information

문제지 제시문 2 보이지 않는 영역에 대한 정보를 얻기 위하여 관측된 다른 정보를 분석하여 역으로 미 관측 영역 에 대한 정보를 얻을 수 있다. 가령 주어진 영역에 장애물이 있는 경우 한 끝 점에서 출발하여 다른 끝 점에 도달하는 최단 경로의 개수를 분석하여 장애물의

문제지 제시문 2 보이지 않는 영역에 대한 정보를 얻기 위하여 관측된 다른 정보를 분석하여 역으로 미 관측 영역 에 대한 정보를 얻을 수 있다. 가령 주어진 영역에 장애물이 있는 경우 한 끝 점에서 출발하여 다른 끝 점에 도달하는 최단 경로의 개수를 분석하여 장애물의 제시문 문제지 2015학년도 대학 신입학생 수시모집 일반전형 면접 및 구술고사 수학 제시문 1 하나의 동전을 던질 때, 앞면이나 뒷면이 나온다. 번째 던지기 전까지 뒷면이 나온 횟수를 라 하자( ). 처음 던지기 전 가진 점수를 점이라 하고, 번째 던졌을 때, 동전의 뒷면이 나오면 가지고 있던 점수를 그대로 두고, 동전의 앞면이 나오면 가지고 있던 점수를 배

More information

TViX_Kor.doc

TViX_Kor.doc FF PLAY MENU STOP OK REW STEREO LEFT COAXIAL AUDIO POWER COMPOSITE COMPONENT Pb S-VIDEO COMPONENT Pr USB PORT COMPONENT Y OPTICAL AUDIO STEREO RIGHT POWER LED HDD LED TViX PLAY REMOTE RECEIVER POWER ON

More information

오버라이딩 (Overriding)

오버라이딩 (Overriding) WindowEvent WindowEvent 윈도우가열리거나 (opened) 닫힐때 (closed) 활성화되거나 (activated) 비활성화될때 (deactivated) 최소화되거나 (iconified) 복귀될때 (deiconified) 윈도우닫힘버튼을누를때 (closing) WindowEvent 수신자 abstract class WindowListener

More information

필수예제 중복순열 02 같은 것이 있는 순열 6. 6. 모스 부호 ㆍ, - 를 사용하여 부호를 만들 때, ㆍ과 -에서 개를 뽑아 만들 수 있는 부호의 수를 필수예제 함수의 개수 7. 7. 두 집합 일 때, 다음을 (1) 에서 로의 함수의 개수 (2) 에서 로의 일대일함

필수예제 중복순열 02 같은 것이 있는 순열 6. 6. 모스 부호 ㆍ, - 를 사용하여 부호를 만들 때, ㆍ과 -에서 개를 뽑아 만들 수 있는 부호의 수를 필수예제 함수의 개수 7. 7. 두 집합 일 때, 다음을 (1) 에서 로의 함수의 개수 (2) 에서 로의 일대일함 01 중복순열 개념체크 중복순열을이용하는 정수 1-중복순열 (1) 중복순열 서로 다른 개에서 중복을 허락하여 개를 택하는 순열을 개에서 개를 택하는 중복순열이라 하고 기호 로 와 같이 나타낸다. (2) 중복순열의 수 개 (3) 중복순열의 계산법 에서 (4) 중복순열인 경우 은 받는 쪽 (고정 숫자) 는 주는 쪽 (선택 숫자) 으로 생각하자. 1 중복을 허락하는

More information

DBPIA-NURIMEDIA

DBPIA-NURIMEDIA 정신문화연구 2001 겨울호 제24권 제4호(통권 85호) pp. 75 96 企劃論文 退溪學派의 經濟的 基 : 財産 形成과 所有 規模를 중심으로 1) Ⅰ. 머리말 Ⅱ. 財産 形成 문 숙 자* Ⅲ. 財産 所有 規模 Ⅳ. 맺음말 Ⅰ. 머리말 退溪學派 는 지역, 당색, 학문상의 이론적 배경 등 다양한 의미를 내포한 용어이 며, 시기에 따라서 지칭하는 의미에 차이가

More information

1아이패드(13~54)

1아이패드(13~54) 1 14 15 16 17 2 18 19 20 21 22 1아이패드(13~54) 2013.12.4 2:54 PM 페이지23 2 PC와 iphone/ipad 사이에서 데이터 주고받기 제 1 장 탭 선택 선택 탭 ❷ 그러면 Wi-Fi와 Bluetooth가 선택 가능합니다. [Bluetooth]를 선택하여, 보내려는 디바이스를 탭하면 데이터가 전송됩니다. 선택 ifiles는

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 5. CSS 박스모델과응용 박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다. 박스모델의속성 배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks) 경계선스타일

More information

<BFB5BBF3C1A4BAB8C3B3B8AEBDC3BDBAC5DB20BFACB1B82E687770> Black Key Region Cr R Linear Key Region θ White Key Region Cb θ Table θ Table for Chroma Suppress 1 255 0 θc θ Table for Linear Key θs θw1 θs θw2 Radius Table R Table for Chroma Suppress 1 255 0 Rc R Table

More information

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전 Jwplayer Guide Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전까지 나왔으며 편리함을 위해서 아래를 링크를 걸어둡니다 [다운로드]

More information

자바 프로그래밍

자바 프로그래밍 5 (kkman@mail.sangji.ac.kr) (Class), (template) (Object) public, final, abstract [modifier] class ClassName { // // (, ) Class Circle { int radius, color ; int x, y ; float getarea() { return 3.14159

More information

<4D F736F F F696E74202D20C1A63134B0AD202D20BBE7BFF8BCF6BFCD20C8B8C0FC>

<4D F736F F F696E74202D20C1A63134B0AD202D20BBE7BFF8BCF6BFCD20C8B8C0FC> 게임엔진 제 14 강사원수와회전 이대현교수 한국산업기술대학교게임공학과 학습목차 오일러회전의개념과특성의이해 사원수의개념 사원수를이용한회전실습 Slerp 구면보간 닌자의부드러운회전실습 오일러 (Euler) 회전 오일러각도 (Euler Angles) 원리를이용한회전 오일러각도 : 3 차원공간에서물체가취할수있는방향을나타내는데사용되는세개의각도값의조합 18 세기수학자오일러의착안점

More information

Microsoft PowerPoint - 14주차 강의자료

Microsoft PowerPoint - 14주차 강의자료 Java 로만드는 Monster 잡기게임예제이해 2014. 12. 2 게임화면및게임방법 기사초기위치 : (0,0) 아이템 10 개랜덤생성 몬스터 10 놈랜덤생성 Frame 하단에기사위치와기사파워출력방향키로기사이동아이템과몬스터는고정종료버튼클릭하면종료 Project 구성 GameMain.java GUI 환경설정, Main Method 게임객체램덤위치에생성 Event

More information

<C6F7C6AEB6F5B1B3C0E72E687770> 1-1. 포트란 언어의 역사 1 1-2. 포트란 언어의 실행 단계 1 1-3. 문제해결의 순서 2 1-4. Overview of Fortran 2 1-5. Use of Columns in Fortran 3 1-6. INTEGER, REAL, and CHARACTER Data Types 4 1-7. Arithmetic Expressions 4 1-8. 포트란에서의

More information

KPS-19MA-1.hwp

KPS-19MA-1.hwp 판서모니터 사양(모델명 KPS-19MA) 모델명 KPS-19MA 화면크기 19.0 inch 해상도 1280 (H)x1024 (v) 픽셀크기 0.294 x0.294 mm 화소 16.7M (8 bits/color) 선명도 800:1 밝기 300 cd/m2 응답속도 Tr+Tf=5 ms 시야각 +80 ~80 (H), +80 ~80 (V) Tablet Specification

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 9. 자바스크립트객체 객체 객체 (object) 는사물의속성과동작을묶어서표현하는기법 ( 예 ) 자동차는메이커, 모델, 색상, 마력과같은속성도있고출발하기, 정지하기등의동작도가지고있다. 객체의종류 객체의 2 가지종류 내장객체 (bulit-in object): 생성자가미리작성되어있다. 사용자정의객체 (custom object): 사용자가생성자를정의한다.

More information

Ⅰ. Introduction 우리들을 둘러싸고 잇는 생활 환경속에는 무수히 많은 색들이 있습니다. 색은 구매의욕이나 기호, 식욕 등의 감각을 좌우하는 것은 물론 나뭇잎의 변색에서 초목의 건강상태를 알며 물질의 판단에 이르기까지 광범위하고도 큰 역할을 하고 있습니다. 하

Ⅰ. Introduction 우리들을 둘러싸고 잇는 생활 환경속에는 무수히 많은 색들이 있습니다. 색은 구매의욕이나 기호, 식욕 등의 감각을 좌우하는 것은 물론 나뭇잎의 변색에서 초목의 건강상태를 알며 물질의 판단에 이르기까지 광범위하고도 큰 역할을 하고 있습니다. 하 색 이론과 색채관리 Ⅰ. Introduction( 일반색채 이론) Ⅱ. 색의 표현 ⅰ) 색상 ⅱ) 명도 ⅲ) 채도 ⅳ) 색의 종류 ⅴ) 색의 삼원색 ⅵ) 색의 사원색 Ⅲ. 색의 전달 ⅰ) 변천과정 ⅱ) Color space Ⅳ. 색의 재현 ⅰ) 가법 혼합 ⅱ) 감법 혼합 ⅲ) C.C.M System Ⅴ. 색의 관리 ⅰ) 목적 ⅱ) 적용범위 ⅲ) 색차계 ⅳ)

More information

435-040 경기도 군포시 엘에스로 153-8, 6 층 ( 산본동, 금정하이뷰 ), 한국미쓰도요 (주) TEL 82 31 361-4200 FAX 82 31 361-4201 구입문의 디자인, 사양등은 상품개량을 위해 일부 변경되는 경우도 있습니다. 970 1309(1)

435-040 경기도 군포시 엘에스로 153-8, 6 층 ( 산본동, 금정하이뷰 ), 한국미쓰도요 (주) TEL 82 31 361-4200 FAX 82 31 361-4201 구입문의 디자인, 사양등은 상품개량을 위해 일부 변경되는 경우도 있습니다. 970 1309(1) CONTRACER K15003(2). 435-040 경기도 군포시 엘에스로 153-8, 6 층 ( 산본동, 금정하이뷰 ), 한국미쓰도요 (주) TEL 82 31 361-4200 FAX 82 31 361-4201 구입문의 디자인, 사양등은 상품개량을 위해 일부 변경되는 경우도 있습니다. 970 1309(1) A(R)R CONTRACER CV-1000N2 스탠드는

More information

위하다. 하지만 지금까지 시민사회의 논의는 주로 국내 핵발전소의 안전과 이에 따른 재난으로 논의가 국한되고 있는 측면이 있다. 사고의 파급력과 파괴력은 국내 핵발전소 사고가 더 크겠지 만, 그간 역사를 통해 우리가 경험한 방사능 재난은 이보다 다양하며, 오늘의 논의 과

위하다. 하지만 지금까지 시민사회의 논의는 주로 국내 핵발전소의 안전과 이에 따른 재난으로 논의가 국한되고 있는 측면이 있다. 사고의 파급력과 파괴력은 국내 핵발전소 사고가 더 크겠지 만, 그간 역사를 통해 우리가 경험한 방사능 재난은 이보다 다양하며, 오늘의 논의 과 < 우리는 원전사고로부터 안전하게 대처할 준비가 되어 있는가? (2014.5.21.), 아이들에게 핵없는 세상을 위 한 국회의원연구모임 주최 토론회 토론문> 방사능 재해 대책, 원안위를 뛰어넘는 새로운 종합재난기구가 필요하다. 1) - 후쿠시마 핵사고와 후타바병원 참사를 통해 본 방사능재난과 대책 - 이헌석(에너지정의행동) 1. 방사능 재난, 우리나라의 현황

More information

Microsoft PowerPoint - 06-Body Data Class.pptx

Microsoft PowerPoint - 06-Body Data Class.pptx Digital 3D Anthropometry 6. Body Data Class Sungmin Kim SEOUL NATIONAL UNIVERSITY Body Data Class 의설계 Body Model 의관리 인체데이터입출력 데이터불러오기 인체모델그리기 TOpenGL의확장 프로젝트관리 프로젝트저장 / 불러오기 추가기능구현 좌표축정렬 Face, Wireframe,

More information

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가 수업주제 경찰 출동! (버튼, LED, 버저 사용하기) 9 / 12 차시 수업의 주제와 목표 본 수업에서는 이전 차시에 배웠던 블록들의 기능을 복합적으로 활용한다. 스위치 기능을 가진 버튼을 활용하여 LED와 버저를 동시에 작동시키도록 한다. 각 블록들을 함께 사용하는 프로젝트를 통해 각각의 기능을 익히고 보다 다양한 활용 방법을 구상할 수 있다. 교수 학습

More information

Microsoft PowerPoint - PL_03-04.pptx

Microsoft PowerPoint - PL_03-04.pptx Copyright, 2011 H. Y. Kwak, Jeju National University. Kwak, Ho-Young http://cybertec.cheju.ac.kr Contents 1 프로그래밍 언어 소개 2 언어의 변천 3 프로그래밍 언어 설계 4 프로그래밍 언어의 구문과 구현 기법 5 6 7 컴파일러 개요 변수, 바인딩, 식 및 제어문 자료형 8

More information

2. 4. 1. 업무에 활용 가능한 플러그인 QGIS의 큰 들을 찾 아서 특징 설치 마 폰 은 스 트 그 8 하 이 업무에 필요한 기능 메뉴 TM f K 플러그인 호출 와 TM f K < 림 > TM f K 종항 그 중에서 그 설치 듯 할 수 있는 플러그인이 많이 제공된다는 것이다. < 림 > 다. 에서 어플을 다운받아 S or 8, 9 의 S or OREA

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 Power Java 제 9 장생성자와접근제어 이번장에서학습할내용 생성자 정적변수 정적메소드 접근제어 this 클래스간의관계 객체가생성될때초기화를담당하는생성자에대하여살펴봅니다. 생성자 생성자 (contructor): 객체가생성될때에필드에게초기값을제공하고필요한초기화절차를실행하는메소드 생성자의예 class Car { private String color; // 색상

More information

예제 2) Test.java class A intvar= 10; void method() class B extends A intvar= 20; 1"); void method() 2"); void method1() public class Test 3"); args) A

예제 2) Test.java class A intvar= 10; void method() class B extends A intvar= 20; 1); void method() 2); void method1() public class Test 3); args) A 제 10 장상속 예제 1) ConstructorTest.java class Parent public Parent() super - default"); public Parent(int i) this("hello"); super(int) constructor" + i); public Parent(char c) this(); super(char) constructor

More information

html5.key

html5.key HTML5/CSS3/JavaScript Programming( ) 1 / meteorstartup@gmail.com Meteor Startup (http://meteorstartup.com) / / DB (with Meteor.js) 2 KT DataSystem OS X/iOS Meteor.js Getting Started RHCSA / RHCE 3 1. 1

More information

TFT 2015 04 02 03 3.57 3.98 3.36 3.68 4.06 5% 41% 3.45 3.26 0 1 2 3 4 5 47% 7.1% 13.6% 2.2% 29.3% 13.0% 10.9% 7% 0% 23.9% 24.3% 20.6% 7.5% 5.6% 23.4% 18.7% 15.8% 6.6% 7.7% 20.2% 18.6% 12.0% 19.2% 04 05

More information

웹킷 CSS 바이블: 레퍼런스 편

웹킷 CSS 바이블: 레퍼런스 편 106 웹킷 CSS 바이블 레퍼런스편 서미연, 강영주, 김대현, 김영호, 김훈민, 민경환, 양주희, 정다운, 조은지음 106 웹킷 CSS 바이블레퍼런스편 서미연, 강영주, 김대현, 김영호, 김훈민, 민경환, 양주희, 정다운, 조은지음 웹킷 CSS 바이블레퍼런스편 초판발행 2015 년 8 월 25 일 지은이서미연, 강영주, 김대현, 김영호, 김훈민, 민경환,

More information

ActFax 4.31 Local Privilege Escalation Exploit

ActFax 4.31 Local Privilege Escalation Exploit NSHC 2013. 05. 23 악성코드 분석 보고서 [ Ransomware 악성코드 ] 사용자의 컴퓨터를 강제로 잠그고 돈을 요구하는 형태의 공격이 기승을 부리고 있 습니다. 이러한 형태의 공격에 이용되는 악성코드는 Ransomware로 불리는 악성코 드 입니다. 한번 감염 시 치료절차가 복잡하며, 보고서 작성 시점을 기준으로 지속 적인 피해자가 발생되고

More information

5장.key

5장.key JAVA Programming 1 (inheritance) 2!,!! 4 3 4!!!! 5 public class Person {... public class Student extends Person { // Person Student... public class StudentWorker extends Student { // Student StudentWorker...!

More information

<35312DBCB1C8A3B5B52E687770>

<35312DBCB1C8A3B5B52E687770> 논문접수일 : 2011.09.25 심사일 : 2011.10.07 게재확정일 : 2011.10.24 선호도 높은 웹페이지의 디자인요소 분석연구 - 그래픽이미지, 색채, 레이아웃, 배경을 중심으로 - A study on the Design Factor Analysis in a High Preferable Web site Design - With a focus on

More information

(Microsoft PowerPoint - LZVNQBAJWGTC.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - LZVNQBAJWGTC.ppt [\310\243\310\257 \270\360\265\345]) GUI 인터페이스의이벤트 학습목표 윈도우환경에서작성된 GUI 인터페이스의이벤트개념을이해한다. 다양한컴포넌트에대한이벤트를처리한다 이벤트란? 자바이벤트란 사용자가키보드, 마우스등의장치로부터 AWT 컴포넌트에발생시키는모든사건을의미 이벤트주도형프로그램은사용자로부터발생된이벤트를처리하여사용자와상호작용을가능하게함 자바이벤트모델 컴퓨터 키보드 운영체제 마우스 이벤트객체자바가상머신이벤트소스객체이벤트리스너객체애플리케이션

More information

소개 SketchBook Pro for Android 스케칭... 6 갤럭시 노트용 SketchBook Pro 사용자에 대한 안내... 6 S Pen 사용자를 위한 S Menu... 7 Easy Clip (이지 클립)... 7 클러치... 7 도구 모음... 8 정보

소개 SketchBook Pro for Android 스케칭... 6 갤럭시 노트용 SketchBook Pro 사용자에 대한 안내... 6 S Pen 사용자를 위한 S Menu... 7 Easy Clip (이지 클립)... 7 클러치... 7 도구 모음... 8 정보 Autodesk SketchBook Pro 소개 SketchBook Pro for Android 스케칭... 6 갤럭시 노트용 SketchBook Pro 사용자에 대한 안내... 6 S Pen 사용자를 위한 S Menu... 7 Easy Clip (이지 클립)... 7 클러치... 7 도구 모음... 8 정보 도구 모음... 9 제스처... 9 캔버스 확대

More information

<4D F736F F F696E74202D20B8B6C0CCC5A9B7CEC7C1B7CEBCBCBCAD202834C1D6C2F7207E2038C1D6C2F729>

<4D F736F F F696E74202D20B8B6C0CCC5A9B7CEC7C1B7CEBCBCBCAD202834C1D6C2F7207E2038C1D6C2F729> 7주차 AVR의 A/D 변환기제어레지스터및관련실습 Next-Generation Networks Lab. 3. 관련레지스터 표 9-4 레지스터 ADMUX ADCSRA ADCH ADCL 설명 ADC Multiplexer Selection Register ADC 의입력채널선택및기준전압선택외 ADC Control and Status Register A ADC 의동작을설정하거나동작상태를표시함

More information

PowerSHAPE 따라하기 Calculate 버튼을 클릭한다. Close 버튼을 눌러 미러 릴리프 페이지를 닫는다. D 화면을 보기 위하여 F 키를 누른다. - 모델이 다음과 같이 보이게 될 것이다. 열매 만들기 Shape Editor를 이용하여 열매를 만들어 보도록

PowerSHAPE 따라하기 Calculate 버튼을 클릭한다. Close 버튼을 눌러 미러 릴리프 페이지를 닫는다. D 화면을 보기 위하여 F 키를 누른다. - 모델이 다음과 같이 보이게 될 것이다. 열매 만들기 Shape Editor를 이용하여 열매를 만들어 보도록 PowerSHAPE 따라하기 가구 장식 만들기 이번 호에서는 ArtCAM V를 이용하여 가구 장식물에 대해서 D 조각 파트를 생성해 보도록 하겠다. 중심 잎 만들기 투 레일 스윕 기능을 이용하여 개의 잎을 만들어보도록 하겠다. 미리 준비된 Wood Decoration.art 파일을 불러온다. Main Leaves 벡터 레이어를 on 시킨다. 릴리프 탭에 있는

More information

DWCOM15/17_manual

DWCOM15/17_manual TFT-LCD MONITOR High resolution DWCOM15/17 DIGITAL WINDOW COMMUNICATION DIGITAL WINDOW COMMUNICATION 2 2 3 5 7 7 7 6 (Class B) Microsoft, Windows and Windows NT Microsoft VESA, DPMS and DDC Video Electronic

More information

Microsoft PowerPoint - ch09 - 연결형리스트, Stack, Queue와 응용 pm0100

Microsoft PowerPoint - ch09 - 연결형리스트, Stack, Queue와 응용 pm0100 2015-1 프로그래밍언어 9. 연결형리스트, Stack, Queue 2015 년 5 월 4 일 교수김영탁 영남대학교공과대학정보통신공학과 (Tel : +82-53-810-2497; Fax : +82-53-810-4742 http://antl.yu.ac.kr/; E-mail : ytkim@yu.ac.kr) 연결리스트 (Linked List) 연결리스트연산 Stack

More information

120~151역사지도서3

120~151역사지도서3 III 배운내용 단원내용 배울내용 120 121 1 2 122 3 4 123 5 6 124 7 8 9 125 1 헌병경찰을앞세운무단통치를실시하다 126 1. 2. 127 문화통치를내세워우리민족을분열시키다 1920 년대일제가실시한문화 통치의본질은무엇일까? ( 백개 ) ( 천명 ) 30 20 25 15 20 15 10 10 5 5 0 0 1918 1920 ( 년

More information

스키 점프의 생체역학적 연구

스키 점프의 생체역학적 연구 연구 대상자 연령(세) 신장(cm) 체중(kg) 운동경력(년) 스키 플레이트 특성 길이(cm) 무게(kg) A(CYJ) 21 162.0 53 12 237 3.56 B(KCK) 19 173.0 55 8 253 3.80 C(KHK) 20 175.0 62 12 256 3.80 선행 연구 변인 조사 ꀻ 실험 계획 및 설계 ꀻ 촬 영 ꀻ 디지타이징 위치 좌표 계산 운동학적

More information

제 12강 함수수열의 평등수렴

제 12강 함수수열의 평등수렴 제 강함수수열의평등수렴 함수의수열과극한 정의 ( 점별수렴 ): 주어진집합 과각각의자연수 에대하여함수 f : 이있다고가정하자. 이때 을집합 에서로가는함수의수열이라고한다. 모든 x 에대하여 f 수열 f ( x) lim f ( x) 가성립할때함수수열 { f } 이집합 에서함수 f 로수렴한다고한다. 또 함수 f 을집합 에서의함수수열 { f } 의극한 ( 함수 ) 이라고한다.

More information

Absolute Blue 태양의 위세 앞에서도 당당한 여자의 자존 심을 닮은 컬러. 바람을 닮아 유연한, 물을 닮아 자유롭게, 거칠 것 없이 여름의 클라 이맥스에 올라서서 세상을 물들이는 소리 없는 지배자, 블루

Absolute Blue 태양의 위세 앞에서도 당당한 여자의 자존 심을 닮은 컬러. 바람을 닮아 유연한, 물을 닮아 자유롭게, 거칠 것 없이 여름의 클라 이맥스에 올라서서 세상을 물들이는 소리 없는 지배자, 블루 뷰티 멘토링 북 Summer 2014 _VOL.12 태양의 열기, 블루 속에 녹아 들다 아스팔트마저 녹일 듯한 과잉된 열기가 피어오르는 여름이라는 무대 위 블루가 등장하는 순간, 여름은 제 2막으로 돌입한다. 바라보기만 해도 청량함 속으로 빠져드는 블루의 절대적 매력. 블루와 함께 여자는 이 여름의 주인공이 된다. 격이 다른 히로인의 컬러 BLUE Absolute

More information

HTML5 웹 콘텐츠 제작_ indd

HTML5 웹 콘텐츠 제작_ indd 찾아보기 ㄱ 강체 77, 79, 83 개발자도구 54 검색 API 97, 108 고정물 (fixture) 77 광각렌즈 248, 263 구글 CDN 페이지 223, 224 그림영역 (Drawing Surface) 247 ㄴ 내부 IP 329, 334 ㄷ 단위행렬 37, 256 단일 var 패턴 (single var pattern) 56 데몬 293 두들 9

More information

Microsoft PowerPoint - Lect04.pptx

Microsoft PowerPoint - Lect04.pptx OBJECT ORIENTED PROGRAMMING Object Oriented Programming 이강의록은 Power Java 저자의강의록을사용했거나재편집된것입니다. Class 와 object Class 와객체 클래스의일생 메소드 필드 String Object Class 와객체 3 클래스 클래스의구성 클래스 (l (class): 객체를만드는설계도 클래스로부터만들어지는각각의객체를특별히그클래스의인스턴스

More information