{"id":8210,"date":"2010-05-26T20:00:57","date_gmt":"2010-05-26T19:00:57","guid":{"rendered":"https:\/\/www.interactive-pioneers.de\/blog\/?p=8210"},"modified":"2010-05-26T20:00:57","modified_gmt":"2010-05-26T19:00:57","slug":"partikel-auf-der-powerflasher-webseite","status":"publish","type":"post","link":"https:\/\/www.interactive-pioneers.de\/blog\/partikel-auf-der-powerflasher-webseite\/","title":{"rendered":"Partikel auf der Powerflasher Webseite"},"content":{"rendered":"<p><!--:de--><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8212\" title=\"v3-particles-0\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-0-1.png\" alt=\"\" width=\"415\" height=\"250\" srcset=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-0-1.png 415w, https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-0-1-300x181.png 300w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/p>\n<p>Warum haben wir uns auf <a title=\"Powerflasher Webseite\" href=\"http:\/\/www.powerflasher.de\" target=\"_blank\">unserer Webseite<\/a> f\u00fcr Partikel entschieden? Die Partikel stehen symbolisch f\u00fcr das Team, den Spirit und die Energie der Powerflasher. Sie sind flexibel und passen sich agil den unterschiedlichsten Formen an. Au\u00dferdem sind sie sch\u00f6n anzuschauen und es macht Spa\u00df mit ihnen zu spielen. Die Darstellung von Partikelstr\u00f6men in Flash war eine tolle Herausforderung.<\/p>\n<p><!--:--><!--more--><!--:de--><strong>Wir setzen zwei Sorten von Partikeln ein.<\/strong><\/p>\n<p>1. Beim Rollover Effekt der Buttons werden Partikel in Pixelgr\u00f6\u00dfe eingesetzt. Diese wurden auf der Basis des <a title=\"Flint Particles\" href=\"http:\/\/www.flintparticles.org\" target=\"_blank\">Flint Partikel Systems<\/a> umgesetzt.<br \/>\n2. Zwischen dem Hintergrund und den Inhalten bewegen sich Partikelstr\u00f6me in dreidimensionalen Raum. Die Tiefenwirkung entsteht durch den Einsatz von Fl\u00e4chen mit variierender Unsch\u00e4rfe. Diese Partikel sind hausgemacht.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8213\" title=\"v3-particles-1\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-1-1.png\" alt=\"\" width=\"415\" height=\"250\" srcset=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-1-1.png 415w, https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-1-1-300x181.png 300w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/p>\n<p><strong>Zu den hausgemachten 3D Partikelstr\u00f6men.<\/strong><\/p>\n<p><strong>Es gibt folgende Bewegungen:<\/strong><\/p>\n<ul>\n<li>Zielpositionen in einem Screen ansteuern<\/li>\n<li> Der Maus folgen<\/li>\n<li> Anzeigen einer Form<\/li>\n<li> Interaktion mit Sound<\/li>\n<\/ul>\n<p>So ergibt sich ein steter Wechsel an Interaktion. Die Str\u00f6me orientieren sich an den leitfarbenen Fl\u00e4chen der Inhalte, interagieren mit dem User, formen individuelle Hintergr\u00fcnde und synchronisieren ihre Bewegungen mit der Hintergrundmusik.<\/p>\n<p>Ziel war es hohe Geschwindigkeiten \u00fcber den gesamten Screen zu erreichen. Um schnell layouten zu k\u00f6nnen sollte die Konfiguration einfach sein.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8214\" title=\"v3-particles-2\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-2-1.png\" alt=\"\" width=\"415\" height=\"250\" srcset=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-2-1.png 415w, https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-2-1-300x181.png 300w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/p>\n<p><strong>Details zur Programmierung:<\/strong><\/p>\n<p><strong>Optimierung der Render Performance<\/strong><\/p>\n<ul>\n<li>Alle Partikel (Gr\u00f6\u00dfe und Farbe) werden als Vektor von BitmapData vorberechnet<\/li>\n<li> Der Zugriff auf ein Partikel ist sehr effizient: circleParticles.particleImage[colorBucketIndex + imageSizeIndex]<\/li>\n<li>BitmapData liegt \u00fcber der gesamten B\u00fchnengr\u00f6\u00dfe. Um den Flash Redraw optimal klein zu halten wird immer der Bereich gespeichert, wo zuletzt Partikel waren (top-left\/ bottom-down)<\/li>\n<li>Nur dieser Bereich wird gel\u00f6scht (BitmapData.fillRect) -&gt; dadurch wird ein optimal kleiner Redraw erreicht (Siehe DebugPlayer -&gt; Show Redraw Regions)<\/li>\n<li>Insgesamt kostet der Redraw von 1000 Partikeln so h\u00f6chstens 8ms (MacBook Pro 4.1)<\/li>\n<li>Es erfolgen nur sehr wenig Methodenaufrufe<\/li>\n<li> Es laufen nur 2 Schleifen \u00fcber alle Partikel (Bewegung und Rendering)<\/li>\n<\/ul>\n<p><strong>Form und Bewegung<\/strong><\/p>\n<ul>\n<li>Formen definieren f\u00fcr jedes Partikel eine Zielposition, die sich in jedem Frame auch \u00e4ndern kann (z.B. drehende Formen, Mouse follow)<\/li>\n<li> Jede Form hat eine Anzahl an ben\u00f6tigten Partikeln<\/li>\n<li> Die Engine hat immer eine aktuelle Form, aber Partikel k\u00f6nnen auch noch in alten Formen feststecken, da sie nur nach und nach rausgelassen werden. So entsteht unter anderem das Strom-Verhalten<\/li>\n<li> Unterscheidet sich die Anzahl der ben\u00f6tigen Partikel, l\u00e4sst die Engine Partikel sterben oder klont Partikel, ohne dass der Betrachter dies bemerkt<\/li>\n<li> Jedes Partikel bem\u00fcht sich nun pro Frame seine von der Form vorgegebene Zielposition zu erreichen<\/li>\n<li> Bei dem \u00dcbergang in die Views wird die Form aus dem Zielbild berechnet (z.B. alle Partikel zu den roten Farben)<\/li>\n<li> In den Views wird nach 10 Sekunden die Form aus 3d Funktionen errechnet und mit Assets (Linien, Dreiecke) erg\u00e4nzt, auch hierbei werden alle Partikel in nur einer Schleife ohne Methodenaufrufe verarbeitet<\/li>\n<li> Die Definition und\u00a0 Zuweisung der Formen erfolgt programmatisch und ist nicht sehr geschw\u00e4tzig<\/li>\n<\/ul>\n<p><a title=\"FDT\" href=\"http:\/\/fdt.powerflasher.com\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8215\" title=\"v3-particles-3\" src=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-3-1.png\" alt=\"\" width=\"415\" height=\"250\" srcset=\"https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-3-1.png 415w, https:\/\/www.interactive-pioneers.de\/blog\/wp-content\/uploads\/2010\/05\/v3-particles-3-1-300x181.png 300w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><!--:--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warum haben wir uns auf unserer Webseite f\u00fcr Partikel entschieden? Die Partikel stehen symbolisch f\u00fcr das Team, den Spirit und die Energie der Powerflasher. Sie sind flexibel und passen sich agil den unterschiedlichsten Formen an. Au\u00dferdem sind sie sch\u00f6n anzuschauen und es macht Spa\u00df mit ihnen zu spielen. Die Darstellung von Partikelstr\u00f6men in Flash war [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,14,27],"tags":[845,894,1212,1267],"yst_prominent_words":[5029,1441,12470,12462,12467,6230,12466,12461,11763,12457,12460,1787,12464,12469,12468,12459,12463,12458,11664,12465],"class_list":["post-8210","post","type-post","status-publish","format-standard","hentry","category-agency","category-inside","category-technologie","tag-partikel","tag-powerflasher","tag-v3","tag-webseite"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts\/8210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/comments?post=8210"}],"version-history":[{"count":0,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/posts\/8210\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/media?parent=8210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/categories?post=8210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/tags?post=8210"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.interactive-pioneers.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=8210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}