var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var N=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),k=(a,n)=>{for(var t in n)o(a,t,{get:n[t],enumerable:!0})},l=(a,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of u(n))!f.call(a,s)&&s!==t&&o(a,s,{get:()=>n[s],enumerable:!(i=m(n,s))||i.enumerable});return a};var w=(a,n,t)=>(t=a!=null?d(g(a)):{},l(n||!a||!a.__esModule?o(t,"default",{value:a,enumerable:!0}):t,a)),y=a=>l(o({},"__esModule",{value:!0}),a);var c=N((x,r)=>{r.exports=_jsx_runtime});var b={};k(b,{default:()=>p});var e=w(c());function h(a){let n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"intro",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#intro",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Intro."]}),` `,(0,e.jsx)(n.p,{children:"In high school I was not bad at math, rather I was good at it. At that time, I was solving equations, but I had absolutely no idea how it could be applied in the real world. I was relying on memorization and I was given a set of rules with instructions that I need to follow, and that was it. It was satisfying when I got to solve equations, but it felt useless and meaningless, I wondered if I would ever need to use derivatives, vectors and unit circles in the future."}),` `,(0,e.jsx)(n.p,{children:"Later I got into a little bit of 2D game design and that was the turning point for me, the light bulb turned on. The connection to math was there and I had to relearn a lot of the concepts I got from school to solve problems like collision detection, simulating velocity and gravity."}),` `,(0,e.jsx)(n.p,{children:"This is the first article in a series about math for a front-end developer. Throughout these articles I will introduce a set of math concepts with particle examples, starting with some of the basic concepts and then move to advanced topics. Hopefully by the end of this series, we can develop an intuitive understanding of algebra and basic mathematics. So, let\u2019s jump in!"}),` `,(0,e.jsx)(n.p,{children:"Before we begin, it's important to note that the examples are made in react but do not worry if you don't know react. The concepts can be applied everywhere."}),` `,(0,e.jsx)(n.p,{children:"The progress bar is just an indicator that something is happening, It gives you a visual representation of where you are, how far you\u2019ve come and how close you are to the end. It makes the experience of waiting less boring and frustrating."}),` `,(0,e.jsx)(n.p,{children:"HTML5 provides us with a classic nice horizontal progress element. But in this article, we are going to go over how to create our own funny personalized paw steps progress bar which I hope can trick your brain by giving the illusion of the progress bar moving quickly."}),` `,(0,e.jsx)(n.p,{children:"First go grab a paw"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paw.png",alt:"cat paw"})}),` `,(0,e.jsx)(n.p,{children:"Let's create a container element where you want to display the progress bar. But while we\u2019re at it let\u2019s also get the responsiveness out of the way. To do this we have to make the container keep its aspect ratio when resized. But what the hell is this aspect ratio and how to create one?"}),` `,(0,e.jsxs)(n.h3,{id:"aspect-ratio",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#aspect-ratio",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Aspect ratio"]}),` `,(0,e.jsx)(n.p,{children:"As responsive design is becoming more and more essential every day for any digital business, the aspect ratio is now more important to the developer than it has ever been."}),` `,(0,e.jsx)(n.p,{children:"Have you ever noticed the black bars displayed in the top and the bottom of your screen. That is an aspect ratio. From a mathematical point of view, the aspect ratio is typically the width of an element in relation to its height. The reason you end up seeing the back bars on your screen is that many films and shows are made in wider ratios than your screen supports. When we say a 16 by 9 ratio (which is commonly written as 16:9) we basically mean the element is 16 units wide and 9 units high. The element will always appear wide no matter how large or small it is. Or rather, a perfect square is denoted by a 1:1 ratio meaning that the width and the height should always stay equal."}),` `,(0,e.jsxs)(n.p,{children:["The most obvious solution so far for maintaining the aspect ratio of an element in CSS is the ",(0,e.jsx)(n.strong,{children:"padding"})," hack. Specifying the ",(0,e.jsx)(n.strong,{children:"padding"})," a percent, it\u2019s gonna be based on the element\u2019s width. The following means that the height is always going to be ",(0,e.jsx)(n.strong,{children:"50%"})," of the width."]}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".wrapper"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"padding-top"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"50"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"width"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"We want the container element to both keep an aspect ratio and to have a height that is as high as the total height of two paws:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/container-element.png",alt:"cat paw"})}),` `,(0,e.jsx)(n.p,{children:"I think before we do this though, we have to refresh our minds about percentages:"}),` `,(0,e.jsxs)(n.h3,{id:"percentages",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#percentages",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Percentages"]}),` `,(0,e.jsx)(n.p,{children:"Percentages are one of the common calculations in our everyday life. We think in percentages and we use them a lot. Like how much tax you pay when you buy something, how much something costs when it\u2019s on sale.. And we also use them a lot in our coding. Things like how much available space the modal takes, how much Javascript code is used in this repository and how far we translate the menu when it gets opened."}),` `,(0,e.jsxs)(n.p,{children:["I am assuming you already have studied fractions and I am sure we all have, because percentages represent a fraction of a ",(0,e.jsx)(n.strong,{children:"100"}),", meaning that they always have ",(0,e.jsx)(n.strong,{children:"100"})," as the denominator. For example ",(0,e.jsx)("h6",{style:{backgroundColor:"#fe4a49",display:"inline",color:"#fff"},children:"10%"})," is ",(0,e.jsx)("h6",{style:{backgroundColor:"#fe4a49",display:"inline",color:"#fff"},children:"10"})," / ",(0,e.jsx)("h6",{style:{backgroundColor:"#2ab7ca",display:"inline",color:"#fff"},children:"100"})," and it literally means how much out of a ",(0,e.jsx)("h6",{style:{backgroundColor:"#2ab7ca",display:"inline",color:"#fff"},children:"100"})," the ",(0,e.jsx)("h6",{style:{backgroundColor:"#fe4a49",display:"inline",color:"#fff"},children:"10"})," is. A percent is not really a value by itself, it only indicates a value when applied to another value. And since the bottom number of a percent is always a ",(0,e.jsx)("strong",{children:"100"})," we use this handy little symbol known as the percent sign ",(0,e.jsx)("h6",{style:{backgroundColor:"#fed766 ",display:"inline",color:"#000"},children:"%"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Originally I have my paws in ",(0,e.jsx)(n.strong,{children:"60x60"}),", So in order to determine the height of our container element we first need to know how much out of the ",(0,e.jsx)(n.strong,{children:"container width"})," the ",(0,e.jsx)(n.strong,{children:"60 pixels"})," is. This might bring up the question why the ",(0,e.jsx)(n.strong,{children:"container width"}),"? The reason is because we are using the padding hack for the aspect ratio."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Divide ",(0,e.jsx)("strong",{children:"60"})," by the container width(",(0,e.jsx)("strong",{children:"cw"}),"):"]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"60 / cw"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["And then multiply the result by a ",(0,e.jsx)("strong",{children:"100"})," to get the percentage:"]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"60 / cw * 100"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Now we know what percent of ",(0,e.jsx)("strong",{children:"100"})," is ",(0,e.jsx)("strong",{children:"60"}),`. So the container height going to be:`]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"60 / cw * 100 * 2"})}),` `,(0,e.jsxs)(n.p,{children:["Giving that the container\u2019s parent element at a certain screen size is ",(0,e.jsx)(n.strong,{children:"1350px"}),", the result of the above formula would be exactly ",(0,e.jsx)("span",{style:{fontWeight:"bold",color:"#f37736"},children:"8.88%"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Set the result we got to the CSS ",(0,e.jsx)(n.strong,{children:"padding-top"})," property:"]}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:"position"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," relative",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:"padding-top"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"8.88"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:"margin-bottom"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token unit",children:"rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:"border"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token unit",children:"px"})," solid",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"And now try it out:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/padding-top.gif",alt:"padding-top"})}),` `,(0,e.jsx)(n.p,{children:"Awesome! We ended up with a nice super extra wide element that maintains its aspect ratio when the screen resized."}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsx)(n.p,{children:`Typically, calculating the aspect ratio is measured by dividing the width by the height:`})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"width / height"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["And since the container element's height is"," ",` `,(0,e.jsx)("span",{style:{fontWeight:700,color:"#f37934"},children:"8.88%"}),` of the width( `,(0,e.jsx)("span",{style:{fontWeight:700,color:"#54acd2"},children:"w"}),"):"]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{style:{fontWeight:700,color:"rgb(84, 172, 210)"},children:"w"}),(0,e.jsx)("span",{children:"\xA0/"}),(0,e.jsx)("span",{style:{fontWeight:700,color:"rgb(84, 172, 210)"},children:"w"}),(0,e.jsx)("span",{children:"\xA0* "}),(0,e.jsx)("span",{style:{color:"rgb(243, 121, 52)"},children:"8.88"}),(0,e.jsx)("span",{children:"%"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["the width (",(0,e.jsx)("span",{style:{fontWeight:700,color:"#54acd2"},children:"w"}),`) cancel out:`]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{style:{fontWeight:700,color:"#a1a1a1"},children:(0,e.jsx)("s",{children:"w"})}),(0,e.jsx)("span",{children:"\xA0/"}),(0,e.jsx)("span",{style:{fontWeight:700,color:"#a1a1a1"},children:(0,e.jsx)("s",{children:"w"})}),(0,e.jsx)("span",{children:"\xA0* "}),(0,e.jsx)("span",{style:{color:"rgb(243, 121, 52)"},children:"8.88"}),(0,e.jsx)("span",{children:"%"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Simplify:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"1"}),(0,e.jsx)("span",{children:"\xA0/"}),(0,e.jsx)("span",{style:{color:"rgb(243, 121, 52)"},children:" 8.88"}),(0,e.jsx)("span",{children:"%"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Divide 1 by the fraction form of"," ",` `,(0,e.jsx)("span",{style:{fontWeight:700,color:"#f37934"},children:"8.88%"}),":"]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:["1 / (",(0,e.jsx)("span",{style:{color:"#f37934"},children:"8.88 "}),"/ 100)"]})})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Simplify again:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:["1 * 100 / ",(0,e.jsx)("span",{style:{color:"#f37934"},children:"8.88 "})]})})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"The result is:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"11.26"})}),` `,(0,e.jsxs)(n.p,{children:["And remember that aspect ratios are written as a formula of ",(0,e.jsx)(n.em,{children:"width"})," to ",(0,e.jsx)(n.em,{children:"height"})," (",(0,e.jsx)(n.em,{children:"width"}),":",(0,e.jsx)(n.em,{children:"height"}),"), So the following is our aspect ratio for the container element"]}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"11.26:1"})}),` `,(0,e.jsxs)(n.p,{children:["Next up lets create a horizontal row of paws that are equidistant from each other by some distance. But before we do this though we have to convert the paws dimensions from obsolete units to percentages relative to the container element. I think we have just figured out the paw width when we calculated the container height. So similarly let\u2019s figure out what percent of the container height is ",(0,e.jsx)(n.strong,{children:"60"})," pixels."]}),` `,(0,e.jsxs)(n.p,{children:["Well, since we want two paws in the height, it's obvious that the paw height is gonna be ",(0,e.jsx)(n.strong,{children:"50%"}),". But let's prove this mathematically using the aspect ratio."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Divide ",(0,e.jsx)("strong",{children:"60"})," by the container height(ch):"]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"60 / ch"})}),` `,(0,e.jsx)(n.p,{children:"Note that the container height is determined by the aspect ratio. So how are we gonna be able to find the height in pixels?"}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsx)(n.p,{children:"It\u2019s quite easy! Let\u2019s write the definition of the ratio:"})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"ratio = width / height"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"solve for the height:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"height = width / ratio"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:[`And since we got the ratio for the container is already defined and giving that the width is `,(0,e.jsx)("span",{style:{fontWeight:700},children:"1350px"}),` at a certain screen size:`]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"height = 1350 / 11.26"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["And the height for ",(0,e.jsx)("span",{style:{fontWeight:700},children:"1350-pixel"}),`-wide element:`]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)(n.p,{children:"ch = 119.89"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"And then the paw's height is:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"ph = (60 / ch) * 100"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Simplify:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"ph = 50%"})}),` `,(0,e.jsx)(n.p,{children:"And then let\u2019s save the result of each one as predefined variables:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"PAW_HEIGHT"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"50"}),(0,e.jsx)(n.span,{className:"token operator",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"PAW_WIDTH"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"4.44"}),(0,e.jsx)(n.span,{className:"token operator",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"That will result in a perfect square that fits any screen size."}),` `,(0,e.jsxs)(n.p,{children:["Create a function, name it ",(0,e.jsx)(n.code,{children:"generatePaws"})," or anything, and then let it expect a width and height props;"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// utils/generatePaws.js"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"generatePaws"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," height ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Take a moment and think how many paws should we end up seeing in the progress bar? Take your time\u2026"}),` `,(0,e.jsxs)(n.p,{children:["Well, we don\u2019t want to guess that right? But we want math to do this for us instead. So if we just divide ",(0,e.jsx)(n.strong,{children:"100"})," by the width of the paw which I think we figured out earlier, we would get how many paws are going to fit horizontally in the progress bar:"]}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"100 / 4.44"})}),` `,(0,e.jsx)(n.p,{children:"Rounding up this fraction, will result in 22 paws:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," amount ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"round"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"100"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsxs)(n.p,{children:["Make the ",(0,e.jsx)(n.strong,{children:"generatePaws"})," function Iterate a loop for the given ",(0,e.jsx)(n.strong,{children:"amount"})," number of times. And for each Iteration, return an object with an ",(0,e.jsx)(n.strong,{children:"x"})," and ",(0,e.jsx)(n.strong,{children:"y"})," properties and add it to an array. ",(0,e.jsx)(n.strong,{children:"x"})," represents stepping forward along the ",(0,e.jsx)(n.strong,{children:"x"})," axes while ",(0,e.jsx)(n.strong,{children:"y"})," is just how far those paws are from the top:"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// utils/generatePaws.js"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token function",children:"generatePaws"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," height ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," amount ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"round"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"100"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token keyword module",children:"from"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"amount",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"forEach"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:["_",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," n"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," curr ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," x",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"y"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," y",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"rotate"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"90"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" paws",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"push"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"curr",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.p,{children:["Cool! We have just created the paws generator function. Go ahead and start generating paws by executing the function and attach each generated paw item\u2019s ",(0,e.jsx)(n.strong,{children:"x"})," and ",(0,e.jsx)(n.strong,{children:"y"})," values to the paw icon. You can do that!"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// progressbar.js"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"generatePaw"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'utils/generatePaws'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paws ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"generatePaws"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"width"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"4.44"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"height"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"50"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Cool! Now the result looks like this:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step0.png",alt:"cat paw"})}),` `,(0,e.jsxs)(n.p,{children:["Paws are perfectly displayed in a horizontal line but there is no spacing between them. So let's add some spacing. Here I think it\u2019s fine to guess. Let\u2019s go with ",(0,e.jsx)(n.strong,{children:"0.55%"})," for the spacing and add it to the number we are diving by, which is ",(0,e.jsx)(n.strong,{children:"4.44"}),":"]}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:"100 / (4.44 + 0.55)"})}),` `,(0,e.jsx)(n.p,{children:"the amount would look like this:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," amount ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"round"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"100"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"width ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," spacing",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"And we end up with following result:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step1.png",alt:"cat paw"})}),` `,(0,e.jsxs)(n.p,{children:["Next, we want it to look like a cute kitty is walking from left of the screen to the right leaving its adorable little paw prints behind. To do this we only need to rotate each single paw by ",(0,e.jsx)(n.strong,{children:"90"})," degrees."]}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/diff1.png",alt:"diff"})}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step2.png",alt:"cat paw"})}),` `,(0,e.jsx)(n.p,{children:"Cool! But these paw steps don\u2019t look like they are made by a four legged kitty. But rather they look like they are made by a one legged creature with cat-like paw jumping in a straight line."}),` `,(0,e.jsx)(n.p,{children:"I think a checker pattern would be great to more realistically simulate a walking four-legged cat's paw steps. As you see in the picture below, for all the black boxes we can replace them by a paw. Lets do that."}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/checker-pattern.png",alt:"cat paw"})}),` `,(0,e.jsx)(n.p,{children:"We can do this by saying, if the current paw\u2019s index is even, move it vertically by its height."}),` `,(0,e.jsxs)(n.p,{children:["To get this working we need a couple things, the paw height which I think is available, and a way to determine if the current paw\u2019s index is even or odd. For this one, I think we are going to need something called ",(0,e.jsx)(n.strong,{children:"The remainder operator"}),"."]}),` `,(0,e.jsxs)(n.h3,{id:"the-remainder-operator",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#the-remainder-operator",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"The Remainder operator(%):"]}),` `,(0,e.jsxs)(n.p,{children:["In math, the remainder is when a number can\u2019t be divided equally into a set of groups and we have something leftover. Like if you want to distribute ",(0,e.jsx)(n.strong,{children:"11"})," kitties amongst ",(0,e.jsx)(n.strong,{children:"5"})," kids, each kid could have ",(0,e.jsx)(n.strong,{children:"2"})," kitties but there would be one leftover because ",(0,e.jsx)(n.strong,{children:"11"})," does not evenly divide by ",(0,e.jsx)(n.strong,{children:"5"}),". It leaves us with a remainder of ",(0,e.jsx)(n.strong,{children:"1"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Essentially this gives us the ability to limit the range of a number ",(0,e.jsx)(n.strong,{children:"x"})," from ",(0,e.jsx)(n.strong,{children:"0"})," up to a number ",(0,e.jsx)(n.strong,{children:"y"}),": (",(0,e.jsx)(n.strong,{children:"x % y"}),"). For example if we want to get the remainder of the fraction ",(0,e.jsx)(n.strong,{children:"n/3"})," (",(0,e.jsx)(n.strong,{children:"n % 3"}),"), it would give us a value only between ",(0,e.jsx)(n.strong,{children:"0"})," and ",(0,e.jsx)(n.strong,{children:"2"})," for any number ",(0,e.jsx)(n.strong,{children:"n"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["In our case we only want a number between ",(0,e.jsx)(n.strong,{children:"0"})," and ",(0,e.jsx)(n.strong,{children:"1"}),". As you might have guessed we would use ",(0,e.jsx)(n.strong,{children:"n % 2"}),". Using this I can determine which paw is the right and which one is the left paw."]}),` `,(0,e.jsxs)(n.p,{children:["Inside the forEach\u2019s callback function create a new ",(0,e.jsx)(n.strong,{children:"const"})," name it ",(0,e.jsx)(n.em,{children:(0,e.jsx)(n.strong,{children:"isRightPaw"})})," and assign it the value of the remainder ",(0,e.jsx)(n.strong,{children:"n % 2"}),". And if the remainder is ",(0,e.jsx)(n.strong,{children:"1"})," set the ",(0,e.jsx)(n.strong,{children:"y"})," value to the paw's height and if it's ",(0,e.jsx)(n.strong,{children:"0"})," set ",(0,e.jsx)(n.strong,{children:"y"})," to ",(0,e.jsx)(n.strong,{children:"0"}),"."]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," isRightPaw ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"%"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," isRightPaw ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," size ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"And we are going to end up with the following nice result:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step3.png",alt:"cat paw"})}),` `,(0,e.jsxs)(n.p,{children:["So far so good! But this looks like it's too machine perfect. We want it to look less like a perfect checker pattern because this almost sucks the life out of our paw steps progress bar. As you can see, each paw comes right in front of the next paw horizontally in the exact same distance. Now let\u2019s try to randomize the distance between paws along the ",(0,e.jsx)(n.strong,{children:"x"})," axes to make it look less determined and get it to be not so robotic."]}),` `,(0,e.jsxs)(n.p,{children:["So Instead of making paws step forward by exactly ",(0,e.jsx)(n.strong,{children:"0.55%"})," from each other, we can say we want the distance to take any random number between a ",(0,e.jsx)(n.strong,{children:"min"})," and a ",(0,e.jsx)(n.strong,{children:"max"}),"."]}),` `,(0,e.jsx)(n.p,{children:"As we go about front-end development, we often find it useful to generate random numbers. Lucky for us, JavaScript already has an awesome method that does just that. It generates random numbers! Yaay!"}),` `,(0,e.jsxs)(n.h3,{id:"mathrandom",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#mathrandom",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Math.random"]}),` `,(0,e.jsxs)(n.p,{children:["This method returns a random floating point between ",(0,e.jsx)(n.strong,{children:"0"})," and ",(0,e.jsx)(n.strong,{children:"1"}),". It can include ",(0,e.jsx)(n.strong,{children:"0"})," but it\u2019s always less than one."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Here is the mathematical representation:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{children:"\u2264 random "}),(0,e.jsx)("span",{children:"<1 "})]}),` `,(0,e.jsxs)(n.p,{children:["This method only gives us a range between ",(0,e.jsx)(n.strong,{children:"0"})," and ",(0,e.jsx)(n.strong,{children:"1"}),". But we want more than that. Well realistically, we want a random value between ",(0,e.jsx)(n.strong,{children:"0.35%"})," and somewhere around ",(0,e.jsx)(n.strong,{children:"0.65%"}),"."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["So our goal formula is a value"," ",` `,(0,e.jsx)("span",{style:{fontWeight:"bold",color:"#aa16e5"},children:"r"})," between"," ",` `,(0,e.jsx)("span",{style:{fontWeight:"bold"},children:"0"})," and"," ",` `,(0,e.jsx)("span",{style:{fontWeight:"bold"},children:"1"}),` which is exactly what we get from the random function:`]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{children:"\u2264 "}),(0,e.jsx)("span",{style:{fontWeight:700,color:"#aa16e5"},children:"r"}),(0,e.jsx)("span",{children:"\xA0< 1 "})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["And let a number ",(0,e.jsx)("span",{style:{fontWeight:700,color:"#ef1313"},children:"n"})," ",` greater than `,(0,e.jsx)("span",{style:{fontWeight:"bold"},children:"0.35"})," and less than"," ",` `,(0,e.jsx)("span",{style:{fontWeight:"bold"},children:"0.65"}),` which is the range we are aiming for:`]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0.35 "}),(0,e.jsx)("span",{children:"\u2264 "}),(0,e.jsx)("span",{style:{fontWeight:700,color:"#ef1313"},children:"n"}),(0,e.jsx)("span",{children:"\xA0< 0.65 "})]}),` `,(0,e.jsxs)(n.p,{children:["Now let\u2019s write a formula for ",(0,e.jsx)("span",{style:{fontWeight:700,color:"#aa16e5"},children:"r"})," in terms of ",(0,e.jsx)("span",{style:{fontWeight:700,color:"#ef1313"},children:"n"}),"."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:[`Remember when solving this type of compound inequality, we have to work on all parts at the same time. So let\u2019s start by subtracting`," ",` `,(0,e.jsx)("span",{style:{color:"rgb(97, 189, 109)",fontWeight:500},children:"0.35"})," ",` everywhere:`]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0.35\xA0"}),(0,e.jsx)("span",{style:{color:"rgb(97, 189, 109)"},children:"- 0.35"}),(0,e.jsx)("span",{children:"\xA0\u2264"}),(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:" n\xA0"}),(0,e.jsx)("span",{style:{color:"rgb(97, 189, 109)"},children:"- 0.35"}),(0,e.jsx)("span",{children:"\xA0< 0.65\xA0"}),(0,e.jsx)("span",{style:{color:"rgb(97, 189, 109)"},children:"- 0.35"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Simplify:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0\xA0\u2264"}),(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"\xA0 n "}),(0,e.jsx)("span",{children:"- 0.35\xA0"}),(0,e.jsx)("span",{children:"\xA0< 0.3\xA0"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["And then divide by"," ",` `,(0,e.jsx)("span",{style:{color:"#fe8c13",fontWeight:700},children:"0.3"}),` to make sure we get `,(0,e.jsx)("span",{style:{fontWeight:700},children:"0"})," at the far left side and"," ",` `,(0,e.jsx)("span",{style:{fontWeight:700},children:"1"}),` at the far right side so we can resemble our goal formula:`]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{style:{color:"#fe8c13"},children:"/ 0.3"}),(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:["\xA0\u2264 (",(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"}),` - 0.35)`," "]})}),(0,e.jsx)("span",{style:{color:"#fe8c13"},children:"/ 0.3"}),(0,e.jsx)("span",{children:"\xA0< 0.3 "}),(0,e.jsx)("span",{style:{color:"#fe8c13"},children:"/ 0.3"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Simplify again:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:["\xA0\u2264 (",(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"}),` - 0.35) / 0.3`," "]})}),(0,e.jsx)("span",{children:"\xA0< 1 "})]}),` `,(0,e.jsxs)(n.p,{children:["Nice! Now we have the formula for ",(0,e.jsx)("span",{style:{color:"#aa16e5",fontWeight:700},children:"r"})," in terms of ",(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"}),"."]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Now, let's set ",(0,e.jsx)("span",{style:{color:"#aa16e5",fontWeight:700},children:"r"}),` to equal the solution since they both belong to the same range:`]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:[(0,e.jsx)("span",{style:{color:"#aa16e5",fontWeight:700},children:"r"}),` = ( `,(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"})," - 0.35) / 0.3"]})})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Solve for ",(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"}),":"]})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:[(0,e.jsx)("span",{style:{color:"#ef1313",fontWeight:700},children:"n"}),` = ( `,(0,e.jsx)("span",{style:{color:"#aa16e5",fontWeight:700},children:"r"})," * 0.3) + 0.35"]})})}),` `,(0,e.jsx)(n.p,{children:"And when converting this result to code we get this:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.3"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.35"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsxs)(n.p,{children:["Awesome, now if we multiply this result by the index ",(0,e.jsx)(n.strong,{children:"n"}),", and assign it to the constant ",(0,e.jsx)(n.strong,{children:"x"}),":"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"MIN_SPACING"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.35"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"MAX_SPACING"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.65"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," n ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"width ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"MIN_SIZE"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token constant",children:"MAX_SIZE"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"MIN_SIZE"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"We will see the paws are randomly stepping forward:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step4.png",alt:"randomize paws x axes"})}),` `,(0,e.jsxs)(n.p,{children:["I know! Paws are colliding and that is a problem. Because with the logic we wrote, it\u2019s possible for the paws to collide. But before we resolve this, first let's do the same for the ",(0,e.jsx)(n.strong,{children:"y"})," value to randomize along the ",(0,e.jsx)(n.strong,{children:"y"})," axes. To make it even more realistic, we can allow all paws\u2019 ",(0,e.jsx)(n.strong,{children:"y"})," values to collide meaning that one paw can appear partially in front of the previous paw:"]}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step5.png",alt:"randomize paws x axes"})}),` `,(0,e.jsxs)(n.p,{children:["But we can\u2019t do this if we have a container with a height equal to the paw\u2019s height times ",(0,e.jsx)(n.strong,{children:"2"}),". Meaning that it only has room for two paws vertically. To solve this, we have to increase the container\u2019s height just enough to let paws randomly move apart from each other and get close to each other. let\u2019s illustrate this:"]}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step6.png",alt:"randomize paws x axes"})}),` `,(0,e.jsxs)(n.p,{children:["As you can see, we have increased the height by ",(0,e.jsx)(n.strong,{children:"half the height"})," of the paw. Which is the distance how far two paws can vertically collide."]}),` `,(0,e.jsxs)(n.p,{children:["Well before we calculate the paws' new ",(0,e.jsx)(n.strong,{children:"y"})," value, we need to do two things first:"]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"recalculate the container height."}),` `,(0,e.jsx)(n.li,{children:"recalculate the paws height."}),` `]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"Let\u2019s find out the container height:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)("span",{children:(0,e.jsxs)(n.p,{children:["h = ((60 / cw) * 100) * ",(0,e.jsx)("strong",{children:"2.5"})]})})}),` `,(0,e.jsxs)(n.p,{children:["Update the container's ",(0,e.jsx)(n.strong,{children:"padding-top"})," with the result of the new height:"]}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsx)(n.code,{className:"language-css code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:"padding-top"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"11.11"}),(0,e.jsx)(n.span,{className:"token unit",children:"%"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"Similar to how we do it before, let's recalculate the new paw height:"}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"aspect ratio:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("div",{children:"ph = 1 * 100 / 11.11"}),(0,e.jsx)("div",{children:"ph = 9"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"container height:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("div",{children:"ch = 1350 / 9"}),(0,e.jsx)("div",{children:"ch = 150"})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"paw height:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("div",{children:"ph = (60 / 150) * 100"}),(0,e.jsx)("div",{children:"ph = 40"})]}),` `,(0,e.jsxs)(n.p,{children:["Now since we got both the container height and paw height both recalculated let's resume our discussion about the new paw's ",(0,e.jsx)(n.strong,{children:"y"})," value:"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"y"})," value of the left paw, which is the one outlined with light blue, should be a random number between ",(0,e.jsx)(n.strong,{children:"0"})," as a minimum and the ",(0,e.jsx)(n.strong,{children:"half of the paw\u2019s height"})," as a maximum."]}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"y"})," value of the right paw which is the one outlined in light green should be a random number between the ",(0,e.jsx)(n.strong,{children:"original center"})," or ",(0,e.jsx)(n.strong,{children:"paw height"})," as a minimum, and ",(0,e.jsx)(n.strong,{children:"the paw height plus half the size"})," or ",(0,e.jsx)(n.strong,{children:"100 minus the paw height"})," as a maximum."]}),` `]}),` `,(0,e.jsx)(n.p,{children:"Let\u2019s see how it\u2019s done in code. But first, let\u2019s see the mathematical representation for both left and right paws:"}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{children:"\u2264 y1 "}),(0,e.jsx)("span",{children:"< height / 2"})]}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"height "}),(0,e.jsx)("span",{children:"\u2264 y2 "}),(0,e.jsx)("span",{children:"< height + height / 2 "})]}),` `,(0,e.jsx)(n.p,{children:"Similar to how we did it back when we horizontally randomized the spacing between paws, let\u2019s do it again and write two formulas:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:["A formula for a number ",(0,e.jsx)(n.strong,{children:"r"})," less than ",(0,e.jsx)(n.strong,{children:"1"})," and greater than ",(0,e.jsx)(n.strong,{children:"0"})," in terms of ",(0,e.jsx)(n.strong,{children:"y1"}),"."]}),` `,(0,e.jsxs)(n.li,{children:["A formula for a number ",(0,e.jsx)(n.strong,{children:"r"})," less than ",(0,e.jsx)(n.strong,{children:"1"})," and greater than ",(0,e.jsx)(n.strong,{children:"0"})," in terms of ",(0,e.jsx)(n.strong,{children:"y2"}),"."]}),` `]}),` `,(0,e.jsxs)(n.p,{children:["And if you solve for both ",(0,e.jsx)(n.strong,{children:"y1"})," and ",(0,e.jsx)(n.strong,{children:"y2"}),", you would end up with something like the following code:"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y1 ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"height ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y2 ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"height ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," height",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Combining them together we get one expression for every paw:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"height ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"isRightPaw ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," height ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"We get this result:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step7.png",alt:"randomize paws y axes"})}),` `,(0,e.jsx)(n.p,{children:"Now it's time to prevent paws from colliding. One easy way to achieve this is by saying if the displacement between the previous paw\u2019s y and the current paw\u2019y is less than the height of the paw, horizontally move the current paw right in front of the previous paw."}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," prev ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," n ",(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," paws",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"n ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword null nil",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// previous paw"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," collided ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" prev ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"abs"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"y ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," prev",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"y"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"<"})," height ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.3"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"abs"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"prev",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"x"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," width",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:">"})," x",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["And then change the definition of ",(0,e.jsx)(n.strong,{children:"x"})," to the following and you will never see them collide again:"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," curr ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"x"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," collided ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," prev",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"x"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," width ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," x ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step8.png",alt:"fix collision"})}),` `,(0,e.jsx)(n.p,{children:"Prefect! Now they look a lot more realistic. But it\u2019s still up to you about how far you want to randomize it. And if you want it to just look like a perfect checker pattern it would look pretty fine as well."}),` `,(0,e.jsx)(n.p,{children:"Now let\u2019s work on paws rotations. I am not an expert with the anatomy of cats but I believe if you look closer at a cat\u2019s leg we should find a joint point between the leg and the foot. Which is the ankle area. This ankle I guess allows the foot to tilt to the side a bit and also turn inwards and outwards. Which means it\u2019s possible for cats to produce random rotations on the level of the paw while walking. So far all the paws\u2019 x axes are perfectly aligned, meaning there is no rotation. Let\u2019s make them rotate."}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["We already have the paw angle initially increased by ",(0,e.jsx)("strong",{children:"90"})," ",` degrees. Now we can say let the paw randomly take any angle between`," ",` `,(0,e.jsx)("strong",{children:"-25"})," and ",(0,e.jsx)("strong",{children:"25"})," degrees. Which is a range of"," ",` `,(0,e.jsx)("strong",{children:"50"})," degrees in total:"]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"-25 "}),(0,e.jsx)("span",{children:"\u2264 a "}),(0,e.jsx)("span",{children:"< 25 "})]}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsxs)(n.p,{children:["Again writing a formula for a number ",(0,e.jsx)("strong",{children:"r"})," which represents"," ",` `,(0,e.jsx)("strong",{children:"Math.random()"})," in terms of ",(0,e.jsx)("strong",{children:"a"}),":"]})}),` `,(0,e.jsxs)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:[(0,e.jsx)("span",{children:"0 "}),(0,e.jsx)("span",{children:"\u2264 (a + 25) / 50 "}),(0,e.jsx)("span",{children:"< 1 "})]}),` `,(0,e.jsx)(n.p,{children:"And then turn it to JavaScript code:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," angle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"25"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," rorate ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"angle ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," angle",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"And finally adding the initial degrees:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," rotate ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"random"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"degree ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," degree ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," initialDegree",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"And here we we go:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/paws-step9.png",alt:"fix collision"})}),` `,(0,e.jsx)(n.p,{children:"It looks great! Isn\u2019t it?"}),` `,(0,e.jsxs)(n.h3,{id:"progress",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#progress",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Progress"]}),` `,(0,e.jsxs)(n.p,{children:["I think that is it for displaying the paws. Now we are going to make each individual paw contribute in showing an overall percentage across the width. Technically we should calculate the difference between the completion percentage and the paw\u2019s ",(0,e.jsx)(n.strong,{children:"x"})," values. And if a paw\u2019s ",(0,e.jsx)(n.strong,{children:"x"})," value happens to be less than the completion percentage, we fill that paw with its color."]}),` `,(0,e.jsx)(n.p,{children:"But before we do that though I want to mention that the paw is in SVG and for the moment I am only rendering them as a solid stroke as you have seen through the previous examples."}),` `,(0,e.jsxs)(n.p,{children:["Now we might say if the difference is greater than ",(0,e.jsx)(n.strong,{children:"0"})," fill the paw:"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," diff ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," completionPercentage ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," paw",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"x"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),`path `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" stroke",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"color",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" fill",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"diff ",(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," color",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" d",(0,e.jsx)(n.span,{className:"token operator",children:"="}),"\u201D",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"\u201D"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/progress1.gif",alt:"progress"})}),` `,(0,e.jsx)(n.p,{children:"That is neat! But some people might want to be more accurate with percentages and they might want to enable the ability to partially fill the paw. Doing this involves doing couple more things:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Duplicate the paw path and make the new one as a clip path."}),` `,(0,e.jsxs)(n.li,{children:["Add a rectangle inside the paw svg file and make the width increase from ",(0,e.jsx)(n.strong,{children:"0"})," to ",(0,e.jsx)(n.strong,{children:"100%"})," and clip it according to the clip path."]}),` `]}),` `,(0,e.jsx)(n.p,{children:"Clip Path definition from MDN:"}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn."}),` `]}),` `,(0,e.jsx)(n.p,{children:"In our case this means that the parts of the rectangle inside the shape are visible. And anything else is not. And that is exactly what we need for partially filling the paw. Great!"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/clip-path.gif",alt:"clip-path"})}),` `,(0,e.jsxs)(n.p,{children:["As you see in the GIF above, the embedded rectangle in the white paw on the right is not ",(0,e.jsx)(n.strong,{children:"clipped"})," while the orange rectangle on the left is actually ",(0,e.jsx)(n.strong,{children:"clipped"}),"."]}),` `,(0,e.jsx)(n.p,{children:"How are we going to determine the percentage we need to give for each paw?"}),` `,(0,e.jsx)(n.p,{children:"First, we should be aware that the percentage is based on the element\u2019s parent. Meaning that percentage of the rectangle\u2019s width is going to be measured relative to the containing svg. So we need to figure out how much is the diff out of the paw width."}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:(0,e.jsx)(n.p,{children:"To get the percent, we just divide the diff by paw width:"})}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)(n.p,{children:"diff / width"})}),` `,(0,e.jsx)("p",{style:{margin:"0 auto 0"},children:"And then multiply the result by a 100:"}),` `,(0,e.jsx)("p",{style:{color:"#4f4f4f",backgroundColor:"#f1f1f1",fontFamily:"Menlo, Monaco, 'Courier New', monospace",fontWeight:400,fontSize:15,lineHeight:"25px",whiteSpace:"pre",padding:"0 10px",borderLeft:"3px solid"},children:(0,e.jsx)(n.p,{children:"diff / width * 100"})}),` `,(0,e.jsx)(n.p,{children:"We get this result:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Icon"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," percentage ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"diff ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"PAW_WIDTH"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"g clipPath",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"awesome-clip"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),`rect `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" fill",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"color",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" style",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"width"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"percentage",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"%"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"g",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["But wait, since the diff represents the difference between a paw\u2019s x value and the completion percentage, it could be a huge relative number. For instance if we are measuring the difference of the first paw and the completion percentage of a ",(0,e.jsx)(n.strong,{children:"100"}),", then the difference is going to be almost the full width of the progress bar. And mathematically, this is totally valid and there is no restriction and percentages may take on other values."]}),` `,(0,e.jsxs)(n.p,{children:["But values greater than ",(0,e.jsx)(n.strong,{children:"100"})," and less than ",(0,e.jsx)(n.strong,{children:"0"})," don\u2019t suit our needs, for this we can set boundaries to our result percentage using Javascript\u2019s ",(0,e.jsx)(n.strong,{children:"Math.max()"})," and ",(0,e.jsx)(n.strong,{children:"Math.min()"}),":"]}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsx)(n.code,{className:"language-js code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," percentage ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"min"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"max"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"diff ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"PAW_WIDTH"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"Cool! Let\u2019s see how things are looking now:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/progress2.gif",alt:"progress"})}),` `,(0,e.jsx)(n.p,{children:"As you might have noticed, partially filled paws are looking weird! And that is because the paw is rotated and it\u2019s obvious that the child rectangle would inherit the rotation transformation. And to prevent this, we have to apply the reverse transformation to the child rectangle:"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Icon"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," rotate ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"g clipPath",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"awesome-clip"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),`rect `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" fill",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"color",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" style",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"transform"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"rotate("}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"rotate ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"}),(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"deg)"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"g",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"svg",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"With that, we should now see the rectangles are vertically aligned along the cross axis:"}),` `,(0,e.jsx)("div",{className:"Image__Small",children:(0,e.jsx)("img",{src:"/assets/posts/2020-06-03-math-can-be-fun-for-frontend-developers-part1/images/progress3.gif",alt:"progress"})}),` `,(0,e.jsx)(n.p,{children:"Finally, the final source code for the progress bar should look like this:"}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://github.com/obytes/pawsteps-progressbar",children:"https://github.com/obytes/pawsteps-progressbar"})}),` `,(0,e.jsx)(n.p,{children:"Enjoy! And see you next time."})]})}function p(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return y(b);})(); ;return Component;

Adel Dafrallah

Articles by Adel Dafrallah

We partner with founders to build Beautiful, scalable and successful products.