I've been struggling the whole day trying to figure our how to resize image and compute proportions. I've mostly failed!
To describe my problem, sorry! But I can't find any words... So here's this fiddle:
http://jsfiddle.net/Saturnix/TkPX5/
As you can see there's an image with a couch and a sheep (if you don't: try resizing the browser window).
Now, keep resizing your browser window: you should see both the sheep and the couch get resized. I just want the damn sheep to stay on the couch, in a fixed position, like if it was hardcoded in the couch image. No matter the window dimension, the sheep must stay on the couch.
No, I cannot use Photoshop and paste the sheep over it.
In the final project, instead of the couch I will have an interface and the sheep will be a knob or a button.
If you want to try yourself, scroll the javascript until you get to the bottom where you'll see a "TODO" comment.
There are two lines of code which change the sheep position: every other parameter you need to compute those are already in the code above (or at least I hope so!). I just miss the formula.
I've been able to resize the sheep dynamically and proportional to the couch: how can I do the same with its position? I've tried !EVERYTHING! but nothings seems to work :'(
Thank you very much in advance!
edit: seems like the fiddle link was wrong. Fixed!
Rather than setting x and y to a fixed value, you need to adjust them relative to the new height and width of the the image.
x = masterX + (50 * w / imm1.width);
y = masterY + (235 * h / imm1.height);
http://jsfiddle.net/TkPX5/12/
Related
So, as the question says I need to resize the canvas according to screen size. However the thing is that that's not it. I also need to have the mouse coordinates updated proportionally. Seems like I made a fatal mistake of not considering screen sizes from the start since this is my first proper game. I made the game on basis of my 1080p screen. Things like positioning stuff and checking mouse coordinates are all based on a 1920x1080 canvas. Please help!
Github links:
Main game, will work but size will depend on your screen: https://proqbr.github.io/powerdown/
all the files(only 15MB in case you'd like to see by downloading): https://github.com/proqbr/powerdown
sketch.js (pretty much main file regarding this): https://github.com/proqbr/powerdown/blob/master/sketch.js
Main thing is in sketch.js, On lines 260-263 are some createCanvas lines in function setup(), the uncommented one is createCanvas(1920,1080); as it's what i was working with. And on lines 302-314 are a bunch of camera.zoom lines, uncommented one is camera.zoom = 1; since on my screen there was no required zoom for the main menu.
Line 352 onwards is some code on knowing where the player clicked, the problem is this. I do know how to make the canvas's contents look properly resized on all screens by using windowWidth & windowHeight however it's the incorrect mouse coordinates which causes the problem. It would be great if someone could help.
In case there's some problem with the game on your side, here's a quick second video how the game menu works, although it's pretty straightforward anyways: https://youtu.be/eZZw5CmOXEE
I figured it out myself. For some values like when testing if mouseX >= 720 I had to edit it to mouseX >= 785*windowWidth/1920.
For one translate that I had used, translate(95,525), I had to modify it a little more and this was the one that properly worked translate(displayWidth/2-865*(windowWidth)/1920,displayHeight/2-15*(windowHeight)/1080);
As for screen resizing this worked fine:
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
if(windowHeight > windowWidth){
factor = windowHeight;
factdiv = 1080;
}else{
factor = windowWidth;
factdiv = 1920;
}
}
I had to mess around with these to figure out a decent solution
canvas dimensions i.e. 1920, 1080
windowWidth, windowHeight
and also displayWidth, displayHeight
I have also updated the same in the repository so you can see the final outcome from here: https://proqbr.github.io/powerdown/
I'm building a BMI (Body Mass Index) Calculator and everything works fine but now I want to add an image with a pointer on it indicating the result of BMI.
My problem is that I don't know what formula to use in order to calculate where the pointer will fall and to position the pointer correctly on image.
So if the result is 21.5 I want the pointer to be somewhere where the 21.5 will be on the image.
Please see the image attached to see exactly what I want to achieve
thank you
Seeing how I myself am very new to javascript and I'm not really sure how you image is constructed (if it's all a big box or several lesser boxes), I'll just give you my point of view.
Assuming you have four seperate boxes and we take the green one as an example.
If the box range is from 20 to 25 BMI then I would approach it as followed
MaxBMI - MinBMI = Range (in the case 20 and 25, Range is 5)
then take your current BMI (in this case 21.5)
CurBMI - MinBMI = DistanceFromMin (in this case Distance is 1.5)
Then simply take (lengthOfBox / Range) * DistanceFromMin and you know the position of the arrow.
If this didn't answer your question at all I hope you can specify the problem a bit better.
(This was really my first answer ever on StackOverflow :P)
How about using percentages?
lets say your image is 200px, have a bmi of 20 at left/margin-left:20% of your 200px image?
If you can provide more details on you iomplementation with a link of some code I can be more clear with the answer
http://d.pr/i/U5bb/4n26fLZr
Here's an example of a chart of ours. Pretty unreadable, yea? Is there an easy, dynamic way avoid this? I've tried implementing a dynamic height, but the problem is I can never seem to find the sweet spot that accommodates a smaller number of bars, and a larger number of bars. I feel like this has to be a problem that others have encountered before. Any help would be appreciated!
I accomplish this by doing the following:
1) determine height of non-data elements on the chart (ie, explicitly set the top and bottom margins, and add them together to get a base_height for the chart
2) determine how much space I want each bar to take, including bar width, and padding between bars, and set as my height_multiplier (I usually end up going for 20-25 pixels, personally)
3) on pulling my data, determine how many bars will be needed, and set as my bar_count
4) calculate: chart_height = base_height + (bar_count * height_multiplier)
5) Pass that value to the html to set the height of the chart's containing element.
If your data will vary so much that the chart height in your example works some times, but then you have as many data points as you've posted there, there simply will not be a 'sweet spot' that will handle both extremes well.
Following is the url to my website
http://projectilepixels.com/beta/
I need the space shuttle to appear "naturally positioned" i.e slightly below the grass at all resolutions above 786 x 1024. However as the grass image as it's width set to 100%, the height is dynamic. Thus the bottom value for the shuttle would also be dynamic. I had initially tried using a simple css % value but that didn't help.
My current attempt uses JavaScript. Following is the code
<script>
$(document).ready(function() {
var grass = $( '#grass' );
var grassHeight = grass.outerHeight() - grass.outerHeight()/100 * 74;
$( '#shuttle_1' ).css("bottom",grassHeight);
});
</script>
The initial script just used
var grassHeight = grass.outerHeight();
however it ended up really messed up.
So, as a temp fix I added the mathematics's that calculates 74% (a solution I didn't really want to use as it uses magic numbers), it seemed to work "fine" on Mozilla at 786 x 1024, however I tested it on chrome at a slightly higher resolution (Can't remember it right now, will check the specific resolution and edit this part soon). I'm new to JavaScript and am under as to what would be the best practice to solve this problem across all browsers and resolutions
Would really appreciate if someone guided me around this problem. I'm open to using css,Javascript as well as jquery.
i would have deffently use $.position in here,
$("#Grass").position({
of: $(shuttle),
my: "top center",
at: "bottom center"
});
that will locate the the grass top line of the grass (its center), below the center of the bottom line on the shuttle
Why dont you develop a few constant values that can be applied to the actual rendered values of the grass image to adjust the placement. Something like:
Lets say the grass image is 500px x 237px but the height of the grass is only 158px – If we want the shuttle to sit right at the crown of the grass, it needs to be offset from the bottom of the screen by 158px – 158 divided by 237 works out (almost magically) to .66667
Since this is a fixed ratio, we can use .66667 to calculate the offset from the bottom of the screen for any size grass image, as long as we know the dimensions of the grass image by multiplying the height and .6667
$(function(){
var OFFSET = .66667; //this value is our shuttle adjustment constant
$( '#shuttle_1' ).css("bottom",($('#grass').height() * OFFSET)); //sets the bottom offset of the shuttle
$( '#shuttle_1' ).css("left",(($('#grass').width()/2)-($( '#shuttle_1' ).width()/2))); //centers the shuttle
});
Here is a JSfiddle demonstrating it.
Can anyone explain or point me to an example where the "z" in translate3d (webkit transform) is being used? I have successfully used translate3d(x,y,0) to get hardware accelerated 2D animations on mobile Safari, but now I’m trying to scale using the z parameter, but it does not seem to have any effect...
elem.style.WebkitTransform = 'translate3d(100px,0,0)'; // this works as expected
elem.style.WebkitTransform = 'translate3d(0,0,100)'; // nothing happens
elem.style.WebkitTransform = 'translate3d(0,0,100px)'; // nothing happens
elem.style.WebkitTransform = 'scale(1.2, 1.2)'; // works but slow on ios
Sidenote: I’m trying to build a small zoom script that works smoothly on ios.
I made this for you to show how webkit transform 3D works:
http://jsbin.com/iderag
I hope it help you. I'm guessing you don't have -webkit-perspective in your body or parent tag.
Remember to set the -webkit-perspective on the containing box. 800 is a good starting value. If the box disappears, reduce it, it's probably bigger than the viewport.
The Surfin' Safari blog has an article from when 3d transforms were first invented:
-webkit-perspective is used to give an illusion of depth; it
determines how things change size based on their z-offset from the z=0
plane. You can think of it as though you’re looking at the page from a
distance p away. Objects on the z=0 plane appear in their normal size.
Something at a z offset of p/2 (halfway between the viewer and the z=0
plane) will look twice as big, and something at a z offset of -p will
look half as big. Thus, large values give a little foreshortening
effect, and small values lots of foreshortening. Values between 500px
and 1000px give a reasonable-looking result for most content.
More here: http://www.webkit.org/blog/386/3d-transforms/