A simple construction with plain Javascript and CSS can be seen
here. It is part of my push to make examples that have a few prerequisites. In this case, ES6 Javascript, CSS, and HTML. I make use of
divs as the main graphical elements. This chunk of code
function iterate(el){
[[1,1],[1,-1],[-1,1]].forEach(x=> {
let newEl = el.cloneNode();
newEl.style["transform"]=
`scale(0.5)
translate(${x[0]*el.offsetWidth/2}px,
${x[1]*el.offsetHeight/2}px)`;
el.appendChild(newEl);
});
}
adds three shifted elements, a quarter of the original's size. Each shift is relative to the center of the original, corresponding to all the corners excluding the upper-left corner, which would be the [-1,-1] .
After thee iterates, there are 27 equally small
divs as seen below and to the left. To get the more attractive triangles on the right, a class, called
half, transforms the appearance of the squares into triangles.
Essentially, the squares are 0x0
divs with a 100px border where as the triangles are divs with borders described in the CSS below
.half{ /* the bottom right half of a 0x0 div */
border-bottom:100px solid rgba(0,0,255,0.3);
border-right:100px solid rgba(0,0,255,0.3);
border-left:100px solid transparent;
border-top:100px solid transparent;
}
A further bit of CSS transforms the outer square into a rhombus which transforms the blue part into an equilateral triangle. The class rhomb below skews the shape putting the vertical lines into a 30 degree lines going to the right and squashes the vertical so that the length of the skewed vertical lines are the same as the horizontal lines. The shift (translate) puts bottom horizontal line approximately where the original was.
.rhomb {
transform:skew(30deg) scale(1,0.866) translate(-58px,0);
}
To further show off this
div construction of this pattern, a
Button is used to highlight how each
div sits in other
divs. The Button
<button onclick="show()">show divs</button>
On button presses, the
highlight class is either added or removed from special divs (div.
done).
function show(){ // toggles whether the borders are shown in iterations
let toggle = document.getElementsByClassName("highlight").length > 0;
Array.from(document.getElementsByClassName("done")).forEach(x=>{
if (toggle) x.classList.remove("highlight");
else x.classList.add("highlight");
});
}
Style can be used to suggest its construction. Above, the stacked shaded backgrounds reveal how many divisions a particular regions is included in. Adding a border to each
div can better show how the construction was achieved.
.highlight {
border:2px red solid;
background:rgba(220,220,100,0.2);
}
This code can be a simplified by a Javascript library or framework with complication of having to something else to learn and potentially having to later switch if something better or more popular comes along.
This has none of the unexpected lines. I'm still not loving some of the boundary colour meshing but these are just choices which I can now put some time to improve on.
This update has some hoving CSS that allows you to see the Fibonacci connections of the pieces. So you can take a look at what is going on before I complete the version that may work as a decent teaching example for coding. Here is an example of seeing that that div has a width of 144 and a height of 89 which are both Fibonacci numbers.
As a further complication, Blogger doesn't like that my free site is unsecured. It complains and doesn't work for the summaries or previews but it seems to work otherwise. I may have to migrate again... Who knew that there would be so much maintenance with a blog?
