This is a copy paste of a post i made on the processing forum (where i haven't got an answer so far) thought i might as well try here.
Processing is a very cool way to draw stuff, specially for the webpages. Just as a reference http://processing.org
Hey, i'm new to processing, i'm using it to make a flashless website, so i'm pretty much drawing on a canvas.
I'm having a problem with the mouse position, although the coordinates, when drawing, consider the top left corner to be position 0,0; the actual mouse coordinates consider the 0,0 to be the top left corner of the browser window.
So my problem is this, the canvas is operating on a centered web-page, whenever the browser changes size, so does the coordinates of the mouse within the canvas.
Is there any way to make the coordinates of the mouse relative to the canvas? So that i can change the size of my browser window and the top left corner will be always 0,0 for the mouse coordinates?
So that's the problem, i dunno how many ppl here in stackoverflow are experienced with this, but i hope someone could help me :)
thanks to the stack overflow community in advance.
I'm not familiar with processing, but can't you just calculate the difference between the top left corner of the browser window and the top left corner of the canvas?
i.e. (using jquery)
$(window).onresize = function() {
//offset return position realive to the document.
var offset = $('#canvas').offset();
window.canvasLeft = offset.left;
window.canvasTop = offset.top;
}
Then you can do something like:
relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;
You should replace #canvas with a css selector for your canvas area.
Also note that window is the global object, I use it here to deal with possible scope problems.
Processing really isn't intended for creating webpages.. It's worse than Flash for sites (processing sketches being Java applets - Java being less common, far more resource-intensive and slow to load..)
That said, there is processing.js, a Javascript port of Processing.
The snake example accesses the mouse. Since it is Javascript, and the canvas is a div, the coordinates should be a bit more sane than Java (which lives in it's own VM world), but I could be wrong..
You can ask the user to calibrate the system, before use. It's not fully an answer to the question, but a sollution to the problem.
Just draw a red dot in the center of the screen, top left and bottem right. Ask the user to click on them, and retrieve the coordinates. Then, you know where the corners of the screen are.
Related
I found few incomplete threads regarding Perspective Transform using Three JS.
I was looking to have a rectangle with video texture on it, and each corner one after another will animate to fullscreen or in reverse. As each corner animates the texture should stretch. Something like this demo but in Three JS.
It will be great help if someone can point to an example, docs or resources to get this effect.
I have a general question (I know I should present specific code with a problem, but in my case the problem is of a more general nature).
In Processing, let's say I make an ellipse:
ellipse(30, 30, 10, 10);
Now, is there a way to get the pixels where this ellipse is on the canvas? The reason would be to have a way of creating user interaction with the mouse (for instance). So when someone clicks the mouse over the ellipse, something happens.
I thought of turning everything into objects and use a constructor to somehow store the position of the shape, but this is easier said than done, particularly for more complex shapes. And that is what I am interested in. It's one thing to calculate the position of an ellipse, but what about more complex shapes? Are there any libraries?
Check out the geomerative library. It has a way to check whether the mouse is inside any SVG shape. I can't remember off the top of my head but it works something like you make a shape:
myShape = RG.loadShape("shape.svg");
and a point:
RPoint p = new RPoint(mouseX, mouseY);
and the boolean function contains() will tell you if the point is inside the shape:
myShape.contains(p);
It's better to use a mathematical formula than pixel-by-pixel checking of the mouse position (it's much faster, and involves less code).
For a perfect circle, you can calculate the Euclidean distance using Pythagoras' theorem. Assume your circle is centred at position (circleX,circleY), and has a radius (not diameter) of circleR. You can check if the mouse is over the circle like this:
if(sq(mouseX-circleX)+sq(mouseY-circleY) <= sq(circleR)) {
// mouse is over circle
} else {
// mouse is not over circle
}
This approach basically imagines a right-angled triangle, where the hypotenuse (the longest side) runs from the centre of the circle to the mouse position. It uses Pythagoras' theorem to calculate the length of that hypotenuse, and if it's less than the circle's radius then the mouse is inside the circle. (It includes a slight optimisation though -- it's comparing squares to avoid doing a square root, as that can be comparatively slow.)
An alternative to my original mathematical answer also occurred to me. If you can afford the memory and processing power of drawing all your UI elements twice then you can get good results by using a secondary buffer.
The principle involves having an off-screen graphics buffer (e.g. using PGraphics). It must be exactly the same size as the main display, and have anti-aliasing disabled. Draw all your interactive UI elements (buttons etc.) to this buffer. However, instead of drawing them the normal way, give each one a unique colour which it uses for fill and stroke (don't add any text or images... just solid colours). For example, one button might be entirely red, and another entirely green. Any other RGB value works, as long as each item has a unique colour. Make sure the background has a unique colour too.
The user never sees that buffer, so don't draw it to the screen (unless you're debugging or something). When you want to detect what item the mouse is over, just lookup the mouse position on that off-screen buffer. Get the pixel colour at that location, and match it to the UI element.
After you've done all that, just go ahead and draw everything to the main display as normal.
It's worth noting that you can cut-down the processing time of this approach a lot if your UI elements never (or rarely) move. You only need to redraw the secondary buffer when something appears/disappears, animates, or changes size/position.
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.
I am a complete novice when coming to using Flash but I am looking to create an animation similar to the line into text animation at:
http://www.louisebradley.co.uk/fl/
where instead of running from the top of the screen I want the line to effectively stretch across my homepage horizontally.
I have created an animated gif that does the job but it takes a long time to stretch across 974 pixels in width, and if the frames are reduced it takes away any smoothing effect. I did this in photoshop by simply creating 20 or so frames, each increasing the size of the line by 60 pixels until the full page is covered.
Would I be better off creating the effect in Flash? And if so, where on earth do I start!! Would tweening do this, and how I would I implement it?
Thanks in advance for any help!
I am assuming you are talking about the line to the left of the main navigation? If this is the case, this is being done using a mask that is tweened. You can simply draw out the shape you want "wiped" across the screen and than on the layer above it, draw a box over the shape to be animated. Right click the layer the box is on and select "mask". You can now tween the mask to move from right to left over the shape you drew and it will appear to wipe over. Just remember, whatever the mask is currently over, is what will show through from the layer that is masked. Think of the mask as a window. This can be completely done without actionscript and only using the timeline.
I have a bunch of game elements being drawn to the screen with OpenGL-ES and I'd like to be able to render a small rectangle in the bottom corner of the screen that shows, say, what's presently being displayed in the top left quarter of the screen.
In that way it's similar to a picture-in-picture from a tv, only the smaller picture would be showing part of the same thing the bigger picture is showing.
I'm comfortable with scaling in OpenGL-ES, but what I don't know how to do is get the proper rectangle of renderbuffer data and use that chunk as the data for an inset frame buffer for the next render pass. I imagine there's some trick along these lines to do this efficiently.
I've tried re-rendering the game elements at a smaller scale for this inset window and it just seems horribly inefficient when the data is already elsewhere and just needs to be scaled down a bit.
I'm not sure I'm asking this clearly or in the right terms, So any and all illumination is welcome and appreciated - especially examples. Thank you!
Have a look at glCopyTexImage2D. It lets you copy a portion of the framebuffer into a texture. So the order of operation would be:
Draw your scene normally
Bind your picture-in-picture texture
glCopyTexImage2D
Draw a quad with that texture in the bottom corner