Creating Unique Variables

Question

My basics in Javascript are not the strongest, and I am curious how others will solve the current problem that I created for myself.

I play with paper.js

The following code creates this

The eye reacts to mouse events just like the eyes here (learned from this code) - www.arc.id.au/XEyes.html

Here is what I have:

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

I want to fill the whole page with my eyes. My ultimate goals are to create something like this:

My question is how best to create multiple interactive eyes.

I played with 'for', but the onMouseMove function only applies to the last Eye created.

Also looked at paperjs item.clone - paperjs.org/reference/item#clone

Or is it a question that I create for each eye unique variables?

Here is the request code:

 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

You need to create a variable containing all eyes, and then in the mousemove event loop through the elements of this variable and apply logic to put each one in turn.

 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

I am not familiar with Paper.js, but I can at least provide you with ideas on how to create a structure around it.

Basically, you need an eyeball factory. One that creates eyeball objects and throws them back at you. Therefore, you can hang them on a creepy wall for the eyes.

The below code example will not be fully functional, you will need to connect the specifics, but it should be easy to track.

 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. 

To make many eyeballs for your eye wall:

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

In your code, the onMouseMove function is not called anywhere. I do not know if this is called by the name named Paper.js, or if there is still code that you forgot to include.

If you can answer this last part for me, I will try to update it with a full answer.

Update

So, let's take the next step and add ears to the eyeballs. By the way, this is just rude.

The idea is that every eyeball is an object that should be able to listen to the event.

In the paper.js way, you will need to scroll through all your eyeballs on each mouseMove event and update the positioning. This potentially blocks the user interface during each update (imagine thousands of eyeballs!), Because javascript is single-threaded.

We want each eyeball object to listen directly to the "mousemove" event, from which you can get the x and y properties of the current mouse position. We do this by adding an event listener inside each eyeball. Since each event will be executed in the context of its Eyeball instance, the "ball" variable will be unique to each of them. See the updated sample code and let me know if all of this works. I would really like to see a sample page with a hundred eyeballs following my mouse. I think...