[D3.js] Circle 패턴 놀이

codingman (64)in #dclick • 7 years ago (edited)

[D3.js] Circle 패턴 놀이

사전학습 : [D3.js] Circle 심심풀이 놀이

오늘도 어제 post 연장선에서 간단하게 패턴을 만들어 보는 시간을 갖도록 하겠습니다. 수정 코딩은 2~3줄만 바꿈으로 다양한 패턴이 만들어지게 됩니다.

1. 실험소스

<script src="https://d3js.org/d3.v5.min.js"></script>
  <script>

    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",0)    
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5)) //랜덤색
               .transition()
                 .duration(3000) //3초동안
                 .ease(Math.sqrt) //애니메이션 부드럽게
                 .attr("r", 100)    //r=0에서 100까지 증가
                 .remove();   //제거                       
      }
</script>
</body>

2. 패턴 놀이

중심으로 향하는 Circle

 .transition()
                 .duration(3000)
                 .ease(Math.sqrt)
                 .attr("cx",500/2)
                 .attr("cy",500/2)  
                 .remove();

수정 부분은 이전 post에서는 반지름 0~100으로 3초동안 커지는 실험이였는데 반지름을 빼고 cx, cy의 값을 캔버스 width, height의 중심으로 세팅하면 랜덤 클릭한 위치에 원을 3초동안 캔버스 중심지점으로 이동하게 됩니다.

참고로 컨버스에 처음 그려지는 반지름을 0이 아닌 10정도로 수정해서 시작합니다.

[전체소스]

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>

    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",10)    
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5))
               .transition()
                 .duration(3000)
                 .ease(Math.sqrt)
                 .attr("cx",500/2) //캔버스 중심 x좌표
                 .attr("cy",500/2) //캔버스 중심 y좌표          
                 .remove();                        
      }
</script>
</body>

[결과]

공간적 느낌의 중심으로 향하는 Circle

위 코딩은 뭐랄까 약간 평면적 느낌의 이동이라면 반지름의 변화를 줘서 공간적 이동의 느낌을 살펴 봤네요.

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",100)    //시작 반지름
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5))
               .transition()
                 .duration(3000)
                 .ease(Math.sqrt)
                 .attr("cx",500/2)
                 .attr("cy",500/2)
                 .attr("r", 10)  //종료 반지름               
                 .remove();

이렇게 반지름 값만 변경하면 다음과 같은 애니메이션 효과를 보여줍니다.

[전체소스]

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>

    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",10)    
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5))
               .transition()
                 .duration(3000)
                 .ease(Math.sqrt)
                 .attr("cx",500/2)
                 .attr("cy",500/2)
                 .attr("r", 100)                 
                 .remove();                      
      }
</script>
</body>

[결과]

공간적 느낌의 패턴이지요.

마무리

오늘은 랜덤 위치에 클릭한 좌표에 Circle를 긔고 그 Circle을 중심좌표로 이동하는 패턴을 만들었습니다. 그냥 이동하면 평면적 느낌의 이동이기에 여기에 공간적 느낌의 이동을 만들기 위해서 시작과 종료의 반지름을 수정함으로 공간적 느낌을 살폈습니다.

여기서, 마무리 하다가 반지름을 100에서 10으로 줄어들게 해서 Circle이 멀어져 가는 모습을 만들었는데 반대로 10에서 100으로 변경하면 Circle이 가까워지는 모습을 만들어 낼 수 있어 끝나기지 전에 모습만 보여드립니다. 여러분들이 한번 위 코딩에서 반지름 시작과 종료 지점의 Circle의 r값만 변경해서 테스트 해보세요.