Skip to content

Instantly share code, notes, and snippets.

@utgarda

utgarda/kinetic-js-create-stage.coffee

Created April 24, 2012 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save utgarda/2481035 to your computer and use it in GitHub Desktop.
Save utgarda/2481035 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
kinetic-js-create-stage.coffee
# Shouldn't they be colored somehow fancy?
colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']
#jQuery comes to the resque
containerWidth = $('#container2').width()
containsrHeight = $('#container2').height()
# Add polygons to a layer
addPolygon = (layer) ->
n = layer.getChildren().length + 1
layer.add new Kinetic.RegularPolygon
fill: colors[n % colors.length]
# As the first n is 1, the first poly is a triangle
sides: n + 2
draggable: true
x: (n % 10+1) * 50
y: (n % 3 + 1) * 50
radius: 40
strokeWidth: 4
$j ->
# Get a named div sized appropriately,
# then create a Kinetic Stage,
# then fill it with some shapes:
stage2 = new Kinetic.Stage
container: 'container2'
width: containerWidth
height: containerHeight
layer = new Kinetic.Layer()
stage.add layer
$j('#addpoly').click ->
addPolygon layer
stage.add layer
addPolygon layer
Raw
kinetic-js-intro.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#container {
background-image: url('http://www.html5canvastutorials.com/demos/assets/blue-background.jpg');
height: 200px;
width: 530px;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
</head>
<body onmousedown="return false;">
<script type="text/coffeescript">
colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']
width = $('#container').width()
height = $('#container').height()
addPolygon = (layer) ->
n = layer.getChildren().length + 1
layer.add new Kinetic.RegularPolygon
fill: colors[n % colors.length]
sides: n + 2
draggable: true
x: (n % 10+1) * 50
y: (n % 3 + 1) * 50
radius: 40
strokeWidth: 4
$ ->
stage = new Kinetic.Stage
container: 'container'
width: width
height: height
layer = new Kinetic.Layer()
stage.add layer
$('#tango').click ->
addPolygon layer
stage.add layer
</script>
<div id="container"></div>
<input type="button" id="tango" value="Tango!">
</body>
</html>
Raw
kinetic-js-tango.html
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
#tango {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
#container {
background-image: url('http://www.html5canvastutorials.com/demos/assets/blue-background.jpg');
display: inline-block;
overflow: hidden;
height: 365px;
width: 580px;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://coffeescript.org/extras/coffee-script.js'></script>
</head>
<body onmousedown="return false;">
<script type="text/coffeescript">
colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']
random = Math.random
tango = (layer) ->
for shape in layer.getChildren()
stage = shape.getStage()
shape.transitionTo
rotation: random() * 3
radius: random() * 100 + 20
x: random() * stage.getWidth()
y: random() * stage.getHeight()
alpha: random()
duration: 1
easing: 'ease-in-out'
$ ->
stage = new Kinetic.Stage
container: 'container'
width: 578
height: 363
layer = new Kinetic.Layer()
for i in [1..10]
layer.add new Kinetic.RegularPolygon
sides: Math.ceil(random() * 5 + 3)
fill: colors[Math.round(random() * 5)]
stroke: 'black'
strokeWidth: 4
draggable: true
stage.add layer
$('#tango').click -> tango layer
</script>
<div id="container"></div>
<input type="button" id="tango" value="Tango!">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment