Tạo các biến độc đáo

Question

Nền tảng của tôi trong Javascript không phải là mạnh nhất và tôi tò mò về cách những người khác sẽ đi về thử thách hiện tại mà tôi đã tạo cho bản thân mình.

Tôi đang chơi xung quanh với paper.js

Đoạn mã sau tạo này

Con mắt phản ứng với các sự kiện chuột trong cùng một cách như con mắt ở đây (rút ra từ mã mà) - www. arc.id.au/XEyes.html

Dưới đây là những gì tôi có:

// 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) 

} 

tôi đang tìm cách để lấp đầy toàn bộ trang với đôi mắt. mục tiêu cuối cùng của tôi là tạo ra một cái gì đó như thế này:

Câu hỏi của tôi là, cách tốt nhất để đi về việc tạo ra nhiều mắt có tương tác là gì.

Tôi đã chơi xung quanh với 'for', nhưng hàm onMouseMove chỉ áp dụng cho Eye mới nhất được tạo.

cũng đã được nhìn paperjs item.clone - paperjs.org/reference/item#clone

Hoặc là nó là vấn đề của tôi tạo ra các biến độc đáo cho mỗi mắt?

Dưới đây là đoạn code với cho theo yêu cầu:

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

Bạn cần phải tạo một biến có chứa tất cả các mắt, sau đó trong vòng lặp sự kiện MouseMove của bạn thông qua các yếu tố trong biến đó và áp dụng logic để mỗi lần một vị trí.

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

Tôi không quen thuộc với Paper.js, nhưng ít nhất tôi có thể cung cấp cho bạn các ý tưởng về cách xây dựng khung xung quanh nó.

Về cơ bản, bạn cần một nhà máy nhãn cầu. Một trong đó làm cho đối tượng nhãn cầu và ném chúng trở lại với bạn. Vì vậy, bạn có thể treo chúng trên tường nhãn cầu đáng sợ của bạn.

Mẫu mã bên dưới sẽ không hoàn toàn hoạt động, bạn sẽ phải cắm các chi tiết cụ thể, nhưng phải dễ theo dõi.

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. 

Để làm cho nhiều nhãn cầu tường nhãn cầu của bạn:

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

Trong code của bạn, chức năng onMouseMove không được gọi là bất cứ nơi nào. Tôi không biết đây có phải là tên được gọi bởi Paper.js hay không, hoặc nếu có thêm mã bạn quên bao gồm.

Nếu bạn có thể trả lời phần cuối cùng cho tôi, tôi sẽ cố cập nhật câu trả lời này với câu trả lời hoàn chỉnh.

Cập nhật

Ok, do đó cho phép thực hiện bước tiếp theo và thêm tai để nhãn cầu của bạn. Điều này chỉ là nhận được tổng, bằng cách này.

Ý tưởng là mỗi nhãn cầu là một đối tượng có thể nghe một sự kiện.

Cách paper.js thực hiện yêu cầu bạn lặp qua tất cả các nhãn cầu của bạn trên mỗi sự kiện chuột và cập nhật vị trí. Điều này sẽ có khả năng khóa giao diện người dùng trong mỗi lần cập nhật (tưởng tượng hàng nghìn nhãn cầu!) Vì javascript là một luồng đơn.

Những gì chúng tôi muốn làm là có mỗi đối tượng nhãn cầu lắng nghe trực tiếp cho sự kiện 'mousemove', từ đó bạn có thể nhận được các thuộc tính x và y của vị trí chuột hiện tại. Chúng tôi làm điều này bằng cách thêm một người nghe sự kiện bên trong mỗi nhãn cầu. Vì mỗi sự kiện sẽ thực thi trong bối cảnh của thể hiện của Eyeball, biến 'ball' sẽ là duy nhất cho mỗi sự kiện. Xem mã mẫu đã cập nhật và cho tôi biết nếu tất cả hoạt động. Tôi rất muốn xem một trang mẫu với một trăm nhãn cầu theo dõi con chuột của tôi. Tôi nghĩ ...