We Keep Coding

WebAudio setting gainNode.gain.value

I am trying to deal with a deprecated Chrome feature of the WebAudio API that has to do with setting gainNode.gain.value. My current code is this:
var source = ctx.createBufferSource();
var my_gain = -1; //or 1, depending on whether I want sound or not
source.gainNode.gain.value = Math.min(1.0, Math.max(-1.0, gain));
This, however, gets me an error message: "[Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See https://www.chromestatus.com/features/5287995770929152 for more details"
To get the error message disappear, I can do something like this:
source.gainNode.gain.setTargetAtTime(0, ctx.currentTime, 0.015);
But how do I incorporate my_gain variable into this?

So, you CAN just ignore this message. Smoothing shouldn't matter much to you in this situation. If you DID want smoothing, you should use:
source.gainNode.gain.setTargetAtTime(my_value, ctx.currentTime, 0.015);
The reason setting my_value to -1 isn't working is that it SHOULDN'T - all you're doing is inverting the sound (i.e., sound values are between -1 and 1 to begin with, this would flip them but not make them zero). What you SHOULD do, in order to turn the sound off, is make my_value=0.

wheelnav.js bouncing effect

Working on a pie menu using wheelnav.js. Everything is going well thus far, but for the life of me I do not seem to find anywhere in the wheelnav.js documentation on how to suppress the bouncing effect when you make a menu choice.
For an example of this effect, please look at http://pmg.softwaretailoring.net/ , turn on the 'rotate' switch and click a number in the pie menu. The selected choice rotates around to the focus point (default top) and bounces to a stop.
The original examples from http://wheelnavjs.softwaretailoring.net/examples.html I thought would be helpful as the first example on that page has a pie menu that does not bounce, but they've obfuscated and minified the underlying examples javascript file.
Any hints or tips on where to look for more extensive documentation or detailed examples would be greatly appreciated.
UPDATE: found a reference to a wheel object in their website code that uses the animatetime property. Setting that to a low number, like 200, causes the wheel to spin faster but not bounce. Not a perfect solution, as I might want the spinning to be slower, but will suffice until I learn of a better method.

Try using something like this:
wheel = new wheelnav('wheelDiv');
wheel.animatetime = 1000;
wheel.animateeffect = 'linear';
I believe the linear setting is the specific property you are looking for.
This can be found on this page of the documentation

I have used wheelnav.js and also contact his auther for my problems, and he has given proper answer to me about my problem but you can not find proper documentation for this jquery, you can also ask him (mail him) for your problem if needed
you can use below code
indexWheel.animatetime = 2000; // by this you can set faster/slower speed
strong text
window.onload = function () {
var values = ['1','2','3','4'];
var percent = [51,11,30,8];
var tool = ["1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)"];
var indexWheel = new wheelnav("indexDiv");
indexWheel.animatetime = 2000;
indexWheel.navItemsContinuous = true;
indexWheel.navAngle = 0;
indexWheel.wheelRadius = indexWheel.wheelRadius * 0.9;
indexWheel.slicePathFunction = slicePath().PieSlice;
indexWheel.sliceSelectedTransformFunction = sliceTransform().MoveMiddleTransform;
indexWheel.colors = colorpalette.goldenyellow;
indexWheel.initWheel(values);
indexWheel.createWheel(values);
indexWheel.setTooltips(tool);
};

Additional info for animateeffect.
There is a link for available effects on this page. Press 'animate' button and click on 'easing type' link.
P.S. I know the lack of in-depth documentation which should contain reference for all properties. It's on my todo list, but this is a side project, pls be patient. ;) Thanks for your feedbacks!

Double animated Path drawing bug, with Raphael.js

I'm using a custom found function to draw path, in order to draw a logo with animations (using jquery and Raphael.js). This "animateLine" function is usefull since it draws a svg path considering FX, along the "vector" path. For just one path there is no problem with this function (It can be found in the demo ).
function animateLine (canvas, hoverDivName, colorNumber, pathString, duration, destination)
The problem is that there is some kind of conflict when using that function simultaneously (Drawing 2 path at the same time).
You can see my problem here on this fiddle : http://jsfiddle.net/VyRDk/2/
I thought the issue was the conflict with the temporary var "destination", but i'm using 2 diffrent globals vars when calling "AnimateLine" function (you'll notice "lepathanimated1" and "lepathanimated2")
var lepathanimated1;
var lepathanimated2;
Used this way :
animateLine(logo_animated, "canvas", "#1d1d1b", path_circle,1200,lepathanimated1);
I hope you have enough information to maybe find the solution, and if you need more details, just ask =)
Thanks for your time
EDIT: OMG i just found the solution!! #SoHappy
I just created the path object outside the function and used an identifier (# id) to avoid the conflict (and used it for the jquery animate step function)
You can find the correct DEMO HERE
HOWEVER I'm not shure that's the right way to do that (optimisation). Using "animate" in spite of "RequestAnimFram" is it correct? The advantage is having Raphael & jQuery working together (easier that javascript canvas way)
Anyway, hopping it helps =)
PS : If it helped please vote up, cos' that's my first stackoverflow question/answer and still 1 of reputation -_-

Here you go DEMO
You had to adjust setTimeout so that it starts right after the first path is drawn.
setTimeout(function()
{
animateLine(logo_animated, "canvas2", "#1d1d1b",
path_trait_sup,1200,lepathanimated2);
},1200);
Good Luck

Detecting collisions between two moving objects

I've got a basic Space Invaders type game going, and I can't get it to recognise when the shot from the player hits the alien. (I'm only checking Alien2 atm, the one second from the left). Since they're both moving, I've decided the only way to check for collisions is with either a range-based if statement (with 2 top coordinates and one left coordinate), or directly comparing the positions along the Y axis with Jquery.
I'm using the range-based solution at the moment, but so far it hasn't worked (not sure why).
My code so far:
if (key == "87"/*&& document.getElementById('BarrelOne').id=='BarrelOne'*/){
var Invader2 = document.getElementById('Alien2');
var Shot1 = document.getElementById('ShortShot');
Shot1.style.webkitAnimationPlayState="running";
setTimeout(function(){
Shot1.style.webkitAnimationPlayState="paused";
}, 1200);
if(document.elementFromPoint(625.5, 265.5) == Shot1){
Invader2.style.visibility="hidden";
}
};
Jsfiddle:
http://jsfiddle.net/ZJxgT/2/

I did something similar, and i found that it was much easier to achieve using gameQuery.
to test for collisions:
var collided = $("#div1").collision("#div2");
you can see full working example here
EDIT
If you're having trouble check out the API. For example, to find out how to use collisions check this part of the API.
the collision works in the following way:
This method returns the list of elements collisioning with the selected one but only those that match with the filter given as parameter. It takes two optional arguments (their order is not important). The filter is a string filtering element used to detect collision, it should contain all the elements the function should search collision into. For example if you look for collision with element of the class ‘foo’ that may be contained in a group you will use the filter ".group,.foo".
So, write something like this:
$("#ShortShot").collision("#Alien2").hide();
// will return the alien if it collides with ShortShot
or, to hide them both:
if (($("#ShortShot").collision("#Alien2")).length) {
$("#ShortShot").remove();
$("#Alien2").remove();
}

Instead of losing hours reinventing the wheel, I would suggest to switch (if still possible, depending on your time deadline) to a real 2D game engine for Javascript, with easy collision detection.
Check as well: 2D Engines for Javascript

Little simulation of gravity in JS using canvas

So, I am trying to create a few circles and then I want them to fall down. Here is the code and demo: demo FireBug tells me that the method "move" is not defined for undefined objects, so something must be wrong when I want to create an array of obects. Correct my mistakes and take into consideration that I have just started learning object oriented programming in JS.

Instead of creating multiple events, create one event and loop in there:
setInterval(function(){
ctx.clearRect(0,0,1000,1000); //Clear the canvas here
for (i = 0;i<bubble.length;++i)
{
bubble[i].move();
bubble[i].redraw();
}
},32);
The problem was a scope problem.
The way you had written it i had the value of 10 in all events where they where executing.
Working fiddle: http://jsfiddle.net/some/fGChQ/16/
Your other problem is that you clear the canvas in your redraw... For every circle.

I've made a fork of this that addresses the looping issues, there also appears to have been a problem with the clearing of the canvas rectangle that was causing some interference

for (i = 0;i<bubble.length - 1; ++i)
{
console.log(bubble[i].y)
setInterval(function(){
bubble[i].move();
bubble[i].redraw();
},32);
}
bubble.length is 10, array is index 0-9. bubble[10] is undefined, so you can't call the method move on it.