자바 스크립트로 황색 격자 생성

Question

자바 스크립트에서 황색 격자를 생성하는 방법은 무엇입니까? 황동 격자에는 'V'모양 형식의 원이 없습니다.

'V'자 모양의 점선 원 작성? 이 문제를 해결하는 방법을 알려주십시오.

황반 격자 모양을 식별하려면 아래 링크를 참조하십시오. 스크린 샷을 추가했습니다.

https://www.dropbox.com/s/0uzfyuzednuldi4/Screen%20Shot%202015-01-27%20at%208.04.47%20PM.png?dl=0

Answer 1

출력 :

jsfiddle.net/jyoshna/tcgefwen/2 

Answer 2

나는이 그래프 유형의 들어 본 적이없는,도 나는 정보를 찾을 수 있습니다. 이것이 수학적으로 파생 된 것이라면 어떻게 작동하는지 알아 보는 것이 좋습니다.

규칙은 내가 관찰 :

1. 고리는 선형 방식으로 자신의 점 수를 줄일 수 있습니다. 20, 16, 12, 8입니다.
2. 각 대체 링은 반복 각도의 1/2만큼 오프셋됩니다. 예를 들어, 한 행에서 20도마다라면 10도만큼 옵셋됩니다.
3. 다이어그램에 링 간격을 균등하게 표시하지는 않지만 그 의도라고 생각합니다. 그래서 여기

내 시도이다 : 주요 기능 (외부 링의) 반경을 허용 http://jsfiddle.net/lannymcnie/sbmaLed1/

1. 당신은 외부 링에 원의 수를 지정할 수 있습니다
2. 하고, 내부 고리
3. 그런 다음 퇴보를 지정할 수 있습니다 (부적절한 이름 지정에 대해 유감스럽게 생각합니다. 초기 기능은 반대로 작동했습니다). 이것은 각 반지를 증가시키는 도트 수로 생각됩니다. 효과를 얻으려면 4 명이 필요합니다. 이 도움이

   function drawMac(radius, start, end, degenerate) { 
       var g = new createjs.Graphics().f("#f00").dc(0,0,5); 
       for (var i=start, l=end; i<=l; i+=degenerate) { 
        var segments = i; // Easier to read than "i" 
        var d = segments/end * radius; 
        var counter = segments%(degenerate*2) == 0; 
        var offset = Math.PI*2 * 1/segments; 
        for (var j=0; j<segments; j++) { 
         var angle = Math.PI*2 * (j/segments); 
         var s = new createjs.Shape(g); 
         s.x = Math.sin(angle) * d; 
         s.y = Math.cos(angle) * d; 
         container.addChild(s); 
        } 
       } 
       container.rotation = 45; // Cuz it looks cooler 
   } 
   

   희망 : 당신은 여기에 주요 기능입니다 (http://jsfiddle.net/lannymcnie/sbmaLed1/3/)하지만 몇 가지 재미있는 효과

를 얻기 위해 그것을 다를 수 있습니다. 이것을 이해하는 것은 재미있었습니다.

[편집]

가 좀 작은 조정을하고, 훨씬 더 가까이있어 : 외부합니다 (Math.pow 추가 참조)쪽으로 기운

이

2. 는 대한 약간의 회전 추세 추가
   ,369,136 : 중간 여기

최종 함수 (각도에서 0.002 참조)3210

function drawMac(radius, start, end, degenerate) { 
    var g = new createjs.Graphics().f("#f00").dc(0,0,5); 
    for (var i=start, l=end; i<=l; i+=degenerate) { 
     var segments = i; // Easier to read than "i" 
     var d = Math.pow(segments/end, 0.75) * radius; 
     var counter = segments%(degenerate*2) == 0; 
     var offset = Math.PI*2 * 1/segments; 
     for (var j=0; j<segments; j++) { 
      var angle = Math.PI*2 * (j/segments+i*0.002); 
      var s = new createjs.Shape(g); 
      s.x = Math.sin(angle) * d; 
      s.y = Math.cos(angle) * d; 
      container.addChild(s); 
     } 
    } 
    container.rotation = 45; // Cuz it looks cooler 
} 

약 98 %와 일치합니다. Photoshop에 결과를 가져 왔으며 약간의 회전과 생성 된 결과의 스케일을 사용하여 원본 결과가 내 결과보다 큽니다 (광산은 진한 빨간색 임). http://screens.gskinner.com/Screen%20Shot%202015-01-29%20at%209.55.06%20AM.png

그리고 여기에 업데이트 된 바이올린이 있습니다. MacularGrid B 용 http://jsfiddle.net/lannymcnie/sbmaLed1/6/