Benzersiz değişkenler oluşturma

Question

Javascript'teki temel bilgilerim en güçlüsü değil ve diğerlerinin kendim için oluşturduğum mevcut sorun hakkında nasıl düşündüklerini merak ediyorum. www -

Ben paper.js

Aşağıdaki kod ile etrafında oynuyorum göz (bu kodu öğrenilen) burada gözlerde aynı şekilde fare olaylarına tepki bu

yaratır. Ben gözlerle tüm sayfayı doldurmak için arıyorum

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

İşte ben budur. Benim nihai amacı böyle bir şey oluşturmaktır:

Sorum şu, etkileşimli çoklu gözler oluşturma hakkında gitmek için en iyi yolu nedir.

'for' ile oynamaktayım, ancak onMouseMove işlevi yalnızca oluşturulan son Eye için geçerlidir.

da paperjs item.clone bakarak mı - paperjs.org/reference/item#clone

Ya da her bir göz için benzersiz değişkenler yaratarak benden bir konudur?

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

O değişkende elemanları aracılığıyla mousemove olay döngü içinde, sonra gözlerin tümünü içeren bir değişken oluşturmak ve mantığı uygulamak gerekir: Burada

olarak talep için birlikte kod sırayla her birini konumlandırın.

Answer 2

Paper.js'ye aşina değilim, ancak en azından etrafındaki çerçeveyi nasıl oluşturacağınız konusunda size fikir verebilirim.

Temel olarak, bir göz küresi fabrikasına ihtiyacınız var. Göz küresi nesnelerini yapan ve onları sana geri atan biri. Böylece onları tüyler ürpertici gözbebek duvarına asabilirsiniz.

Aşağıdaki kod örneği tamamen işlevsel olmayacaktır, özellikleri eklemeniz gerekir, ancak takip edilmesi kolay olmalıdır.

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. 

senin göz küresi duvar için birçok gözleri yapmak için: Kodunuzda

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

, onMouseMove fonksiyon yerde çağrılan değil. Bu, Paper.js tarafından adlandırılmış bir ad mı, yoksa dahil etmeyi unuttuğunuz daha fazla kod varsa mı bilmiyorum.

Bu son bölümü benim için cevaplayabiliyorsanız, bunu eksiksiz bir yanıtla güncellemeyi deneyeceğim.

Güncelleme

Tamam, bir sonraki adımı atmaya ve gözbebekleri kulaklarını eklemenizi sağlar. Bu arada, sadece iğrenç oluyor.

Fikir, her gözün bir olayı dinlemesi gereken bir nesne olmasıdır.

Paper.js uygulamasının yolu, her mouseMove olayında tüm göz kürelerinize geçmenizi ve konumlandırmayı güncellemenizi gerektirir. Bu, javascript'in tek bir iş parçacığı olduğu için her bir güncelleme sırasında kullanıcı arayüzünü potansiyel olarak kilitleyecektir (binlerce gözbebekü hayal edin!).

Yapmak istediğimiz şey, her fare nesnesinin, doğrudan geçerli fare konumunun x ve y özelliklerini alabileceğiniz 'mousemove' olayı için dinlemektir. Bunu, her göz küresinin içine bir olay dinleyicisi ekleyerek yaparız. Her olay kendi Gözbebeği örneğinde yürütüldüğünden, 'top' değişkeni her biri için benzersiz olacaktır. Güncellenen örnek kodlara bakın ve tüm bunların işe yarayıp yaramadığını bana bildirin. Faremi takip eden yüz gözbebekleriyle örnek bir sayfa görmeyi çok isterim. Bence ...