Calculate image dimensions (image renderer) and the math checks out but i'm really stuck on how to actually implement it in code...
The equation system:
I. 2x + y = 1287 (viewport width)
II. 4/3x - 3/4y = 0
How would you go about implementing this in code? Pointing me in the right direction is appreciated as well, indeed!
Thanks in advance, have a good day!
You need to treat the computer like a calculator. Because that's what it literally is, only more fancy.
Do exactly what you would do to solve the equations with a calculator. Do not use mental arithmetics to solve the equations.
Using a calculator, it is not possible to solve the equations as is. Because that's not how a calculator works. Instead, if you use a calculator you would need to rearrange the calculations so that you can input numbers into the calculator - again DO NOT CHEAT AND USE MENTAL ARITHMETICS.
So, the first equation gives us two functions (in the mathematical sense) that we can calculate with a calculator:
1a: x = (1287 - y) / 2
1b: y = 1287 - 2x
You now can literally treat the equations above as code depending on weather you have x or y as input:
function getX (y) {
return (1287 - y) / 2
}
function getY (x) {
return 1287 - (2 * x)
}
The second equation is a bit confusing. The width to height ratio of the portrait picture is 3:4 and the landscape picture is just rotated. What this means is that the ratio of the width of the landscape picture to the width of the portrait picture is also simply 4:3 (NOTE: At this point of writing this answer I didn't realise that your second equation describes a different layout which I explore below.. continue reading to get the functions you are looking for. However, I'll leave this part of the answer here because it illustrates how to convert mathematical equations into functions). This gives us:
2a: x = 3y/4
2b: y = 4x/3
Again giving us:
function getX (y) {
return y * 3 / 4
}
function getY (x) {
return x * 4 / 3
}
You mention:
one row of images would have 2 profile oriented images (and one landscape)
Presumably you want to display your images as follows:
┌─────┐ ┌─────┐
│ │ │ │ ┌───────┐
│ │ │ │ │ │
│ │ │ │ └───────┘
└─────┘ └─────┘
┌─────┐ ┌─────┐
│ │ ┌───────┐ │ │
│ │ │ │ │ │
│ │ └───────┘ │ │
└─────┘ └─────┘
or
┌─────┐ ┌─────┐ ┌───────┐
│ │ │ │ │ │
│ │ │ │ └───────┘
│ │ │ │
└─────┘ └─────┘
┌─────┐ ┌───────┐ ┌─────┐
│ │ │ │ │ │
│ │ └───────┘ │ │
│ │ │ │
└─────┘ └─────┘
The calculations for this is rather straightforward. If you are using a fixed-width display of 1287 pixels you don't even need a computer. You can simply solve this with pen and paper since the result will be constant:
x = (1287 - y) / 2
and
y = 4x / 3
Solving it by substituting for y:
x = (1287 - (4x / 3)) / 2
2x = 1287 - (4x / 3)
6x = 3861 - 4x
6x + 4x = 3861
10x = 3861
x = 386.1
Giving us:
y = 514.8
Double checking 514.8 + 386.1 + 386.1 = 1287. We can conveniently round the numbers to get nice integer pixel values: 386 + 386 + 515 = 1287.
So in your code you can simply write:
const x = 386;
const y = 515;
However, if you want the width to be variable then the first equation wouldn't have a fixed value of 1287. Instead you would write it as:
x = (viewport_width - y) / 2
Again, substituting for y gives us:
x = (viewport_width - (4x / 3)) / 2
2x = viewport_width - (4x / 3)
6x = (3 * viewport_width) - 4x
10x = viewport_width * 3
x = viewport_width * 3 / 10
Giving us two functions:
function portraitWidth (viewport_width) {
return viewport_width * 3 / 10;
}
function landscapeWidth (viewport_width) {
return portraitWidth(viewport_width) * 4 / 3; // y = 4x/3
}
Of course, you can easily rewrite the above to give rounded integer values:
function portraitWidth (viewport_width) {
let x = viewport_width * 3 / 10;
return Math.round(x);
}
function landscapeWidth (viewport_width) {
let y = portraitWidth(viewport_width) * 4 / 3;
return Math.round(y);
}
In hindsight, given how simple these functions turn out to be we probably should have derived them first before doing the fixed 1287 pixel calculations.
If however you intend to display your images as follows it gets a bit more complicated:
┌─────┐ ┌─────┐ ┌────────────┐
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
└─────┘ └─────┘ └────────────┘
┌─────┐ ┌────────────┐ ┌─────┐
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
└─────┘ └────────────┘ └─────┘
This makes the relationship in part 2 not quite as straightforward. The height of the profile picture is the same as the height of the landscape picture. We know the width to height ratio of the portrait picture is 3/4. But this means that the relationship between the width of the landscape and profile pictures is not as simple as 4:3.
Instead the relationship is a bit indirect. The height of the portrait picture is the same as the height of the landscape picture:
hx = hy
Given that x:hx = 3:4 and y:hy = 4:3 we get:
x = 3 * hx / 4
and
hy = 3 * y / 4
Substituting hx for hy because they are equal:
x = 3 * (3y / 4) / 4
4x = 9y / 4
x = 9 * y / 16
or
y = 16 * x / 9
Going back to the original equation for layout:
x = (viewport_width - y) / 2
Again, substituting for y gives us:
x = (viewport_width - (16x / 9)) / 2
2x = viewport_width - (16x / 9)
18x = (9 * viewport_width) - 16x
18x + 16x = viewport_width * 9
x = viewport_width * 9 / 34
This gives us the following functions:
function portraitWidth (viewport_width) {
return viewport_width * 9 / 34;
}
function landscapeWidth (viewport_width) {
return portraitWidth(viewport_width) * 16 / 9;
}
Double checking by plugging in 1287 we get:
x = 340.68
y = 605.65
If you round them and add them up you get: 606 + 341 + 341 = 1288. Off by one pixel but close enough for UI work. You can always reduce the width of the landscape by one pixel if the result is off by one pixel.
Note that by the time I finished writing my complete answer I didn't realise that the two functions above are an implementation of your second equation. If we plug in the two values for x and y above we will indeed satisfy your second equation. Thanks to @audzzy for pointing out that your second equation gives y:x ratio of 16:9:
(4/3) * 340.68 - (3/4) * 605.65 ≈ 0
this should do it:
let viewport = 1287;
let y = (8/17) * viewport;
let x = (viewport - y) / 2;
which would give you these values:
viewport = 1287,
x = 340.6764705882353,
y = 605.6470588235294
