피타고라스 정리와 비례식을 이용하여 얻어낸 평면(사각형)의 회전 구현.

연습 2015. 6. 17. 23:31
Your browser does not support the HTML5 canvas tag.

 공식
 h=(물체의 높이)
 M=(물체의 폭)
 y=(물체와 시점간의 거리)
 H=(물체와 시점간의 거리에 보이는 높이)

 x축의 거리는 
 x=(y*M*cos(q))/(y+M*sin(q))

 높이는 h을 계산하는건,
 h=H(√x^2+y^2)/(√y^2+2yMsin(q)+M^2)


-SRC-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div id="content" style="width:630px; overflow:hidden;color:#333333;">
                                <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
            Your browser does not support the HTML5 canvas tag.</canvas>
 
        <script>
        
            var x,y;
            
            function draws(){
                ctx.beginPath();
 
                ctx.clearRect(0,0,c.width, c.height);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.moveTo((c.width/2)-calcX,(c.height/2)-calcY);
 
                Thetas=(-Thetas);
 
                sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.lineTo((c.width/2)+calcX,(c.height/2)-calcY);
                ctx.lineTo((c.width/2)+calcX,(c.height/2));
                ctx.lineTo((c.width/2)+calcX,(c.height/2)+calcY);
 
                Thetas=(-Thetas);
                sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.lineTo((c.width/2)-calcX,(c.height/2)+calcY);
                ctx.lineTo((c.width/2)-calcX,(c.height/2));
                ctx.lineTo((c.width/2)-calcX,(c.height/2)-calcY);
 
                ctx.stroke();
 
            }
 
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.lineWidth="2";
 
            var rec=c.height;
            var line=400;
            var heights=(rec*c.height)/line;
 
            var theta=90;
            var Thetas=Math.PI/180*theta;
            var sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
            var calcX, calcY;
 
            var centX,centY;
 
            c.addEventListener("mousedown",dragstart,false);
 
            centX=0;
            centY=line;
            
            setTimeout(ani,100);
            
            function ani(){
                theta=(theta+1)%180;
                Thetas=Math.PI/180*theta;
                draws();
                setTimeout(ani,10);
            }
            
            function dragstart(event){
                x=event.x;
                y=event.y;
                event.target.removeEventListener("mousedown",dragstart,false);
                event.target.addEventListener("mousemove",drag,false);
                event.target.addEventListener("mouseup",dragend,false);
            }
 
            function drag(event){
 
                Thetas=(Math.asin(event.x/Math.sqrt(Math.pow(event.x,2)+Math.pow(event.y,2)))-Math.asin(x/Math.sqrt(Math.pow(x,2)+Math.pow(y,2))));
 
                document.getElementById("text").innerHTML=(Math.asin(event.x/Math.sqrt(Math.pow(event.x,2)+Math.pow(event.y,2)))-Math.asin(x/Math.sqrt(Math.pow(x,2)+Math.pow(y,2))));
 
                draws();
 
            }
 
            function dragend(event){
                event.target.removeEventListener("mousemove",drag,false);
                event.target.removeEventListener("mouseup",dragend,false);
                event.target.addEventListener("mousedown",dragstart,false);
            }
 
        </script>
cs



저작자표시

'연습' 카테고리의 다른 글

ffmpeg -이미지 추출-  (0) 2015.09.28
ffmpeg -동영상 자르기-  (0) 2015.09.28
PAQ8o10t  (0) 2015.06.10
void_Linked_List 전체 소스  (0) 2015.06.08
void_Linked_List 구현 -delFront 구현-  (0) 2015.06.06
Posted by JunkMam
,

티스토리툴바