Math Is Fun Forum

Okay, it all seems to work out as expected...
Thanks Bob, for point me in the right direction!

here you can find a working demo, which still needs some work done as I encountered a several different problems, but I'm pretty pleased with the result thusfar. Simply move the slider and see the CSS trigonomtry and linear math at work.

To web developers: All movement, sizing and scaling is done in CSS only without the use of Media Queries.

The (pseudo) code summary:
Original CSS Trigonometry in CSS by stereokai on Github.

   angle = slider value; /* the only action handled by Javascript */
   rad    = angle * 0.01745329251; /* angle x Pi / 180 */
   
   /* Sine function representation => Math.sin(angle) */
   s-term0 = rad;
   s-term1 = (-1 / 6) * rad * rad * rad;
   s-term2 = ( 1 / 120) * rad * rad * rad * rad * rad;
   s-term3 = (-1 / 5040) * rad * rad * rad * rad * rad * rad * rad;
   s-term4 = ( 1 / 362880) * rad * rad * rad * rad * rad * rad * rad * rad * rad;
   s-term5 = (-1 / 39916800) * rad * rad * rad * rad * rad * rad * rad * rad * rad * rad * rad;

   sin = s-term0 + s-term1 + s-term2 + s-term3 + s-term4 + s-term5;

   offset = ribbon-width * sin - ribbon-height;

   rotate rectangle 'angle' degrees around pivot point => CSS transform: rotate();
   move pivot point to 'offset' => CSS top or bottom: offset;

Now, how fun is that?

Rene

Yep, point F' of GF'E'C' has to end up at line EC.

Now, to position some element in CSS with coordinates is massively counter intuitive. In fact, an element gets moved up/down/left/right by assigning a value to its top/bottom/left/right attributes. This differs from the usual local or world coordinates to position some graphic object.
Furthermore, the top/bottom/left/right attributes of an element are also used to define a size (next to width/height attributes), all depending on the elements' purpose.

While I would highly appreciate an example, unless you know how positioning works in CSS this could become quite messy.

Consider the following:

The large rectangle (browser window, ABCD) is 1920 wide, 1200 tall (my PC display)
And original rectangle (GFEC) is 300x50.

To position GFEC in the top/right corner its attributes would be:
- top: 0
- right: 0
- width: 300
- height: 50

Instead of  width: 300 and height: 50
I could have used left: 1620 (being 1920-300) and bottom: 1150 (1200-50).

This is all about CSS 'relative positioning' compared to math/2D/3D 'absolute positioning'.

So, yes please, unless you lack the proper CSS knowledge. I wouldn't want you to lose sleep over this....as you said, my math should work already...

Rene

Newton already? Go figure...

I went to read the docs you suggested, didn't you hear me scream??

Thanks for your help and insight thusfar, I'll report back in this post as soon I've got something useful to add. Although, I expect not being able to introduce Factorials into CSS, but who knows...

Laterzz!
Rene

Hi Bob, good to talk to you again! Been well over a year now. Time to do a little math again...

The point is that after rotation (around point G or the other rectangle around point J) most of the rectangle is out of view of the user.

To get it back in view again, it has to be moved down. As you can see from the demo page, in some cases I cut off the corner edges to make it appear tightly fit. The other cases give a more 'sticky tape' feel.

The distance to move down would be length of line a1 minus length of line e (from what I can determine). That way point F' ends up at the long horizontal line (browser window top edge) and point G 'glides' nicely downward along the vertical edge.

I could use trig functions (sqrt, power, sin,cos,tan) using Javascript without problem, but I don't want to. It's a mental 'trying to see how far I can stretch this' thing I have (and CSS vs Javascript coding). Using square root will be the hardest as it is an iterative process in any programming language. I have a solution for that, something I intend to pass you by after this issue.

So, basically the problem is: what is the distance to move down to get point F' on the top edge (and alternatively move point I' up to get it on the lower edge; same math, different signs, other rotation location. The same goes for rectangles on the left side of the screen).

Rene

On a side note: I use the point-slope form of y=mx+b => y = y1 + (y2 - y1) / (x2 - x1) * (x - x1) to calculate both width (line f (or FG)) and height (line e (or EF)) of the rectangle to scale it depending on the size of the browser window.

To understand an automation problem you need to ask many questions (the five Ws) before you can start coding anything. In my IT career I've come to 8:

w8b4udo (wait before you do) who-what-where-when-which-whos-with-why => how

By iterating over those questions, inevitably how to solve the problem will present itself. For IT problems this usually means  do some progamming.

Algorithms are a way to solve specific problems programmatically.

Thanks Bob, I will do that (as soon as I'm finished gloating and padding myself on the back).

But I think I will post a mini tutorial in the 'Coder's Corner', something like 'Why use algebra and trigonometry in CSS' referencing the above. This way I can safely link math to programming (less appropriate here in 'Help me!').

For now

is what I needed to get a good nights' sleep again!

Final Result, works in all (Windows) browsers (even IE11).

Final code (for IE11 to work properly, ribbon scale = 1.1):
top  : calc(((0.5vmin + 1.4rem) * 1.1) / 1.4142 * -1);
right: calc((((0.5vmin + 1.4rem) / 1.4142) + (2 * (5vmin + 10.25rem) * 0.38268343 * 0.38268343)) * 1.1 * -1);

In the mean time I'm considering this topic done and dealt with...

Rene

Hi Bob,

Before anything else, please confirm that the below image depicts your previous explanation before I dive into the math and translate this to something my programmer head comprehends...

As I draw these things with Photoshop, the center of AB = D is a bit by approximation (meant as center, though).
I also adjusted the text a bit '...line d' and 'd' were previously '...line b' and 'b'. Just to prevent confusion with the 'b' in r = mx+b, so you know.

LOL,

I have a habbit of yabbering a lot and saying zilch, sorry for that. Quite some piece of text, though?

- Rectangle(1) is there for reference only, to show the initial location of rectangle(2) before it is rotated 45 degrees. You can safely ignore rectangle(1).
- I did not want to use too much CSS-like syntax and as you asked for values the last time I posted a problem,  I tossed in a few I had calculated before.

However....

I think we have a programmer versus mathematician problem, we can read eachothers work, but don't fully speak the same language (I noticed that too during our previous conversation about scaling a text). After 40 years I am so used to thinking like a programmer it is hard not to, I'm sure you have something similar from a math perspective. Or...I am just a nincompoop (really wanted to use that word at least one time in my life!).

I constantly need to remind myself that you are probably not into CSS and therefore I have to translate 'code' to 'math' to explain my problem.

hm * x + hb depicts the height of a ribbon, hm and hb are just names of variables, not h*m and h*b (that's why programmers use names instead of letters only, and they do not automatically put/use a multiplification dot '.' between letters like mathematicians do).

wm * x + wb depicts the width of a ribbon, ditto

So....

x    - always given (in CSS: 1vmin, where 'vmin' is a variable unit, which depicts a percentage of the smaller of the current browser viewport width and height. Extra: vw, vh and vmax units depict a percentage of the current browsers' width, height and maximum of the two respectively. So, in this case 1% of the minimumValueOf(viewportWidth,viewportHeight) ).

hm - height m value of the ribbon (in the given example: 0.5)
hb  - height b value of the ribbon (= 22.4)
wm - width m value of the ribbon (= 5)
wb  - width b value of the ribbon (= 164)

In pseudo CSS...

The below code moves rectangle(2) up and right as shown in image 2 (actual webpage result. Will NOT run properly in Internet Explorer 11. Firefox, Edge and Chrome are okay).

ribbon-values {
    /*
        Need to be filled in by some programmer as per requirement.

        I created an open-source tool to get these values. Like the one in mathportal, but my version returns CSS code.
        responsive sizing tool 1.1
        Extended version (very WIP) with demos and explanation of the math. Yah, been quite busy this week...
        Resize the browser and you will see all kinds of sizing and scaling going on. All linear equations doing that, learned from 'MathIsFun', so, full credit to you guys!!
    */

    hm: 0.5;
    hb: 22.4;
    wm: 5;
    wb: 164;
    scale: 2.5;
    sqrt2: 1.4142;
}

ribbon {
    /* showing relevant variables only: */

    height: calc((hm * 1vmin + hb) * scale);
    width: calc((wm * 1vmin + wb) * scale);

    rotate(45deg);

    /* distance 1 */
    top: calc((hm * 1vmin + hb) / sqrt2 * scale);

    /* distance 2 + 3, equation I can't find */
    right: ?????

    /* currently used for distance 2 + 3, but not correct */
    right: calc((wm * 1vmin + wb) / sqrt2 * scale * 0.545)
}

Important to know: opposed to math in CSS location (0,0) is located at top/left instead of bottom/left. But that is usually a matter multiplying  the result with -1 (maybe ignore this for now).

As you can see from the actual webpage result I gave mathematically sizing, rotating, and shifting up rectangle(2) all work as expected. All I need now is to get the proper math for shifting it right as distance 2+3 ('right' in CSS) = '(wm * 1vmin + wb) / sqrt2 * scale * 0.545' is only a workaround for the lack thereof.

Maybe it has something to do with multiplying/dividing/converting degrees to radians after the 45deg rotation? I have no clue whatsoever.

Hopefully somewhat less dodgy, but please let me know if there's too much programming going on, in that case I will try my luck elsewhere, no biggy.

Rene

Still being pestered by this thing, ey? Me too.

When the font height is 1 pixel then the 'w' value is the total width of the line of text measured in pixels (in the given example rounded to 150px, virtually unreadable).

The number of characters remains 154 at any given font height.

Should the font size be 6px high, then my assumption is that the the total width of the text will be 6 * 150 = 900 pixels wide.
As it is 6px high, it consumes 6 rows of 1px high and 900px wide = 5400 pixels of the containing box.

Please keep in mind that the font width cannot be chosen or even altered and is font depended. Only the font height can be picked (dropbox in MSPaint, Photoshop, MS Office, browser, etc.).

Also, carefully note the fact that the values of the MSPaint 'W' you counted (20 high and 28 wide) are misleading as paint programs will only draw the actual pixels used for that character, not like a browser does. Here's a little test, select the next few characters and you will see that they all equal in height: WWWwww...xxxXXX,,,oooiiiIII. That's the height we are looking for.

Answering your question on MSPaint: I believe it does not wrap text, so if the font-size you select is to large, it simply gets clipped or runs off the right side of your image.

As said before, the character width can only be measured/determined/derived from the total width of the text in pixels
by using character count as divisor => total text width (in pixels) divided by character count = average character width in pixels (to be complete: at a given font size (= height) in pixels).

summary:
character height in px = required result, value for CSS 'font-size'.
total text width in px = measurable, will give total length of the text in pixels.
character count = measurable, will include any character including hard/soft line or word breaks or hyphens.
character width = not selectable, not given, not available and immutable and can only be derived by measuring and averaging.

A problem that lies ahead is the fact that the text automatically wraps given the word lengths and the width of the container it is put into.
Another problem is what to do when the width in pixels of a single word is wider than the width of the box.
And I purposely left out 'line-height' (by default 1.25 * 'font-size', but can be changed by developers as required, often changed to 1.3 or 1.5). Probably the value we actually need to use instead of 'font-size'.
Also left out 'word-spacing' and 'letter-spacing', good for a massive programmers' headache...

But those are to lie awake over later. First the initial math needs to be correct.

BTW: version 2.2 shows values and usage of the eqations you gave in post #11.

If you are up to it, you can open your browsers' developer tools (usually [F12]): select the 'inspector tab', look at the 'properties window' and select 'calculated'. It will show all the current values of the selected element you see on your screen. You can actually change values and see the effect, (not harmfull, when you mess up, just close and reopen the webpage you were on). Works on most webpages and gives much insight on how things are done.

UPDATE Or [right-click] on anything on a webpage and select 'inspect element', this will open the the developer tools 'inspector tab' with that specific webpage element pre-selected.

MAYBE ill-advised if you are not into web developement and have never seen the window, you may find yourself caught in a snake pit.

René

Going bananas, right? Well, check youtube for 'The Joy of Painting' with Bob Ross. This guy shows a simple painting technique for creating panoramas, currently also on Spike TV. Very popular back in the day. He never made mistakes, but had 'happy little accidents'. You don't have to like what he does, but his velvet voice is soooo soothing, after 2 episodes you will be more relaxed than you would be after a week of meditation.

Or asleep...