I am a teacher and I am trying to make a page for my students showing the comparative size of the planets and the stars, like in one of those videos that are popular in Youtube.
But I have not been able to solve the problem, the closest I got was using "if window.pageXOffset > 1000" animate width etc. but what I really wanted was for the planets and stars (images) to scroll into view at 100% height and then as the page scrolled towards the right, they´d shrink down till 0% when reaching the left border (left=0px), while the next and next planet scrolled into view (showing 3 or 4 at a time) and so forth. The page should allow the user to scroll back and forth at will.
I tried the transform: scale method but wasn´t successful either.
Any help will be greatly appreciated.
You were going the right direction with using transform: scale(), and I've taken that and run with it. See the following jsfiddle:
https://jsfiddle.net/2z4djt0o/5/
During a scroll event, we look at each planet and decide what its scale should be depending on where it is relative to the left and right edges of the scrolling viewport.
Related
I have a grid of buttons (3 by 3 for this example). When a button is clicked, it rotates 180 degrees. As it rotates towards 90 degrees, it increases in scale. Once it passes 90 degrees and rotates towards 180, it decreases back to it's original size.
Unfortunately, this is a 2D game so it seems that the layers are determined by the hierarchy, which is created in the order the buttons are spawned. This causes some ugly overlap issues when the tiles scale up, when I really just want whatever button is clicked to be brought to the front.
The common solution seems to be to set the sibling index, but that will not work in this case because the buttons are held in a canvas using a Grid Layout Group, and changing the sibling index causes the buttons to be reordered.
Add a canvas component to your button and use sortOrder to modify the rendering order of it.
I was thinking how to explain this. Better with a image:
http://www.foxandxss.net/stuff/progressBar.png
I want a progressBar with that gradient.
The first one is when the value is 100. The progress bar is full and it show the whole gradient.
But when the progressbar's value is 50, I get the second result. a 50% filled bar with the whole gradient.
What I want to archieve is the third one, when the bar's value is 50, the gradient has to be 50% also.
How can I archieve that? Opacity mask? (First guess but maybe I'm wrong).
Well, I appreciate some help. Thanks!
A quick way could be to have the entire gradient bar, like in image 1, and simply move the black bar across towards the right. This will give the illusion that the gradient bar is growing when really, it's just 'uncovering' the gradient bar.
On a side note, you should be careful with gradients as WP7 devices display a lot of banding. You could add dither to reduce the banding. I think I heard that the Mango update fixes this, but I'm not 100% sure on that.
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
I have two timelines in JavaFX that moves an image on the screen. One is in the onMouseEntered function to move the image left, and the other in the onMouseExited function to move the image back to the right. The keyframe has translateX starting at 0 and going to 10, and the other starts at 10 and goes to 0. The problem is that the two timelines don't move the image the same distance, so that if you activate it several times it starts creeping to the right. Is there something I'm missing here? How do I set up an animation so that it moves the same distance forward and backward?
Figured it out, the return trip should make translateX go to 0, not to -10
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.