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.
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.
