We Keep Coding

EaselJs and TweenJs: Change image of Bitmap in tweening

I'm trying to create an animation with a flask image. I want to pour the flask, then replace the flask with an empty one, and then return the flask to its original location. The code I have right now looks like this:
var renderPour = function (flask, index){
// Using a Motion Guide
curX = flask.x;
curY = flask.y;
createjs.Tween.get(flask)
.wait(2000*index)
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image:'/assets/empty_flask'+(index+1)+'.svg'}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);
}
According to the documentation, it says
Non-numeric properties will be set at the end of the specified duration.
So I expect the image src property to be changed. But when I run my code, the Bitmap just disappears and I have a 'invisible' Bitmap there. I know it's still there because I have an array that keeps track of all Bitmaps and it's still there, and I just can't see it. When I check the image's src value in the console, it's changed and correct.
I did some research and guessed that it's probably because the stage is not updated. Here is my update stage code:
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
createjs.MotionGuidePlugin.install();
function tick(event) {
stage.update(event);
console.log('x: ', flaskArr[1].x, 'y', flaskArr[1].y);
}
And I tried to run stage.update() in the console as well, but the Bitmap is still invisible.
Additionally it seems that the later half of the animation is still working, except that the Bitmap is not showing according to the log.
I'm wondering is there a correct way to replace the image in TweenJs? Or is there another way to replace the image in the middle of the animation? Very much appreciated!

I figured out the solution on my own, so i'll just post it. I have to pass a new image instead of just a src string:
var emptImage = new Image();
emptImage.src = emptyFlaskPath(id);
createjs.Tween.get(flask)
.wait(2000*(flask.id-1))
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image: emptImage}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);

Create js animation of a horizontal spritesheet

I have gone through the docs and sample only to be lost in outdated docs. Apparently there is no samples for the latest version of createjs.
I need to smooth scroll a horizontal spritesheet. So that the middle of images are shown before the new image is entirely in the "window". So the place in the page doesnt move only what is displayed from the single column horizontal spritesheet is different. And we do not switch between images we scroll up and down.
I am at my wits end with this.
this.sprite = new createjs.BitmapAnimation(spriteSheet);
that line gives an error
not a constructor
this.sprite = createjs.BitmapAnimation(spriteSheet);
gives an error
not a function
here is the sprite sheet
https://github.com/nydehi/asp.net-mvc-example-invoicing-app/blob/master/screenshots/1.png
i am doing this now and no error but nothing is displayed.
<script type="text/javascript" src="createjs-2014.12.12.min.js"></script>
<script>
function init() {
var data = {
images: ["1.png"],
frames: {width:15, height:20},
animations: {
stand:0,
run:[1,5],
jump:[6,8,"run"]
}
};
var spriteSheet = new createjs.SpriteSheet(data);
var animation = new createjs.Sprite(spriteSheet, "run");
var stage = new createjs.Stage("demoCanvas");
stage.addChild(animation);
animation.gotoAndPlay("run"); //walking from left to right
stage.update();
}
</script>

You're probably using a more recent version of CreateJS (around version 0.8.2) which no longer has a BitmapAnimation class on it.
Older versions (0.6.0) had it, but it was most likely replaced by the SpriteSheet class.
Check here for the most recent documentation.

The earlier comments about BitmapAnimation being deprecated long ago are right. Your updated code sample looks fine otherwise.
I think you are just missing something to update the stage when contents change. Your sample just has the one update, but because your image is loaded using a string path, it is not ready yet when you call stage.update().
Any time contents change, you need to tell the stage to refresh. Typically, this is manually controlled when contents change, or constantly using the Ticker.
createjs.Ticker.on("tick", function(event) {
// Other updates
// Update the stage
stage.update(event);
});
// Or a handy shortcut if you don't need to do anything else on tick:
createjs.Ticker.on("tick", stage);

d3.js - multiple charts on same page from different parts of same JSON object

I've searched far and wide and I wasn't able to figure out what's wrong with my code. Apologies if I am missing something obvious.
I have a JSON object as follows:
var data={
"by_date":[
{"date":"2014-01-01", "count":10},
{"date":"2014-02-01", "count":20},
{"date":"2014-03-01", "count":30},
{"date":"2014-04-01", "count":15},
{"date":"2014-05-01", "count":20}
],
"by_location": {
"name":"World","children":[
{
"name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}]
},
{
"name":"Canda", "children":[
{
"name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}]
},
{
"name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}]
}
]
},
{
"name":"China", "children":[{"name":"Beijing","count":30}]
},
{
"name":"India", "children":[{"name":"Bangalore","count":15}]
},
{
"name":"Germany", "children":[{"name":"Frankfurt","count":20}]
}
]
}
};
I want to display a line chart using data from data.by_date and a zoomable circlepack from data.by_location on the same HTML page. I have two Javascript functions by_date, which creates a line chart, and by_location, which creates a circlepack, and they both have the exact same code as Mike Bostock's line chart and zoomable circlepack examples and I call them as follows:
by_date(data.by_date);
by_location(data.by_location); // Creates circlepack, but zoom doesn't work.
The problem is that while both the line chart and the circlepack are created and displayed on the page, the zoom functionality doesn't work on the circlepack. I get the following error:
Uncaught TypeError: Cannot read property 'parent' of undefined
However, if I don't call by_date and only call by_location, it works perfectly fine.
//by_date(data.by_date);
by_location(data.by_location); // Zoom works great now!
Since by_date uses only data.by_date, and doesn't even touch data.by_location, why would commenting it out somehow make by_location work okay?
Here are fiddles demonstrating the issue:
Both line and circlepack (circlepack doesn't zoom): http://jsfiddle.net/xk5aqf8t/6/
Line chart function by_date commented (zoom works fine): http://jsfiddle.net/38sayeqa/
Note that the only difference between the two fiddles is the commented call to by_date.
Any help is greatly appreciated. Thanks in advance!

The problem in your case is that in your zoom transition you're selecting all text elements in the document, including the line chart where elements' bound data doesn't have any parent property (hence the error message).
The fix is easy. Just constrain your transition selection to the current chart. In your case you already have a selection of text elements, you can simply reuse it as demonstrated below:
// Let's keep our initial selection in the text variable:
var text = svg.selectAll('text').data(nodes);
text.enter()... // the entering selection is a subselection, so we keep it separate
// Create a new transition on the existing selection of text nodes
var transition = text.transition().duration(...); // the transition will reuse `text` selection
transition.filter(...); // don't subselect anything here
Here's a demo.

Craftyjs Sprite Animation issue

I'm currently trying to make a game with crafty js and I'm stuck with the sprite Animation.
I don't really know what I'm doing wrong ..
Here is the working code :
http://aaahdontpaintmeinred.me.pn/
Here is how I load the sprite in my loading scene :
Crafty.scene('Loading', function(){
// Draw some text for the player to see in case the file
// takes a noticeable amount of time to load
Crafty.e('2D, DOM, Text')
.text('Loading...')
.attr({ x: 0, y: Game.height()/2 - 24, w: Game.width() });
// Load our sprite map image
Crafty.load(['assets/mansprite.gif'], function(){
// Once the image is loaded...
// Define the individual sprites in the image
// Each one (spr_tree, etc.) becomes a component
// These components' names are prefixed with "spr_"
// to remind us that they simply cause the entity
// to be drawn with a certain sprite
Crafty.sprite(133, 'assets/mansprite.gif', {
mansprite:[0, 0]
});
// Now that our sprites are ready to draw, start the game
Crafty.scene('LevelEditor');
})
})
And here is how I try to bind and Animate in my player component :
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Collision,FPS,mansprite,SpriteAnimation,WiredHitBox')
.attr({maxValues:1,boost:false,trailSpacing:100,currentFrame:0})
.collision();
this.animate('run',0, 0, 3);
this.animate('idle',3, 0, 1);
this.requires('FluidControls')
//this.rotation+=90;
.onHit("FinishLine",this.endLevel)
.onHit("DeathWall",this.omagaDie)
.onHit("Booster",this.booster)
.bind("EnterFrame",function(fps){
if(this.move.up)
{
this.animate('run', 4,-1);
var spacing = this.trailSpacing;
if( this.currentFrame%((60*spacing)/1000) == 0)
Crafty.e("montexte").spawn(this.x,this.y,this.boost,this.xspeed,this.yspeed,this.rotation%360,this.h,this.w);
}else
{
if(!this.move.down)
{
this.animate('idle', 4,1);
}
}
this.currentFrame++;
if(this.currentFrame >=60)
this.currentFrame=0
})
;
},
Hope someone could point out what is going wrong !
If you need more details or you have questions, don't hesistate !
Thanks

Ok, so I solved the problem by using the 0.5.3 version.
Still don't know what's going on. But will try to give an answer here.

Use the non minified version.
I was using Crafty v0.5.4 minified and sprite animation was not working, no errors in console log.
Then after several hours of struggling I tried with the non minified version and the sprite animation started to work properly.

Graphael documentation, recent samples, etc

I'm working on an implementation of a live-updating line graph using gRaphael which is a graphic extension of the Raphael SVG library.
I can't seem to find any examples of somebody doing this as a near-realtime updating project, which is fine. I'm assuming there's a way to call refresh on the graph with a new data set (without the need to re-initialize a whole new Raphael object each time!), but therein lies the problem:
There doesn't seem to be accurate documentation anywhere. I discovered this StackOverflow question: Graphael line chart which in turn led to this documentation project: https://github.com/kennyshen/g.raphael/tree/master/docs , but the results were cold. Using the examples provided, I ran into some errors:
the syntax r.g.linechart() used in the examples was no longer valid (where r is the Raphael object and I assume g is a gRaphael property within). Somewhere along the way somebody must have switched to properly extending the Raphael object so that r.linechart() worked.
The parameters passed into linechart() were incorrect, resulting in an undefined error again. If I passed in only the #x, #y, width, height, arrayX, arrayY parameters and dropped the chart labels, etc., I could render a plain line. But of course I need to be able to label my axes and provide a legend, etc.
Needless to say, a library without an API document isn't going to do anybody much good, but there are stalwarts out there who are willing to learn based strictly on reading the code itself. I'm not one of those. I would probably do OK with a well-commented example, preferably using live updates.
So I guess the questions are:
Does anybody know better documentation than the one I linked to?
Can someone point me to examples, documentation failing?
Can someone provide a proper itemization of the parameters that linechart() will accept?
Thanks!
For the record, here's how far I am so far:
var r = Raphael('line-chart');
// did NOT work -->
var linechart = r.g.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30],
{"colors":["#444"], "symbol":"s", axis:"0 0 1 1"}
);
// worked in a limited way, rendering a plain line with no visible labels/graph -->
var linechart = r.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30]
);

I am still trying to learn Raphael myself, but here are the primary resources I have been using: http://g.raphaeljs.com/reference.html and the same sans the "g."
here is a fiddle that pretty much pulls off an updating linechart with knockout/gRaphael, prob not the best solution, but its an idea: http://jsfiddle.net/kcar/mHG2q/
Just a note, I didn't start learning it until I combined reading with trial/error (with a lot of error), so play with the fiddle and see how things change.
but the basic code for it is like:
//constructor
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () { //this function sets the hover tag effect
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});
lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbols

There is a fork in GitHub that is working on the documentation and examples.
You will need to download the code and view it from you computer. It is a work in progress but it's more than you can find in the official g.Raphael page.
I also found this small post with some examples.