{"id":3260,"date":"2023-03-08T18:37:44","date_gmt":"2023-03-08T17:37:44","guid":{"rendered":"https:\/\/www.eltono.com\/lab\/?page_id=3260"},"modified":"2024-02-07T13:58:10","modified_gmt":"2024-02-07T12:58:10","slug":"cyclos","status":"publish","type":"page","link":"https:\/\/www.eltono.com\/lab\/projects\/cyclos\/","title":{"rendered":"Cyclos"},"content":{"rendered":"\n

Seamless infinite generative abstract SVG animations
Mint is currently open<\/strong> -> foundation.app\/collection\/cyclos<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cyclos is a collection of endless animations. Each abstract composition is generated with P5JS and saved as SVG, a vector graphic format that ensures the clips are crisp and uncompressed. The animations are designed to continuously evolve, creating an ever-changing visual experience. From playful to mesmerizing, each animation is a captivating exploration of shape, color, and movement. This unique collection of digital art is the product of a passionate anachronistic duo, me (Eltono) and my dad, Michel, a developer from early days with more than 50 years into coding!<\/p>\n\n\n\n

The algorithm is simple: it randomly chooses 5 or 6 shapes out of 15 available and place them on the canvas with a random starting position. Then, two rotations are applied: the Spin, which rotates the shape on its center, and the Revolution, which rotates the shape on an ellipse. We defined 7 different color palettes, 3 scaling factors, 6 speeds, and two directions, and applied a blend mode to merge the rotating shapes into each other.<\/p>\n\n\n\n

My idea was to make animated artworks that could be loaded on a screen and play forever. For best viewing experience, we added a fullscreen option inside the SVG code. To enable fullscreen mode, simply click on the image and press F11 in your browser to hide the toolbars. Click again on the image to go back to the square animation. <\/p>\n\n\n\n

After running the script for a few hours, we curated a collection of 111 animations.<\/p>\n\n\n\n

\n\n\n\n
\n
\n

Example of images generated during testing:<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"\"\/<\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/<\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"\/<\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/<\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/<\/figure>\n<\/div>\n<\/div>\n\n\n\n

> foundation.app\/collection\/cyclos<\/a><\/p>\n\n\n\n

\n\n\n\n

Please note that some of these animations contain rapidly moving shapes and potentially triggering content that can cause discomfort for individuals with photosensitive epilepsy or similar conditions. Viewer discretion is advised.<\/p>\n\n\n\n

\n\n\n\n

All the images are unique 1\/1<\/strong>
Artworks sold under non commercial license: CC BY-NC 4.0<\/strong> www.creativecommons.org\/licenses\/by-nc\/4.0\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Seamless infinite generative abstract SVG animationsMint is currently open -> foundation.app\/collection\/cyclos Cyclos is a collection of endless animations. Each abstract composition is generated with P5JS and saved as SVG, a vector graphic format that ensures the clips are crisp and uncompressed. The animations are designed to continuously evolve, creating an ever-changing visual experience. From playful to… Continue reading Cyclos<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3289,"parent":61,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"spay_email":"","footnotes":""},"categories":[21,25],"tags":[],"class_list":["post-3260","page","type-page","status-publish","has-post-thumbnail","hentry","category-open","category-projects","entry"],"_links":{"self":[{"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/pages\/3260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/comments?post=3260"}],"version-history":[{"count":30,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/pages\/3260\/revisions"}],"predecessor-version":[{"id":3348,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/pages\/3260\/revisions\/3348"}],"up":[{"embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/pages\/61"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/media\/3289"}],"wp:attachment":[{"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/media?parent=3260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/categories?post=3260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eltono.com\/lab\/wp-json\/wp\/v2\/tags?post=3260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}