Fractal Coding: Generating Animated SVG Tiles With C

So one assignment for my class is to essentially use C to generate SVGs and make a webpage using them, sort of. Me being me, that's too simple for me. I had to do more than that. The teacher suggested I animate the SVG. So I did so, sort of. I skimped on the complexity of animation for the interactivity of the webpage. Being HTML, I'm able to just embed it right here so you can play with it. It will be under the code.

Here's where I actually explain the code, line by line, for a more detailed explanation to the code:

And here's the actual C code if you want to compile it yourself and play with your own SVG implementations. HOWEVER DO NOT JUST COPY MY CODE AND USE IT IN YOUR OWN PROJECT IF YOU ARE COMING FROM THE VALENCIA C CLASS (you won't learn and I'm pretty sure the professor will know). Use just snippets of the code, like the bit that writes directly to the HTML file instead of you having to copy and paste the code. Seriously! I'm posting this to help y'all (and as a documentation of my progress in C), not to do your homework for you!

NOTE: You do not need an HTML file titled "animateSVG.html" pre-existing for the code to work. The code will generate it for you. You can change this to .txt if you prefer, but you can just open the HTML file with NotePad or other text editor if you'd like to view it.

#include <stdlib.h>
#include <stdio.h>


int main() {
    //This part will generate an html file to write to
    FILE *f = fopen("animateSVG.html", "w");
    if (f == NULL)
    {
        printf("Error opening file!\n");
        exit(1);
    }

    //For some reason my function had to be inside main; I assume it's because it needs to write to f and F
    //isn't really a passable value AFAIK

    void rectDraw(int rectHue) {
    fprintf(f,"<svg width=\"150\" height=\"150\">\n");
    fprintf(f,"\t<rect x=\"0\" y=\"0\" width=\"150\" height=\"150\" style=\"fill:hsl(%d, 100%%, 59%%);fill-opacity:1;\" />\n", rectHue);
    fprintf(f,"</svg>\n");
    //The rectHue is passed into the color value for the square. This will vary based on a following for loop.
    //fprintf is used instead of printf to write to the document.

}

    fprintf(f,"<!DOCTYPE html>\n<html>\n<body>\n");

    for(int i = 1; i <= 360; i++){ //360 seems to be the number of steps for a HSL spectrum.
        rectDraw(i);
    }

    fprintf(f,"<style>\n");
    fprintf(f,"\tsvg:hover{\n\t\ttransform: rotate(360deg);\n\t\topacity: 0;\n\t\ttransition-duration: 3s;\n");
    fprintf(f,"</style>");
    fprintf(f,"</body>\n</html>");


fclose(f);
printf("SVG saved to \"animateSVG.html\"\n"); //Verifies that the file did in fact write.
    }

Fractal Coding

Thursday, September 12, 2019

Generating Animated SVG Tiles With C

1 comment: