i am using the latest version of kineticJs, right now I am doing puzzle games, which requires my puzzle pieces to rotate after scramble, anyone have any idea how to rotate different angle and not 2-3 pieces rotate of the same angle? thanks :)
fillPatternImage:imageObj,
fillPatternOffsetX :i * pieceWidth,
fillPatternOffsetY :j * pieceHeight,
stroke: "#000000",
strokeWidth: 4,
lineCap: "round",
rotation : Math.PI * 28.5 * Math.floor(Math.random() * 2), <-- rotation part
draggable: true,
offset : [ pieceWidth / 2 + pieceWidth * 0.3,pieceHeight / 2 + pieceHeight * 0.3 ],
x:0+ (Math.random()*6)*((stage.getWidth()+pieceWidth)/16),
y:0+ (Math.random()*4)*((stage.getHeight()+pieceHeight)/16),
My fiddle : http://jsfiddle.net/e70n2693/34/
the code Math.floor(Math.random() * 2)
gives either 0 or 1, which is then multiplied by PI*28.5, giving either a rotation of 0 or PI*28.5.
increase the multiplier of Math.random()
to desired number of possible rotations.
you may have to change the value multiplying PI also to give a better spread of possible angles (reduce it)
something like below should give a wider range of results
var numberOfDifferentAngles = 50;
var differenceBetweenAngles = Math.PI * 2;
rotation : differenceBetweenAngles
* Math.floor(Math.random() * numberOfDifferentAngles ),