I'm actually working on a video conferencing project and I was wondering if there is any way to display 2 cursors at the same time based on mouses' position of the 2 guys talking to each other?
Basically, they gonna share the same screen, but I want one to be able to see the mouse pointer of the other one since they gonna work on common exercice.
Thanks for the help
Wouldn't it be easiest to have a div element with a custom mouse cursor that you move around in JavaScript by the coordinates received from the other user?
I think having two equal-looking cursors would just cause confusion.
Related
This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed 2 months ago.
although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I'm not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
It sounds like you're looking for instance mode.
Instance mode lets you do exactly what you're describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you're ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!
I want to create a small activity where user will be required to draw certain predefined shape using Javascript/Jquery.
But I am not able to figure out a way to validate what the user has drawn.
I will appreciate any help as to how to approach this problem. Thanks in advance.
Have you thought of the following jQuery commands: for .mousedown(), .mouseenter(), .mousemove(), .mouseup(), .mouseleave(), .mouseenter()? I assume that you will be monitoring the user's mouse movement especially the interaction between the mouse and a predefined space in the browser. Depending on that, you can place a listener that monitors their mouse movement from the user.
Hope this helps.
Thomas
I asked another version of this question on the gamedev.SE site earlier today but figured I could get better answers here. Also reformulated the question some. I hope this is okay couldn't find anything prohibiting it in the FAQ
I'm playing around with making a puzzle game, haven't done that much before I run into my first problem.
Question a) Basically, I want to create a certain amount of the same object/function (a ball). But the objects will be created dynamically (since the amount of balls could range from 3 to 25), preferably with a for loop pushing the different balls to an array.
However I'm not experienced enough to figure out a good way to do this.
Also, once I have my array of balls on the canvas, I want to be able to select one of the balls.
Question b) How do I know/determine which ball in the array was clicked?
Is a simple for loop enough and accessing the objects with [i]?
I made a jsFiddle example of what I want with 1 ball (you need to click the orange ball to select, then you can move it around by clicking anywhere on the canvas).
This is what I want to do, but with more balls, and the amount of balls is not specified (deciding the amount part i got covered). How could I solve this in a easy way?
Help appreciated.
Using a for loop is fine for your object generation.
As for detecting when you click an object in the canvas, this tutorial might help. It appears there is no built-in feature for tracking objects in your canvas - you simply do manual hit detection based on the common pixels under your mouse and object
Hope that helps
Paper.js has great DOM model, and out of the box ability to click and select items
http://paperjs.org/tutorials/project-items/transforming-items/
hit testing:
http://paperjs.org/examples/hit-testing/
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
my link: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html
I have a 3d cube using a variation of zachstronaut's demo
(link: http://www.zachstronaut.com/lab/galaxy-box/ ). It uses javascript, translate3d, scale3d, etc...
I've tried assigning different z-index values in the css file, but with no luck. I can access the objects outside the cube(you can see this with the hover effect), but not the objects inside the cube. I have a hunch it is because it's not doing a z-sort type of function like pre3d.js. I was wondering if anyone could offer some insight into where I should look for a solution.
Object coordinates are generated randomly, so you may have to refresh once or twice to get some objects that are inside the cube.
Thanks!
EDIT:
Only tested in safari and chrome dev
Webkit ignores z-indexes on anything that has translate3d defined, as it logically should. z-index is meant for a 2D world, it's like taking a bunch of paper and saying "this one is on top" -- you still have a flat surface. Unfortunately, if you want to be able to select one of the "stars" inside of your box, you're all but out of luck since you're using HTML nodes.
The normal way of doing this is using a click-map -- basically every object gets rendered twice. Once normally and once in a single color with no shading, etc. The 2nd rendering is never shown and is simply used to tell what the user clicked on. You get the color where they clicked and that color maps to a specific object. If you were using canvas, you would do it that way and just change the rendering order on the 2nd render.
Since you're using HTML nodes, you can't do that. You have a couple of options:
You can calculate which star is under the mouse on mouse-move based on viewport rotation and x/y/z position of the star
you can attempt the above method by overlaying an identical rendering without the cube and where the stars have a 0% opacity. Each star in your new rendering would map to a star in your existing one, and you'd have easy mouse-over detection.
Post the results! :)
First of all, I'm glad you found my demo interesting!
You're not going to have much luck trying to do a hover or capture a click event on objects inside of a 3D CSS3 cube for the exact same reason you wouldn't have much luck capturing a hover or click events on a div underneath another div... in HTML all the DOM events go to the top most DOM node. If one div overlaps another div, you can't click the one that is underneath. Everything inside the 3D cube is "underneath" another DOM node.
Things are further complicated because you're taking objects in 3D space and asking a user to interact with them on a 2D plane (the browser window) using a 2D input device (the mouse).
You could hide the faces of the cube so that they wouldn't block the user's clicks. You could do something like cwolves suggested.
Sorry I couldn't be more help... HTML kind of fails us a bit here. Welcome to the bleeding edge!