Math Is Fun Forum

  Discussion about math, puzzles, games and fun.   Useful symbols: ÷ × ½ √ ∞ ≠ ≤ ≥ ≈ ⇒ ± ∈ Δ θ ∴ ∑ ∫ • π ƒ -¹ ² ³ °

You are not logged in.

#1 2020-02-13 03:08:16

renevanderlende
Member
From: The Netherlands
Registered: 2020-01-06
Posts: 39

using result of linear equation to find number of columns

Hi everyone,

This is not a request for coding help, but a genuine math problem used for:

Writing a tutorial for Codepen (non commercial CSS/HTML developers site) on using 'columns' in CSS.
It shows how to one can use "y = mx + b" to solve a variety of variable size, width and height problems,
saving time and amount of code.

I am using "y=mx+b" for points p1(320,80) and p2(1920,240) => y = 0.1x + 48, meaning:
at 320 we have column width 80 (4 columns)
at 1920 we have column width 240 (8 columns)

So, in this case "y = 0.1x + 48" yields a column width at any given screen width.

X-values 320 and 1920 are given
Y-values 80 and 240 were derived by dividing 320 and 1920 by 4 and 8 respectively.

Given result '0.1x + 48', how do I find the exact column width for 5, 6 and 7 columns
without drawing a xy-graph and find the answer visually (like with a little tool I created on
GeoGebra ERS linear equations (ERS - easy responsiveness series)

In CSS this would look something like:

   column-width: calc(0.1 * 100vw + 48px); /* 100vw = 100% of current viewport width */

Unfortunately in CSS it is not possible to substitute 'column-width' like:

   column-count: calc(column-width / some-equation);

And calc() only accepts +,-,*,/ as math operators


Thanks for your help!!

Last edited by renevanderlende (2020-02-13 03:29:34)

Offline

#2 2020-02-13 07:08:33

Bob
Administrator
Registered: 2010-06-20
Posts: 10,053

Re: using result of linear equation to find number of columns

hi renevanderlende

I've applied a little algebra.  You have y = 0.1x + 48 and also number of columns = x/y

Let's say you want 7 columns.

x/y = 7  =>    x = 7y

Replace x in the equation

y = 0.1 times 7y + 48 = 0.7y + 48  =>  0.3y = 48   => y = 48/0.3 = 480/3 = 160

So the column width is 160 and x = 7 x 160 = 1120

Test to see if this works

If x = 1120 then y = 0.1x + 48 = 112 + 48 = 160.  And the number of columns = x/y = 1120/160 = 7 as required.

Hope that's what you wanted.

Bob


Children are not defined by school ...........The Fonz
You cannot teach a man anything;  you can only help him find it within himself..........Galileo Galilei
Sometimes I deliberately make mistakes, just to test you!  …………….Bob smile

Offline

#3 2020-02-13 11:13:56

renevanderlende
Member
From: The Netherlands
Registered: 2020-01-06
Posts: 39

Re: using result of linear equation to find number of columns

Hi Bob,

Thanks a bunch! Nice clarification, now that I see the solution it seems so obvious. Been staring at the puzzle for hours, but no lightbulbs came on flashing.

In the mean time I added the line to my tool (new link, purple line) and noticed that for every 20x there is a 2y skip starting at (0,48) then (20,50), (40,52), (60,54) and so on. Knowing this, is there an alternate way to calculate 'column-count' and 'column-width' instead of '0.1x + 48'? (Yes, I genuinely  s u c k  at this!)

BTW x is always known (100vw, current browser width in pixels)

Arghh:  column-count = 100vw / (0.1 * 100vw + 48) = 8 for x=1920 => 1920 / (192 + 48) = 8

Sorry, never mind the above question, I am caught in a bit of cyclic reasoning....ing....ing....ing

Last edited by renevanderlende (2020-02-13 11:51:22)

Offline

Board footer

Powered by FluxBB