wheelnav.js bouncing effect - javascript

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!

Related

Get the position of 3d objects in Facebook AR and changing them via script

I have a 3d object which i want to "move" from A to B via script. I am not too sure how to go about it; I don't understand the Facebook documents. Just a short example as a start would be great.
I assume something along the lines:
var object = Scene.root.find("object");
var lastPosX = object.transform.positionX.lastValue;
object.transform.positionX = //NOT SURE HOW TO PUT THE NEW POSITION
What you need to do is use the AnimationModule - here is a simple example of how to do that:
const Animation = require('Animation');
var obj = Scene.root.find("object");
//set up the length of the animations, 1000 = 1 second
var driver = Animation.timeDriver({durationMilliseconds: 1000});
//define the starting and ending values (start at 0, go to 100)
var sampler = Animation.samplers.linear(0, 100);
//create an animation signal to control the object x position
obj.transform.x = Animation.animate(driver, sampler);
//start the animation
driver.start();
Animation in ARS, like many other things, is based around the concept of "Reactive Programming" and working with "Signals" which are values that change over time. It is essential to get a good grasp of what a signal is and how it works to write useful code in ARS. Read through this for an introductory overview: https://developers.facebook.com/docs/ar-studio/scripting/basics
The above is a very basic example, but there is much more interesting, advanced, and complex effects that you can achieve using the AnimationModule, take a look at the documentation here for more information: https://developers.facebook.com/docs/ar-studio/reference/classes/animationmodule/
Hope this helps!

Phaser Weapon plugin, set the kill_DISTANCE

I'm using the phaser weapon plugin, and i've set the kill type to kill_distance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
But, it is automatically set to 2, which doesn't really allow it to travel very far. I'm wondering how i can set it to a larger number
thanks in advance
You can just set the bulletKillDistance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
weapon.bulletKillDistance = 50;
This strikes me as an oversight in the documentation.
Update
This has been updated in the documentation source, and should be updated online once there's a release/deployment.
[static] KILL_DISTANCE : integer
A bulletKillType constant that automatically kills the bullets after they
exceed the bulletDistance from their original firing position.
Unfortunately, I tried searching in documents, but I could not find "bulletDistance". For example, if you use KILL_LIFESPAN, you can change bulletLifespan variable, but there are no "bulletDistance" in document. This is either not implemented or they forgot it in the docs. Try this and it may/may not work.

Simple Collision Detection in Javascript / Jquery?

I am working on a portion of a project that I am trying to detect when certain divs hit each other. In the code that I made, that doesn't work, I basically say take the first div's left amount, compare it to the other div's left amount, if they are within a certain amount it triggers an alert. If I get that much to work I am going to implant a way to say that if the distance between the two divs is 0 then it will run a certain function. I am afraid the scope of this project is too big for me, even though I am basically at the last part, because I have spent hours researching a simple way to add collision detection, but everything I find looks like rocket science to me, that is why I tried to create my own way below. So in summary, what I want to know is why my collision detection code doesn't work, how I can make it work if possible, and if not possible what is the next best option that I should use.
//Collision
function collision(){
var tri = $('#triangle');
var enemyPos = $('.object1').css('left');
var minHit = enemyPos - 32.5;
var maxHit = enemyPos + 32.5;
var triLoc = tri.css('left');
if(triLoc > minHit && triLoc < maxHit){
alert('hit');
}
}
collision();
}
}
full code: https://jsfiddle.net/kc59vzpy/
If the code you have above is definitely where the problem is, then you need to look at the enemyPos variable. Getting the left position also adds px, so enemyPos is 100px or something like that. When you add 32.5, you get 100px32.5 and when you subtract you get NaN, neither of which you want.
Before you add or subtract, use enemyPos = parseInt($('.object1').css('left')); to turn it into an actual number.

SnapSVG: scale transform executing error-free but with no noticeable effect

I'm quite new to both Snap & svg, trying to get savvy. I have an external SVG file that I'm loading as a fragment, then appending to a paper object. Then I want to scale the entire paper object.
The following code executes; the external file loads, the shadow is applied, it is visibly appended to the paper object. The transform, however, doesn't do anything. As far as I can tell, I've replicated the same essential effect as seen in this tutorial. Unfortunately, the official documentation, at least to me, is more or less useless due to it's ambiguity-via-concision appraoch. Anyone?
var logo
$.ajax({
url:"img/logo.svg",
data: null,
complete: function(resp) {
logo = Snap.parse(resp.responseText);
logo = logo.selectAll("g");
var logoPaper = Snap(app.sl.svg.splash.logo.svg).append(logo);
logoPaper.select("#logo-full-mask")
.attr({filter:logoPaper.filter(Snap.filter.shadow(0,0,5, "rgba(0,0,0,.3)"))})
var t = Snap.matrix().scale(1.4);
var trans = logoPaper.transform(t.toTransformString());
}
});
Well after a little fooling around I solved this on my own, but since it wasn't clear to me that this answer would be obvious to anyone who, like me, was new, I chose to post it.
I was trying to scale the paper object itself, which doesn't work (or else works in some unintended way that wasn't useful). Instead, elements of the object needed to be scaled; for my case, the easiest thing to do was create a group of all my paths and scale that, so:
var t = Snap.matrix().scale(1.4);
logoPaper.group(logoPaper.selectAll("path")).transform(t);

Kineticjs: Random moving animation of images in canvas

How can I add a random moving animation to For loop images,
I have this code for image:
var imageSRCC = ["images/image1.png","images/image2.png","images/image3.png"];
function Images(i,x,y) {
var CreatImage = new Image();
Image= new Kinetic.Image({
x:x,
y:y,
image: CreatImage,
width: 100,
height: 200,
});
CreatImage.src = imageSRCC[i];
layer.add(Image);
}
for (var i =0; i <imageSRCC.length; i++) {
x: Math.floor(Math.random()*2 + 15)
y: Math.floor(Math.random()* 2 + 15)
Images(i,x,y)
}
and i want to do something like this:
http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#balls_with_simple_interactions
in above link you can see example scrolldown and you will see (Click “Run the example!” below to try out Example 5-7.)
.....
i will be very thankfull if any one can help me with it.
You haven't asked a very focused questions here. But looking at the book example, this is what I would suggest:
First, create a fiddle that runs the example provided in the book. This involves a bit more than just copy-pasting the code from the book. Doing so will help you to differentiate the HTML5 and Javascript elements of the sample application. JSFiddle, if you're not familiar with it, is a useful tool for demonstrating code here on StackOverflow and elsewhere.
Then, explore the Javascript code and make yourself understand with the different functions are doing. The ones you'll want to focus on in particular are the drawScreen, update, and render functions. What is the purpose of each of these functions?
Finally, where does KineticJS fit into this? KineticJS is a graphics library, so it's only use here is as a slightly more user-friendly replacement for the native HTML5 canvas code used in the example. Focus on the context object in the book code. Your goal is to replace this with KineticJS code.
Ideally, when you have worked through these steps, you will be able to provide a code snippet in answer to your own question. Have at it!

Categories