Perspective simulation (Z scroll) - scroll

I am looking for javascript library that is able to simulate perspective Z scroll.
I would like to create web that should be scrolled like walking throught hall.
Does anybody know some library?
Thanks.

Related

Is there to view simulink XY graph during the simulation?

I am trying to visualize the input I am getting from a joystick on a simple XY Graph in Simulink. I can display the values of the various axes easily using the Scope. However I want to display the X and Y values from the joystick as a dot moving around in real time on a graph or animation or whatever. If there is a better / easier way to do this, maybe with something else then Simulink, then please let me know.
Please check if the XY Graph block serves your purpose. You can see the documentation in the following link :
https://www.mathworks.com/help/simulink/ug/plot-circle-with-xy-graph.html
You can also refer the following if you could log the signals in Simulation Data Inspector:
https://www.mathworks.com/help/simulink/ug/visualize-simulation-data-on-an-xy-plot.html
All the best!

Joint for physical gun slider?

I want to make it so when I fire my gun the slider shoots back and then comes forward like a real gun. However I don't know how I should start because I can't find any relevant information on Google and I don't know what to search. All I need is the logic behind how to do it, I can code it myself.
I would agree with zambari.
Just create an animation and play it when your guns gets fired.
Edit:
Since you are talking about 3D, you could either
move the pivot of the object to the point where the trigger would be attached. This way, all you need to do is change the objects rotation for the animation.
use joints
This is the best tool for VR guns with interactable parts. I HIGHLY recommend looking at this to ANYONE making a VR game
https://github.com/Oyshoboy/weaponReloadVR

Three js + open layers + d3

I'm trying to create a globe where I can zoom, rotate, and interact with.
I need to highlight countries on hover and I have special locations with markers (like google maps). How can i achieve this ? Three JS, d3, open layers, Planetary.js. Any tips ?
I have a full working globe in Three JS only. But I need to map (x, y, z) coordinates to Lat/Lon pairs. You guys know what's the best way to approach this? Thanks.
I would advise d3.js as a framework to use your map.
Here is a page where you'll find a demo and code to use a zoom on a map :
http://bl.ocks.org/marcneuwirth/2865882
And here is a globe demo and code where you may select countries and so on :
http://bl.ocks.org/KoGor/5994804
I wouldn't use the other framework/libraries that you mentioned, not because that are worse but because I'm working usually on a virtual machine and no graphic card installed and that webgl is just a pain on such machines. d3.js is working smoothly compared to the other solutions.

Best low level canvas library for making interactive animations?

I'm evaluating canvas libraries, and my needs are:
I want to make it easy to build nice looking buttons that move
around and on which I can easily capture events. Button drawing
helpers would be cool
I'll be building a system for others to use to create animated
scenes combining moving test, images, and sound. I won't ever be
drawing complex shapes myself, the most I might be drawing is
buttons around some text.
I do not want to be totally insulated from the low level machinery
of the per-frame drawing callback. Helped along sure, but
I'm going to be syncing with Web Audio API stuff and want to keep
access to super tight timing control
I'm comfortable with pretty low level scripting of animation, would rather not have it be something that changes Canvas into some
totally different paradigm, but not sure on this point
needs to work well for touch on iOs
I'd ideally like to be using one with good docs and a high truck number. The state of Canvas libs reminds me of the state of JS libs
10 years ago, and I'd rather not invest in something that doesn't
have an actual "team" behind it. Truck number == 1 worries me.
You flagged KineticJS, so I can say a little bit about how that would work.
1) It's a great tool for tracking shapes on a canvas, capturing clicks, and moving them around. It's easy to place an image on any shape, but I would use another program to make those images.
2) Even if you don't do a lot beyond buttons, KineticJS provides some nice features for manipulating the canvas, and I'm sure you'd use a lot of them in making tools for others.
3) KineticJS provides an animation object that repeatedly calls the draw() method for you. You define your draw method in order to create animations.
4) It's more of a wrapper around canvas. You work with a Stage and Layers, but there is still a lot of transparency to the canvas itself, and you can always do direct manipulation as well.
5) You can capture a broad range of events including "touch", "click", etc. It's easy to treat them the same when appropriate or differently if you need to. Furthermore, you can simply mark shapes as "draggable" and it handles all that appropriately.
6) Kinetic has had spectacular documentation and examples, but in looking now, the tutorials seem to be missing from http://kineticjs.com/ and I can't find them elsewhere. That's minorly worrisome, but the docs are still there and my guess is that they'll be back up soon since KineticJS is still under active development.
I'll weigh in on #1:
Nice looking buttons:
Hands-down...use Adobe Illustrator to create a set of button vector images (.svg).
If you need low level control over the button design at run-time then convert the Illustrator images to canvas drawing commands with this great plugin from Mike Swanson:
http://blog.mikeswanson.com/post/29634279264/ai2canvas.
The key here is that canvas will scale the vector button for you so you're always getting a professional, polished look both on a small mobile screen and a large desktop screen.
You could use canvas to build each part of a button from scratch, but don't reinvent the wheel.
A good animation library is Greensock. It also helps you build timelines (kind of like Flash timelines).
http://www.greensock.com/gsap-js/
As to canvas libraries, check out Stackoverflow's sister site that offers software recommendations:
http://softwarerecs.stackexchange.com
Good luck with your project!

Drawing atop a scrollable, zoomable image in Qt

I'm sorry if my question is somewhat vague. It's been a few years since I did anything with Qt, and back then I never did any fancy image stuff. What I'm asking for below is just some general suggestions on which classes to consider using. I'm trying to avoid barking up the wrong tree from the very start.
The situation: I'm writing a Qt-based program in which I need to display a somewhat large (let's say 5000x5000) raster image. The user should be able to zoom (quickly) in and out, and pan around the image in a way similar to for example Google maps. So far, this is not very different from the Qt ImageViewer example, except perhaps for the requirement that zooming happens quickly. However, I need to draw on the order of 50k simple geometric shapes (let's say circles) on top of the image, and be able to add and remove some of these in a simple way. The circles should have the same size no matter the zoom level, and should thus either be redrawn whenever the user zooms, or should be drawn with vector graphics. Think of the circles as map annotations. These should look the same at any zoom level, and also behave nicely with respect to panning.
I guess my question is twofold:
Can Qt draw vector graphics on top of a raster image?
In general, which classes should I consider for the above?
Thanks in advance. I don't like answering vague questions myself, but maybe someone with experience with Qt's graphics capabilities has an answer.
I suggest you use QGraphicsView and friends for this. It helps handling all the view/world transformation and the vector items can be achieved with various QGraphicsItems.
You can change the sizes of the items whenever the zoom level changes to maintain constant apparent sizes.

Resources