Kineticjs: Random moving animation of images in canvas

Question

How can I add a random moving animation to For loop images,

I have this code for image:

var imageSRCC = ["images/image1.png","images/image2.png","images/image3.png"];

function Images(i,x,y) {

  var CreatImage = new Image();
  Image= new Kinetic.Image({
     x:x,
     y:y,
     image: CreatImage,
     width: 100,
     height: 200,
  });
  CreatImage.src = imageSRCC[i];    
  layer.add(Image);

}

for (var i =0; i <imageSRCC.length; i++) {

    x: Math.floor(Math.random()*2 + 15)
    y: Math.floor(Math.random()* 2 + 15)

    Images(i,x,y)
}

and i want to do something like this:

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#balls_with_simple_interactions

in above link you can see example scrolldown and you will see (Click “Run the example!” below to try out Example 5-7.)

.....

i will be very thankfull if any one can help me with it.

Answer 1

You haven't asked a very focused questions here. But looking at the book example, this is what I would suggest:

First, create a fiddle that runs the example provided in the book. This involves a bit more than just copy-pasting the code from the book. Doing so will help you to differentiate the HTML5 and Javascript elements of the sample application. JSFiddle, if you're not familiar with it, is a useful tool for demonstrating code here on StackOverflow and elsewhere.

Then, explore the Javascript code and make yourself understand with the different functions are doing. The ones you'll want to focus on in particular are the drawScreen, update, and render functions. What is the purpose of each of these functions?

Finally, where does KineticJS fit into this? KineticJS is a graphics library, so it's only use here is as a slightly more user-friendly replacement for the native HTML5 canvas code used in the example. Focus on the context object in the book code. Your goal is to replace this with KineticJS code.

Ideally, when you have worked through these steps, you will be able to provide a code snippet in answer to your own question. Have at it!