90 rotierende Dreiecke
Die Idee habe ich von Roger Antonsen. So wie es aussieht, hat er sein Programm in Processing geschrieben.
Es mit p5.js nachzubauen war mir zu einfach, und deshalb habe ich JavaScript und SVG genommen. Ich hab's fast hingekriegt, aber was bei der Vorlage innen in der Figur ist, war bei mir aussen...
Manuel Bichsel hat dann herausgefunden dass der Drehwinkel bei mir nicht stimmt, und seitdem sieht es fast genau so aus wie das Original.
Wie bei der Times Table ist der Graph mit einem schwarzen Hintergrund und farbigen Linien aufgepeppt, und sieht (zumindest für mich) einfach gut aus.
JavaScript
Es gibt eine globale Konstante für die Anzahl der Dreiecke, und eine Variable für den aktuellen Drehwinkel:
const TRIANGLES = 90 ; let rot = 0 ;
Die Funktion init erzeugt 90 Dreiecke und positioniert sie in einem Kreis:
function init()
{
let svg = document.querySelector( "svg" ) ;
let angle = 0 ;
for( let i = 0; i < TRIANGLES; i++ )
{
let triangle = document.createElementNS( "http://www.w3.org/2000/svg", "polygon" ) ;
triangle.setAttribute( "points", `${72.11102*Math.sin(angle-0.59)},${72.11102*Math.cos(angle-0.59)} ${72.11102*Math.sin(angle+0.59)},${72.11102*Math.cos(angle+0.59)} ${129.28*Math.sin(angle)},${129.29*Math.cos(angle)}` ) ;
triangle.setAttribute( "transform", `rotate(${-2*i*360/TRIANGLES},${83.09*Math.sin(angle)},${83.09*Math.cos(angle)})` ) ;
triangle.setAttribute( "stroke", `hsl(${i*6},100%,50%)` ) ;
svg.appendChild( triangle ) ;
angle += 2 * Math.PI / TRIANGLES ;
}
}
Danach werden die Dreiecke alle 50ms um 1.5 Grad gedreht:
function rotate()
{
let polygons = document.querySelectorAll( "polygon" ) ;
let angle = 0 ;
for( let i = 0; i < polygons.length; i++ )
{
triangle = polygons[i] ;
triangle.setAttribute( "transform", `rotate(${rot-2*i*360/TRIANGLES},${83.09*Math.sin(angle)},${83.09*Math.cos(angle)})` ) ;
angle += 2 * Math.PI / TRIANGLES ;
}
rot += 1.5 ;
}
Und das ist schon alles an Code für diese Animation!