고유 한 변수 만들기

Question

Javascript의 기초가 가장 강력하지 않으며 다른 사람들이 내가 직접 만든 현재의 도전에 대해 어떻게 생각하는지 궁금합니다. WWW -

내가 paper.js

다음 코드로 장난있어 눈 (즉 코드에서 배운) 여기에 눈과 같은 방식으로 마우스 이벤트에 반응이

을 만듭니다. 내가 눈으로 전체 페이지를 채우기 위해 찾고 있어요

// Eye position center 
eCntrX = 100 
eCntrY = 100 

var topLid = new Path() 
topLid.add(new Point(eCntrX - 60, eCntrY)) 
topLid.add(new Point(eCntrX, eCntrY - 28)) 
topLid.add(new Point(eCntrX + 60, eCntrY)) 
topLid.add(new Point(eCntrX, eCntrY + 28)) 

topLid.strokeWidth = '6' 
topLid.strokeColor = '#000' 
topLid.closed = true 
topLid.smooth() 

var iris = new Path.Circle(eCntrX, eCntrY, 24) 
iris.fillColor = '#6CE0FF' 
iris.strokeWidth = '6' 
iris.strokeColor = '#000' 

var pupil = new Path.Circle(eCntrX, eCntrY, 15) 
pupil.fillColor = '#000' 

var glint = new Path.Circle(eCntrX, eCntrY, 5) 
glint.fillColor = '#fff' 
glint.position = new Point(eCntrX + 6, eCntrY - 6) 

var ball = new Group([iris, pupil, glint]) 


function onMouseMove(event) { 

    // Cursor position 
    var csrX = event.point.x 
    var csrY = event.point.y 

    // Ball position 
    var ballX = ball.position.x 
    var ballY = ball.position.y 

    // Displacement 
    var dx = csrX - ballX 
    var dy = csrY - ballY 

    //Radius 
    var r = 5 

    //Pythagerous thereom calcs. R 
    var R = Math.sqrt(dx*dx+dy*dy) 

    x = dx*r/R 
    y = dy*r/R 

    ball.position = new Point(eCntrX + x, eCntrY + y) 

    // console.log('x:' + x + 'y:' + y) 

} 

: arc.id.au/XEyes.html

는

여기에 내가 가진거야. 내 최종 목표는 다음과 같이 뭔가를 만드는 것입니다 :

내 질문은, 대화 형 복수의 눈을 만드는 방법에 대해 갈 수있는 가장 좋은 방법은 무엇인지.

저는 'for'로 놀아 왔지만 onMouseMove 함수는 마지막으로 만든 Eye에만 적용됩니다.

도 paperjs item.clone에서 찾고있다 - paperjs.org/reference/item#clone

아니면 각각의 눈에 대해 고유 한 변수를 만들어 내 문제인가?

for(var i = 0; i < 10; i++){ 

    // Eye position center 
    // 100, 300, 500, 600 
    eCntrX = 100 * i + 100 
    eCntrY = 100 

    var topLid = new Path() 
    topLid.add(new Point(eCntrX - 60, eCntrY)) 
    topLid.add(new Point(eCntrX, eCntrY - 28)) 
    topLid.add(new Point(eCntrX + 60, eCntrY)) 
    topLid.add(new Point(eCntrX, eCntrY + 28)) 

    topLid.strokeWidth = '6' 
    topLid.strokeColor = '#000' 
    topLid.closed = true 
    topLid.smooth() 

    var iris = new Path.Circle(eCntrX, eCntrY, 24) 
    iris.fillColor = '#6CE0FF' 
    iris.strokeWidth = '6' 
    iris.strokeColor = '#000' 

    var pupil = new Path.Circle(eCntrX, eCntrY, 15) 
    pupil.fillColor = '#000' 

    var glint = new Path.Circle(eCntrX, eCntrY, 5) 
    glint.fillColor = '#fff' 
    glint.position = new Point(eCntrX + 6, eCntrY - 6) 

    var ball = new Group([iris, pupil, glint]) 

} 

function onMouseMove(event) { 

    // Cursor position 
    var csrX = event.point.x 
    var csrY = event.point.y 

    // Ball position 
    var ballX = ball.position.x 
    var ballY = ball.position.y 

    // Displacement 
    var dx = csrX - ballX 
    var dy = csrY - ballY 

    //Radius 
    var r = 5 

    //Pythagerous thereom calcs. R 
    var R = Math.sqrt(dx*dx+dy*dy) 

    x = dx*r/R 
    y = dy*r/R 

    ball.position = new Point(eCntrX + x, eCntrY + y) 

    console.log('x:' + x + 'y:' + y) 


} 

Answer 1

당신은 그 변수의 요소를 통해 MouseMove 이벤트 이벤트 루프에서 다음, 눈을 모두 포함하는 변수를 생성하고 논리를 적용 할 필요가 : 여기

이 같은 요청에 대해 함께 코드입니다 차례로 차례로 위치 시키십시오.

var eyeballs = []; 
for (...) { 
    .... 
    //var ball = new Group([iris, pupil, glint]) 
    eyeballs.push(new Group([iris, pupil, glint])); 
} 

function onMouseMove(event) { 
    for (var i = 0, len = eyeballs.length; i < len; i++) { 
     var ball = eyeballs[i]; 
     ... 
     ball.position = new Point(eCntrX + x, eCntrY + y); 
    } 
} 

Answer 2

필자는 Paper.js에 익숙하지 않지만 적어도 프레임 워크를 구성하는 방법에 대한 아이디어를 제공 할 수 있습니다.

기본적으로 안구 공장이 필요합니다. 안구 물체를 만들고 다시 던지기. 그래서 당신은 당신의 소름 끼치는 안구 벽에 걸어 둘 수 있습니다.

아래의 코드 샘플은 완전히 작동하지 않을 수 있습니다. 자세한 내용은 플러그인해야하지만 따라야합니다.

var Eyeball = function(params){ 

    // Eye position center 
    var eCntrX = params.x, 
     eCntrY = params.y; 

    var topLid = new Path() 
    topLid.add(new Point(eCntrX - 60, eCntrY)) 
    topLid.add(new Point(eCntrX, eCntrY - 28)) 
    topLid.add(new Point(eCntrX + 60, eCntrY)) 
    topLid.add(new Point(eCntrX, eCntrY + 28)) 

    topLid.strokeWidth = '6' 
    topLid.strokeColor = '#000' 
    topLid.closed = true 
    topLid.smooth() 

    var iris = new Path.Circle(eCntrX, eCntrY, 24) 
    iris.fillColor = '#6CE0FF' 
    iris.strokeWidth = '6' 
    iris.strokeColor = '#000' 

    var pupil = new Path.Circle(eCntrX, eCntrY, 15) 
    pupil.fillColor = '#000' 

    var glint = new Path.Circle(eCntrX, eCntrY, 5) 
    glint.fillColor = '#fff' 
    glint.position = new Point(eCntrX + 6, eCntrY - 6) 

    var ball = new Group([iris, pupil, glint]); 


    //listen for the current mouse coordinates and update 
    document.addEventListener('mousemove', function(event){ 

     // Cursor position 
     var csrX = event.x, 
     csrY = event.y; 

     // Ball position 
     var ballX = ball.position.x 
     var ballY = ball.position.y 

     // Displacement 
     var dx = csrX - ballX 
     var dy = csrY - ballY 

     //Radius 
     var r = 5 

     //Pythagerous thereom calcs. R 
     var R = Math.sqrt(dx*dx+dy*dy) 

     x = dx*r/R 
     y = dy*r/R 

     ball.position = new Point(eCntrX + x, eCntrY + y) 

    },false); 

} 

var eye = new Eyeball({x:100,y:100}); //if you want/need to pass in parameters for new Eyeballs like color or shape or whatever, you can define them in this object then access them in 'params' inside the Eyeball constructor. 

은 안구 벽 많은 시선을하려면 다음 코드에서

for(var i=0; i<100; i++){ 
    var eye = new Eyeball({x: Math.floor(Math.random()*300), y: Math.floor(Math.random()*300)}); 
} 

은으로 onMouseMove 기능은 어디서든 호출되고 있지 않습니다. 이 이름이 Paper.js에 의해 호출 된 이름인지 또는 포함하지 않은 코드가 더 있는지는 알 수 없습니다.

나를 위해 그 마지막 부분에 답할 수 있다면, 나는 이것을 완전한 대답으로 업데이트하려고 노력할 것이다.

업데이트

좋아, 그래서 다음 단계를 취할 당신의 안구에 귀를 추가 할 수 있습니다. 그건 그렇고, 이것은 총체적인 것입니다.

아이디어는 각 안구가 사건을 경청 할 수 있어야하는 목표다는 것을이다.

paper.js와 같은 방식으로 각 mouseMove 이벤트에서 모든 안구를 반복하고 위치를 업데이트해야합니다. javascript는 단일 스레드이므로 업데이트 할 때마다 잠재적으로 사용자 인터페이스를 잠글 것입니다 (수천 개의 안구를 상상해보십시오!).

각 안구 물체가 현재 마우스 위치의 x 및 y 속성을 얻을 수있는 'mousemove'이벤트를 직접 수신하도록하고 싶습니다. 우리는 각 안구 내부에 이벤트 리스너를 추가하여이 작업을 수행합니다. 각 이벤트는 Eyeball의 인스턴스 컨텍스트 내에서 실행되므로 '공'변수는 각 인스턴스마다 고유합니다. 업데이트 된 샘플 코드를보고이 모든 것이 작동하는지 알려주십시오. 내 마우스를 추적하는 100 개의 안구가있는 샘플 페이지를보고 싶습니다. 제 생각에는 ...