티바이트


액션스크립트3.0으로 만든 RGB큐브.



(▼여기에 플래시가 삽입되어 있습니다)




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
import flash.display.Shape;
import flash.geom.Vector3D;
import flash.geom.Matrix3D;
import flash.events.MouseEvent;
 
var scale:int = 160;
var density:int = 10;
var densityCube:int = density*density*density;
var points:Vector.<Shape> = new Vector.<Shape>(densityCube);
var pointsPosition:Vector.<Vector3D> = new Vector.<Vector3D>(densityCube);
var centralPoint:Vector3D = new Vector3D(stage.stageWidth/2, stage.stageHeight/2, scale/2);
var angleSpd:Number = 0;
var mouseAngle:Number = 0;
var mouseDistance:Number = 0;
var mouseSin:Number = 0;
var mouseCos:Number = 1;
 
for(var i_z:int=0; i_z<density; i_z++) {
    for(var i_y:int=0; i_y<density; i_y++) {
        for(var i_x:int=0; i_x<density; i_x++) {
            var index:int = density*density*i_z+density*i_y+i_x;
            var color:uint = int(i_z/density*256)<<16|int(i_y/density*256)<<8|int(i_x/density*256);
            points[index] = new Shape();
            points[index].graphics.beginFill(color);
            points[index].graphics.drawRect(0,0,4,4);
            points[index].graphics.endFill();
             
            pointsPosition[index] = new Vector3D();
            pointsPosition[index].x = centralPoint.x-scale/2 + i_x*scale/(density-1);
            pointsPosition[index].y = centralPoint.y-scale/2 + i_y*scale/(density-1);
            pointsPosition[index].z = centralPoint.z-scale/2 + i_z*scale/(density-1);
             
            points[index].x = pointsPosition[index].x;
            points[index].y = pointsPosition[index].y;
            points[index].z = pointsPosition[index].z;
            addChild(points[index]);
        }
    }
}
 
 
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler(evt:Event):void
{
    for(var index:int=0; index<densityCube; index++) {
        pointsPosition[index].x -= centralPoint.x;
        pointsPosition[index].y -= centralPoint.y;
        pointsPosition[index].z -= centralPoint.z;
         
        var old:Vector3D = new Vector3D(pointsPosition[index].x, pointsPosition[index].y, pointsPosition[index].z);
        pointsPosition[index].y = Math.cos(angleSpd*mouseSin)*old.y - Math.sin(angleSpd*mouseSin)*old.z;
        pointsPosition[index].z = Math.sin(angleSpd*mouseSin)*old.y + Math.cos(angleSpd*mouseSin)*old.z;
        old.x=pointsPosition[index].x; old.y=pointsPosition[index].y; old.z=pointsPosition[index].z;
        pointsPosition[index].x = Math.cos(angleSpd*mouseCos)*old.x - Math.sin(angleSpd*mouseCos)*old.z;
        pointsPosition[index].z = Math.sin(angleSpd*mouseCos)*old.x + Math.cos(angleSpd*mouseCos)*old.z;
     
        pointsPosition[index].x += centralPoint.x;
        pointsPosition[index].y += centralPoint.y;
        pointsPosition[index].z += centralPoint.z;
         
        points[index].x = pointsPosition[index].x;
        points[index].y = pointsPosition[index].y;
        points[index].z = pointsPosition[index].z;
    }
 
}
 
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
function mouseMoveHandler(evt:MouseEvent):void
{
    var dx:Number = stage.mouseX-stage.stageWidth/2;
    var dy:Number = stage.mouseY-stage.stageHeight/2;
    mouseDistance = Math.sqrt(dx*dx+dy*dy);
    mouseCos = dx/mouseDistance;
    mouseSin = dy/mouseDistance;
    angleSpd = mouseDistance/2000;
}






===========================================================================================






 


  1. enterFrameHandler 부분 자세히 좀 설명해주시겠어요?
    (삼각함수 부분)
    아, 추가로 질문 좀 더 하겠습니다.
    1. color 변수의 선언문에 대한 설명
    결과물을 보니 어떤 걸 "의미"하는지는 알겠는데,
    왜 저런 식으로 구현했는지 이해가 안 간다라고 말해야 하나요...
    2. index 변수의 선언문에 대한 설명
    index가 뭘 의미하는지는 분명히 압니다.
    또 density가 10이기 때문에 십진법을 고려하여
    i_z, i_y, i_x로 index를 나타냈다는 것도 알겠습니다.
    그런데 의문 하나가 생깁니다.
    만일 density가 10이 아니라면?
    아무리 생각해도 10이 아니더라도 위처럼 표현가능한 것 같습니다..

    • enterFrameHandler 부분은
      마우스가 향할 벡터 방향으로 각 점들을 회전행렬
      (cos -sin
      sin cos)
      로 회전시킨 것입니다.

      1. 음.. 저런 방식으로 짠 이유는.. 그냥 저런 색 배치를 만들기 위해 가장 먼저 떠오른 방법이 저거라서..라고밖에 설명을 못드리겠네요 ㅠㅜ 코드가 짤리는데
      var color:uint = int(i_z/density*256)<<16|int(i_y/density*256)<<8|int(i_x/density*256);
      이것입니다. 256은 각 RGB채널의 최댓값(0xFF), density는 점갯수입니다

      2. 변수 density는 한 모서리의 점의 개수를 지정하기 위해 만들었습니다.지금 보니 네이밍이 좀 잘못된 것 같네요.

댓글을 다는 공간입니다. (로그인하지 않아도 댓글을 남길 수 있습니다.)



게시판 목록은 좌측상단에 있습니다.

Statistics Graph