Fireball

    This is created by repeating 7 chunks of the pattern to the  left. There are a few ways to make this using TileDrive.  7o{>3r}<7>{>4r3}xA +7A describes one way to create the pattern above.  The part before xA describes this chunk of the pattern to the left: two core heptagons, with one branch of a single red triangle and another branch with a red square and a triangle.  

    The negative space in the middle attracts my attention. It feels chaotic. Its spiky bits break its more regular heptagonal gear shape. Yet on close inspection, its "spikes" are all the same. Perhaps its having the two sets of triangles slightly different distances from the centre of the fireball that draws my attention playing with my desire of have a uniform spacing.

TileDrive: painting polygons

D3 playing with data

Here's my take on  Gödel, Escher, Bach cover in an attempt to start my new class, DATA ANALYTICS: PRINCIPLES & TOOLS.

These were generated with DataToolit.  I probably went overboard on using arrow functions in the coding. What I found interesting in writing the code was that interconnected three different projections has some subtlety. I do not understand the constraints on data set, but I was very constrained on my last choice of projection, the y. Perhaps I'll give it some thought later. Also, D3 is not the best choice for 3D  but I've recently be playing around with D3 in my course WEB TECHNOLOGIES, so I figured why not.  

You may enjoy playing with the javascript. The interface needs work but I doubt I'll get around to fixing it until I have another need for something similar. 

Details

The message I started with was Data-Tool-it but then I shifted more towards Data-Tools-y: partly because I had the missing sections of at least one of the shadows and partly to make an easier message of y which is "WHY do this course". Constructing the points was simply a task of blanking out blocks that one of the directions had a zero.  Enjoy this code constructig the basics blocks. The interface coding with D3 is more involved.

 

let data =[
[1,1,1,1,1,1,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,0],
[0,1,1,0,0,1,1,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0],
[0,1,1,0,0,0,1,1,0,0,1,0,1,0,0,0,1,1,0,0,0,1,0,1,0,0],
[0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,1,1,0,0,1,1,0,1,1,0],
[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],
[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],
[0,1,1,0,0,1,1,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1],
[1,1,1,1,1,1,0,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1]

]

let tool =[
[1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1],
[0,0,0,1,1,0,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,1,0,0,0],
[0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1,1,1,0],
[0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,0,0,0,1,1],
[0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,0,0,1,1],
[0,1,1,1,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,0,1,1,1,1,0]
]

let it = [

[0,1,1,1,1,1,0,1],

[1,0,1,1,1,0,1,1],

[1,1,0,1,1,0,1,1],

[1,1,0,1,0,1,1,1],

[1,1,1,0,1,1,1,1],

[1,1,1,0,1,1,1,1],

[1,1,0,1,1,1,1,1],

[1,0,1,1,1,1,1,1]

]

let block = 

Array.from({length:data[0].length},(_,i)=> Array.from({length:data.length},(_,j)=> Array.from({length:tool.length},(_,k)=> data[j][i] * tool[k][i] * it[k][j] )))      

Content for now

I'm going to fiddle with this later. The code is not that ugly.  Aside from JQuery and math.js, it's under 200 lines of source half of which is Javascript.  It still needs commenting but I'm off to 3D land to start working of a tree version of FibBox which is already a bit mind warping.  Here's the latest version of the Fibonnaci trees.

Solved but still plugging

The issue was easier than I thought.  It was the 45 degree rotation which I wanted to better emphasize the treeness of the structure.

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.

Still plugging...

This is close but not quite ready for prime time....

A collection of Fibonacci Trees

Although I've never heard of Fibonacci Trees, it seems like a reasonable name for this since it is made up of Fibonacci spirals. It's created with a bunch rectangles with integer coordinates that are Fibonacci numbers. I thought that I could easily use border-top-left radius:100% and conic-gradients... It's some finicky code that seems to produce a bunch of artifacts that I can't get rid of... Currently, the rough draft of the code needs a lot of polish but I feel there is no point streamlining it until it can produce what I want without the artifacts.... I could fix a few of the colour issues that occur in the upper tree not nicely meshing but since the other problems can't be fixed I'll leave it.

There seems to be no issues with the sizes and placements so the artifacts are related to the conic-gradient and perhaps a browser thing...  There is a better way to colour but not one that will be easy least using CSS. 

Perhaps the 3D version of this tree will be more interesting and will fall together better.

Back to JQuery...

I got beaten by CORS (cross-origin resource sharing).  To really show the utility of using divs to construct fractals I wanted to use images. Being a lazy sort and less interested in picking the best set of images, I decided to use an somewhat arbitrary collection of images from a site like Flickr. And Boom I had a CORS issue. The cross-origin issue is not easy to solve without a library--a pure Javascript solution was far from pretty, intuitive, or readily available. I ended up retreating back to JQuery.  Here's a what I ended up with:

You can find this code on my dumping site (jimmorey.com) or in this CodePen. I'm cheating a bit with the image sizes--the Sierpinski carpet's holes aren't quite as big as these images but I wanted to show off the images more than accurately have a fractal. Generally, I've been thinking about using the fractal as more of an information display for images.  Perhaps later.

I'll explore a few more parameter tweaks to see if I can have some more fun with graphics. I may explore some rectangular ones but these were my first two.

These used "cat,cute" to find the Flickr images. Make sure to take a look at the active code--in total, it's under 150 lines.  It allows you to hover over images to brighten and in the case of this later triangular one reshape to square images to better see the images. 

I will explore other libraries and photo sites like google photos to see if I can construct a better teaching example but probably I'll let it sit for a bit.