GLC lirary can be used to create animations like these:
This is a standalone version of Keith Peters' GifLoopCoder library to be used on your websites. It does not include the GIF export functionality but rather allows you to drop the library on Codepen, JSFiddle, or any other website to quickly prototype your animations that can be then exported from original GLC tool.
You can either download the library with NPM or use a free CDN:
<script src="https://cdn.rawgit.com/msurguy/gifloopcoder/0.0.1/dist/glc.min.js"></script>
npm install -s gifloopcoder
or you can download this repo and get the glc.min.js
file in "/dist" folder
When you have the GLC library on the page you can use it as follows: create an element that will contain the animation canvas, for example a <div id='sketch'></div>
and place it in your HTML page. Then initialize a new GLC object, passing that canvas container that you created earlier. That's it. You can now use GLC as you would use onGLC
function in Keith Peters' GLC tool:
<div id="sketch"></div>
...
<script src="/path/to/glc.min.js"></script>
<script>
var canvasWrapper = document.getElementById('sketch');
var glc = new GLC(canvasWrapper);
glc.loop();
glc.size(540,540);
glc.setFPS(33);
glc.setDuration(3);
glc.styles.backgroundColor = "white"
var list = glc.renderList,
width = glc.w,
height = glc.h;
// your GLC code goes here:
var n = 6;
var rad = (width/n)/2;
for (var j=0; j<n; j++) {
for (var i=0; i<n; i++) {
list.addPoly({
x: rad + i*rad*2,
y: rad + j*rad*2,
radius: [rad*.9, rad*.4],
sides: [6,3],
rotation: [0,180],
fillStyle: ["#ffc500", "#c21500"],
phase: .75+ .25/(-n*n)*(i*n+j)
});
}
}
</script>
MIT