A Variety of KineticJS MapMaker Attempts

1.0, 1.2, 1.10, 2, 3.1, 3, Remake

HotKeys:
w,a,s,d tend to increase the size of the selection

1,2,3,4 tend to change the layer or the source image (Remake)

scrollwheel changes the zoom in a similar way to google maps.


There were serious issues with a large number of kineticJS objects having event listeners. I decided the my next one will be with pure canvas.

Space Sprite Demo3 with QImage and QSquiggle

WASD or arrow keys to move!
Link to Sprite Space Demo
Link to the sprite

Sprite Demo with Collisions

WASD or arrow keys to move!
Link to Sprite Demo with Collisions
Link to Original Post

QImage-Sprite-Demo v3.8.3

The new configs from QImage allows us to declare the source images position and size. The input values are stored to an array and only changed on keydown and keyup. The animation frame moves the sprite according to the row and input keys. The walk cycle for the sprite I used had the default stance in the middle column. The code is pretty thoroughly commented, enjoy! wasd and arrow keys to move!
Link to QImage Sprite Demo
Link to Original Post

QImage - Cropping for Kinetic.Image

Kinetic.Image needed to be able to crop.
Link to QImage Demo
Link to Original Post

Graphing Puzzle using KineticJS v3.8.2

Order the text fields along the y axis.
Use the console.log if you're stuck and the comments if you're really stuck.
Link to Graphing Puzzle

Star Field Demo with QSquiggle

Link to Star Field Demo

Summary of Everything!

I asked a bunch of my friends to: "Sum up as many subjects as you can with as few words as possible but with the most complete description." Submit your answers as a response!

Star Fall Demo with QSquiggle

Here's a quick demo of QSquiggle's use.

Quantum Squiggle 2 - QSquiggle Constructor

It's all "back end" stuff, but I made a constructor for KineticJS to create a general bezier regular shape. I should really include an epilepsy warning. Link to Quantum Squiggle Demo #2

Shape can be created with:

var squiggle = new Kinetic.QSquiggle({
x: stage.width / 2,
y: stage.height / 2,
points: 10,
innerRadius: 150,
outerRadius: 250,
fill: "yellow",
stroke: "black",
strokeWidth: 3
});
//Access this shape like a typical object!
squiggle.fill = "blue"; Here's a Demo using QSquiggle.

Quantum Squiggle - KineticJS Demo

I apologize in advance if the pure randomness gives anyone a seizure. This was built with KineticJS as a Demo for people to play with. I plan on evolving this further into something that could be used as a plugin. You can drag the shape, but not much else right now.
Link to Quantum Squiggle Demo #1
Link to Quantum Squiggle Demo #2