Skip Navigation

Menu

hero

Dear Ms. FEWD: Going in Circles

5/15/2018 | SARAH BRAUMILLER

Dear Ms. FEWD,

I’m in 7th grade. I always hear kids asking, “When am I ever going to use this math?!” and I’m guilty of the thought, too. When does an adult ever solve for x? Why do we need to know the formulas and equations for shapes? Can you give some good examples of what types of math are used in your job, please?

Thanks,

Going in Circles


Dear Circles,

As a kid, I had the same question, too. Am I ever really going to use this? Maybe not, but you never know. It’s good to take in what you can now, so you have a wide base of knowledge to prepare yourself. It’s another tool in your ever-growing arsenal. Even the basic principles of math apply to programming, in that there are formulas and sequential steps that have to be followed to get the correct result. I love math, and exhausted Kent State University’s math program by the time I was in my senior first semester in high school. Was it a waste of time? Not at all. I wouldn’t trade what I learned for a second. And, I use it all the time in my career! From the simple to the complex, there isn’t a day that goes by where I don’t use math.

For instance, developers use algebra when doing something as minor as resizing pictures. Let me give you an example. A designer hands you mock ups, but they’re in the smallest end of the viewports. However, we need the largest size image needed, because if you load a small image, it will blur in the larger viewports. But we need to find out what that largest size is, by solving for x.

In our hypothetical mobile mock, we have an image that goes 100% width of the browser, and measures 200px height by 320px width. The largest end of our mobile viewport might be 1024px. With this information, we know:

200px                  x

———     =     ———

320px             1024px

Now we can simplify the equation, and solve for x in order to get the largest height needed to reproduce the 200px h by 320px w ratio when in the smallest end of the viewport:

1,024px * 200px = 320px * x

204,800px = 320px x

1/320px * 204800px = 1/320px * 320px x

640px = x

So, we now know our image dimensions will have to be 640px h by 1024px w.

We also use geometry quite frequently. In fact, we had a client that asked for images to be animated, and spin slowly around a central circle. I’ve put the general idea in a jsfiddle, where different background colors are used, so you can easily parse out what’s happening. And, it’s been commented, so you know what’s doing what. You can play with the math and see how it works between both CSS and JS.