Search the Community
Showing results for tags 'KineticJS'.
Found 4 results
-
Hi all, I am a middle school teacher, a beginner at html5 and at code in general. I am trying to write a simple piece of software that students can use to make Venn Diagrams. The idea is that they can make the circles as big as they want (representing, for example, different population sizes) and then drag them to control the degree of overlap. Everything below looks fine in Chrome. The form is simple and straightforward. My circles are pretty and draggable. The PROBLEM comes when I try to define variables from user input. I using this: var popOneSize = document.popSizeForm.popOne.value; near the top of my <script>, then just putting that directly into the JS, like this: radius: 'popOneSize', and so on. No dice. I also tried giving each of the 'submit' buttons their own id (e.g. 'submitButtonOne') and then using document.getElementbyId('submitButtonOne').addEventListener('click', function(){ }); Again, no dice. Any insights you can provide would be greatly appreciated. Here's the (working) code in full: <!DOCTYPE HTML><html> <head> <style> body { margin: 0px; padding: 0px; } </style> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script> </head> <body> <p>Please enter three population sizes.</p><p>Population size may range 1-100.</p><form id= "popSizeForm"><div> Population Size 1: <input type="number" name="popOne" min="1" max="100"> <input type="submit"></div><div> Population Size 2: <input type="number" name="popTwo" min="1" max ="100"> <input type="submit"></div><div> Population Size 3: <input type="number" name="popThree" min="1" max="100"> <input type="submit"></div></form> <div id="container"></div> <script defer="defer">//Here I'm using kinetic JavaScript to define everything, it's pretty straightforward... what I want to do is take the input from those <input> boxes and plug them in as the values for "radius": var stage2 = new Kinetic.Stage({ container: 'container', width: 800, height: 800 }); var layer1 = new Kinetic.Layer(); var layer2 = new Kinetic.Layer(); var layer3 = new Kinetic.Layer(); var circleOne = new Kinetic.Circle({ x: 165, y: 365, radius: 70, //this is the value I want to be able to change fill: '#CCFF33', stroke: 'black', strokeWidth: 2, draggable: true }); var circleTwo = new Kinetic.Circle({ x: 365, y: 365, radius: 70, fill: '#33CC33', stroke: 'black', strokeWidth: 2, opacity: 0.5, draggable: true }); var circleThree = new Kinetic.Circle({ x: 565, y: 365, radius: 70, fill: '#00BBDD', stroke: 'black', strokeWidth: 2, opacity: 0.5, draggable: true }); layer1.add(circleOne); layer2.add(circleTwo); layer3.add(circleThree); stage2.add(layer1); stage2.add(layer2); stage2.add(layer3); </script> </body></html>
-
Hello all, lately I have been trying to find a way to save progress or part of a game session that was made with canvas. What I came up is explained in the following tutorial-like blog post of mine: http://nightlycoding.com/index.php/2014/01/replay-system-for-kineticjs-and-html5-canvas Also there is the Codepen where it all started: http://codepen.io/netgfx/full/DLrCy In a nutshell I'am using canvas toDataURL function along with animationFrame only decoupled by underscoreJS debounce (to save some CPU cycles). Playback is made with the excellent Greensock TimelineLite. Let me know what do you think. Should I consider refining it and made more universal? Could some game frameworks be interested?
-
This tutorial explains the mathematics behind collision detection using bounding circle method. Source code and online demo is available with the tutorial. Bounding Circle collision detection: KineticJS/HTML5 Tutorial -
I have written a detailed yet very basic tutorial on Collision Detection. I have used KineticJS and HTML5. I hope you guys enjoy reading it. I have also included demo and source code. Collision Detection using Bounding Rectangle method: KineticJS and HTML5 Canvas tutorial
