tag:blogger.com,1999:blog-374124912024-03-05T05:17:33.374+01:00Niklas Knaack Dev BlogNiklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.comBlogger148125tag:blogger.com,1999:blog-37412491.post-23224565443037662202017-09-25T17:12:00.004+02:002017-10-12T12:25:29.981+02:00SVG 3D Tag Cloud jQuery Plugin V2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhItiiXdCCnl9gkn4Ql5t-ISu_hr1d0VWtz5J8HBJpYcDjliAER4fmi_ElS820HM3DUsxAMpmCtQqgEfIvdbYCVopyncPvVYM911GZUqRHnuB1VYdzJaphEqX5jOFByb7b4Iv/s1600/previewSmall.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="239" data-original-width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhItiiXdCCnl9gkn4Ql5t-ISu_hr1d0VWtz5J8HBJpYcDjliAER4fmi_ElS820HM3DUsxAMpmCtQqgEfIvdbYCVopyncPvVYM911GZUqRHnuB1VYdzJaphEqX5jOFByb7b4Iv/s1600/previewSmall.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Nach diversen Anfragen gibt es nun ein Update für das <a href="http://blog.niklasknaack.de/2016/02/svg-3d-tag-cloud-jquery-plugin.html">SVG 3D Tag Cloud jQuery Plugin</a>. <br />In der Version 2 gibt es nun die Möglichkeit anstelle von Texten Bilder zu laden. Und, was auch schon häufiger angefragt worden ist, ihr könnt euch zu jedem Bild/Text auch einen Tooltip anzeigen lassen. <br />Die alte und die neue Version sind soweit kompatibel, weshalb ihr mit der neuen JS-Datei einfach die alte überschreiben könnt. Und das ohne die Funktionalität zu zerstören.<br />Hier ein Beispiel mit Bildern und Tooltips:</span></span><br />
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" id="svg3dtagcloudV2" scrolling="no" src="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/example3.html" width="480"></iframe>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">So setzt man nach wie vor Tags mit Text:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var entries = [
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' },
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
{ label: 'three.js', url: 'http://threejs.org/', target: '_top' },
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' },
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top' }
];
</pre>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wollt ihr nun Bilder anstelle von Text anzeigen, dann sieht das wie folgt aus:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var entries = [
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }
];
</pre>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr ersetzt einfach nur den Paramter <b>label</b> mit dem Parameter <b>image</b>. Bei <b>image</b> gebt ihr den Pfad und den Dateinamen zu der gewünschten Grafik ein. Neben dem neuen Parameter <b>image</b> gibt es noch die neuen Parameter <b>width</b> und <b>height</b>, mit denen ihr die anzuzeigende Größe von eurer Grafik mit angeben müsst.<br /><br />Und wenn ihr jetzt noch Tooltips dazu haben wollt schaut euch das Beispiel hier an:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var entries = [
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lorem ipsum' },
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor sit amet' },
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Sed diam' },
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'At vero' },
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nonumy eirmod' },
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Stet clita' },
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Justo duo' },
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Ut wisi enim' },
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Minim veniam' },
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Quis nostrud' },
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Exerci tation' },
];
</pre>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr könnt ganz einfach den Parameter <b>tooltip</b> hinzufügen mit einem String der dann als Tooltip angezeigt werden soll.<br /><br />Natürlich könnt ihr auch Text-Tags mit Tooltips kombinieren:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var entries = [
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' },
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' },
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' },
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' },
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' },
{ label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' },
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' },
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' },
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' }
];
</pre>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wie schon in der alten Version müsst ihr das erzeugte <b>entries Objekt</b> mit an das <b>settings Objekt</b> übergeben. Beim <b>settings Objekt</b> sind ein paar optionale Parameter hinzugekommen. Hier eine Auflistung aller möglichen Parameter inklusive dem <b>entries Objekt</b>:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var settings = {
entries: entries,
width: 480,
height: 480,
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#111',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 2,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15',
fontColor: '#fff',
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
fontToUpperCase: true,
tooltipFontFamily: 'Oswald, Arial, sans-serif',
tooltipFontSize: '11',
tooltipFontColor: '#fff',
tooltipFontWeight: 'normal',
tooltipFontStyle: 'normal',
tooltipFontStretch: 'normal',
tooltipFontToUpperCase: false,
tooltipTextAnchor: 'middle',//left, right
tooltipDiffX: 0,
tooltipDiffY: 20
};
</pre>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die frisch hinzugekommenen <b>tooltipFont</b> Parameter sind selbsterklärend. <b>Mit tooltipTextAnchor</b> gebt ihr an wie sich euer Tooltipp im Verhältnis zum Tag ausrichten soll. Bei Grafik-Tags empfiehlt sich <b>'left'</b> und bei Text-Tags <b>'middle'</b>. Mit <b>tooltipDiffX</b> und <b>tooltipDiffY</b> könnt ihr den Abstand zum Tag bestimmen.<br /><br />Alles andere bleibt wie gehabt in der <a href="http://blog.niklasknaack.de/2016/02/svg-3d-tag-cloud-jquery-plugin.html">alten Version</a>.<br />Schaut bei Fragen bitte erst in den alten <a href="http://blog.niklasknaack.de/2016/02/svg-3d-tag-cloud-jquery-plugin.html">Blogeintrag</a>, da hier eine recht ausführliche Dokumentation mit enthalten ist. Ansonsten freue ich mich wie immer über Feedback und/oder Kommentare.<br />Zum <b><span style="font-size: small;">Download</span></b> gibt es wieder eine <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/js/jquery.svg3dtagcloud.js"><b><span style="font-size: small;">standard JS</span></b></a> und auch eine <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/js/jquery.svg3dtagcloud.min.js"><b><span style="font-size: small;">minifizierte JS</span></b></a>.<br /><br />Bei Bedarf könnt ihr euch auch die Beispielseiten anschauen: <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/expamle1.html" target="_blank"><span style="font-size: small;"><b>Example 1</b></span></a>, <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/expamle2.html" target="_blank"><span style="font-size: small;"><b>Example 2</b></span></a>, <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/expamle3.html" target="_blank"><span style="font-size: small;"><b>Example 3</b></span></a> und <a href="http://nkunited.de/jquery/plugins/svg3dtagcloudV2/expamle4.html" target="_blank"><b><span style="font-size: small;">Example 4</span></b></a>.<br /><br />Die hier in den Beispielen verwendeten Bilder/Icons sind von der Seite <a href="https://www.smashingmagazine.com/2014/11/freebie-boldons-icon-set-45-icons-png-ai/" target="_blank">Smashing Magazine</a>.<br /><br /><span style="font-size: small;"><b>Update</b></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><b><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><b>GitHub</b></span></span></span></b></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Projekt gibt es nun auch auf GitHub. Und hier geht´s zum <a href="https://github.com/NiklasKnaack/jquery-svg3dtagcloud-plugin" target="_blank">GitHub Repository</a>. Ihr findet hier immer die aktuelle Version und weitere Tutorials sowie Links. </span></span><b><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><b><br /><br />JSFiddle</b></span></span></span></b></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: xx-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/wr9moazp/" target="_blank">Hier</a> ein weiteres Beispiel<span style="font-size: small;">,</span> das ihr direkt in </span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: xx-small;"><span style="font-family: "verdana" , sans-serif;">JSFiddle betrachten und bearbeiten könnt.</span></span></span></span><br />
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com3tag:blogger.com,1999:blog-37412491.post-65610545244176962862017-09-18T11:57:00.001+02:002017-09-18T12:09:27.793+02:00Sublime Text 3 toggle comment command doesn't work in Windows<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ein großes Ärgernis beim Arbeiten mit <a href="https://www.sublimetext.com/" target="_blank">Sublime Text</a> unter Windows ist das Problem, dass diverse Standard-Tastenkombinationen nicht funktionieren. <br />Mich hat besonders genervt, dass man Codezeilen, oder ganze Codeblöcke, nicht mit einer einfachen Tastenkombination auskommentieren kann. Schaut man in die Dokumentation, dann gibt es dafür Tastenkombinationen. Allerdings funktionieren diese nicht unter Windows. <br />Nach einer kleinen Recherche habe ich eine Lösung gefunden die wunderbar funktioniert und die ich an dieser Stelle mit euch teilen möchte. Wenn ihr auch mit ctrl + / bzw. mit deutscher Tastatur mit strg + / keine Codezeilen auskommentieren könnt, dann versucht auch mal folgendes.<br />Geht in Sublime Text im Menu auf den Punkt „Preferences“ und dort auf „Key Bindings“. Jetzt sollte sich ein neues Fenster öffnen das in etwa so aussieht wie dieses hier:</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5WO1QfIVNQMFIjZKfWZO1-T_4CN2csRMRi-_Dnk3fvELBOEXWoy-vTUldHD2MElOkSCacV-cZrshWNrD6piI92bGEwWO_ix3exNDboLvqCBW2ITMbr2tmXOw0TU7ouzvdS0QH/s1600/stss02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="946" data-original-width="1496" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5WO1QfIVNQMFIjZKfWZO1-T_4CN2csRMRi-_Dnk3fvELBOEXWoy-vTUldHD2MElOkSCacV-cZrshWNrD6piI92bGEwWO_ix3exNDboLvqCBW2ITMbr2tmXOw0TU7ouzvdS0QH/s400/stss02.png" title="" width="400" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier findet ihr auch auf der linken Seite in dem Fenster (Default) die Standard-Tastenkombination für das togglen um Codezeilen ein-, bzw. auskommentieren zu können. <br /><br />
</span></span>
<br />
<pre class="brush: js; auto-links: false">{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+/"], "command": "toggle_comment", "args": { "block": true } },
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br />Auf der rechten Seite im Fenster (User) müsst ihr nun ein paar Zeilen einfügen, und schon ist das Problem behoben. Setzt hier einfach diesen Schnipsel ein und speichert ab:<br /><br />
</span></span>
<br />
<pre class="brush: js; auto-links: false">{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br />Das Ganze sollte jetzt so aussehen:</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYI0_nQMBnWk1DQ4spqgSWD_GpG3dOhlym_UGBtRTHsIY4Z3IWpAvc8Fwxo7OxBCySjwqEmoyq8Uw89PGh60QIpOWsP_A6qbao09c_Rz7ht0n7nQRsTJOZd5BZMwLdoPHFeDAI/s1600/stss02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="946" data-original-width="1496" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYI0_nQMBnWk1DQ4spqgSWD_GpG3dOhlym_UGBtRTHsIY4Z3IWpAvc8Fwxo7OxBCySjwqEmoyq8Uw89PGh60QIpOWsP_A6qbao09c_Rz7ht0n7nQRsTJOZd5BZMwLdoPHFeDAI/s400/stss02.png" width="400" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Geht zurück zu euerm Projekt und versucht erneut die Tastenkombination aus. Jetzt sollte es keine Probleme mehr geben und ihr könnt bequem per Tastenkombinationen (strg + /) togglen.</span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-45351986750607834642017-05-23T15:26:00.000+02:002017-05-23T15:28:48.114+02:00Warp drive jQuery plugin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6H0kdJHCVvN211tQNrDG4bRiHCeDTrhgHuZrwJ_fmjl5M4o_lk8GSa05GRsHbvY8R_pGt2XLmEILxYHipWGqNU0biCvj6Ze2TqkDZmu5kAA9dkFo5SC-wJjqVGqRNK1s55_F_/s1600/preview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6H0kdJHCVvN211tQNrDG4bRiHCeDTrhgHuZrwJ_fmjl5M4o_lk8GSa05GRsHbvY8R_pGt2XLmEILxYHipWGqNU0biCvj6Ze2TqkDZmu5kAA9dkFo5SC-wJjqVGqRNK1s55_F_/s1600/preview.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wieder ein neues jQuery Plugin. Die Idee kam mir beim refaktorieren eines <a href="http://blog.niklasknaack.de/?header=WarpDrive">Header Experiments</a>, das ich so auch bereits bei <a href="https://codepen.io/NiklasKnaack/pen/OmwgKb">CodePen</a> veröffentlicht hatte. Die Idee ist einfach. Jeder sollte die Möglichkeit bekommen so ein Sternenfeld, bzw. Warp drive in seine Seite einbinden zu können. Sei es als Seitenhintergrund oder als interaktive Animation unter einem Div. <br />Und so entstand dieses jQuery Plugin. Im Gegensatz zu der alten Version auf CodePen habe ich für das Plugin einige Optimierungen umgesetzt. So kann man jetzt unter anderem Farben auswählen und Geschwindigkeiten anpassen. Dazu gibt es einen autoResize-Modus und zahlreiche Parameter über die sich das Plugin individualisieren lässt.<br />Ich gehe an dieser Stelle nur sehr kurz auf die Technik ein. <br />Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 4 KB im Zip-Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke.<br />Wie bei meinen anderen jQuery Plugins könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden.<br />Ich zeige euch erst ein paar Beispiele (Zu jedem Beispiel könnt ihr euch den Code anschauen). Danach gibt es die Download Links und die Links zum <a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin" target="_blank">GitHub Repository</a>, wo es zusätzlich zu den Beispielen weitere Links und Erklärungen gibt, wie ihr den Effekt einbinden und mit optionalen Parametern individualisieren könnt. </span></span><br /><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 1:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example1.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/example1.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 2:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example2.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/example2.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 3:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example3.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/example3.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 4:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example4.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/example4.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 5:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example5.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/example5.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 6:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://www.nkunited.de/jquery/plugins/warpdrive/example7.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<br /><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Downloads</span></b><br /> </span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die <a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/js/jquery.warpdrive.min.js" target="_blank">jquery.warpdrive.min.js</a>, wie hier in den Beispielen verwendet. Die <a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/js/jquery.warpdrive.js" target="_blank">jquery.</a></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/js/jquery.warpdrive.js" target="_blank"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">warpdrive</span></span></span></span>.js</a>, falls ihr am Code interessiert seid und die <a href="http://jquery./">jquery.</a></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin/blob/master/js/jquery.warpdrive.min.js.zip" target="_blank"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">warpdrive</span></span></span></span>.min.js.zip</a> als Zip.<br /><br /><br /><br /><span style="font-size: large;"><b>GitHub</b></span><br /><br />Und hier geht´s zum <a href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin" target="_blank">GitHub Repository</a>. Hier findet ihr immer die aktuelle Version und weitere Tutorials sowie Links.<br />Wie immer gilt: Falls ihr Fragen oder Anregungen habt, dann hinterlasst einfach einen Kommentar oder schreibt mich an. </span></span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-33843552324534624842017-05-19T17:00:00.000+02:002017-05-19T17:04:25.613+02:00T800 Terminator Genisys particles experiment<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wCn5H4lUb5CwrLFaBJxoofkSsteSDQncd9dLL_XKTIkECw0P4ona9TxBP2lVkfpXONrFgTEPuUI7SlOw6oYrQIScuz7DgYBb0oP2VAdZEk-K6QD2BJJQCqF-lTtiRggTKzfq/s1600/preview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wCn5H4lUb5CwrLFaBJxoofkSsteSDQncd9dLL_XKTIkECw0P4ona9TxBP2lVkfpXONrFgTEPuUI7SlOw6oYrQIScuz7DgYBb0oP2VAdZEk-K6QD2BJJQCqF-lTtiRggTKzfq/s1600/preview.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Mit diesem Experiment will ich ein Stück weit die Grenzen des Machbaren ausreizen. Gezeichnet werden die Pixel direkt in die Canvas. Keine extra 3D Engine, bzw. Bibliothek ist hier sonst im Einsatz. Und auch kein <a href="https://de.wikipedia.org/wiki/WebGL" target="_blank">WebGL</a>. Somit verzichte ich hierbei ganz bewusst auf Hardwarebeschleunigung. <br />Auf einem Desktop-Rechner werden die knapp über 130.000 Partikel trotzdem sauber mit 60 FPS berechnet. <br />Als Model habe ich mich in diesem Fall für das <a href="https://www.thingiverse.com/thing:932640" target="_blank">„T800 Terminator Genisys“</a> Model von <a href="https://www.thingiverse.com/machina/about" target="_blank">Machina Corp.</a> entschieden. Der Grund dafür ist ganz einfach. Möglichst viele Details. <br />Ich habe das Model in <a href="https://www.blender.org/" target="_blank">Blender</a> bearbeitet und dann als <a href="https://de.wikipedia.org/wiki/Collada_(Speicherformat)" target="_blank">DAE</a> exportiert. Aus dieser 16MB großen DAE habe ich dann die Werte für die Koordinaten vom Mesh kopiert und dann minifiziert in eine TXT-Datei eingefügt. Auf diese Weise konnte ich das Datenvolumen auf 2MB reduzieren. <br />Mit jQuery wird dann die so erzeugte TXT geladen und die Daten mit den Koordinaten von einem String in ein Array umgewandelt. Die jetzt folgenden Schritte basieren dann im Prinzip nur noch auf meinen älteren Experimenten. <br />Eigentlich wollte ich nur mal schauen wieviel </span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Partikel </span></span>ich im dreidimensionalen Raum auf einmal darstellen/berechnen kann bei akzeptabler Performance. Und hier gibt’s das Ergebnis:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"> </span></span>
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/terminatorskull/TerminatorSkull.min.html" width="480"></iframe> <span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Für den Fall das ihr das Experiment in einem extra Browser Tab anschauen wollt könnt ihr einfach <a href="http://nkunited.de/blog/particles/terminatorskull/TerminatorSkull.min.html">hier</a> klicken.</span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-35852712066619195962017-05-18T16:47:00.001+02:002017-05-18T17:38:01.538+02:00SVG 3D Viewer<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpZ5rLQspQgYmcX7ap5KTa7b6mOGcfg24YFOyEacTNxeM5bSU9Lv4t4zc1ZSNTk3S0q_FzNeU6HTntXSReLzvc06bENNKBBRsdksgzOwtg06o-fpZ2LaB9B59eHWiqVH2Gl1S/s1600/svgPreview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpZ5rLQspQgYmcX7ap5KTa7b6mOGcfg24YFOyEacTNxeM5bSU9Lv4t4zc1ZSNTk3S0q_FzNeU6HTntXSReLzvc06bENNKBBRsdksgzOwtg06o-fpZ2LaB9B59eHWiqVH2Gl1S/s1600/svgPreview.png" /></a></span></span></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://de.wikipedia.org/wiki/Scalable_Vector_Graphics" target="_blank">SVG</a> befinden sich auf dem Vormarsch und damit verbunden viele neue und interessante Entwicklungen. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das auf <a href="https://de.wikipedia.org/wiki/Extensible_Markup_Language" target="_blank">XML</a> basierende Format ist nicht nur für Gestalter und Kreative sehr interessant, sondern auch für Entwickler. <br />Da man über die XML-Struktur direkten Zugriff auf die Inhalte bekommt, kann man Elemente des SVG-DOM mit Hilfe eingebetteter Scriptsprachen wie JavaScript manipulieren. Auf diese Weise kann eine statische SVG dynamisiert werden und z.B. bestimmte Koordinaten animiert/verändert werden. So kann man unter anderem das Path-Element im SVG manipulieren, das für die Darstellung so gut wie aller </span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Grafikelemente in einem SVG verantwortlich sein kann. Genauso ist es möglich Farbwerte auszulesen und abzuändern. Und ebenso ist es möglich auf diese Weise online einen Editor für SVG zur Verfügung zu stellen, der nur auf JavaScript basiert.<br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und genau hier greift meine Idee die Koordinaten der Pfade einer SVG auszulesen, bzw. zu parsen, diese in pseudo 3D umzurechnen, die der User dann in Echtzeit manipulieren kann und dann im Anschluss wieder in 2D zurückumgewandelt als SVG ausgeben zu lassen. <br />Klingt etwas sperrig, aber im Prinzip ist es ganz einfach. Der User kann eine SVG laden und diese dann im dreidimensionalen Raum rotieren und skalieren. Zusätzlich hat der User noch Einfluss auf die im SVG verwendeten Farben. Als Gimmick kann das so vom User manipulierte SVG abgespeichert (Bei den Einstellungen unter „Open Controls</span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">“</span></span> zu finden) und dann problemlos für andere Zwecke weiterverwendet werden.</span></span>
<br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/svg3DViewer/SVG3DViewer.min.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://nkunited.de/svg3DViewer/img/anyMOTION_Logo.svg" target="_blank"><i>(Original SVG File)</i></a><br /><br />Der SVG 3D Viewer ist noch im absoluten Experimentierstadium. So werden aktuell keine Farbverläufe unterstützt. Ebenso kommt es zu Problemen, wenn die Maße der SVG größer sind als die Fläche (480x480px) des Viewers selbst. Besonders detailreiche SVG bringen den Viewer noch an seine Grenzen und lassen die Performance einbrechen. <br /><br />Im folgenden Screenshot der Browser-Konsole sieht man die neu berechneten Koordinaten im Path-Element einer dynamisch geladenen SVG: </span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJJpbezvG5ieqOEJKZGh-fLlCO5oXJcj1qiH2d2jU2B1etH_4gy-shVLJt-NACD-qJoOXDdZRpTG8EwDAoiIzQN5eBL48RNR5jlGebLR7IGxf0Dyp3EIBouLJ0V5UhVEy2R1q/s1600/consoleSS.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJJpbezvG5ieqOEJKZGh-fLlCO5oXJcj1qiH2d2jU2B1etH_4gy-shVLJt-NACD-qJoOXDdZRpTG8EwDAoiIzQN5eBL48RNR5jlGebLR7IGxf0Dyp3EIBouLJ0V5UhVEy2R1q/s1600/consoleSS.png" /></a></div>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Parsen der SVG ist mit dem <a href="https://github.com/jkroso/parse-svg-path" target="_blank">SVG Path Parser</a> von Jake Rosoman realisiert. <br />Die hier gezeigten SVG-Logos sind bis auf 2 Ausnahmen Eigenproduktionen. Das Logo zu Beginn ist das Firmenlogo von <a href="http://anymotion.de/" target="_blank">anyMOTION GRAPHICS</a>. Das zweite Logo das nicht von mir stammt ist das offizielle Logo von <a href="http://www.f95.de/home/" target="_blank">Fortuna Düsseldorf</a>. </span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-89761870783261138272017-05-08T15:43:00.004+02:002017-05-09T11:35:39.804+02:00Pure JavaScript planetoid particles with light source and bumpmapping<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlEdvkOAVU0TcdJTXfKzBq_PRaE2sg6nFFEx-uP24CC9ZzCFDBOvFhYxWv3hU-qhWOjf8qxpNXfRzR6rRq__DZPQGORNUsNV4i2stjUdTUSETf5aFRmSXaL83RAH5t6Ybaj8i/s1600/ss01.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlEdvkOAVU0TcdJTXfKzBq_PRaE2sg6nFFEx-uP24CC9ZzCFDBOvFhYxWv3hU-qhWOjf8qxpNXfRzR6rRq__DZPQGORNUsNV4i2stjUdTUSETf5aFRmSXaL83RAH5t6Ybaj8i/s1600/ss01.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die Idee für dieses Experiment kam mir als ich bei <a href="http://www.pshkvsky.com/" target="_blank">Oleg Pashkovsky</a> die <a href="http://www.pshkvsky.com/gif2code/gif2code-12/" target="_blank">„Animation with code #12“</a> sah und mich an ein <a href="http://blog.niklasknaack.de/2015/12/pixpart-ii-3d-brownsche-planetoid.html" target="_blank">älteres meiner Experimente</a> erinnerte. <br />Das Ziel war nun eine Art Kombination beider Experimente. Ich wollte es ermöglichen einen ähnlichen Look zu erhalten wie bei Oleg und gleichzeitig verschiedene Planetoiden im dreidimensionalen Raum zu visualisieren. <br />Mit meinen vergangenen 3D Partikelexperimenten war bereits der Grundstein gelegt. Es blieb nur ein großes Problem. Für die Szene brauchte ich eine Lichtquelle. Und genau eine solche Lichtquelle hatte ich bisher noch nicht in meine Experimente mit implementiert. Da ich bei den <a href="https://www.w3schools.com/html/html5_canvas.asp" target="_blank">Canvas</a> Experimenten auf 3D Frameworks wie z.B. <a href="https://threejs.org/" target="_blank">Three.js</a> verzichte, musste ich eine Lösung finden das Ganze von Grund auf neu zu schreiben. Mein Glück, ich hatte noch das Buch <a href="http://amzn.to/2qJy4ps" target="_blank">„Foundation HTML5 Animation with JavaScript“</a> </span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">(Affiliatelink) von <a href="http://www.bit-101.com/blog/" target="_blank">Keith Peters</a> im Bücherregal stehen. Hier fand ich einen simplen Ansatz für eine rudimentäre Umsetzung einer Lichtquelle die nicht zu viel Rechenleistung beansprucht. </span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<pre class="brush: js; auto-links: false">
var dotProd = particle.vx * light.x + particle.vy * light.y + particle.vz * light.z;
var normMag = Math.sqrt( particle.vx * particle.vx + particle.vy * particle.vy + particle.vz * particle.vz );
var lightMag = Math.sqrt( light.x * light.x + light.y * light.y + light.z * light.z );
var lightFactor = ( Math.acos( dotProd / ( normMag * lightMag ) ) / Math.PI ) * light.brightness;
</pre>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9iJdrUrjwo20_5IisQeX_5gAQv5n_sIFb83QjGBASJw_vR1_fE0eLOsjdPjld_0_sSppRhA_EtWJvnXG2lkg4cG2TaAx-RK4x-Sw5wN9YXSoXhSBYQFVP7WKT4c6p1MmsmAY/s1600/ss03.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9iJdrUrjwo20_5IisQeX_5gAQv5n_sIFb83QjGBASJw_vR1_fE0eLOsjdPjld_0_sSppRhA_EtWJvnXG2lkg4cG2TaAx-RK4x-Sw5wN9YXSoXhSBYQFVP7WKT4c6p1MmsmAY/s1600/ss03.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Darüber hinaus sind in diesem Experiment weitere Neuerungen zu sehen die ich so bisher noch nicht umgesetzt hatte. Wenn man sich den <a href="http://blog.niklasknaack.de/2015/12/pixpart-ii-3d-brownsche-planetoid.html" target="_blank">Erdball aus meinem alten Experiment</a> anschaut, dann sieht man die wenig schöne Verteilung der Partikel zur Abbildung des Planetoiden. Die jetzige Verteilung der Partikel ist da deutlich homogener. Aber auch hierbei gab es ein Problem. Die Platzierung der Partikel war Abhängig von den Koordinaten der Textur. <a href="http://stackoverflow.com/questions/7019101/convert-pixel-location-to-latitude-longitude-vise-versa" target="_blank">Die damals eingesetzte Methode</a> um Pixel-Koordinaten in Latitude und Longitude umzurechnen und dann auf eine Sphere zu mappen war also hinfällig. Die Lösung war der umgekehrte Weg. Ich erstelle die Sphere für den Planetoiden und hole mir dann erst die nötigen Pixel-Koordinaten zum Auslesen der Farbwerte aus der Textur. Die Lösung hierfür sind <a href="https://de.wikipedia.org/wiki/UV-Koordinaten" target="_blank">UV-Koordinaten</a>. Mit erstaunlich wenig Mathe kommt man auf diesem Weg an 2D Koordinaten aus einer 3D-Sphere. </span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<pre class="brush: js; auto-links: false">
p = p.normalize();
var u = Math.atan2( p.x, p.z ) / ( 2 * Math.PI ) + 0.5;
var v = Math.asin( p.y ) / Math.PI + 0.5;
var x = u * texture.width;
var y = v * texture.height;
</pre>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1ry_bjPcPNm7uQfMxrmL2NDAEygUBVxo5jF5dL_gQhDxurwYp4TfM8SJsOoq0w38-8Ds7nkmTZ0VKHoOVONDRCpdFrGvFyVHXEqYlomdRSL_2qq-_mZndMgBFrm9SN63PMBN/s1600/ss04.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1ry_bjPcPNm7uQfMxrmL2NDAEygUBVxo5jF5dL_gQhDxurwYp4TfM8SJsOoq0w38-8Ds7nkmTZ0VKHoOVONDRCpdFrGvFyVHXEqYlomdRSL_2qq-_mZndMgBFrm9SN63PMBN/s1600/ss04.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und zu guter Letzt wollte ich dann noch <a href="https://de.wikipedia.org/wiki/Bumpmapping" target="_blank">Bumpmapping</a> implementieren, damit die Oberfläche der Planetoiden plastischer und detailreicher erscheint. Normalerweise geschieht das über eine Bumpmap, oder auch height map genannt. Ich bin für dieses Experiment aber einen ganz anderen Weg gegangen. Ich berechne für jedes Partikel einen Wert, der auf der Basis der Farbe des Partikels basiert. Daraus ergibt sich ein Prozentwert. Eine Art <a href="https://de.wikipedia.org/wiki/Schwellenwertverfahren" target="_blank">Schwellenwertverfahren</a>. Weiß ist also 100% und schwarz ist 0%. Mit einer simplen Formel multipliziere ich jetzt diesen Prozentwert in Kombination mit einer Variablen für die Stärke des Effekts zu den Koordinaten der Partikel. Auf diese Weise bekommen hellere Partikel einen größeren Radius als dunkle Partikel. Ein z.B. ein dunkles Tal auf dem Planetoiden ist somit also tatsächlich tiefer als ein heller Berg. Im Gegensatz zum klassischen Bumpmapping nehme ich in diesem Experiment also sehr wohl Einfluss auf die Geometriekomplexität. Da ich aber keinen Namen für diesen von mir eingesetzten Weg habe wird hier einfach, und vielleicht fälschlicher Weise, von Bumpmapping gesprochen.
<br />
<pre class="brush: js; auto-links: false">
var threshold = ( particle.color.r + particle.color.g + particle.color.b ) / 3;
var percent = threshold / 255;
var distance = ( percent / bumpScale ) + 1;
particle.x *= distance;
particle.y *= distance;
particle.z *= distance;
</pre>
<br />Genug erzählt. Komment wir endlich zum Experiment. Ich empfehle wie immer das Experiment in einem <a href="http://nkunited.de/blog/particles/planetoid/Planetoid.min.html" target="_blank">neuen Browser Tab</a> zu öffnen. Ihr könnt es euch aber auch gleich hier unterhalb auf dieser Seite anschauen. Über den Button „Open Controls“ könnt ihr diverse Einstellungen vornehmen und verschiedene Texturen laden.</span></span><br /><br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/planetoid/Planetoid.min.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Die kleine Sphere in diesem Experiment symbolisiert die Lichtquelle. Verschwindet diese Lichtquelle hinter dem Planetoiden wird sie durch ein kleines rotes Kreuz visualisiert. <br />Ihr könnt mit Hilfe der Einstellungen die Anzahl der Partikel auf bis zu 125000 steigern. Auf diese Weise lässt dich der Detailgrad erhöhen, aber dafür kann die Performance leiden. Falls euer Rechner schon etwas älter ist könnte es also auch sinnvoll sein die Anzahl zu verringern. Ansonsten könnt ihr, wie bei meinen anderen Experimenten auch, die Szene abhängig von eurer Mausposition drehen. Für User mit mobilen Geräten und Touchscreen sind Touch-Events implementiert mit denen ihr die Szene ebenfalls steuern könnt. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu05JJYM-DDty97fwO9YJHOeyD5myCsXV3GbUvgo00wf8jXSq45hl05TMW6SkN5mzSsYFdaCAXnpUaXGRhSEXQDaGlXk-4KaHbjTqVGYQHSWpIyB4BaTXsWWMQ35bOeTZqd1am/s1600/ss02.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu05JJYM-DDty97fwO9YJHOeyD5myCsXV3GbUvgo00wf8jXSq45hl05TMW6SkN5mzSsYFdaCAXnpUaXGRhSEXQDaGlXk-4KaHbjTqVGYQHSWpIyB4BaTXsWWMQ35bOeTZqd1am/s1600/ss02.png" /></a>Die Texuren für den Planetoiden kommen von <a href="http://planetpixelemporium.com/planets.html" target="_blank">Planet Texture Maps</a> und von <a href="http://freebitmaps.blogspot.de/2010/10/srgb-planet-ako.html" target="_blank">Robert Stein III</a>. Die Texturen habe ich lediglich in der Größe angepasst. Ansonsten entsprechen sie den Originalgrafiken. <br />Verlinkungen zu Amazon in diesem Blogpost sind so genannte Affiliate Links.</span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-41619286739045085592017-04-05T16:03:00.002+02:002017-04-07T12:37:40.882+02:00Wobble window jQuery plugin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfVaMYJP2cgoA2VplXqXHKdmL7awHYg5wsDujumpe7-j_vsiec_PuZntHjkgmdfnKUOJOw3DEK4TQw3H3foRHuynjYx7mGyPljlA7hYidp7YWp24dDKqyyjCvMzGwQn-5aO8F/s1600/previewWobble.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfVaMYJP2cgoA2VplXqXHKdmL7awHYg5wsDujumpe7-j_vsiec_PuZntHjkgmdfnKUOJOw3DEK4TQw3H3foRHuynjYx7mGyPljlA7hYidp7YWp24dDKqyyjCvMzGwQn-5aO8F/s1600/previewWobble.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Es gibt unzählige Tutorials und Code Snippets mit denen man HTML-Elemente „wobblen“ lassen kann. In den meisten Fällen geht es aber eher darum Elemente zu schütteln, bzw. einen shake-Effekt anzuwenden. <br />Ich wollte allerdings einen wobble-Effekt schreiben, der sich auf die Form von einem DIV bezieht. Genauer gesagt, ein Effekt der die Form von einem DIV beeinflusst. Das Ganze abhängig von der Mausposition. So entstand das „Wobble window jQuery Plugin“. Über diverse optionale Parameter könnt ihr mit Hilfe vom „Wobble window jQuery Plugin“ einen Hintergrund für ein beliebiges DIV erzeugen, welcher seine Form abhängig von der Mausposition verändert. Der Hintergrund wobblet/wabert und so entsteht ein interessanter Effekt der an eine Flüssigkeit erinnert. <br />Zuerst gesehen hatte ich diesen Effekt bei <a href="https://neave.com/wobble/" target="_blank">Paul Neave</a>. Damals, genauer gesagt 2006, hatte ich den <a href="http://nkunited.de/index.html?deeplink=flash%20experiments.wabber%20windows" target="_blank">Effekt in Flash nachgebaut</a>. Und jetzt war es endlich mal an der Zeit den Effekt in HTML5 zu überführen und dabei auch für andere Entwickler nutzbar zu machen. Daher die Idee mit dem jQuery Plugin. <br />Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 3<span style="font-family: "verdana" , sans-serif;"> </span>KB im Z<span style="font-family: "verdana" , sans-serif;">ip-</span>Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke. <br />Wie bei meinen anderen jQuery Plugins auch könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden. <br />Ich zeige euch erst ein paar Beispiele<span style="font-family: serif;"> (</span>Zu jedem Beispiel könnt ihr euch den Code anschauen<span style="font-family: serif;">)</span>. Danach gehe ich noch etwas konkreter auf den Code ein, damit ihr das „Wobble window jQuery Plugin“ direkt nutzen könnt.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 1:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example1.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example1.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 2:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example2.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example2.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 3:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example3.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example3.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 4:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example4.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example4.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 5:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example5.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example5.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">Beispiel 6:</span></b> </span></span>
<br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/wobblewindow/example6.html" width="480"></iframe><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/example6.html" target="_blank">view source</a></span></span>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier nun ein paar Beispiele wie ihr das in eurer Webseite einbinden könnt. Zunächst einmal müsst ihr die JS Dateien in eure Seite einbinden:</span></span>
<br />
<pre class="brush: js; auto-links: false"><script src="js/jquery.min.js"></script>
<script src="js/jquery.wobblewindow.min.js"></script>
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Danach könnt ihr direkt starten. Mit jQuery sieht das wie folgt aus:</span></span>
<br />
<pre class="brush: js; auto-links: false">$( '#window' ).wobbleWindow();
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und so ohne jQuery:</span></span>
<br />
<pre class="brush: js; auto-links: false">var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Natürlich könnt ihr noch diverse Parameter an das Plugin übergeben um den Effekt zu individualisieren. Ein solches Objekt zu erstellen ist optional, aber hier der Vollständigkeit wegen das Objekt mit allen möglichen Parametern:</span></span>
<br />
<pre class="brush: js; auto-links: false">var settings = {
name: 'my_window',//name
depth: 1,//depth for zIndex
offsetX: 0,//+ or - value the size of the div
offsetY: 0,//+ or - value the size of the div
moveTypeIn: 'move',//method points follow the mouse
moveTypeOut: 'wobble',//method points go back to init position
wobbleFactor: 0.9,//control the wobble effect
wobbleSpeed: 0.1,//control the wobble speed
moveSpeed: 3,//control the move speed
lineWidth: 1,//lineWidth
lineColor: '',//no value = no line. Use hex/rgba values
bodyColor: '#FFF',//no value = no body color. Use hex/rgba values
numberOfXPoints: 7,//quantity of points horizontal. must be an odd int
numberOfYPoints: 5,//quantity of points vertical. must be an odd int
movementLeft: true,//enable/disable movement directions
movementRight: true,//enable/disable movement directions
movementTop: true,//enable/disable movement directions
movementBottom: true,//enable/disable movement directions
autoResize: true,//if true size will be automatically adjusted
autoResize: true,//enable/disable automatic size adjustement
debug: false//enable/disable debug mode
};
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wollt ihr das Plugin mit Parametern starten, dann sieht der Aufruf mit jQuery wie folgt aus</span></span>
<br />
<pre class="brush: js; auto-links: false">$( '#window' ).wobbleWindow( settings );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und so ohne jQuery:</span></span>
<br />
<pre class="brush: js; auto-links: false">var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );
</pre>
<br />
<b><span style="font-size: large;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Downloads</span></span></span></b><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span>Das wars schon. Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die <a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/js/jquery.wobblewindow.min.js" target="_blank">jquery.wobblewindow.min.js</a>, wie hier in den Beispielen verwendet. Die <a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/js/jquery.wobblewindow.js" target="_blank">jquery.wobblewindow.js</a>, falls ihr <span style="font-family: "verdana" , sans-serif;">am Code interessiert seid</span> und die <a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin/blob/master/js/jquery.wobblewindow.min.js.zip" target="_blank">jquery.wobblewindow.min.js.zip</a> als Zip.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b><span style="font-size: large;">GitHub</span></b><br /><br /><span style="font-family: "verdana" , sans-serif;">Und hier geht´s zum </span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span title="0.31738s from github-fe134-cp1-prd.iad.github.net"><a href="https://github.com/NiklasKnaack/jquery-wobblewindow-plugin" target="_blank">GitHub <span style="font-family: "verdana" , sans-serif;">Repository</span></a>. Hier findet ihr immer die aktuelle Version und weitere <span style="font-family: "verdana" , sans-serif;">Tu<span style="font-family: "verdana" , sans-serif;">torials <span style="font-family: "verdana" , sans-serif;">sow<span style="font-family: "verdana" , sans-serif;">ie </span></span>Links.</span></span></span></span><br /><br /><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Wie immer gilt<span style="font-family: "verdana" , sans-serif;">: Falls ihr Fragen oder Anregungen habt<span style="font-family: "verdana" , sans-serif;">,</span> <span style="font-family: "verdana" , sans-serif;">dann hinterlasst einfach einen Kommentar oder schreibt mich an.</span></span> </span></span></span></span>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-53051000019982992742017-03-24T16:15:00.001+01:002017-04-03T15:22:55.355+02:00Water ripple effect jQuery plugin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoycK_5tC4CRpsnzcKGJJk4DF_Ox4Lyo6XyQkTNTN9NnHoa2Dn_KXVhQtlJ8o_X3bpTw4so2eAPgyxdybEdZwIOT7ezXLev_EJp6mjnz3daosmOBdjDPDAN-pd35jteaqPZhwN/s1600/Screenshot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoycK_5tC4CRpsnzcKGJJk4DF_Ox4Lyo6XyQkTNTN9NnHoa2Dn_KXVhQtlJ8o_X3bpTw4so2eAPgyxdybEdZwIOT7ezXLev_EJp6mjnz3daosmOBdjDPDAN-pd35jteaqPZhwN/s1600/Screenshot.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ich war von dem „water ripple effect“ schon immer fasziniert und so wurde es mal Zeit sich mit damit zu beschäftigen. Rausgekommen ist dabei ein kleines jQuery Plugin, welches ihr komfortabel in euren Projekten mit einbinden könnt. Wie bei meinen letzten jQuery Plugins auch, könnt ihr den „water ripple effect“ mit, oder ohne jQuery benutzen. Als Zip und minifiert ist dieses Plugin nur knapp 2KB groß.<br />Ursprünglich für Java von <a href="http://www.neilwallis.com/projects/java/water/index.php" target="_blank">Neil Wallis</a> geschrieben und später von <a href="http://js1k.com/2010-first/details/131" target="_blank">Sergey Chikuyonok</a> für JavaScript adaptiert, musste ich das Rad nicht neu erfinden. Ich habe lediglich versucht den Code noch an ein paar Stellen weiter zu optimieren.<br />Zum Einsatz kommen die Canvas und gutes altes JavaScript. Dadurch ist sichergestellt, dass eine maximale Abwärtskompatibilität erreicht wird. So sollten auch ältere Browser in der Lage sein den Effekt darzustellen. Trotz Optimierungen kostet der Effekt allerdings noch immer gut Rechenpower. Ihr solltet also darauf achten nicht zu große Bilder zu verwenden.<br /><br />Hier könnt ihr euch eine <b><span style="font-size: large;">Demo</span></b> anschauen:<br /><br />
<iframe allowfullscreen="false" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/waterrippleeffect/index.html" width="480"></iframe>
<br /><br />Folgend ein paar Beispiele wie ihr den Effekt in euer Projekt einbinden könnt. Zunächst <span style="font-size: large;"><b>mit jQuery</b></span>, bzw. als jQuery Plugin.</span></span>
<br />
<pre class="brush: js; auto-links: false"><script src="js/jquery.min.js"></script>
<script src="js/jquery.waterrippleeffect.min.js"></script>
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Zuerst einmal müsst ihr jQuery und danach dann das Plugin in eure Seite einbinden.</span></span>
<br />
<pre class="brush: js; auto-links: false">var settings = {
image: './img/SwimmingPool.jpg',//image path
rippleRadius: 3,//radius of the ripple
width: 480,//width
height: 480,//height
delay: 1,//if auto param === true. 1 === 1 second delay for animation
auto: true//if auto param === true, animation starts on it´s own
};
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Als nächstes erstellt ihr ein Objekt. Mit diesem könnt ihr diverse Parameter übergeben. Unverzichtlich ist der Parameter image, mit dem ihr angeben müsst wo das Bild liegt das ihr für den Effekt verwenden wollt. Mit rippleRadius bestimmt ihr den Radius der Wellen. Die Parameter width und height geben an wie groß euer Bild ist. Der Parameter delay kommt ins Spiel wenn ihr den Parameter auto auf true stellt. Steht auto auf true läuft die Animation automatisch ab und mit dem delay könnt ihr bestimmen wie schnell</span></span>
<br />
<pre class="brush: js; auto-links: false">$( '#holder' ).waterRippleEffect( settings );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hiermit startet, bzw. initiiert ihr den Effekt. holder ist ein einfaches Div. Wie ihr seht wird an dieser Stelle das eben erstellte Objekt settings mit übergeben.<br />
Soweit so gut. False ihr bei den settings auto auf true gestellt habt dann seid ihr im Prinzip schon fertig.<br />
Wollt ihr das Ganze mit der Maus beeinflussen, dann könnt ihr z.B. folgendes schreiben:
</span></span>
<br />
<pre class="brush: js; auto-links: false">$( '#holder' ).click( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">So erscheinen die Wellen per Klick an der aktuellen Mausposition.
</span></span>
<br />
<pre class="brush: js; auto-links: false">$( '#holder' ).mousemove( function( e ) {
var mouseX = e.pageX - $( this ).offset().left;
var mouseY = e.pageY - $( this ).offset().top;
$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );
} );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und so per Mousefollow.<br /><br />
Ihr benutzt kein jQuery? Kein Problem. Dann macht es einfach wie folgt <span style="font-size: large;"><b>ohne jQuery</b></span>:
</span></span>
<br />
<pre class="brush: js; auto-links: false"><script src="js/jquery.waterrippleeffect.min.js"></script>
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr bindet nur die jquery.waterrippleeffect.min.js in eure Seite mit ein.<br />
Der part mit dem settings Objekt ist 1zu1 gleich wie oben für die jQuery Variante beschrieben, weshalb ich das an dieser Stelle nicht noch einmal wiederhole. Ihr könnt diesen Part einfach so von oben übernehmen.
<br />
So startet ihr den Effekt:
</span></span>
<br />
<pre class="brush: js; auto-links: false">var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">holder ist hier wieder ein Div und auch hier wird das settings Objekt mit den Parametern für den Effekt übergeben.
<br />Wollt ihr das Ganze per Mausklick steuern ergänzt folgendes:
</span></span>
<br />
<pre class="brush: js; auto-links: false">document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Für einen Mouse-Follow schreibt ihr einfach:
</span></span>
<br />
<pre class="brush: js; auto-links: false">document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {
var mouseX = e.layerX;
var mouseY = e.layerY;
waterRippleEffect.disturb( mouseX, mouseY );
} );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das wars. Mehr ist nicht nötig. Ih<span style="font-family: "verdana" , sans-serif;">r könnt euch <span style="font-family: "verdana" , sans-serif;">auch die Demo oben direkt anschauen und den Code <span style="font-family: "verdana" , sans-serif;">aus dem HTML File entnehmen. Dazu <span style="font-family: "verdana" , sans-serif;">e</span>infach <a href="http://nkunited.de/jquery/plugins/waterrippleeffect/index.html">hier</a> klicken.</span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Zum <span style="font-size: large;"><b>Download</b></span> stelle ich euch drei Varianten zur <span style="font-family: "verdana" , sans-serif;">fr<span style="font-family: "verdana" , sans-serif;">eien Verfügung. Die <a href="https://goo.gl/QDg9CU">jquery.waterrippleeffect.min.js</a> wie hier in den Beispielen verw<span style="font-family: "verdana" , sans-serif;">endet. Die <a href="https://goo.gl/1lvfby">jquery.waterrippleeffect.js</a>, falls ihr mal <span style="font-family: "verdana" , sans-serif;">hinter die Kuli<span style="font-family: "verdana" , sans-serif;">ssen schauen wollt und die <a href="http://nkunited.de/jquery/plugins/waterrippleeffect/js/jquery.waterrippleeffect.min.js.zip">jquery.waterrippleeffect.min.js.zip</a> als Zip.</span></span></span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span></span></span> Viel Spaß mit diesem jq<span style="font-family: "verdana" , sans-serif;">uery Plugin. Falls ihr Fragen o<span style="font-family: "verdana" , sans-serif;">der Anreg<span style="font-family: "verdana" , sans-serif;">ungen habt würde ich mich über ein paar Kommentare freuen.</span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"> </span></span>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-23686499458611889392017-03-17T12:54:00.000+01:002017-03-17T12:54:10.166+01:00Tornado Simulation<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirk9m43mTmmee_rVnrer0wl6eNAWo1DWqLVCdEtY57SkjN18pqE7-NhGYinfzIyem5OTD8HT7MAmgC17Q6b_KMkea_7V0GLTjTTr6zgga2SFUiLwcnMyET4-y1fDmEVkQGuHhr/s1600/Preview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirk9m43mTmmee_rVnrer0wl6eNAWo1DWqLVCdEtY57SkjN18pqE7-NhGYinfzIyem5OTD8HT7MAmgC17Q6b_KMkea_7V0GLTjTTr6zgga2SFUiLwcnMyET4-y1fDmEVkQGuHhr/s1600/Preview.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;">Die Tornado Simulation ist ein Experiment das ich schon seit langem starten wollte. Und mit meiner 3D Particle-Engine, die jetzt schon in so zahlreichen anderen Experimenten zum Einsatz kam, und etwas Zeit ließ sich diese Simulation jetzt endlich mal umsetzen. <br />Für die Simulation selbst kommen keine weiteren Frameworks wie z.B. <a href="https://threejs.org/" target="_blank">Three.js</a> zum Einsatz. Einfach pures JavaScript. Dadurch konnte ich auch in diesem Experiment die Dateigröße mit 13KB recht klein halten. <br />Zum Rendern nutze ich das <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">Canvas-Element</a> und das <a href="https://developer.mozilla.org/de/docs/Web/API/ImageData" target="_blank">ImageData Interface</a> um Zugriff auf die Pixel zu bekommen. <br />Wer sich für dieses Thema interessiert, ich hatte dazu mal ein <a href="http://blog.niklasknaack.de/2016/01/html5-tutorial-canvas-pixel-manipulation.html">Tutorial</a> geschrieben.<br />Aber zurück zum Tornado. Ziel war es im weitesten Sinn eine möglichst realistische Simulation eines Tornados mit den zur Verfügung stehenden Mitteln zu realisieren. <br />Die Höhe des Tornados ergibt sich aus der Anzahl der „Radial Segments“. Diese sind in einer sich drehenden Spirale angeordnet, die nach oben hin exponentiell größer wird. Auf die Animation der Verschiebung der Spirale könnt ihr mit „Spiral Disp.“ Einfluss nehmen. Um jedes der „Radial Segments“ kreisen die „Tubular Segments“. Deren Anzahl kann nur auf ein Maximum festgelegt werden, da hier der Zufall mitbestimmt wie viele „Tubular Segments“ pro „Radial Segment“ generiert werden. Jedes einzelne „Tubular Segment“, also Partikel, erhält einen per Zufall generierten Graustufen-Wert und kann eine Spur hinter sich herziehen, deren maximale Länge ihr in den Einstellungen per „Max Trail Length“ beeinflussen könnt. Auch auf die Geschwindigkeit und Drehrichtung der Partikel könnt ihr mit „Max Speed“ Einfluss nehmen. Mit „Min Radius“ könnt ihr zudem noch festlegen wie groß/klein der Radius des Tornados unten am Boden ist. <br />Geht einfach mal in die Einstellungen mit „Open Controls“ und spielt mit den Werten. Aber bitte etwas vorsichtig. Langsame Rechner könnten hierbei schnell an ihre Grenzen gebracht werden!<br />Ihr könnt die Anwendung direkt hier unterhalb starten (einfach mit der Maus über das untenstehende Fenster fahren), oder ihr öffnet die Simulation in einem <a href="http://nkunited.de/blog/particles/tornado/Tornado.min.html">neuen Browserfenster</a>. Vor allem User mit mobilen Endgeräten und älteren Rechnern sollten sich die Simulation in einem <a href="http://nkunited.de/blog/particles/tornado/Tornado.min.html">extra Fenster</a> anschauen.<br />Viel Spaß und haltet eure Hüte fest.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;"> </span></span>
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/tornado/Tornado.min.html" width="480"></iframe>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-27263470226320402222017-03-09T22:56:00.004+01:002017-03-10T10:06:36.554+01:00Lissajous Curve<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubORegQHbtFQ3NltdB5caWLy52Axr6gDuHZGJl9q00X7nqlkvcSUZFlICmGdw1y4vyeaA6IOuIgq-fl3GI6BswLsXA9MHenizyjmjwXDKVDpDhAWpEIvszzEnWRmeLGNfmtcs/s1600/preview_01.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubORegQHbtFQ3NltdB5caWLy52Axr6gDuHZGJl9q00X7nqlkvcSUZFlICmGdw1y4vyeaA6IOuIgq-fl3GI6BswLsXA9MHenizyjmjwXDKVDpDhAWpEIvszzEnWRmeLGNfmtcs/s1600/preview_01.png" /></a>Die <a href="https://de.wikipedia.org/wiki/Lissajous-Figur" target="_blank">Lissajous-Figur</a> ist aus mathematischer Sicht das parametrische Schaubild einer Funktion erfunden vom französischen Physiker Jules Antoine Lissajous. <br />Hier umgesetzt mit JavaScript ohne weitere Frameworks und dadurch unter 15KB klein. <br />Spielt einfach mal mit den Parametern. Damit lassen sich interessante Ergebnisse erzielen. <span style="font-family: "verdana" , sans-serif;">Um ein harm<span style="font-family: "verdana" , sans-serif;">onisches Ergebnis zu erziehlen, sollten die Werte der drei Parameter W1, W2 und W3 nah beieinander liegen<span style="font-family: "verdana" , sans-serif;">. Wie <span style="font-family: "verdana" , sans-serif;">z.B. in den Voreinstellungen sichtbar.</span></span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr könnt die Anwendung direkt hier unterhalb <span style="font-family: "verdana" , sans-serif;">anschauen</span>, oder, besonders für mobile Endgeräte empfehlenswert, in einem neuen <a href="http://nkunited.de/blog/particles/lissajouscurve/LissajousCurve.min.html">Browserfenster</a>. </span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/lissajouscurve/LissajousCurve.min.html" width="480"></iframe>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-27391034487765787652017-03-06T12:16:00.000+01:002017-03-09T10:38:37.309+01:00Dwitter!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijcpoVVKcgDIKzCsOsRZcvmq46ib4Bvdlpxhl92WA1xEN3xUnkjmgc8WjrXEZUTamlY_Vq7CLj0aTot9v5K_C_5LtBFza_ZwQpORF5xiFTKMx8RkxsG2-BRAUHTuA-0U3Iu2w/s1600/DwitterPreview.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijcpoVVKcgDIKzCsOsRZcvmq46ib4Bvdlpxhl92WA1xEN3xUnkjmgc8WjrXEZUTamlY_Vq7CLj0aTot9v5K_C_5LtBFza_ZwQpORF5xiFTKMx8RkxsG2-BRAUHTuA-0U3Iu2w/s1600/DwitterPreview.png" /></a><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://www.dwitter.net/" target="_blank">Dwitter</a>? Du meinst bestimmt Twitter! Nein, <a href="https://www.dwitter.net/" target="_blank">Dwitter</a>. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Was ist Dwitter? „A social network for short JavaScript demos“. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Dwitter ähnelt Twitter sehr. Nur mit dem Unterschied, dass man mit den 140 Zeichen (bytes) keine Textnachrichten verfasst, sondern kleine JavaScript Demos programmiert. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die große Herausforderung, und gleichzeitig auch der Reiz, besteht darin, sein Vorhaben in 140 Zeichen Code zu verpacken. Dabei muss man seinen Code brutal optimieren und lernt immer wieder neue Kniffe und Tricks um hier und da ein paar Zeichen einzusparen. Natürlich gibt es Tools wie z.B. das sehr empfehlenswerte <a href="https://jscompress.com/" target="_blank">„JavaScript Compression Tool“</a> und andere, aber deren Einsatz allein reicht in den meisten Fällen nicht aus, oder kann nur unterstützend eingesetzt werden. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Am besten schaut man sich andere Beispiele auf Dwitter an und versucht deren Code zu verstehen. So kann man ziemlich schnell viele Tricks zum optimieren seines Codes sammeln. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier mal meine ersten Gehversuche auf Dwitter:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://www.dwitter.net/u/Niklas/top" target="_blank">https://www.dwitter.net/u/Niklas</a></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"> </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier eine kleine Auswahl meiner Favoriten Dweets:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://www.dwitter.net/d/701">https://www.dwitter.net/d/701</a><br /><a href="https://www.dwitter.net/d/1494">https://www.dwitter.net/d/1494</a><br /><a href="https://www.dwitter.net/d/1231">https://www.dwitter.net/d/1231</a><br /><a href="https://www.dwitter.net/d/855">https://www.dwitter.net/d/855</a><br /><a href="https://www.dwitter.net/d/433">https://www.dwitter.net/d/433</a><br /><a href="https://www.dwitter.net/d/1829">https://www.dwitter.net/d/1829</a><br /><a href="https://www.dwitter.net/d/915">https://www.dwitter.net/d/915</a><br /><a href="https://www.dwitter.net/d/1232">https://www.dwitter.net/d/1232</a> </span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-40664280870591194502017-02-21T16:35:00.000+01:002017-02-22T11:58:31.142+01:00Tentacle Creature<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_e_CwuJDgh4NVWKVblLPFZAg61mm4RY7-YiN96P9bPOdcvgBluYfQ0dgbrn_RlA6crMZQ3nNqkLb4tNyeoMhNSq_DaB29TwGkPCiVGRGI__i9NRtBIkj3ffiko2NNyuXCSUhK/s1600/preview.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_e_CwuJDgh4NVWKVblLPFZAg61mm4RY7-YiN96P9bPOdcvgBluYfQ0dgbrn_RlA6crMZQ3nNqkLb4tNyeoMhNSq_DaB29TwGkPCiVGRGI__i9NRtBIkj3ffiko2NNyuXCSUhK/s1600/preview.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und wieder ein <a href="https://threejs.org/" target="_blank">three.js</a> Experiment. <br />Warum Tentakeln? Weil ich mit dem Ergebnis in dem Experiment zuvor nicht zufrieden bin. Bei <a href="http://blog.niklasknaack.de/2017/02/procedurally-generated-trees-in.html">„Procedurally generated trees in JavaScript“</a> sehen die Baumstämme und Äste einfach viel zu wenig natürlich aus. So gerade und abgehakt wachsen keine Pflanzen und auch die Verbindungen der Äste untereinander wird man so nicht in der Natur vorfinden. <br />Auf der Suche nach einer Lösung bin ich über die <a href="https://threejs.org/docs/#Reference/Geometries/TubeGeometry" target="_blank">TubeGeometry</a> gestolpert. Mit dieser lässt sich die Form einer Röhre abbilden. Und, für mich besonders wichtig, man kann ihr einen Pfad mit Koordinaten mitgeben und die TubeGeometry richtet sich danach aus. Und das allerbeste, die TubeGeometry akzeptiert als Pfad auch eine <a href="https://threejs.org/docs/#Reference/Extras.Curves/CatmullRomCurve3" target="_blank">CatmullRomCurve3</a>. Eine Kurve, bzw. etwas genauer gesagt ein Spline, die eine gegebene Anzahl an Kontrollpunkten sehr soft miteinander verbindet. Stichwort: <a href="https://de.wikipedia.org/wiki/Kubisch_Hermitescher_Spline" target="_blank">Kubisch Hermitescher Spline</a>, oder auch <a href="https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Centripetal Catmull–Rom spline</a>.<br />Das einzige Problem das jetzt noch bestand war, dass die TubeGeometry nur einen Radius als Parameter akzeptiert. Gibt man ihr einen Radius von 3, dann hat sie an ihrem Anfangspunkt den selben Radius 3 wie am Endpunkt. Mein Ziel aber was es einen Start, und einen End-Radius definieren zu können. So soll es z.B. möglich sein, dass sich die Röhre zum Ende hin konisch verjüngt. Um das zu erreichen musste ich die TubeGeometry umschreiben. Herausgekommen ist dabei die <a href="http://nkunited.de/tentacles/js/TentacleGeometry.js" target="_blank">TentacleGeometry.js</a>. Und weil mich beim Entwickeln die ersten Formen so stark an Tentakeln erinnerten ist dieses Experiment hier entstanden. Das Ganze ist also eher nur ein Zwischenschritt für ein neues „Procedurally generated trees“-Experiment.<br />Ihr könnt das Experiment direkt hier starten, oder ihr öffnet die Anwendung in einem neuen <a href="http://nkunited.de/tentacles/index.html">Browser-Fenster</a>.</span></span>
<br /><br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/tentacles/index.html" width="480"></iframe>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-58850671880438077182017-02-07T16:32:00.001+01:002017-02-07T16:34:07.645+01:00Procedurally generated trees in JavaScript<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1m1VnCXEVU-bpVT_9wbWaAQV5Fp35WJVZDJ3fSVFb7LF4FPPFRQaKylyaZIBglkoWd6ZRhrg9rEgOFyJsuuijcsIQhQN3lrfWEFCB2GB-XM_vkFIKQKAgIHeH6X5IiTrfl5y/s1600/Preview.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1m1VnCXEVU-bpVT_9wbWaAQV5Fp35WJVZDJ3fSVFb7LF4FPPFRQaKylyaZIBglkoWd6ZRhrg9rEgOFyJsuuijcsIQhQN3lrfWEFCB2GB-XM_vkFIKQKAgIHeH6X5IiTrfl5y/s1600/Preview.jpg" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span id="goog_1893615089">Das Thema ist nicht ganz neu für mich. Bereits <a href="http://www.nkunited.de/tree/" target="_blank">2006</a> und <a href="http://www.nkunited.de/treeV2color/" target="_blank">2007</a> hatte ich damals noch mit Flash erste Gehversuche gestartet. Allerdings noch in 2D und aus heutiger Sicht wenig schön anzusehen.<br />Jetzt bin ich nicht nur einen anderen Weg gegangen, sondern auch einen Schritt weiter. <br />Bei dem neuen Experiment ist eine Dimension hinzugekommen und umgesetzt ist das Ganze nun mit JavaScript. Als 3D Bibliothek kommt wie zuletzt auch wieder <a href="https://threejs.org/">three.js</a> zum Einsatz. <br />Mit Hilfe einer rekursiven Funktion und vielen per Zufall generierten Werten erzeuge ich hier Bäume, oder zumindest baumähnliche Gebilde. Wie immer, wenn der Zufall im Spiel ist, kann es auch mal Überraschungen geben. Damit die Performance auch auf älteren Rechnern stimmt, habe ich es mit den Wachstumszyklen nicht übertrieben. Aber schaut einfach selbst.<br />Ihr könnt direkt hier starten, oder ihr öffnet die Anwendung <a href="http://nkunited.de/proceduraltrees/">in einem neuen Browser-Fenster</a>.</span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span id="goog_1893615089"> </span></span></span>
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/proceduraltrees/index.html" width="480"></iframe>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-68009487441601506882016-10-14T20:07:00.000+02:002017-09-25T10:54:03.198+02:00Raspberry Pi als DLNA-Medienserver mit ReadyMedia einrichten<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6fBiz3C8VKUVJWjh_VV6MSlFaydEYsmuBkI9Zwlz6NmOOgTiash-rIdmCWyUtsfoKZ2u2mKpyt2XK4GDH8Bo0zL_VFnBkds8FqB7KJ1mjRgCircrPFq9UdD2F5BPOV8h8U9V/s1600/RaspPiDLNALogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6fBiz3C8VKUVJWjh_VV6MSlFaydEYsmuBkI9Zwlz6NmOOgTiash-rIdmCWyUtsfoKZ2u2mKpyt2XK4GDH8Bo0zL_VFnBkds8FqB7KJ1mjRgCircrPFq9UdD2F5BPOV8h8U9V/s1600/RaspPiDLNALogo.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In diesem Tutorial möchte ich euch beschreiben, wie ihr mit eurem Raspberry Pi einen kostenlosen <a href="http://www.dlna.org/" target="_blank">DLNA</a>-Medienserver für euer Heimnetzwerk einrichten könnt und die Daten von euren USB Devices (Festplatten & Sticks) anderen Geräten in eurem Heimnetzwerk per WLAN zur Verfügung stellt. <br /><br />An wen richtet sich dieses Tutorial: Noobs, Anfänger und Fortgeschrittene.<br /><br />Im Netz gibt es zum Thema DLNA schon einige Tutorials, aber keines davon führte mich zum Ziel. Daher die Idee mit diesem Tutorial, das euch hoffentlich hilft und die Zeit für die Einrichtung verkürzt.<br /><br />Kurz vorweg, ich bin kein Linux Experte und besitze meinen Raspberry Pi 3 Model B erst seit ein paar Tagen. Ich bin eigentlich ein Windows User und habe diverse USB Festplatten und fand es immer schon lästig, wenn man z.B. die Fotos, Filme und Musik von den USB Devices auf anderen Geräten im Haushalt wiedergeben wollte. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Ziel dieses Tutorials ist es also, dass ihr, wenn ihr ein oder mehrere USB Devices habt, diese an euer Raspberry Pi (direkt oder per USB-Hub) anschließen könnt und dann mit euren DLNA-fähigen Geräten per WLAN auf die Medien, die auf diesen Geräten gespeichert sind, zugreifen könnt. Wir fangen bei Null an mit einem jungfräulichen Raspberry Pi und am Ende habt ihr ein komplett konfiguriertes System.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><span style="font-size: small;"><b> </b></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><b>Setup</b></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Mein PC Setup:<br />- Windows 8 PC mit Putty SSH Client installiert<br />- SD-Karten Lesegerät (bei vielen schon mit eingebaut)<br />- Diverse externe USB Festplatten</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Mein Raspberry Pi Setup:<br />- <a href="http://amzn.to/2dPX3j3" target="_blank">Raspberry Pi 3 Model B</a><br />- <a href="http://amzn.to/2dPVFNr" target="_blank">Raspberry Pi 3 Gehäuse von KuGi</a><br />- <a href="http://amzn.to/2dZLUN4" target="_blank">Rydges SpeedPower High-Quality PC Netzteil</a><br />- <a href="http://amzn.to/2e3PiaZ" target="_blank">EasyAcc Superspeed USB 3.0 7 Port Hub</a><br />- <a href="http://amzn.to/2dTcdrf" target="_blank">SanDisk Extreme 32GB Class 10 microSDH</a><br />- <a href="http://amzn.to/2dTaGl0" target="_blank">AmazonBasics Hochgeschwindigkeits-HDMI-Kabel</a><br /><br /><span style="font-size: xx-small;"><i>Die hier aufgezählten Produkte sind Affiliate-Links</i></span><br /><br />Hinweis<span style="font-family: "verdana" , sans-serif;">: </span>Falls ihr euren Pi bereits angeschlossen und aufgesetzt habt, könnt ihr die folgenden Abschnitte überspringen und direkt mit zum Punkt <b><a href="https://www.blogger.com/blogger.g?blogID=37412491#DLNA">DLNA-Medienserver einrichten</a></b> weitergehen. Für alle anderen gibt es hier eine ausführliche Anleitung mit ersten Schritten wie ihr euren Pi einrichten könnt.</span></span><br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Raspberry Pi anschließen und installieren</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /> </span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Nachdem ihr den Raspberry Pi angeschlossen habt kann es eigentlich schon direkt losgehen. <br />Ich habe hier einen Monitor stehen mit zwei HDMI Eingängen. Am einem hängt der PC und an dem anderen der Raspberry Pi. Ich kann also immer zwischen beiden Geräten hin und her switchen. Falls ihr mehrere Monitore habt, dann ist das natürlich noch bequemer. Natürlich solltet ihr noch, zumindest für den Anfang, eine Maus und eine Tastatur an euren Raspberry Pi klemmen. Zur Not könnt ihr aber auch diese Geräte switchen und für PC & Pi nutzen. Ist dann etwas lästig mit den Kabeln, aber ich habe in diesem Tutorial versucht darauf zu achten, dass ihr den Pi nur einmal zu Beginn mit Maus und Tastatur ansteuern müsst. Wenn ihr mit den ersten Schritten durch seid, dann steuert ihr den Pi komplett von eurem PC aus. </span></span><br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Los geht’s</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Installiert euch zuerst einmal <a href="http://www.putty.org/" target="_blank"><b>PuTTY</b></a> auf eurem PC, damit ihr später per SSH auf euren Pi zugreifen könnt. Später mehr dazu.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Jetzt zur SD-Karte, um genau zu sein zur microSD-Karte, denn der Pi schluckt nur die kleinen Karten. Bei der von mir verlinkten Karte ist ein SD-Karten Adapter dabei, damit ihr die Daten auch mit eurem PC auf die Karte bekommt. Jetzt spielt ihr das Betriebssystem auf die Karte. Dazu könnt ihr einfach auf die <a href="https://www.raspberrypi.org/" target="_blank">offizielle Raspberry Pi Webseite</a> gehen und klickt dort auf den Menüpunkt <b>DOWNLOADS</b>. Dort ladet ihr euch dann <b>NOOBS</b> runter. Ich habe einfach die ZIP heruntergeladen.</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjep3RDQoDyhFJ6UDXrCdt0-FOGT4RKX-HJ0HoAEIdZqw9vtrs89lNxE5a8p6IjNK6qa3XYfhe9NQmfV1Qh_0BqqT3Bc8dzlRFQ7R4pnSoA1PTYyieSIALjqn8iaGNygKSV_e4T/s1600/DownloadNoobs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjep3RDQoDyhFJ6UDXrCdt0-FOGT4RKX-HJ0HoAEIdZqw9vtrs89lNxE5a8p6IjNK6qa3XYfhe9NQmfV1Qh_0BqqT3Bc8dzlRFQ7R4pnSoA1PTYyieSIALjqn8iaGNygKSV_e4T/s320/DownloadNoobs.png" width="320" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wenn der Download abgeschlossen ist entpackt ihr die ZIP einfach und kopiert den Inhalt auf eure SD-Karte. Danach entnehmt ihr die microSD-Karte aus dem Adapter und steckt sie in den Pi. Jetzt klemmt ihr das Stromkabel an den Pi. Soweit so gut. Der Pi startet nun. Ihr folgt einfach den Installationsanweisungen und installiert NOOBS, bzw. <a href="https://www.raspbian.org/" target="_blank">Raspbian</a>. Mit wenigen Mausklicks und ein paar Minuten Geduld läuft euer System. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Stellt nun die Verbindung zu eurem WLAN her. </span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJPnG6beg1lDMIXZ-YgXwyhWW2Xyag_QTDuo51vJkTbgcoiT5r2NgRkC888j_QObLvfsZhbWn1AFUNbYgkXykJ7yzYjDyQMupdlG7oR2aHM0rYb51W8tQjYAXteB61jzluJJ8/s1600/RaspberryWLAN.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJPnG6beg1lDMIXZ-YgXwyhWW2Xyag_QTDuo51vJkTbgcoiT5r2NgRkC888j_QObLvfsZhbWn1AFUNbYgkXykJ7yzYjDyQMupdlG7oR2aHM0rYb51W8tQjYAXteB61jzluJJ8/s1600/RaspberryWLAN.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Danach</span> öffnet ihr die Konsole. </span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-J5Z0DL3QRX5bbWXBHd0ulp1eAi2R4TSVw60uud7nJGibMz6Pk-gCayHYrgoZn8pXIqGm5gEs1DCJ5tMlU8CmBNAAi7Zy2qp5Gj1XKBdzXoF7wULR7HgHZkFH4lNeMt9Vqzho/s1600/RaspberryKonsoleOeffnen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-J5Z0DL3QRX5bbWXBHd0ulp1eAi2R4TSVw60uud7nJGibMz6Pk-gCayHYrgoZn8pXIqGm5gEs1DCJ5tMlU8CmBNAAi7Zy2qp5Gj1XKBdzXoF7wULR7HgHZkFH4lNeMt9Vqzho/s1600/RaspberryKonsoleOeffnen.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Bevor ihr weitermacht, empfiehlt es sich euer System auf den neuesten Stand zu bringen.<br />Gebt dazu folgendes ein um eure package list zu updaten:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo apt-get update</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Und jetzt gebt ihr noch folgendes ein um eure packages zu upgraden:</span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo apt-get upgrade</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Nach ein paar Minuten ist auch dieser Prozess abgeschlossen und es kann weiter gehen.<br /><br /> </span></span><br />
<br />
<b><span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">SSH Zugriff unter Raspbian einrichten</span></span></b><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<br />
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Damit ihr gleich den Pi von eurem PC aus steuern könnt sind noch ein paar Schritte notwendig.<br />Solltet ihr eine ältere (bei der aktuell verlinkten Version ist das nicht nötig) oder eine andere Distribution haben, dann müsst ihr den SSH-Server manuell installieren. <br />Gebt dazu folgendes ein wenn nötig:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo apt-get install ssh</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Jetzt könnt ihr den SSH-Server starten. Dieser Schritt ist in jedem Fall nötig:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo /etc/init.d/ssh start</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Damit der SSH-Server automatisch bei jedem Neustart vom Pi startet, empfehle ich noch folgendes einzugeben:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo update-rc.d ssh defaults</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Nun müsst ihr noch die IP-Adresse von eurem Pi herausfinden.<br />Gebt dazu folgendes in die Konsole ein:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">ifconfig</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Jetzt schaut ihr bei <b>wlan0</b> nach der <b>inet Adresse</b>. <br />In meinem Fall lautet die IP-Adresse: 192.168.0.21<br />Notiert euch die IP-Adresse bevor ihr weiter macht. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHyMOq98LE36ZDmrssgM5rXhJI2LuTYukhSK1_4INmuKJ6AcOuE0ckZMsBMa8nBZb98BzNMCNPDx0-gz0Af61b7PQ100AFIdHVEqlui2a8PnlIPFYnOM0Rw4ngWkNMemIbIEx/s1600/ifconfig.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHyMOq98LE36ZDmrssgM5rXhJI2LuTYukhSK1_4INmuKJ6AcOuE0ckZMsBMa8nBZb98BzNMCNPDx0-gz0Af61b7PQ100AFIdHVEqlui2a8PnlIPFYnOM0Rw4ngWkNMemIbIEx/s320/ifconfig.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Wechselt nun zu eurem PC und startet <b>PuTTY</b>. Dort gebt ihr in das Feld <b>Host Name (or IP address)</b> eure eben ermittelte IP-Adresse ein. Damit ihr das nicht immer wieder machen müsst empfiehlt es sich eine Session zu speichern. Klickt nun auf <b>Open</b>. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLwjE_LWxgRCXva4DsVwvzhQ0eLMxcp2qTqGxIt53rVsvVitVgwAUhwXs1rmgbFR6IA_DG4KvbUTEZW5TJ333yjIf3xaX78klVpOEmqjCBxrjw2e0tlDzjrjSubaeNUw6TZmls/s1600/PuTTY.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLwjE_LWxgRCXva4DsVwvzhQ0eLMxcp2qTqGxIt53rVsvVitVgwAUhwXs1rmgbFR6IA_DG4KvbUTEZW5TJ333yjIf3xaX78klVpOEmqjCBxrjw2e0tlDzjrjSubaeNUw6TZmls/s320/PuTTY.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Es sollte sich eine Konsole öffnen, die euch fragt mit welchen Zugangsdaten ihr euch beim Pi anmelden wollt.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPr3OjGZXsMCXbFPCGGZjElMLBxOID1j7H6IxttG06Me2Ru5ncyRh_ck2UoqV90GPOb_4nbBOuK45lUcJRWtgczfZde6mKOpsCn_OQ2BX9H2FToiwY0dJelwY2XHU9OKRchgQY/s1600/PuTTY_Konsole_Login01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPr3OjGZXsMCXbFPCGGZjElMLBxOID1j7H6IxttG06Me2Ru5ncyRh_ck2UoqV90GPOb_4nbBOuK45lUcJRWtgczfZde6mKOpsCn_OQ2BX9H2FToiwY0dJelwY2XHU9OKRchgQY/s320/PuTTY_Konsole_Login01.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die Default Zugangsdaten sind immer:<br />User: <b>pi</b><br />Passwor<span style="font-family: "verdana" , sans-serif;">d</span>: <b>raspberry</b></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><b> </b><br />Gebt nun also zuerst <b>pi</b> ein und bestätigt mit Enter.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiol1l5kfee85eQKm3VmWSjP4Qrb36DnavKX7Y8MNlyMskwdqVC4s_bWqU5NDeszbFsxP051t0msYOX1eQLpiiKtONEp-NloQ5R1dk6Eq4KsaCCT5tNMJOh_e_qgZnUFZBUCt4T/s1600/PuTTY_Konsole_Login02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiol1l5kfee85eQKm3VmWSjP4Qrb36DnavKX7Y8MNlyMskwdqVC4s_bWqU5NDeszbFsxP051t0msYOX1eQLpiiKtONEp-NloQ5R1dk6Eq4KsaCCT5tNMJOh_e_qgZnUFZBUCt4T/s320/PuTTY_Konsole_Login02.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Jetzt das Passwort <b>raspberry</b> eingeben und wie immer mit Enter bestätigen. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Nicht wundern: Bei der Eingabe des Passworts erscheinen keine Symbole in der Konsole. <br />Solltet ihr die Zugangsdaten korrekt eingegeben haben, dann erscheint der folgende Screen und ihr seid startklar um den DLNA-Server einzurichten. </span></span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3nCM4405Up18P4nAWSqsk1ty5ofbs3ZfnBLFaU3bNfzO8H-nMYS9_k5y4wld5sipBXbSkYMzanWNEWvD4-xPd8rlb60dzTEhmTBWB-Phl27fG2UAz_S-pw70lc2GuesIdS7I0/s1600/PuTTY_Konsole_Login03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3nCM4405Up18P4nAWSqsk1ty5ofbs3ZfnBLFaU3bNfzO8H-nMYS9_k5y4wld5sipBXbSkYMzanWNEWvD4-xPd8rlb60dzTEhmTBWB-Phl27fG2UAz_S-pw70lc2GuesIdS7I0/s320/PuTTY_Konsole_Login03.png" width="320" /></a></div>
<br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span id="DLNA" style="font-family: "verdana" , sans-serif;">DLNA-Medienserver einrichten</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Da der Pi nur über wenige USB-Anschlüsse verfügt, empfiehlt es sich einen USB-Hub zu verwenden. Ich habe oben den USB-Hub verlinkt den ich benutze. <br />Wichtig, wenn eure USB Devices nicht über eine eigene Stromversorgung verfügen ist ein USB-Hub mit Stromversorgung Pflicht. Der Pi schafft es ansonsten häufig nicht die angeschlossenen Geräte alle mit ausreichend Strom zu versorgen. Es kann auch zu Abstürzen kommen. Erspart euch das also am besten und benutzt z.B. den von mir verlinkten USB-Hub oder einen eurer Wahl.<br />Schließt eure Festplatten usw. jetzt am Pi, bzw. am Hub an und startet diese, falls die Geräte einen eigenen An- / Ausschalter haben. Wartet ggf. ein paar Sekunden bis die Geräte alle laufen.<br /><br />In meinem Fall habe ich drei externe Festplatten mit den Namen <b>Volume</b>, <b>TREKSTOR</b> und <b>G-Drive</b> angeschlossen. Ich erkläre das ganze Prozedere daher von diesem Setup ausgehend.<br /><br />Als DLNA-Server verwenden wir <a href="https://wiki.ubuntuusers.de/ReadyMedia/" target="_blank"><b>ReadyMedia</b></a>. Besser bekannt unter dem früheren Namen MiniDLNA. <br />Bevor wir weitermachen: Ich verwende in diesem Tutorial immer den Namen MiniDLNA. Bitte nicht davon irritieren lassen. Da der DLNA-Server in der Konsole auch über den Namen minidlna angesteuert wird macht das aus meiner Sicht Sinn.<br /><br />Wir installieren jetzt aber noch nicht den DLNA-Server, sondern kümmern uns erst einmal um die Datenträger(Festplatten und/oder USB-Sticks). Die wollen wir mounten. Um das machen zu können benötigen wir die UUID und den TYPE der Geräte. <br />Um an diese Daten zu kommen geben wir in der Konsole ein:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo blkid</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Ihr erhaltet eine Liste in der ihr nach euren Datenträgern suchen müsst. In dem folgenden Screenshot seht ihr wie das in meinem Fall aussieht. Zu sehen sind die UUID´s und die TYPEn der einzelnen Geräte. Notiert euch diese Daten und haltet euch bereit diese im übernächsten Schritt einzugeben. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWSCugjK10SnvrZ77j6Fw2_1yRokx5_8bXiPbZZUSZ2k7UKzhcUwRXq0XM-Zfkv3OqCI-DBTex9zte_HECnlrytoKnY3zS3Wy1-bEdZSq0_IKUNzK9z_YoQPps8iyaTCkpais/s1600/sudo_blkid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWSCugjK10SnvrZ77j6Fw2_1yRokx5_8bXiPbZZUSZ2k7UKzhcUwRXq0XM-Zfkv3OqCI-DBTex9zte_HECnlrytoKnY3zS3Wy1-bEdZSq0_IKUNzK9z_YoQPps8iyaTCkpais/s320/sudo_blkid.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Nun müssen wir Verzeichnisse erstellen in die wir die Datenträger mounten. Für jeden Datenträger ein Verzeichnis. In meinem Fall sind das nach Adam Riese 3 Verzeichnisse. Ich war bei der Benennung nicht besonders kreativ und habe als Namen HDD1 (für <b>Volume</b>), HDD2 (für <b>TREKSTOR</b>) und HDD3 (für <b>G-Drive</b>) gewählt. Natürlich könnt ihr hier nach Belieben auch andere Namen wählen. Zusätzlich zum Erstellen der Verzeichnisse müssen wir uns auch noch um deren Rechte kümmern, damit verschiedene User Zugriff haben.<br />Am Beispiel für HDD1. So wird das Verzeichnis erstellt:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo mkdir -p /media/HDD1</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Und so vergeben wir die Rechte für HDD1:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo chmod 755 /media/HDD1</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Dieses Prozedere wiederholen wir jetzt noch für die anderen Datenträger/Verzeichnisse:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo mkdir -p /media/HDD2
sudo chmod 755 /media/HDD2</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Und:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo mkdir -p /media/HDD3
sudo chmod 755 /media/HDD3</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />
Wer mehr über chmod, Dateirechte und 755, 777, etc. erfahren will der findet <b><a href="http://support.ecs-webhosting.de/FragenundAntworten/Linux-Dateirechte-und-755-777-etc-verstehen">hier</a></b> eine sehr gute Erklärung.
<br /><br />Jetzt sind die Verzeichnisse erstellt und die Rechte vergeben. <span style="font-family: "verdana" , sans-serif;">Ihr könnt euch das nun z.B. direkt in Raspbian mit dem Dateimanager anschauen.<br />Auf der linken Seite vom Dateimanager seht ihr im Verzeichnisbaum meine drei Laufwerke und rechts daneben meine Medienverzeichnisse von HDD1 (für <b>Volume</b>)</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xDYL2QXPH0SEnInyfNV_bgBAlrhYgSNMax_fAWXhDb9dbtqh1uJcNp7l-GzigJ7HiD82c1gPHBmcMd1wLcaEfpwG5MOynn5VVKSG784fqmtiOGblWb9kIaVrdNME1v-DYitS/s1600/RaspberryVerzeichnisse.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4xDYL2QXPH0SEnInyfNV_bgBAlrhYgSNMax_fAWXhDb9dbtqh1uJcNp7l-GzigJ7HiD82c1gPHBmcMd1wLcaEfpwG5MOynn5VVKSG784fqmtiOGblWb9kIaVrdNME1v-DYitS/s320/RaspberryVerzeichnisse.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Um die Datenträger zu mounten müssen wir nun die Datei fstab editieren:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo nano /etc/fstab</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Ihr habt nun mit dem Editor <a href="https://wiki.ubuntuusers.de/Nano/" target="_blank">Nano</a> die Datei fstab geöffnet. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC5R1ZliVZhoAknhbcIuJIYNwo8mXcl5Z5UyN_sAvM-iggBbFg1gqwOVWuCeeZ9KqV-AlNmeTzdgCF3TQSz8PyP-8S9vmv6A7DMKmvYswKwnf8R2KBowaT7VvY_HNTulX58E_v/s1600/fstab_entries_leer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC5R1ZliVZhoAknhbcIuJIYNwo8mXcl5Z5UyN_sAvM-iggBbFg1gqwOVWuCeeZ9KqV-AlNmeTzdgCF3TQSz8PyP-8S9vmv6A7DMKmvYswKwnf8R2KBowaT7VvY_HNTulX58E_v/s320/fstab_entries_leer.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Jetzt navigiert ihr mit den Pfeiltasten den Cursor nach unten bis zur ersten freien Zeile und tragt hier die <b>UUID</b>´s, <b>TYPE</b>n und die Pfade zu den eben angelegten Verzeichnissen ein. Zuerst kommt die <b>UUID</b>, dann der Verzeichnis-Pfad und danach der <b>TYPE</b>. Dahinter folgt noch jeweils <b>defaults</b> und zweimal <b>0</b>. Das alles immer jeweils pro Gerät/Verzeichnis in eine Zeile schreiben. So wie in dem folgenden Screenshot zu sehen:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVM4gcFpoko1wUE1aFRaZNGtirYemx1Uo9YegqdCPYC_m59xb0AB2XAgqoNWX1Jo4lcnZ1Kx3KXLPvbcttfRrifPEJO4z_dVDzCDOd46c6aE7Md3BIpXqmHA0uScIizfP5wn7D/s1600/fstab_entriesMarkiert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVM4gcFpoko1wUE1aFRaZNGtirYemx1Uo9YegqdCPYC_m59xb0AB2XAgqoNWX1Jo4lcnZ1Kx3KXLPvbcttfRrifPEJO4z_dVDzCDOd46c6aE7Md3BIpXqmHA0uScIizfP5wn7D/s320/fstab_entriesMarkiert.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wenn ihr fertig seid schließt ihr die Datei mit <b>CTRL</b> + <b>X</b>. Danach die <b>y</b>-Taste drücken und mit Enter bestätigen, um die Änderungen zu speichern. <br />Tippt nun in der Konsole folgendes ein um euren Pi neu zu booten:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo reboot</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br /><b>PuTTY</b> verliert nach der Eingabe die Verbindung. Wartet bis euer Pi neu gestartet ist und verbindet euch, wie oben beschrieben, neu mit eurem Pi.<br /><br />Jetzt sind wir soweit und können MiniDLNA installieren. <br />Gebt dazu in die Konsole folgendes ein:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo apt-get install minidlna</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Nachdem MiniDLNA installiert ist müssen wir den DLNA-Server natürlich noch konfigurieren. Gebt dazu folgendes in die Konsole ein, um die Datei minidlna.conf mit Nano zu editieren:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo nano /etc/minidlna.conf</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Jetzt wird es etwas unübersichtlich. <br />Zunächst müssen wir die Verzeichnisse festlegen die wir im WLAN zur Verfügung haben wollen, oder wie es in der Beschreibung heißt: <i>Path to the directory you want scanned for media files.</i><br />Scrollt mit den Pfeiltasten zu dieser Zeile hier:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">media_dir=/var/lib/minidlna</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Diese Zeile müsst ihr auskommentieren oder entfernen:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">#media_dir=/var/lib/minidlna</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Ich habe auf meiner Festplatte mit dem Namen <b>Volume</b>, also dem vorhin erstellten Verzeichnis HDD1 folgende Ordner die ich von MiniDLNA gescannt haben möchte: <i>moviesHD</i>, <i>movies3D</i>, <i>neu</i>, <i>series</i> und <i>images</i>. Dafür habe ich folgende Einträge in die minidlna.conf geschrieben:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<pre class="brush: js; gutter: false; auto-links: false;">media_dir=V,/media/HDD1/moviesHD
media_dir=V,/media/HDD1/movies3D
media_dir=V,/media/HDD1/neu
media_dir=V,/media/HDD1/series
media_dir=P,/media/HDD1/images</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Das <b>V</b> steht hierbei für Video und das <b>P</b> für Pictures. Als weiteren Typ gibt es auch noch <b>A</b> für Audio.<br />Mit den Typen könnt ihr festlegen welche spezifischen Inhalte/Medientypen die Verzeichnisse beinhalten. <br />Hätte ich jetzt auf der Festplatte z.B. eine andere Verzeichnisstruktur, dann würde das natürlich anders aussehen. <br /><br />Nur als Beispiel: Hätte ich auf der Festplatte Volume einen Ordner mit dem Namen <i>Media</i>, dort drin einen Ordner <i>mp3</i> und dort drin einen weiteren Ordner <i>audiobooks</i>, den ich gescannt haben möchte, dann würde der Eintrag dafür so aussehen:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">media_dir=A,/media/HDD1/Media/mp3/audiobooks</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Achtet auch hier unbedingt auf Groß- und Kleinschreibung.<br />Für meine drei Festplatten/Verzeichnisse sieht das wie folgt aus:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9TK2XSfx4_tTetYhAUivX58nFjfKdUCfVc7fSZO-k2YJiWhdxBoD9s4RWPkuLQi32zHhsuumXhpxerqLkIgN2p7-43JPNp-Kd45q42khF4cAhzlb6VyNPmGmVI8TOMFhtx2BU/s1600/minidlnaconf_DirPath.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9TK2XSfx4_tTetYhAUivX58nFjfKdUCfVc7fSZO-k2YJiWhdxBoD9s4RWPkuLQi32zHhsuumXhpxerqLkIgN2p7-43JPNp-Kd45q42khF4cAhzlb6VyNPmGmVI8TOMFhtx2BU/s320/minidlnaconf_DirPath.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Sucht nun nach dieser Zeile:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">#log_dir=/var/log</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />Und entfernt die Raute um die Zeile zu „aktivieren“:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">log_dir=/var/log</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Falls später etwas schief laufen sollte, <span style="font-family: "verdana" , sans-serif;">habt</span> ihr nun die Chance im log file nachzuschauen, was MiniDLNA dort für Fehler/Warnungen reingeschrieben hat. <br /><br />Jetzt sucht ihr nach der folgenden Zeile:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">#friendly_name=</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Hier vergebt ihr den Namen für euren DLNA-Server. Seid kreativer als ich. Der von mir gewählte Name lautet: <b>WORLD</b>. Die Zeile sieht in meinem Falls also so aus:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">friendly_name=WORLD</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Wenn ihr jetzt noch wollt, dass später neu hinzugefügte Mediendateien ohne einen Neustart des DLNA-Servers erfasst werden, dann müsst ihr nach dieser Zeile hier suchen:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">#inotify=yes</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Und die Raute entfernen:<br /></span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">inotify=yes</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Fertig. Schließt jetzt die Datei mit <b>CTRL</b> + <b>X</b>. Danach die <b>y</b>-Taste drücken und mit Enter bestätigen, um die Änderungen zu speichern.<br /><br />Optional, aber sehr empfehlenswert, wenn ihr wollt, dass der DLNA-Server automatisch immer gestartet wird wenn ihr euren Pi neu startet:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo update-rc.d minidlna defaults</pre>
<br /><br />Nun müsst ihr euren DLNA-Server starten:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna start</pre>
<br /><br />Und/oder:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna restart</pre>
<br /><br />Nun gebt ihr noch folgendes ein:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna force-reload</pre>
<br /><br />MiniDLNA beginnt nun die Dateien zu indizieren. Je nach Anzahl kann das eine ganze Weile dauern. Bis dieser Prozess nicht abgeschlossen ist sind nur die bereits indizierten Dateien zu sehen. <br /><br />Für den Fall das ihr später noch Änderungen an den Konfigurationsfiles vornehmen wollt, müsst ihr minidlna neu starten und neu laden. Das macht ihr mit den folgenden beiden Befehlen:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna restart</pre>
<br /><br />Und:<br /><br /><pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna force-reload</pre>
<br /><br /><b>Glückwunsch!</b> Ihr habt nun euren DLNA-Medienserver erfolgreich eingerichtet. Nun könnt ihr mit euren DLNA-fähigen Geräten, die sich im gleichen WLAN befinden, auf die Mediendateien zugreifen.</span></span><br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Testen</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr könnt das Ganze auch direkt am PC testen. Gebt dazu die IP-Adresse von eurem Pi in eurem Browser ein mit dem Port 8200. In meinem Fall sieht das so aus:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span>
<br />
<pre class="brush: js; gutter: false; auto-links: false;">192.168.0.21:8200</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjff0WCzmnFSfSVfgdebbGzX_7LofuNFAUmV9dzDVHHKJjtDqzdUDU7WonRpVbO8hyTH6a9XogkOySw3pIj9F5qrDW4or1nQDrlZBgT7-yKPextrybkCW8VfDn9mGBnc15AqZsp/s1600/IP-Adresse.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="34" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjff0WCzmnFSfSVfgdebbGzX_7LofuNFAUmV9dzDVHHKJjtDqzdUDU7WonRpVbO8hyTH6a9XogkOySw3pIj9F5qrDW4or1nQDrlZBgT7-yKPextrybkCW8VfDn9mGBnc15AqZsp/s320/IP-Adresse.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ihr solltet nun ein kleines Webfrontend zu sehen bekommen, das euch Auskunft darüber gibt, welche und wieviel Dateien indiziert worden sind. </span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHO-BbO5GycyVdqI43czj7rtbm1-1au4OFhAc3Bk72Nq6AMCRwD0UvZS9jsT-hMaf5AkMheILUh1SB9CpIX73FQyKC26tr3mf1QZNP828HcJwD4ErnAde-jBguxQTQYVFyRzLj/s1600/MiniDLNAstatus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHO-BbO5GycyVdqI43czj7rtbm1-1au4OFhAc3Bk72Nq6AMCRwD0UvZS9jsT-hMaf5AkMheILUh1SB9CpIX73FQyKC26tr3mf1QZNP828HcJwD4ErnAde-jBguxQTQYVFyRzLj/s320/MiniDLNAstatus.png" width="320" /></a></div>
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wenn ihr diesen Test direkt nach den eben aufgezeigten Schritten durchführt, dann kann es sein, dass der Prozess der Indizierung noch nicht abgeschlossen ist und somit nicht alle relevanten Dateien aufgezählt worden sind. In diesem Fall solltet ihr das Webfrontend einfach aktualisieren. Die Anzahl der Dateien sollte dann bei jedem Klick auf den Reload-Button vom Browser steigen. Ihr könnt so quasi live zuschauen wie die Indizierung voranschreitet.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Auf meinem Android Smartphone habe ich die App <a href="https://play.google.com/store/apps/details?id=com.bubblesoft.android.bubbleupnp" target="_blank">BubbleUpPnP</a> installiert, mit der ich auf den DLNA-Server WORLD zugreifen kann. Nachfolgend ein paar Screenshots davon.<br />
Hinweis: Ich hatte zu Beginn einmal kurz Schwierigkeiten mit meinem Smartphone auf WORLD zuzugreifen, nachdem ich den Pi nochmal komplett neu aufsetzen musste. Der DLNA-Server wollte einfach nicht mehr in der Liste der Medienserver bei BubbleUpPnP erscheinen. Nachdem ich das Smartphone einmal neugestartet hatte gab es dann aber keine Probleme mehr.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNaD5acrfb6qVyTchuIWo3jeHyaWdZ1hIx4kG3nJE49AFIpuPL2Isy-NyuOB0Flb5EBTHJsWbtIiJx7fno_-k454AfiFiHzGK8juo6f52MaLkF6Z8p0ouBmFadjD7g9Vx-OMMo/s1600/Android_Screenshot_BubbleUpPnP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNaD5acrfb6qVyTchuIWo3jeHyaWdZ1hIx4kG3nJE49AFIpuPL2Isy-NyuOB0Flb5EBTHJsWbtIiJx7fno_-k454AfiFiHzGK8juo6f52MaLkF6Z8p0ouBmFadjD7g9Vx-OMMo/s320/Android_Screenshot_BubbleUpPnP.png" width="320" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Ganze läuft auch problemlos auf meinem Samsung Smart TV. Ein etwas älteres Gerät von Philips funktioniert ebenfalls recht gut. Hier ist die Software vom TV nur nicht immer in der Lage alle Medienformate korrekt abzuspielen. Das ist dann aber der TV schuld und nicht der DLNA-Server!<br />Mit entsprechenden Apps habe ich das auch auf iPhone und iPad getestet. Alles kein Problem. Ich konnte für die Apple Geräte allerdings keine kostenlose App finden die mich überzeugt hat.<br />Noch nicht getestet habe ich das persönlich alles mit Playstation und Xbox, aber theoretisch sollte das auch problemlos funktionieren. Jedenfalls gibt es im Netz dazu sehr viele positive Berichte.<br /><br />Wenn es bei euch nicht klappt oder zu Problemen kommt, dann werft am besten mal einen Blick ins log file um nach Fehlern zu suchen. Gebt dazu in die Konsole folgendes ein:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo nano /var/log/minidlna.log</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><br />
<br />
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><b>Zusätzlich</b></span></span>
<br />
<br /><br />Wenn ihr das automatische starten von minidlna beim Neustart vom Pi wieder entfernen wollt, dann gebt das hier in die Konsole ein:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo update-rc.d -f minidlna remove</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Den DLNA-Server stoppen:</span></span><br />
<br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo service minidlna stop</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Falls sich der Service nicht stoppen lässt, dann könnt ihr den Service auch killen:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo killall minidlna</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<br /><br />Und wenn ihr MiniDLNA wieder komplett deinstallieren wollt, dann macht ihr das mit:</span></span><br />
<pre class="brush: js; gutter: false; auto-links: false;">sudo atp-get remove --purge minidlna</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Ende</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ich hoffe ihr hattet Erfolg. Natürlich gebe ich keine Gewährleistung für dieses Tutorial. Falls ihr Fragen habt, oder Anregungen/Verbesserungen, dann postet diese sehr gerne in den Kommentaren. </span></span><br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"> </span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Quellen</span></span></h2>
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"></span></span></h2>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
<span style="font-family: "verdana" , sans-serif;"><a href="https://www.raspberrypi.org/downloads/noobs/">https://www.raspberrypi.org/downloads/noobs/</a><br />
<a href="https://www.raspberrypi.org/forums/viewtopic.php?f=35&t=16352">https://www.raspberrypi.org/forums/viewtopic.php?f=35&t=16352</a><br />
<a href="https://raspberry.tips/raspi-media-center/raspberry-pi-als-media-server-mit-minidlna-einrichten/">https://raspberry.tips/raspi-media-center/raspberry-pi-als-media-server-mit-minidlna-einrichten/</a><br />
<a href="http://www.forum-raspberrypi.de/Thread-tutorial-minidlna">http://www.forum-raspberrypi.de/Thread-tutorial-minidlna</a><br />
<a href="https://kofler.info/der-raspberry-pi-als-dlna-server/">https://kofler.info/der-raspberry-pi-als-dlna-server/</a><br />
<a href="https://www.youtube.com/watch?v=5FCGMljivIg">https://www.youtube.com/watch?v=5FCGMljivIg</a><br />
<a href="https://wiki.ubuntuusers.de/ReadyMedia/">https://wiki.ubuntuusers.de/ReadyMedia/</a><br />
<a href="http://www.putty.org/"><span style="font-family: "verdana" , sans-serif;">http://www.putty.org/</span></a><br />
<a href="http://www.shellbefehle.de/befehle/">http://www.shellbefehle.de/befehle/</a><br />
<a href="https://willy-tech.de/sd-karte-mit-diskpart-formatieren/">https://willy-tech.de/sd-karte-mit-diskpart-formatieren/</a></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://support.ecs-webhosting.de/FragenundAntworten/Linux-Dateirechte-und-755-777-etc-verstehen">http://support.ecs-webhosting.de/FragenundAntworten/Linux-Dateirechte-und-755-777-etc-verstehen</a></span></span><br />
<br /><br />
<h2>
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;">Update</span></span></h2><br />
<span style="font-size: small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;">Zeit für ein kleines Update. Ich habe den DLNA-Medienserver nun schon einige Zeit im Einsatz und war zu Beginn auch sehr angetan von der Performance. Inzwischen aber habe ich an meinem Setup ein paar Änderungen vorgenommen. <br />Die wichtigste Änderung ist die Verbindung vom Pi mit meinem Netzwerk. Damit auch Videoinhalte in <b>FullHD</b> (1080p mit DTS Sound) flüssig und ohne buffern auf die Endgeräte gestreamt werden können habe ich den Pi nun per LAN Kabel direkt mit meinem Modem verbunden. Jetzt ist der Pi zwar nicht mehr drahtlos im Netz, aber so ist sichergestellt, dass auch Videoinhalte mit mehr als 720p sauber gestreamt werden können. Ich bin kein Fan von Kabeln, aber die Geschwindigkeit vom WLAN hat so einfach nicht ausgereicht. Und die Endgeräte auf die gestreamt werden soll sind ja nach wie vor drahtlos im Netzwerk, weshalb ich die Lösung mit dem LAN Kabel zwischen Pi und Modem nicht so schlimm finde.<br />Wenn also euer Pi nicht allzu weit weg steht vom Modem, dann empfehle ich eine Verbindung per LAN Kabel. Zum Glück sind hierzu nur wenige Schritte nötig die nur im Detail vom Tutorial abweichen.<br /><br />Schließt euren Pi einfach per Kabel ans Modem an und deaktiviert WLAN über das entsprechende Symbol in der Taskleiste von Raspbian. Falls die Verbindung per Kabel erfolgreich war erscheint neben dem deaktivierten WLAN-Symbol nun ein neues Symbol mit zwei Pfeilen das eine erfolgreiche Verbindung symbolisiert. So weit, so gut. Wollt ihr euren Pi auch weiterhin über SSH mit <b>PuTTY</b> steuern, dann müsst ihr erneut die IP-Adresse vom Pi ermitteln. Wie im Tutorial beschrieben gebt ihr dazu wieder <b>ifconfig</b> in die Konsole ein. Dieses Mal schaut ihr aber nicht bei <b>wlan0</b> nach der <b>inet Adresse</b>, sondern bei <b>eth0</b>. In der Regel sollte sich die IP-Adresse nur minimal verändert haben. Im WLAN hatte mein Pi die IP-Adresse <b>192.168.0.21</b> und jetzt <b>192.168.0.20</b><br />Mit der neuen IP-Adresse könnt ihr euch nun wie schon gewohnt über PuTTY mit eurem Pi konnektieren. Und auch beim Testen ob euer Medienserver gestartet worden ist und die Inhalte korrekt indexiert worden sind gebt ihr nun einfach statt der alten die neue IP-Adresse mit ein. In meinem Fall: <b>192.168.0.21:8200</b><br />Alles andere funktioniert nach wie vor wie im Tutorial beschrieben und auch die Endgeräte sollten wie schon gewohnt euren Medienserver finden. Nur das jetzt Videoinhalte in FullHD ohne lästiges buffern laufen sollten.<br />Hier noch ein sehr schöner Artikel zum Thema: <a href="https://www.heimkino-praxis.com/wlan-streaming/">Ist WLAN für Media Streaming geeignet?</a><br /><br />Ein anderer Punkt der mich am DLNA-Medienserver stört ist der Indexierungsprozess. Ich habe für dieses Problem leider noch keine saubere Lösung gefunden. Vielleicht habt ihr ja eine Idee.<br />Folgende Situation. Ihr spielt auf einen eurer Datenträger neue Files drauf und wollt diese nun ins heimische Netzwerk streamen. Euer Medienserver aber zeigt nur die alten Files an. Ganz klar, ihr müsst erst die Files neu indizieren. Das kann je nach Anzahl bis zu mehrere Stunden dauern. Klar, das nervt, aber was richtig nervt ist die Tatsache das der Befehl <b>sudo service minidlna force-reload</b> nicht immer ausgeführt wird. Man gibt den Befehl ein und nichts passiert. Da hilft auch kein <b>stop</b> und kein <b>reload</b> des Medienservers. Erst wenn ich <b>sudo nano /etc/minidlna.conf</b> in die Konsole eingebe, dort ein paar Dinge verändere und dann das Dokument abgespeichert habe, kann ich mit <b>force-reload</b> den Medienserver dazu zwingen alles neu zu indizieren. <br />Falls also einer von euch eine Idee hat wieso <b>force-reload</b> nicht jedes Mal dazu führt das meine Files neu indiziert werden bitte in die Comments schreiben.
<br /><br />
Auf meinen Android und iOS Geräten habe ich jetzt zum Abspielen von Videos und Audiodateien VLC installiert. <a href="https://play.google.com/store/apps/details?id=com.bubblesoft.android.bubbleupnp">BubbleUPnP</a>, wie im Tutorial beschrieben, ist nach wie vor auch eine super App um auf euren DLNA-Medienserver zuzugreifen und Medien wiederzugeben, aber mit VLC gibt es eine super bequeme, ebenfalls kostenlose und sehr schlanke Alternative. Und, VLC gibt es auch für iOS.<br /><br />
-Android: <a href="https://play.google.com/store/apps/details?id=org.videolan.vlc">VLC for Android</a><br />
-iOS: <a href="https://itunes.apple.com/de/app/vlc-for-mobile/id650377962">VLC for Mobile</a>
</span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com9tag:blogger.com,1999:blog-37412491.post-60391526101714048942016-04-29T11:22:00.001+02:002016-04-29T13:34:05.591+02:00Where am i<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrXfN3jlQhdJsigt1YfoBD43AHMIn9XfV6iXqB9SozSsxKwLMi7RNGdIWPa5gdCWbcX3j7nKu415a3NqoCUqT1XGuu7AjGiZPljdmit1ksYrSuzMxNzDV9NM5JKfzO9rGWw_a/s1600/PreviewWhereAmI.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrXfN3jlQhdJsigt1YfoBD43AHMIn9XfV6iXqB9SozSsxKwLMi7RNGdIWPa5gdCWbcX3j7nKu415a3NqoCUqT1XGuu7AjGiZPljdmit1ksYrSuzMxNzDV9NM5JKfzO9rGWw_a/s1600/PreviewWhereAmI.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In letzter Zeit habe ich sehr viel mit <a href="http://threejs.org/"><span style="font-family: "verdana" , sans-serif;">Three.js</span></a> herumexperimentiert, aber ich habe es nie geschafft zumindest mal einen Teil der Experimente hier zu veröffentlichen. <br />Das wollte ich ändern und herausgekommen ist dabei „Where am i“. Im Prinzip eine sehr primitive Variante von <a href="https://earth.google.de/">Google Earth</a>, umgesetzt mit Threejs und <a href="http://www.openstreetmap.org/">OpenStreetMap</a>.<br />Mit Hilfe von „Where am i“ könnt ihr euch anzeigen lassen wo ihr gerade auf der Erde seid. Dazu stehen euch drei Methoden zur Auswahl.<br />Bei der ersten Methode („position“) liefert euch der Browser (ihr müsst ggf. zustimmen das der Browser euren Standort abfragen darf) automatisch die Daten um zu bestimmen wo ihr euch befindet.<br />Bei der zweiten Methode („name“) könnt ihr eine Stadt oder einen Ort angeben und OpenStreetMap liefert dann die entsprechenden Daten.<br />Und bei der dritten Methode („latitude <span style="font-family: "verdana" , sans-serif;">&</span> longitude“) könnt ihr euch per Eingabe von Breiten- und Längengrad eure Position auf der Erde anzeigen lassen.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Ihr könnt die Anwendung direkt hier sta<span style="font-family: "verdana" , sans-serif;">rten, oder ihr öffnet </span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">„Where am i“ in einem <span style="color: white;"><b><a href="http://nkunited.de/whereami/index.html">neuen Browser-Fenster</a></b></span>. <span style="font-family: "verdana" , sans-serif;">Besonders zu empfehlen für <span style="color: white;"><a href="http://nkunited.de/whereami/index.html"><b>Mobile User/Touch Devices</b></a></span>!</span></span></span></span></span></span></span><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/whereami/index.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und hier noch ein <span style="font-family: "verdana" , sans-serif;">paar kurze Infos zur U<span style="font-family: "verdana" , sans-serif;">msetzung</span></span></span>.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;">Die me<span style="font-family: "verdana" , sans-serif;">isten der hier eingesetzt<span style="font-family: "verdana" , sans-serif;">en Texturen bekommt ihr <span style="font-family: "verdana" , sans-serif;">auf</span> </span></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">„</span></span><a href="http://planetpixelemporium.com/planets.html">Planet Texture Map Collection</a></span></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">“</span></span>. Eine <span style="font-family: "verdana" , sans-serif;">kleine<span style="font-family: "verdana" , sans-serif;"> aber feine und vor allem ko<span style="font-family: "verdana" , sans-serif;">stenlose</span> Kollektion an guten Texturen für Planeten. Neben der üblichen Color<span style="font-family: "verdana" , sans-serif;">Map bekommt ihr hier auch noch B<span style="font-family: "verdana" , sans-serif;">umpMap und S<span style="font-family: "verdana" , sans-serif;">pecu<span style="font-family: "verdana" , sans-serif;">lar<span style="font-family: "verdana" , sans-serif;">Map mit dazu. <span style="font-family: "verdana" , sans-serif;">Perfekt also für den Einsatz mit Three.js.</span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">An die Daten von OpenStreetMap gelangt ihr wie folgt.<br />Um an Latitude und Longitude zu kommen per z.B. Städtename benutze ich diese Funktion hier:</span></span><br />
<pre class="brush: js; auto-links: false">function geocode( location ) {
var geocode = 'http://nominatim.openstreetmap.org/search/' + encodeURI( location ) + '?format=json&polygon=1&addressdetails=1';
$.getJSON( geocode, function( data ) {
var lat = parseFloat( data[ 0 ].lat );
var lon = parseFloat( data[ 0 ].lon );
console.log( lat, lon );
} );
};
</pre>
<br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;">Und umgekehrt funktioniert das auch. Nämlich mit dieser kleinen Funktion<span style="font-family: "verdana" , sans-serif;">:</span></span><br />
</span><br />
<pre class="brush: js; auto-links: false">function geocodeReverse( lat, lon ) {
var geocode = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lon + '&zoom=18&addressdetails=1';
$.getJSON( geocode, function( data ) {
var city = data.address.city;
console.log( city );
} );
};
</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">
<span style="font-size: x-small;">Details dazu kann man sich <a href="http://wiki.openstreetmap.org/wiki/DE:Nominatim"><b>hier</b></a> durchlesen<span style="font-family: "verdana" , sans-serif;">. Eine wirklich sehr gute Anleitung mit vielen Beispielen.<span style="font-family: "verdana" , sans-serif;"> <br />Wie ihr am Dollarzeichen sicher schon erkannt habt braucht ihr hierfür <a href="https://jquery.com/">jQuery</a>.<span style="font-family: "verdana" , sans-serif;"> <span style="font-family: "verdana" , sans-serif;">Mit jQuery ist es einfach super komfortabel um an das <a href="https://de.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a> mit den Daten zu gela<span style="font-family: "verdana" , sans-serif;">ngen.</span></span></span></span></span></span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition"><b>hier</b></a> gibt es die Anleitung<span style="font-family: "verdana" , sans-serif;"> (mit <span style="font-family: "verdana" , sans-serif;">Beispiel</span>)</span> wie ihr mit <i>getCurrentPosition</i> an die Positionsdaten des Cli<span style="font-family: "verdana" , sans-serif;">en<span style="font-family: "verdana" , sans-serif;">ts/Device gelangt.</span></span></span> </span></span></span></span></span></span></span><br />
<br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">D<span style="font-family: "verdana" , sans-serif;">ie <span style="font-family: "verdana" , sans-serif;">Umrechnung <span style="font-family: "verdana" , sans-serif;">der Koor<span style="font-family: "verdana" , sans-serif;">di<span style="font-family: "verdana" , sans-serif;">naten von </span></span></span></span></span></span></span></span><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Breiten- und Längengrad in ein <span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Sphärisches Koordinaten System erfolgt mit dieser Funktion hier:</span></span></span></span></span></span></span></span></span></span></span></span>
<br />
<pre class="brush: js; auto-links: false">function cartesianToSpherical( radius, lat, lon ) {
var phi = deg2rad( 90 - lat );
var theta = deg2rad( lon + 180 );
var x = -( radius * Math.sin( phi ) * Math.cos( theta ) );
var z = ( radius * Math.sin( phi ) * Math.sin( theta ) );
var y = ( radius * Math.cos( phi ) );
return new THREE.Vector3( x, y, z );
};
function deg2rad( degAngle ) {
return ( degAngle * Math.PI ) / 180;
};
</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Mehr dazu erfahrt ihr <a href="http://stackoverflow.com/questions/36369734/how-to-map-latitude-and-longitude-to-a-3d-sphere"><b>hier</b></a></span><span style="font-family: "verdana" , sans-serif;">.<br /><span style="font-family: "verdana" , sans-serif;"> </span></span></span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und hier noch <span style="font-family: "verdana" , sans-serif;">ein paar </span><span style="font-family: "verdana" , sans-serif;">weitere sehr nützli<span style="font-family: "verdana" , sans-serif;">che Links<span style="font-family: "verdana" , sans-serif;">.<br /><span style="font-family: "verdana" , sans-serif;">Wenn ihr euch für den Glow-Effekt <span style="font-family: "verdana" , sans-serif;">um die Erde interes<span style="font-family: "verdana" , sans-serif;">siert<span style="font-family: "verdana" , sans-serif;">, dann schaut mal <a href="http://stackoverflow.com/questions/16269815/three-js-outer-glow-for-sphere-object"><b>hier</b></a> vorbei. <br /><span style="font-family: "verdana" , sans-serif;">Und <a href="http://jsfiddle.net/kbtn6pz5/"><b>hier</b></a><span style="font-family: "verdana" , sans-serif;"> gibt es noch ein sehr g<span style="font-family: "verdana" , sans-serif;">utes Beispiel wie ihr eine Sphere so drehen könnt, dass eine ausgewählte Koordinate auf der Sphere in Richtung der Kamera zeigt<span style="font-family: "verdana" , sans-serif;">.<br /><span style="font-family: "verdana" , sans-serif;">Die <span style="font-family: "verdana" , sans-serif;">Animation<span style="font-family: "verdana" , sans-serif;">en sind mi<span style="font-family: "verdana" , sans-serif;">t <a href="https://greensock.com/tweenlite">TwennLite</a> von <a href="https://greensock.com/">GreenSock</a> umgesetzt.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-23230608700766556022016-04-21T10:12:00.001+02:002017-02-21T12:22:11.040+01:00Johnny Depp's favorite roles - animated Gif<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Da im Moment animated Gifs von Schauspielern in ihren bekanntesten Rollen total angesagt zu sein scheinen (Ein gutes Beispiel ist z.B. dieses <a href="http://gph.is/1T49UN4">animated Gif von Leonardo DiCaprio</a>), wollte ich mich auch mal an diesem Thema versuchen. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Rausgekommen ist dabei diese Animation von <a href="https://de.wikipedia.org/wiki/Johnny_Depp">Johnny Depp</a> mit neun seiner bekanntesten, bzw. markantesten Rollen. </span></span><br />
<br />
<iframe allowfullscreen="" class="giphy-embed" frameborder="0" height="480" src="//giphy.com/embed/xT1XGuWaTtR2IJFzqw" width="480"></iframe><br />
<a href="http://giphy.com/gifs/johnny-depp-roles-johnnydepp-xT1XGuWaTtR2IJFzqw">via GIPHY</a><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die Einzelbilder habe ich mit Animate CC (Früher Adobe Flash) gezeichnet<span style="font-family: "verdana" , sans-serif;">, </span>dann als PNG-Sequenz exportiert und mit Fireworks als animated Gif zusammenge<span style="font-family: "verdana" , sans-serif;">setzt</span>. <br />Als Plattform zum teilen habe ich mich für <a href="http://giphy.com/">GIPHY</a> entschieden.</span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-68410738947398791732016-03-11T01:23:00.000+01:002016-03-11T12:56:58.114+01:00Up to 1.572.864 Particles with custom Displacement Shader<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xPcVtSD7U7BO5pHJk67rZ-LO5EpUI9T-_P07hazoBiwgVnDGdTdmKhTKi06XLb29nKBsGSzJaRU6o5KudsRgFLtpGT2D9KZyEtrDoTQ7ihnrkUDttSgr9TzMe4r9IsOTK7BJ/s1600/PreviewSphere.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xPcVtSD7U7BO5pHJk67rZ-LO5EpUI9T-_P07hazoBiwgVnDGdTdmKhTKi06XLb29nKBsGSzJaRU6o5KudsRgFLtpGT2D9KZyEtrDoTQ7ihnrkUDttSgr9TzMe4r9IsOTK7BJ/s1600/PreviewSphere.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Bei diesem Experiment habe ich seit längerer Pause mal wieder mit <a href="http://threejs.org/">ThreeJS</a> gearbeitet. <br />Nach den ganzen Canvas Experimenten zuletzt war es mal wieder an der Zeit auf die volle Leistung von <a href="https://developer.mozilla.org/de/docs/Web/API/WebGL_API">WebGL</a> Zugriff zu haben. <br />Ich habe dazu mein <a href="http://niklasknaack.blogspot.de/2016/03/distorted-sphere.html">„Distorted Sphere“</a> Canvas Experiment für ThreeJS portiert. <br />Wo bei den Canvas Experimenten bei 50.000 bis maximal 100.000 Partikeln Schluss war, geht es nun auch mit bis zu 1.572.864 Partikeln, und dass bei 60FPS (auf einer flotten Maschine).<br />Ich habe dazu meine ersten (Displacement Particle) Shader geschrieben, damit die ganzen Berechnungen nicht auf der CPU, sondern der GPU berechnet werden. Die beiden Shader<span style="font-family: "verdana" , sans-serif;"> </span>(vertex und fragment) sind bestimmt noch nicht perfekt, aber ich stell die euch hier weiter unten zur freien Verfügung. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Die Partikel habe ich mit Hilfe der <a href="http://threejs.org/docs/#Reference/Objects/Points">„Points“</a>-Klasse, dem <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial">ShaderMaterial </a>und der <a href="http://threejs.org/docs/#Reference/Core/BufferGeometry">BufferGeometry</a> von ThreeJS realisiert. Auch hier gibt es die entscheidenen Code-Schnipsel weiter unten mit dazu. Die Berechnung, bzw. Anordnung, der Partikel wird hier nicht näher erklärt, aber dafür<span style="font-family: "verdana" , sans-serif;"> seh<span style="font-family: "verdana" , sans-serif;">t</span></span> ihr <span style="font-family: "verdana" , sans-serif;">wie ihr</span> Partikel adden könnt und was nötig ist um diese mit den beiden Shadern zu animieren.<br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wie immer könnt ihr über das Menü diverse Einstellungen vornehmen und so das Experiment aktiv beeinflussen. Die Steuerung erfolgt per Maus (Klick <span style="font-family: "verdana" , sans-serif;">+ Drag und S<span style="font-family: "verdana" , sans-serif;">rollrad</span></span>)<span style="font-family: "verdana" , sans-serif;"> oder </span>Touch-Gesten. <br /><br /><span style="color: #f3f3f3;"><b><a href="http://nkunited.de/blog/particles/distortedspherethreejs/DisplacementShaderSphereThreeJS.min.html">Hier</a></b></span> geht es direkt zum Experiment. Besonders zu empfehlen für <span style="color: #f3f3f3;"><b>Mobile User<span style="font-family: "verdana" , sans-serif;">/Touch Devices</span></b></span>!<br /><span style="font-family: "verdana" , sans-serif;">Der <span style="color: #f3f3f3;"><b>Fullscreen-Modus</b> </span>funktioniert im Moment leider <span style="color: #f3f3f3;"><b>nur i</b></span><span style="font-family: "verdana" , sans-serif;"><span style="color: #f3f3f3;"><b>m Chrome Browser</b></span> fehlerfrei.</span></span></span></span><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/distortedspherethreejs/DisplacementShaderSphereThreeJS.min.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier die beiden Shader (vertex und fragment):</span></span><br />
<pre class="brush: js; auto-links: false">uniform float size;
varying float distance;
uniform float distanceMax;
uniform float amplitude;
uniform float d;
uniform float pi;
varying vec3 v;
void main() {
float x = position.x;
float y = position.y;
float z = position.z;
distance = cos( x * d * pi ) * cos( y * d * pi ) * cos( z * d * pi ) * amplitude;
v = vec3( x, y, z );
v = normalize( v );
v *= distance;
vec3 pos = position + v;
gl_PointSize = size;
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}
</pre>
<pre class="brush: js; auto-links: false">varying float distance;
uniform float distanceMax;
uniform int colorScheme;
void main() {
float percent = ( distance + distanceMax ) / ( distanceMax * 2.0 );
if ( colorScheme == 0 ) {
gl_FragColor = vec4( 1.0, percent, 0.0, 1.0 );
} else if ( colorScheme == 1 ) {
gl_FragColor = vec4( 1.0 - percent, 1.0 - percent, 1.0 - percent, 1.0 );
} else if ( colorScheme == 2 ) {
gl_FragColor = vec4( 0.0, percent, 1.0 - percent, 1.0 );
} else if ( colorScheme == 3 ) {
gl_FragColor = vec4( percent, 0.0, 0.0, 1.0 );
} else if ( colorScheme == 4 ) {
gl_FragColor = vec4( 0.0, percent, 0.0, 1.0 );
} else if ( colorScheme == 5 ) {
gl_FragColor = vec4( 0.0, 0.0, percent, 1.0 );
} else if ( colorScheme == 6 ) {
gl_FragColor = vec4( percent, 0.0, 1.0 - percent, 1.0 );
} else if ( colorScheme == 7 ) {
gl_FragColor = vec4( 1.0 - percent, percent, percent, 1.0 );
}
}
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier die entscheidene Code Passage zum erstellen der Partikel:
</span></span>
<br />
<pre class="brush: js; auto-links: false">var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( particles * 3 );
var index = 0;
for ( var i = 0, l = positions.length; i < l; i += 3 ) {
// positions
var phi = Math.acos( -1 + ( 2 * index ) / particles );
var theta = Math.sqrt( particles * Math.PI ) * phi;
var x = radius * Math.cos( theta ) * Math.sin( phi );
var y = radius * Math.sin( theta ) * Math.sin( phi );
var z = radius * Math.cos( phi );
positions[ i ] = x;
positions[ i + 1 ] = y;
positions[ i + 2 ] = z;
index++;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
uniforms = {
amplitude: { type: 'f', value: 0 },
d: { type: 'f', value: d },
pi: { type: 'f', value: Math.MATHPI180 },
distanceMax: { type: 'f', value: sinusMaxAmplitude },
size: { type: 'f', value: particleSize },
colorScheme: { type: 'i', value: colorScheme }
}
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexshader' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader' ).textContent
} );
points = new THREE.Points( geometry, shaderMaterial );
scene.add( points );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
An dieser Stelle wird der Wert für die Amplitude in der render Function an die Shader übergeben:</span></span>
<br />
<pre class="brush: js; auto-links: false">uniforms.amplitude.value = sinusAmplitude;
</pre>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-28018992791993578722016-03-04T00:59:00.001+01:002016-03-06T18:14:41.062+01:0023 Amazing And Inspiring HTML5 Canvas Experiments<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In diesem Beitrag möchte ich euch eine Auswahl meiner Favoriten im Bereich kreativer Canvas Experimente vorstellen. Mit dabei sind ältere Experimente, aber das Alter spielt hierbei eigentlich gar keine Rolle. Genauso wenig das Thema. Egal ob Partikel-Effekt, Physik-Simulation, oder was auch immer. Vor allem wichtig, die Experimente sollen inspirieren, überraschen und begeistern. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Daneben gab es bei der Zusammenstellung dieser Liste eigentlich nur ein Kriterium<span style="font-family: "verdana" , sans-serif;">. Für die Darstellung der Inhalte muss das Canvas<span style="font-family: "verdana" , sans-serif;">-E<span style="font-family: "verdana" , sans-serif;">lement verwende<span style="font-family: "verdana" , sans-serif;">t werden.</span></span></span></span><br />Bei der riesengroßen Auswahl und den wirklich super tollen WebGL Experimenten, die in letzter Zeit erschienen sind und fast täglich neu erscheinen, gerät die Canvas etwas ins Hintertreffen. Natürlich kann die Canvas, nicht nur was die Performance usw. angeht, nicht mit WebGL mithalten, aber dafür ist das Canvas-Element weiter verbreitet und wird, jedenfalls noch, von mehr Browsern (brauchbar) unterstützt. Und daher wollte ich mit dieser kleinen Liste eine Lanze brechen für die Canvas<span style="font-family: "verdana" , sans-serif;">.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Aber zurück zum Thema, de<span style="font-family: "verdana" , sans-serif;">n Experimenten</span>. Ich habe hier, wie gesagt, meine 23 Favoriten zusammengestellt. Die Reihenfolge spielt keine Rolle und auch nicht die Titel oder die Autoren. Und bevor ich euch jetzt weiter zutexte, wünsche ich einfach viel Spaß mit den Canvas Experimenten.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://www.effectgames.com/demos/canvascycle/">Color Cycle</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://markferrari.com/">Mark Ferrari</a> & <a href="https://twitter.com/jhuckaby">Joseph Huckaby</a></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.effectgames.com/demos/canvascycle/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://www.effectgames.com/demos/canvascycle/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0FIyZr5CQ15ZYXZCi8G9LdPw-3Sn_HFnM71dXZ6HDlImJJtIjZv2s-rmbfwzqiACPvmSxS3q3xv_4mL_lMOF9sjGH_aCWjoZwI4rWWDmp-IAUFfXA4x5BgnffZ7lOzQrllfUL/s1600/Screenhot001_ColorCycle.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/dissimulate/full/KrAwx">Tearable Cloth</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://github.com/Dissimulate">Adam Brooks</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/dissimulate/full/KrAwx" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/dissimulate/full/KrAwx" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcx1UEUkoCJ9c7HhMshgWI4s4uoggGVTyyEhW2TaDwa_eHGYIeZoUsV9QsXnbRT0dQbX-Wtaq0SSm3zSxUxOSLSXMiMM2ZmXFoYsDz0EsNWcuaxXly00_Y7wxkxBR24_YgN-IB/s1600/Screenhot002_TearableCloth.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://gyu.que.jp/jscloth/">Cloth Simulation</a> by <a href="http://gyu.que.jp/">gyuque</a></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://gyu.que.jp/jscloth/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://gyu.que.jp/jscloth/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9IRTqnuXFh3FgzhOYR6HxD1SwcbFmQLISz9uMkizWAiuaQoTHYlfnMO8B1jiCNlWqJomqh_IQ2q7oUk9h6_eC0wbCxdi5nyF38XdgOX86QSGjGradVsXX3XbV4RD2vqTsbIUi/s1600/Screenhot003_ClothSimulation.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://lab.hakim.se/hypnos/">Hypnos</a> by <a href="http://hakim.se/">Hakim</a></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lab.hakim.se/hypnos/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://lab.hakim.se/hypnos/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE-WHQmnDtYleyEvzXRaLqv6i6SnpiI_0khHaGxQSmTM4ZZgufA7U11TYb5qoQdAVMR9UabBnVTstxSGh8n6Hvf5XwT7DnE7jNmiCj3Q8K3x3vELbqYbWxQAVq9m0-_pZw5-3B/s1600/Screenhot004_Hypnos.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/ara_machine/full/EwfpL">Motion Graphic Typeface II</a> by <a href="http://codepen.io/ara_node/">ara</a></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/ara_machine/full/EwfpL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/ara_machine/full/EwfpL" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu8ffLxcAVNfhvtdOf5UxWmDMHOVV7vyO__9jqCgk68i06Mlmx0bhJFkYK9wAmboUwIf4DsHPEGXdMoBtquExQ8f2ld4MWrQvQ9-lhgNNAm6kUXakKNp3R9-funBPOzF0ElEv/s1600/Screenhot005_MotionGraphicTypeface.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://matthew.wagerfield.com/flat-surface-shader/">Flat Surface Shader</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://matthew.wagerfield.com/">Matthew Wagerfield</a> & <a href="https://www.behance.net/vanschneider">Tobias van Schneider</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://matthew.wagerfield.com/flat-surface-shader/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://matthew.wagerfield.com/flat-surface-shader/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXSX51x_CtoQbwTglnni2hVyY2Qf8-UAU9U3rlVNSrqfGBgZiB0kYQZaDYq37BkgSilrhri_Y9xBknuyly6nCxSIXMaRT_hA_imD4D9SKi5ksomkEniJ6AfvIhyphenhyphengxwK_OKC8N/s1600/Screenhot006_FlatSurfaceShader.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://mrdoob.com/projects/chromeexperiments/ball-pool/">Ball pool</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://mrdoob.com/">Mr.doob</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mrdoob.com/projects/chromeexperiments/ball-pool/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://mrdoob.com/projects/chromeexperiments/ball-pool/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNs703l0nWtg7afo2XFhYB20GUcHNB4QBSvxCivhsdqcsi9TjrQXZArOd-P2rqQqCYYK2Rfg5SfDD3euVhCyGHWwKnpKxS0f0XLXaSv1Nu6_EXGquO4z0Kuyeo4fQPvfqg4y7r/s1600/Screenhot007_Ballpool.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/ge1doot/full/bEgLaM">prometheus II</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/ge1doot">Gerard Ferrandez</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/ge1doot/full/bEgLaM" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/ge1doot/full/bEgLaM" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh4ZS2n2fIJXx_S0Dv-5jMLZpOyyDYwDSO0jOi1FPp2rE8oGGnujHNLWCo_x_jQ05VY4ALztqm5M59zy0B7xyfZmtNADI9eFvgRfDpN3Guon0etx3z4qkCj78L7luhlbEUbnQx/s1600/Screenhot008_Prometheus2.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/ge1doot/full/PPzRdL">approaching</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/ge1doot">Gerard Ferrandez</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/ge1doot/full/PPzRdL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/ge1doot/full/PPzRdL" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg150PT0Q4NNB9-8SWU1_gBAPP6WU26kwqPr5KMdlxbpbyh-UYRRGnYkC_lDjTPraScy6DqpPJwTFqmxJ4dgZtAr2z-zVxcSDTfKjxbmT4q-1ZpjpKkQoUykb9qPNo7zL7T2DGR/s1600/Screenhot009_approaching.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/ge1doot/full/OypQdy">way back</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/ge1doot">Gerard Ferrandez</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/ge1doot/full/OypQdy" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/ge1doot/full/OypQdy" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-SJS0fwhoD53tFsVZaOsE9oHE19-450a0bRQeP5xQhs8OBSwkVqhn5Y5Gm0gA2tS-FQP17kBRXn4m8ofLjky5Qi2vMbRmpb8PXAfV6UCjf8HV2vK8EeGAsL8W4Utf3fyHY54/s1600/Screenhot010_wayback.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/ge1doot/full/LpLLQa">what power</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/ge1doot">Gerard Ferrandez</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/ge1doot/full/LpLLQa" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/ge1doot/full/LpLLQa" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvm1yoM2mHvL4gWEDRAoiPSivsKvIFV1XrMITKJmpGSNXFxZzMbv75eOeHjlobG3oD4aEpkPYuBy3cZFmDwJxXLCiQoh5pB4vbDp3RNN5KMry-0mmUUp9zmHwBVCt6U0coL32/s1600/Screenhot011_what-power.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://alteredqualia.com/canvasmol/#Chlorophyll">CanvasMol</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://alteredqualia.com/">AlteredQualia</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://alteredqualia.com/canvasmol/#Chlorophyll" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://alteredqualia.com/canvasmol/#Chlorophyll" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi377HR_bLG1iAC1m3-DlUuyQoTFIi-fVyDLFYWY_rSJcudOdH6oqaxzWSpayffmKaq4JJxa-5lpyzAF2aZrG2LP95uTFi1pJpy_cKvISUt7FZxS2UMWssF1SrdEFLxaLMXzkxl/s1600/Screenhot011_CanvasMol.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/">javascript 3d model viewer</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://www.giuseppesicari.it/">Giuseppe Sicari</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjpCdEIfUiJY7-_VaOAt-7X6NV8RkxCwCWQqfwWRBYASFxhulEMV3IepZZ5ofI9eHmEfOimmWXezQYLWNOz_PZ7Ukb_VNN3Udx22BTQscEnfkTQ7n57wPhLeLjtkDclBsv4gi/s1600/Screenhot012_javascript3dmodelviewer.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://xplsv.com/prods/demos/xplsv_orsotheysay/">Or so they say</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://xplsv.com/">xplsv</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://xplsv.com/prods/demos/xplsv_orsotheysay/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://xplsv.com/prods/demos/xplsv_orsotheysay/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzN4yJr6JgEmMW1Hpt-PAuvSpZ0IFSbtSM8hO8nzPMIP23yP0Hefqd-wmE4efqC45adG2kAgc3YsKLgtS-FAdB0J8lzgwv_3qQtxpEVk25pM5VldYWWP8aEsGRdjymmQFNJsZ/s1600/Screenhot012_Orsotheysay.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://mrdoob.com/#/107/strange_attractor">Strange Attractor</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://mrdoob.com/">Mr.doob</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mrdoob.com/#/107/strange_attractor" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://mrdoob.com/#/107/strange_attractor" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4Fpl3k-bimQ1RKdMHoR7huD7d_bO8xCvQ6iMqnaHUxkypMbuEpBEGqvq9Q3EM9AayDdozZ54fEP8e0QrZ8GScAZc3QkC4QmqtYrZjrUsjzCrJxy47U0Ygk7XMT_rkzd8MY36/s1600/Screenhot013_StrangeAttractor.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/lucasmotta/full/dpDqB">Flying Particles</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://lucasmotta.com/">Lucas Motta</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/lucasmotta/full/dpDqB" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/lucasmotta/full/dpDqB" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZPXTDK7-klLW9Hb9Dzb4knBSkVEFVOBZN52nJGJKhpP9NMbSCTgQFo7dhlzEK772iFX_QF1rzRkHJEg6YSUZAccs1LqPYNRJddFHJ6BnvP56wnB1Bmna-4G99b3eOdB4RVqHQ/s1600/Screenhot014_FlyingParticles.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/loktar00/full/Ggolp">Particle Plasma Terrain</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/loktar00">Loktar</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/loktar00/full/Ggolp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/loktar00/full/Ggolp" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizycWEMSqhlLnHZr8Ant60mrvggocisYqXTNcFcMsXzKMmoOtmBSMV2m20tJdcfU68jiYqYRkJh3mf63qKNdlDtuNTDm5UzeTlrWMR2nx9BjA9f-uapqY6hb063e8rI3VFkjKc/s1600/Screenhot015_ParticlePlasmaTerrain.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/soulwire/full/Dscga">Simple Audio Visualisation</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://soulwire.co.uk/hello">Justin Windle</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/soulwire/full/Dscga" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/soulwire/full/Dscga" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizV53XVr-B2NDvL3PK5MKKnFFSWeLsK9ebc7Verv1LNpeX3iNliMeC5ENAHM-pM1AkQ73Kv5kLpO_q2OlEmiBb4V1AeJ6tr3BiaROdZdc-zbDt4sR9l6ZEmTaegQjixvn5JoKX/s1600/Screenhot016_SimpleAudioVisualisation.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/soulwire/full/begkI">Gravitational Field</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://soulwire.co.uk/hello">Justin Windle</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/soulwire/full/begkI" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/soulwire/full/begkI" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJvWZTwytK10qC5GWvLpvd_IcSEsLbSdzLliOfUBODredsncPacFFW1uEXQsbW9bUVn1WfcXJD4eimCQvg_g9Jb6ZfgRwAn7fDo1ZojYQJfSmDGqLOKTmdla77MrvVxD6WhNZ/s1600/Screenhot017_GravitationalField.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/tvolodimir/full/AkzGo">olympic circles logo</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/tvolodimir">Volodymyr</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/tvolodimir/full/AkzGo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/tvolodimir/full/AkzGo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigT7WZpfsMJYtGKfhq_oxrwhtCPBCIQu3yzf_f7aOC-PT5vIkbuHYB4S3lrHT55ubOE1Mi3Lb_ZbNMr8GInwcfFrr-zkMtRdwanCWa51-_CFcPbVUqCILelf4Mu9nQH7ICiEga/s1600/Screenhot017_olympiccircleslogo.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/soulwire/full/ezpuK">Physical Typography</a><a href="https://www.blogger.com/null"> - Resonate 2014</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://soulwire.co.uk/hello">Justin Windle</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/soulwire/full/ezpuK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/soulwire/full/ezpuK" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7vi3OwR19VtSjA-Y8ub-gUifkd2-BU_x8gRaxOFbvyT1rGZf_48Vpul4_K2sRtdA061QRQMSyI5W9iZ0LcVnLA_s5YT4l1Tuxzt4_UN-_EBtSeJ5u5dHaI-SYRF9qAG2gosg/s1600/Screenhot018_PhysicalTypography.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/soulwire/full/mfkHo">Subdivision</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://soulwire.co.uk/hello">Justin Windle</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/soulwire/full/mfkHo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/soulwire/full/mfkHo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekeLQbQvh9gUaZL5YUhPbHV2qOWSvqnQ9W1-iQtYih4OGfW5WP0JReBulwdojwnSHu68P1P2wSI6gjnozUnRXUyYhMCG0rWkUfJuxFkycHshfR5tli2WCYI05peJy-rOMQGLx/s1600/Screenhot019_Subdivision.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/loktar00/full/lxEJc">Colorful Cloth Ribbons</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="https://twitter.com/loktar00">Loktar</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/loktar00/full/lxEJc" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/loktar00/full/lxEJc" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmp6dEN5BxElfgXlT5d_PMbJS2pI1z5Vd-SdGdIeV-r_jrodNMNqF_o8yrwGMQlww3JtBewatbM3MO-JkJt13Ry041vZS-JaIy8IE5QXNaNoN8PL1W6bX1chb2KteEy81bYxL/s1600/Screenhot020_ColorfulClothRibbons.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://rectangleworld.com/demos/MorphingCurve2/MorphingCurves2_black.html">Morphing Fractal Curves, version 2</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://dangries.com/">Dan Gries</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://rectangleworld.com/demos/MorphingCurve2/MorphingCurves2_black.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://rectangleworld.com/demos/MorphingCurve2/MorphingCurves2_black.html" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVtvpD6e0dS0rqevbnCeRSzsH37wp_YO5s6ZKP8ioqLLPzcK52I4F6DJ_fWP_0pKbsV4piiNUV_xiq4LkCcMhxTUf9U_hlxnW6jMb6NnFoqcwOnvSL-t9cVuC2fem-_dN1v2y/s1600/Screenhot021_MorphingFractalCurves.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://codepen.io/sschepis/full/ErFen">Particle Galaxy</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://codepen.io/sschepis/">Sebastian Schepis</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://codepen.io/sschepis/full/ErFen" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://codepen.io/sschepis/full/ErFen" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFywd1SrKkKd1nrkpwbvL0QMqFZVhMhOX0Dd-XQejbqbPC0YKTuAWGcR2jJbXzRuEWXjCLmpOiUEQL8zGhaGOtI50qn8brGjOLEf1yhyphenhyphenm2-9zZACYQMcr9ABkI3Yde7szEvDnj/s1600/Screenhot022_ParticleGalaxy.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="http://ariya.ofilabs.com/2012/03/underwater-effect-with-html5-canvas.html">Underwater Effect</a> <span style="font-family: "verdana" , sans-serif;">by</span> <a href="http://ariya.ofilabs.com/">Ariya Hidayat</a></span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ariya.ofilabs.com/2012/03/underwater-effect-with-html5-canvas.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://ariya.ofilabs.com/2012/03/underwater-effect-with-html5-canvas.html" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRou7_Cn8QWVz75MbjKIQxnd1zPXQaTDackZ0-pxeRpS0wvnkNKAQge7SmamaYzEDZEQeK7zrNPv8TDk3Z8rhayDxMIdY2GNb7Xjv7Zgqy0p-2H4TBPjneEJBmvX9tF9aNimm4/s1600/Screenhot023_UnderwaterEffect.png" /></a></div>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Ende.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;">Vielleicht ergänze ich die Liste <span style="font-family: "verdana" , sans-serif;">irgendwann </span>noch einmal mit weiteren Experimenten. Obwohl, dann wäre der Titel "23 Amazing And Inspiring HTML5 Canvas Experiments" f<span style="font-family: "verdana" , sans-serif;">alsch. <span style="font-family: "verdana" , sans-serif;">Naja, vielleicht wird es einfach ein neuer Beitrag werden<span style="font-family: "verdana" , sans-serif;">. Und vielleicht<span style="font-family: "verdana" , sans-serif;">, oder besser, sehr wahrscheinlich<span style="font-family: "verdana" , sans-serif;">, kommt noch eine Liste mit meinen WebGL Favor<span style="font-family: "verdana" , sans-serif;">iten.</span></span></span></span></span></span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Bis dahin viel Spaß mit den Canvas Experimenten. <br />Wenn ihr noch andere Beispiele habt postet diese gerne hier in den Kommentaren<span style="font-family: "verdana" , sans-serif;"> und schaut euch auch ein paar von meinen Experimenten an.</span> </span></span></span></span></span></span></span></span></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-58710074947550259302016-03-01T23:56:00.002+01:002016-03-02T00:47:58.337+01:00Distorted Sphere<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRftxpP4bSJ2FVbLiTDNM1He0XQK3vfcX7Kzmv5GDV_ocW3NqxJebMs_p70drq4a7SFOLPEJ0v-WzL3gKHKvyRAKFVrBHe9nO_iOYmrkf1-rl3AjM-fzUyRLwN7vUeTodsgU_/s1600/SinusDistSphere_small.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRftxpP4bSJ2FVbLiTDNM1He0XQK3vfcX7Kzmv5GDV_ocW3NqxJebMs_p70drq4a7SFOLPEJ0v-WzL3gKHKvyRAKFVrBHe9nO_iOYmrkf1-rl3AjM-fzUyRLwN7vUeTodsgU_/s1600/SinusDistSphere_small.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ein weiteres kleines Experiment mit Partikeln. <br />Dieses Mal habe ich aus Partikeln eine <a href="https://en.wikipedia.org/wiki/Sphere">Sphere</a> „geformt“, die mit Hilfe der Sinus-, bzw. Kosinusfunktion deformiert wird. <br />Im Prinzip ist dieses Experiment eine Fortführung vom <a href="http://niklasknaack.blogspot.de/2016/01/sinus-landscape.html">„Sinus Landscape“ Experiment</a>. Nur wird in diesem Fall keine <a href="https://en.wikipedia.org/wiki/Plane_%28geometry%29">Plane</a>, sondern eine Sphere deformiert. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;">Die Herausforderungen hierbei waren die Partikel, egal welche Anzahl, gleichmäßig auf der Sphere zu verteilen und natürlich das Anwenden der Kosinusfunktion auf die Sphere. Wobei sich letzteres als erstaunlich einfach herausstellte, <span style="font-family: "verdana" , sans-serif;">weil </span>be<span style="font-family: "verdana" , sans-serif;">reits fast alles <span style="font-family: "verdana" , sans-serif;">aus </span>dem </span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">„Sinus Landscape“ Experiment gegeben war</span></span>. Ich mu<span style="font-family: "verdana" , sans-serif;">sste lediglich noch die z-Position (neben x und y) mit <span style="font-family: "verdana" , sans-serif;">in die Berechnung <span style="font-family: "verdana" , sans-serif;">für die </span></span></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="https://de.wikipedia.org/wiki/Amplitude">Amplitude</a>/Höhe der Sinus<span style="font-family: "verdana" , sans-serif;">w</span>ellen mit einbeziehen.</span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span>Aber seht einfach selbst:</span></span>
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/distortedsphere/SinusDistortedSphere.min.html" width="480"></iframe> <span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Mit Hilfe der Einstellungen, die ihr unter „Open Controls“ findet, könnt ihr den Grad der Deformierung frei bestimmen. Unter dem Punkt „Sphere Settings“ könnt ihr die Anzahl an Partikeln bestimmen, die Stärke/Höhe der Deformationen, die Wiederholungen/Anzahl der Deformationen, den Radius der Sphere, die Animation pausieren und die Geschwindigkeit der Animationen steuern.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Die Einstellungen unter dem Punkt „Display Settings“ sind euch bestimmt schon aus den anderen Experimenten vertraut. Hierbei besonders interessant sind „Invert Output“ und „Pixel Size“. <br />Wie immer gilt, einfach mal mit den Reglern spielen und schauen was passiert. </span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"> <br />Per Mausklick/Touch auf die Sphere wechselt ihr durch verschiedene Farbeschemen. Die Drehung der Sphere bestimmt ihr mit der Position eurer Maus, bzw. ist abhängig von der Position eures Fingers, wenn ihr mit einem Touch-Device unterwegs seid.<br /><br /><span style="font-family: "verdana" , sans-serif;">Falls ihr das Experiment in ein<span style="font-family: "verdana" , sans-serif;">em neuen <span style="font-family: "verdana" , sans-serif;">Fenster betrachten wollt (besonders zu empfehlen für Touch-Devices und User mit mobilen Endgeräten), dann klickt einfach <a href="http://nkunited.de/blog/particles/distortedsphere/SinusDistortedSphere.min.html"><b>hier</b></a>.</span></span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und hier noch </span>ein recht schöner Screenshot von der Sphere mit veränderten Einstellungen<span style="font-family: "verdana" , sans-serif;">:</span></span> </span></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQ5-NDbSFfkuRGfuWCkaGTBEdazOUIgrrC3LLmwEWNx035qYhPSfSzx6MvwhjHhpJz9TZpHQW_3K2WIF9NgSWinLfJAPQg1u3E9tdNk9OnWv2szNyw8C9YP_XQLnOe7gi9d3e/s1600/SinusDistSphere_big2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQ5-NDbSFfkuRGfuWCkaGTBEdazOUIgrrC3LLmwEWNx035qYhPSfSzx6MvwhjHhpJz9TZpHQW_3K2WIF9NgSWinLfJAPQg1u3E9tdNk9OnWv2szNyw8C9YP_XQLnOe7gi9d3e/s1600/SinusDistSphere_big2.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und <span style="font-family: "verdana" , sans-serif;">noch ein Screenshot, wieder mit anderen Einstellungen:</span></span></span></span></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVWg_FWbOnE_kprfscP6rwtca_R61Izald20c5V8KnT81QdlBXR0fVaJSjvJW7uTWvaf7cw2-jcQavbR9HhHLQQJIExrs5DFZEihsqBYvmooWd_HsZkIh-s6F-p1gRu9s6A8R/s1600/SinusDistSphere_big3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVWg_FWbOnE_kprfscP6rwtca_R61Izald20c5V8KnT81QdlBXR0fVaJSjvJW7uTWvaf7cw2-jcQavbR9HhHLQQJIExrs5DFZEihsqBYvmooWd_HsZkIh-s6F-p1gRu9s6A8R/s1600/SinusDistSphere_big3.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span></span> </span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-66796883787524270262016-02-22T14:23:00.001+01:002017-09-25T17:32:54.025+02:00 SVG 3D Tag Cloud jQuery Plugin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4m8HnwwRmR8QkQ6XrXXetutiXch-0GBThonJCgReiQxC2G8Kqc53pOSqwIP0b23Xu8hYyxkQCaG49mPnBl1OvBQXJ6F8PMnfXpCjcUaTqIv1SRfmaLsGxD8p-s86r7YpSRyu/s1600/SVG3DTagCloud_Preview_small.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4m8HnwwRmR8QkQ6XrXXetutiXch-0GBThonJCgReiQxC2G8Kqc53pOSqwIP0b23Xu8hYyxkQCaG49mPnBl1OvBQXJ6F8PMnfXpCjcUaTqIv1SRfmaLsGxD8p-s86r7YpSRyu/s1600/SVG3DTagCloud_Preview_small.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Bisher habe ich <a href="https://de.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG (Scalable Vector Graphics)</a> immer nur als Format zum Austausch zwischen zwei verschiedenen Programmen genutzt. Z.B. um in der Flash IDE gezeichnete Vektor-Grafiken in Illustrator weiter zu verwenden. Fürs Web erschien mir der Einsatz lange Zeit noch ungeeignet, weil SVG von diversen Browsern nicht unterstützt worden sind. Zwar kommen die älteren <span style="font-family: "verdana" , sans-serif;">Browser-Versionen<span style="font-family: "verdana" , sans-serif;">, speziell <span style="font-family: "verdana" , sans-serif;">vom </span></span></span>Internet Explorer, nicht mit SVG klar, aber generell steigt die Anzahl an Browsern die SVG unterstützen stetig an. Da SVG auf <a href="https://de.wikipedia.org/wiki/Extensible_Markup_Language">XML</a> basieren, kam mir nun die Idee ein wenig zu experimentieren in wie weit man z.B. per JavaScript Zugriff auf die einzelnen Elemente in SVG bekommt. Nach einer kurzen Suche im Netz wurde mir schnell klar, dass meine Idee wohl nicht ganz neu war. So gibt es bereits zahlreiche Tutorials und Frameworks die genau aufzeigen, wie man Zugriff auf SVG-Elemente erhält und wie man diese mehr oder weniger bequem animieren kann.<br />Und so kam mir die nächste Idee. Ich hatte vor Jahren mal versucht eine <a href="http://niklasknaack.blogspot.de/2009/11/3d-tag-cloud-v2.html">3D Tag Cloud mit Flash zu realisieren</a>. Das hatte soweit auch ganz gut funktioniert, nur leider ist Flash inzwischen im Web so gut wie tot und findet keine Verwendung mehr. <a href="https://de.wikipedia.org/wiki/Schlagwortwolke">Tag Clouds</a> gibt es generell schon recht viele, aber soweit meine Recherche ergeben hat noch keine auf Basis von SVG. Und so entstand die Idee eine 3D Tag Cloud zu erstellen deren Inhalte alle komplett in einer SVG gezeichnet und animiert werden. Rausgekommen dabei ist nun die SVG 3D Tag Cloud als jQuery Plugin:</span></span><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/jquery/plugins/svg3dtagcloud/index.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wie bei meinen letzten jQuery Plugins auch, könnt ihr die SVG 3D Tag Cloud mit, oder ohne jQuery benutzen. Ich habe folgend ein paar Beispiele zusammengestellt mit deren Hilfe ihr das Plugin sehr schnell für eure eigenen Projekte/Webseiten nutzen könnt.<span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;">Und so geht´s. <br /><span style="font-family: "verdana" , sans-serif;">Erst einmal braucht ihr ein<span style="font-family: "verdana" , sans-serif;"> Array mit Links/Tags. Dieses kann z.B<span style="font-family: "verdana" , sans-serif;">. w<span style="font-family: "verdana" , sans-serif;">ie folgt aussehen:</span></span></span></span></span></span></span></span>
<br />
<pre class="brush: js; auto-links: false">var entries = [
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' },
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
{ label: 'three.js', url: 'http://threejs.org/', target: '_top' },
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' },
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
{ label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top' },
{ label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top' },
{ label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
{ label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
{ label: 'GitHub', url: 'https://github.com/', target: '_top' },
{ label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
{ label: 'Starling', url: 'http://gamua.com/starling/', target: '_top' },
{ label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
{ label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
{ label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
{ label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
{ label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top' },
{ label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top' }
];
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Dieses <span style="font-family: "verdana" , sans-serif;">Array müsst ihr nun per Parameter <span style="font-family: "verdana" , sans-serif;">übergeben. Neben den Links, die unsere SVG 3D Tag Cloud anzeigen soll, könnt ihr opti<span style="font-family: "verdana" , sans-serif;">onal noch we<span style="font-family: "verdana" , sans-serif;">itere Parameter übergeben, u<span style="font-family: "verdana" , sans-serif;">m die Tag Cloud zu in<span style="font-family: "verdana" , sans-serif;">dividualisieren<span style="font-family: "verdana" , sans-serif;"> und nach euren Wünschen zu gestalten. </span></span></span></span></span></span></span></span>Folgend ein Beispiel bei <span style="font-family: "verdana" , sans-serif;">dem das eben erstellte Array und alle möglichen Einstellungen in eine<span style="font-family: "verdana" , sans-serif;">m Object zusa<span style="font-family: "verdana" , sans-serif;">mm<span style="font-family: "verdana" , sans-serif;">engefasst werden</span></span></span></span>:</span></span>
<br />
<pre class="brush: js; auto-links: false">var settings = {
entries: entries,
width: 480,
height: 480,
//width: '100%',
//height: '100%',
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#111',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 2,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15px',
fontColor: '#fff',
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
fontToUpperCase: true
};
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Gehen wir nun am besten einfach alles Schritt für Schritt durch. <span style="font-family: "verdana" , sans-serif;">Falls <span style="font-family: "verdana" , sans-serif;">ihr es besonders eilig habt könnt ihr das abe<span style="font-family: "verdana" , sans-serif;">r auch überpringen. Ihr müsst <span style="font-family: "verdana" , sans-serif;">im Prinzip nur<span style="font-family: "verdana" , sans-serif;"> das entries Array übergeben.</span></span></span></span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"></span>Bei <i>entries </i>übergebt ihr, wie schon gesagt, euer Array mit Links/Tags (Pro Link/Tag muss immer ein Label, eine URL und ein Target definiert werden. Wie im Beispiel ganz oben zu sehen).</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Mit <i>width </i>und <i>height </i>legt ihr die Maße fest. Gebt ihr an dieser Stelle einfach nur Zahlenwerte an, dann <span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">ergeben diese Werte </span>die fixe Größe der Tag Cloud. So wie im Beispiel oben zu sehen. <br /><span style="font-family: "verdana" , sans-serif;">Nach dem Update könnt ihr an dieser Stelle aber nun auch Prozentwerte mit angeben. Au<span style="font-family: "verdana" , sans-serif;">f diese Weise lässt sich die Tag Cloud sehr gut in <span style="font-family: "verdana" , sans-serif;">Frameworks wie <a href="http://foundation.zurb.com/">Foundat</a><span style="font-family: "verdana" , sans-serif;"><a href="http://foundation.zurb.com/">ion</a> oder <a href="http://getbootstrap.com/">Bootstrap</a> <span style="font-family: "verdana" , sans-serif;">int<span style="font-family: "verdana" , sans-serif;">e</span>grieren<span style="font-family: "verdana" , sans-serif;">. Somit ist die Tag Cloud nun auch perfekt für responsives Webdesign geeignet. Wenn ihr mit Prozentwerten arbeite<span style="font-family: "verdana" , sans-serif;">t müsst ihr beachten, das </span></span></span></span></span></span></span></span></span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><i>width</i><span style="font-family: "verdana" , sans-serif;"> der Prozentwert<span style="font-family: "verdana" , sans-serif;"> für die Breite ist. Fügt ihr die Tag Cloud <span style="font-family: "verdana" , sans-serif;">z.B. in ein Div ein<span style="font-family: "verdana" , sans-serif;"> und <i>width </i>steht auf 100%, dann nimmt die Tag Cloud 100% der Breite des Di<span style="font-family: "verdana" , sans-serif;">vs an. <span style="font-family: "verdana" , sans-serif;">Bei <i>height </i>verhält es sich anders. Die <i>height </i>ist immer abhän<span style="font-family: "verdana" , sans-serif;">gig von der <i>width</i>. <span style="font-family: "verdana" , sans-serif;">Wenn euer Div 400px breit ist und ihr eine <i>width </i>von 100% angegeben habt und dazu eine <i><span style="font-family: "verdana" , sans-serif;">height</span></i> von 100%, dann <span style="font-family: "verdana" , sans-serif;">hat die Tag Cloud die Maße 400x400px. Bei einer <span style="font-family: "verdana" , sans-serif;"><i>height </i>von 90% sind die Maße: 400x360px.<br /><span style="font-family: "verdana" , sans-serif;">Kurz zusammen<span style="font-family: "verdana" , sans-serif;">gefasst: Wenn ihr mit festen Pixelgrößen<span style="font-family: "verdana" , sans-serif;">, gar nicht bis wenig responsiv, arbeiten wollt, dann <span style="font-family: "verdana" , sans-serif;">gebt die Werte z.B. wie im folgenden Beispiel mit an:</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<pre class="brush: js; auto-links: false">width: 480,
height: 480,
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wenn eure Tag Cloud responsiv sein soll und z.B. die Breite vom Div annehmen soll, in dem sie geadded worden ist, dann gebt die Werte wie folgt an:</span></span>
<br />
<pre class="brush: js; auto-links: false">width: '100%',
height: '100%',
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Per <i>radius </i>definiert ihr den Radius <span style="font-family: "verdana" , sans-serif;">auf </span>dem die Links <span style="font-family: "verdana" , sans-serif;">erstellt </span>werden. Nach dem Update hier <span style="font-family: "verdana" , sans-serif;">bitte wie im Beispiel oben zu sehen nur noch Prozentwerte a<span style="font-family: "verdana" , sans-serif;">ngeben. </span></span>Und mit <i>radiusMin</i> könnt ihr <span style="font-family: "verdana" , sans-serif;">bestimmen, falls es einen Resize gab, inwieweit d<span style="font-family: "verdana" , sans-serif;">er</span> Radius verkleinert werden darf.</span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Bei <i><span style="font-family: "verdana" , sans-serif;">b</span>gDraw </i>könnt ihr per true/false bestimmen ob die SVG einen Hintergrund bekommen soll und mit <i>bgColor </i>betimmt ihr die Hintergrundfarbe.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Mit <i>opacityOver</i>, <i>opacityOut </i>und <i>opacitySpeed </i>bestimmt ihr das verhalten der einzelnen Links/Tags, wenn ihr mit der Maus drüber fahrt. <i>opacityOver </i>und <i>opacityOut </i>nehmen Werte von 0.00 - 1.00 entgegen. Mit <i>opacitySpeed </i>bestimmt ihr, wie schnell/sensibel die Links/Tags reagieren.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Die Einstellung <i>fov </i>(Field of View) bestimmt, wie die Inhalte dargestellt werden. Der Wert wird beim umrechnen der dreidimensionalen Koordinaten in zweidimensionale Koordinaten benutzt. 800 ist dabei schon ein sehr guter Wert, aber bei Bedarf könnt ihr ihn ebenfalls anpassen.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Die Eigenschaft <i>speed </i>bestimmt wie sensibel/schnell die Tag Cloud auf eure Maus reagiert.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Mit der Eigenschaft <i>fontFamily </i>legt ihr fest, welche Schrift verwendet werden soll. Ihr könnt/solltet dabei mehrere Schriften angeben. Falls euer Browser nicht mit der ersten Schrift klar kommt, oder diese nicht geladen werden kann, wird die nächste Schrift verwendet. Es ist auch problemlos möglich die kostenlosen Google Webfonts zu nutzen. Schaut dazu am besten auf der <a href="https://www.google.com/fonts">Google Fonts</a> Seite vorbei. Dort wird sehr anschaulich erklärt, wie ihr die Schriften auf eurer Seite nutzen könnt.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Die Eigenschaften <i>fontSize </i>und <i>fontColor </i>sollten selbsterklärend sein. </span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Bei <i>fontWeight </i>könnt ihr „normal“ oder „bold“ angeben.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Und bei <i>fontStyle </i>„normal“ oder „italic“. </span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Mit <i>fontStretch </i>bestimmt ihr den Abstand der einzelnen Zeichen zueinander. Hier sind folgende Parameter möglich: „wider“, „narrower“, „ultra-condensed“, „extra-condensed“, „condensed“, „semi-condensed“, „semi-expanded“, „expanded“, „extra-expanded“ und „ultra-expanded“.</span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><br />Und mit <i>fontToUpperCase </i>könnt ihr per true/false festlegen ob die Links/Tags wie übergeben, oder in Versalien dargestellt werden sollen. </span></span></span><br />
<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">So, fast geschafft. Jetzt f<span style="font-family: "verdana" , sans-serif;">ehlt nur noch eine <span style="font-family: "verdana" , sans-serif;">Zeile Code und <span style="font-family: "verdana" , sans-serif;">ihr <span style="font-family: "verdana" , sans-serif;">seid durch</span>.</span></span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Wenn ihr mit jQuery unterwegs seid<span style="font-family: "verdana" , sans-serif;">, dann fü<span style="font-family: "verdana" , sans-serif;">gt noch die folgende Zeile hinzu:</span></span></span></span></span> </span></span></span><br />
<pre class="brush: js; auto-links: false">$( '#holder' ).svg3DTagCloud( settings );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Und ohne jQuery schreibt ihr d<span style="font-family: "verdana" , sans-serif;">ie Zeile einfach ein wenig anders:</span></span></span></span>
<br />
<pre class="brush: js; auto-links: false">var tagCloud = new SVG3DTagCloud( document.getElementById( 'holder' ), settings );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Fertig! Das wars schon<span style="font-family: "verdana" , sans-serif;">. </span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Ihr könnt euch das komplette Beispiel mit allen Eigenschaften <a href="http://nkunited.de/jquery/plugins/svg3dtagcloud/index.html">HIER</a> anschauen.<br /><br />Zum <span style="font-size: small;"><b>Download</b></span> gibt es eine <span style="font-size: small;"><a href="http://nkunited.de/jquery/plugins/svg3dtagcloud/js/jquery.svg3dtagcloud.js.zip"><b>standard JS</b></a></span> und auch eine <span style="font-size: small;"><a href="http://nkunited.de/jquery/plugins/svg3dtagcloud/js/jquery.svg3dtagcloud.min.js.zip"><b>minifizierte JS</b></a></span>. Mit 1<span style="font-family: "verdana" , sans-serif;">4</span>KB, bzw. <span style="font-family: "verdana" , sans-serif;">5</span>KB sind die Dateigrößen recht überschaubar geworden.<br /><br />Jetzt bleibt mir nicht mehr viel zu sagen, außer: Viel Spaß mit der SVG 3D Tag Cloud!<br />Und wie immer freue ich mich über Feedback. Falls ihr die SVG 3D Tag Cloud wo im Einsatz habt würde ich mich über einen Link sehr freuen</span>.<br /><span style="font-size: small;"><b><br /></b></span><span style="font-family: "verdana" , sans-serif;"><u><span style="font-size: small;"><b>Achtung, es gab ein größeres Update! </b></span></u><br />Die Dokumentation<span style="font-family: "verdana" , sans-serif;"> und die Download Links</span> habe ich <span style="font-family: "verdana" , sans-serif;">bereits angepasst.<span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;"><u>Wichtig</u>, ihr <span style="font-family: "verdana" , sans-serif;">müsst nun <span style="font-family: "verdana" , sans-serif;">bei Radius einen <span style="font-family: "verdana" , sans-serif;">Prozentwert <span style="font-family: "verdana" , sans-serif;">angeben und keine Pixelwerte mehr.<br /><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;">Die Ta<span style="font-family: "verdana" , sans-serif;">g Cloud ist <span style="font-family: "verdana" , sans-serif;">nun vollständig responsive und kann so nun <span style="font-family: "verdana" , sans-serif;">sehr gut z.B. in das <a href="http://foundation.zurb.com/">Foundation Framework</a> eingebunden werden. H<span style="font-family: "verdana" , sans-serif;">ier ei<span style="font-family: "verdana" , sans-serif;">n <span style="font-family: "verdana" , sans-serif;">Beispiel-Video</span><span style="font-family: "verdana" , sans-serif;">:</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><br />
<br />
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/Y1I3KMin8bM" width="480"></iframe>
<br /><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: small;"><b>Update/Neue Version</b></span><br /><br />Nach diversen Anfragen gibt es nun ein Update auf Version 2. Neu in Version 2 sind Grafik-Tags und Tooltips. Hier geht es lang zu <a href="http://blog.niklasknaack.de/2017/09/svg-3d-tag-cloud-jquery-plugin-v2.html"><span style="font-size: small;"><b>SVG 3D Tag Cloud jQuery Plugin V2</b></span></a>.</span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com10tag:blogger.com,1999:blog-37412491.post-88795154866197603632016-02-18T14:06:00.001+01:002016-02-18T14:13:13.883+01:00Sound Visualizer V2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEPjm_2Q1OsupgVDh6BOcFMEAufNEFChJgaM6s3sSqtI8Vdq0dsRX8sah8kHVeC-D0IZcF40jl4-n7QpaVoNy09-VnfUiOjZSbaWGvcKkxXJlYJRkJLkdKVRhUC266qDeMXZ8/s1600/ss_small.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEPjm_2Q1OsupgVDh6BOcFMEAufNEFChJgaM6s3sSqtI8Vdq0dsRX8sah8kHVeC-D0IZcF40jl4-n7QpaVoNy09-VnfUiOjZSbaWGvcKkxXJlYJRkJLkdKVRhUC266qDeMXZ8/s1600/ss_small.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Auf Basis von meinem ersten <a href="http://niklasknaack.blogspot.de/2016/01/sound-visualizer.html">Canvas Sound Visualizer</a> habe ich eine neue Version erstellt. <br />Wie gehabt könnt ihr die Szenerie mit der Maus drehen und so die 20 unterschiedlichen 3D-Modelle von allen Seiten betrachten. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Mit einem Klick wechselt ihr nicht nur die Modelle, sondern ändert auch das Farbschema. Alles Weitere geschieht von allein. Ihr könnt also Einfluss nehmen, aber müsst es nicht. Der Sound Visualizer kann euch auch ohne Interkation unterhalten. <br />Bis auf das Gesicht werden alle Modelle dynamisch erstellt und dank diverser Zufallsparameter nehmen bestimmte Modelle bei jedem Start neue Positionen usw. ein, weshalb sich jedes Mal ein neues Bild ergibt. Für mich war es in diesem Fall besonders schwierig einen schönen Übergang beim Wechsel zwischen den Modellen zu realisieren, aber im Endeffekt ist das ganz gut gelungen wie ich finde. </span></span><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/soundvis2/AudioVisualizerV2.min.html" width="480"></iframe>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die verschiedenen Modelle bestehen jeweils aus 32768 Partikeln. Bei bestimmten Modellen, wie z.B. beim Gesicht, werden zusätzliche Partikel mit angezeigt, was die Gesamtzahl auf bis zu 65536 Partikel erhöht die gleichzeitig dargestellt und berechnet werden. <br />Jedes einzelne Partikel reagiert in einer bestimmten und vorher definierten Art und Weise auf den Audio Input. Dadurch und in Verbindung mit den unterschiedlichen Farbschemen entstehen in der Regel ziemlich einzigartige Bilder. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Bitte gebt dem Sound Visualizer etwas Zeit zum Laden. Bei Interesse/Gefallen empfehle ich den kompletten Song durchlaufen zu lassen, damit ihr alle Modelle und Farben im Einsatz sehen könnt. <br />Falls euch der Song <a href="http://freemusicarchive.org/search/?sort=track_date_published&d=1&quicksearch=Hypp+fractal">„Sleepless“ von „Hypp fractal“ aus dem Album „Glow“</a> nicht gefällt, dann könnt ihr über das Menü eure eigenen MP3´s laden und schauen wie sich der Sound Visualizer dazu verhält. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Generell könnt ihr über das Menü diverse Einstellungen vornehmen. Der Fullscreen Mode ist dabei etwas mit Vorsicht zu genießen, da es sehr viel Perfomance kostet die Canvas auf Bildschirmgröße darzustellen. Mit einem flotten Rechner sollte das aber gut funktionieren. <br /> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Mobile und Internet Explorer User gehen leider leer aus. Das liegt nicht an der Engine selbst, also den Partikeln usw., sondern daran, dass die Browser auf mobilen Endgeräten kaum, oder nur sehr schlecht, Audiowiedergabe unterstützen. Und in diesem Fall wird die Soundquelle nicht nur wiedergegeben, sondern auch analysiert. Ich hoffe das wird mit zukünftigen Browser Versionen besser und einheitlicher werden, aber bis dahin gibt es bei mobilen Endgeräten leider nichts auf die Ohren und somit können die Partikel auch nicht reagieren. Probiert es aber gerne mal aus und gebt mir Feedback falls es läuft. Aber da es sich hier nur um ein kleines Experiment handelt wollte ich nicht zu viel Zeit investieren das auch auf mobilen Geräten ans Laufen zu bekommen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br />Ihr könnt den Sound Visualizer direkt hier auf der Seite starten. Am besten aber folgt ihr dem Link <a href="http://nkunited.de/blog/particles/soundvis2/AudioVisualizerV2.min.html">hier</a> und öffnet das Ganze in einem neuen Browser Fenster. </span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-33408841715310421072016-01-26T11:55:00.003+01:002016-01-26T17:54:40.852+01:00HTML5 Tutorial: Canvas Pixel Manipulation<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp8EIA-87XEIAobj9X73a4QbcOBU6JF8KUrNepWUta18_B2x5k3UiJQ8dIQN_KR0qutemWeJQ6l3jVsIhmV-GD0Q-FvtOugRZcOVDQe5hCJB0wjdDdK02FqgG2m0HNWYJmpyFx/s1600/Pixels.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp8EIA-87XEIAobj9X73a4QbcOBU6JF8KUrNepWUta18_B2x5k3UiJQ8dIQN_KR0qutemWeJQ6l3jVsIhmV-GD0Q-FvtOugRZcOVDQe5hCJB0wjdDdK02FqgG2m0HNWYJmpyFx/s1600/Pixels.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In diesem Tutorial wird beschrieben, wie ihr mit Hilfe vom <a href="https://developer.mozilla.org/de/docs/Web/API/ImageData">ImageData</a> Objekt Zugriff auf die Pixel des <a href="http://www.w3schools.com/tags/tag_canvas.asp">HTML5 Canvas Elements</a> bekommt. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Zuerst schauen wir uns die Grundlagen an bevor wir tiefer in die Materie eintauchen. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Voraussetzung für dieses Tutorial ist, dass ihr bereits mit dem Canvas Element vertraut seid und wisst wie ihr damit umzugehen habt. Und natürlich solltet ihr zumindest grundliegende Kenntnisse in JavaScript haben. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Thema „Pixel Manipulation“ ist die Grundlage so ziemlich von allen Experimenten die ich in letzter Zeit hier auf meinem Blog veröffentlich habe. Hier eine Auswahl an Experimenten (Die meisten mit<span style="font-family: "verdana" , sans-serif;"> </span></span></span><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Par<span style="font-family: "verdana" , sans-serif;">tikeln in 3D, dazu wird es ein weiteres Tutorial geben</span></span></span></span>):</span></span><br />
<br />
<ul>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2015/12/thresholding-crossfader.html">Thresholding Crossfader</a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2015/12/neural-network-v2.html">Neural Network V2 </a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2015/12/gravitational-field.html">Gravitational Field </a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2016/01/hier-kommt-die-sonne_12.html">Hier kommt die Sonne </a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2016/01/bei-diesem-javascript-canvas-experiment_13.html">3D Fireworks </a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2016/01/pumping-torus-knot.html">Pumping Torus Knot</a></span></span></li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">
</span></span>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://niklasknaack.blogspot.de/2016/01/sinus-landscape.html">Sinus Landscape</a></span></span></li>
</ul>
<br />
<b><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Los geht’s.</span></span></b><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Was ist das ImageData Objekt,</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">wie erstellen wir eins und wie kommen wir an die Pixelinformationen?</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das ImageData Objekt hat 3 Eigenschaften (Read only):</span></span><br />
<br />
<pre class="brush: js; auto-links: false">ImageData.width
ImageData.height
ImageData.data
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die beiden Eigenschaften width und height beinhalten die Werte für die Breite und Höhe.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die data Eigenschaft beinhaltet die Pixelinformationen an die wir gelangen wollen und mit deren Hilfe wir Zugriff auf die Pixel bekommen. ImageData.data ist im Prinzip nichts anderes als ein Array. Genauer gesagt ein <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray">Uint8ClampedArray</a> das die Pixelinformationen in der Reihenfolge RGBA beinhaltet mit Werten von 0 – 255. Später mehr dazu.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Zunächst einmal erstellen wir ein ImageData Objekt:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var canvas = document.createElement( 'canvas' );
canvas.width = 100;
canvas.height = 100;
document.body.appendChild( canvas );
var context = canvas.getContext( '2d' );
var imageData = context.createImageData( 100, 100 );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir haben nun mit Hilfe der Methode <a href="http://www.w3schools.com/tags/canvas_createimagedata.asp">createImageData()</a> ein leeres ImageData Objekt erstellt mit einer Breite und Höhe von 100 Pixeln. Alle Pixel in diesem neuen Objekt sind per Voreinstellung auf schwarz mit einer Transparenz von 0 gesetzt. Oder anders ausgedrückt, jedes Pixel hat folgende Werte:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">R = 0;//rot
G = 0;//grün
B = 0;//blau
A = 0;//alpha
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Neben der Methode createImageData() gibt es noch eine weitere Möglichkeit ein ImageData Objekt zu erstellen. Ihr könnt mi<span style="font-family: "verdana" , sans-serif;">t</span> Hilfe der Methode <a href="http://www.w3schools.com/tags/canvas_getimagedata.asp">getImageData()</a> auch die Pixelinformationen aus einer Canvas auslesen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Im folgenden Beispiel erstellen wir wieder eine Canvas. Aber im Gegensatz zum vorherigen Beispiel färben wir dieses Mal die Canvas per fillRect rot ein. Dementsprechend sind die RGBA Pixelinformationen die wir erhalten anders als im ersten Beispiel.</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var canvas = document.createElement( 'canvas' );
canvas.width = 100;
canvas.height = 100;
document.body.appendChild( canvas );
var context = canvas.getContext( '2d' );
context.fillStyle = '#FF0000';
context.fillRect( 0, 0, 100, 100 );
var imageData = context.getImageData( 0, 0, 100, 100 );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/atrn3gmf/">Beispiel<span style="font-family: "verdana" , sans-serif;">.</span></a></span></span></span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Nun haben wir ein ImageData Objekt erstellt das die Pixelinformationen der Canvas enthält. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Da wir unsere Canvas rot eingefärbt haben besitzen die Pixel nun folgende Werte:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">R = 255;//rot
G = 0;//grün
B = 0;//blau
A = 255;//alpha
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir haben also zwei Methoden zur Auswahl mit denen wir ein ImageData Objekt erstellen können.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Die Methode createImageData() eignet sich vor allem dann, wenn man ein völlig neues und leeres „Bild“ als Grundlage haben möchte. Mit der Methode getImageData() hingegen kann man z.B. die Pixel eines geladenen Bildes auslesen und verändern.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Schauen wir uns nun die Werte genauer an die wir aus dem data Array auslesen können. Zunächst einmal die Grundlagen zu RGBA:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">R = rot (ein Wert von 0 – 255)
G = grün (ein Wert von 0 – 255)
B = blau (ein Wert von 0 – 255)
A = alpha (ein Wert von 0 – 255. 0 ist transparent und 255 voll sichtbar)
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Im folgenden Beispiel lesen wir die Daten für das erste Pixel aus unserem per getImageData() erstellten imageData Objekt aus:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var r = imageData.data[ 0 ];
var g = imageData.data[ 1 ];
var b = imageData.data[ 2 ];
var a = imageData.data[ 3 ];
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir wissen nun die Farbe des ersten Pixels (links oben) und können dem Beispiel entnehmen, dass die ersten vier Werte aus dem data Array, nämlich 0, 1, 2 und 3 ein Pixel repräsentieren. Folgerichtig besteht jedes Pixel aus vier Werten (r, g, b, a) und das hilft uns dabei wenn wir über das data Array iterieren wollen um an alle Pixelinformationen zu gelangen. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Um über das data Array zu iterieren nehmen wir eine übliche for-Schleife:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">for ( var i = 0, i < imageData.data.length; i += 4 ) {
var r = imageData.data[ i ];
var g = imageData.data[ i + 1 ];
var b = imageData.data[ i + 2 ];
var a = imageData.data[ i + 3 ];
}
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Auf diese Weise erhalten wir die RGBA Farbinformationen eines jeden im data Array gespeicherten Pixels. Der Trick hierbei besteht darin den Schlüssel i nicht um den Wert 1 zu erhöhen (i++), sondern um 4 (i += 4). </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Denn, wie wir bereits wissen, besteht jedes Pixel aus 4 Werten (r, g, b, a) und somit kommen wir in jedem Schritt der for-Schleife an die Farbinformationen eines Pixels. <br /><span style="font-family: "verdana" , sans-serif;"><a href="http://creativejs.com/2011/12/day-3-play-with-your-pixels/">Hier</a> gibt es <span style="font-family: "verdana" , sans-serif;">noch ein sehr gutes Tut<span style="font-family: "verdana" , sans-serif;">orial g<span style="font-family: "verdana" , sans-serif;">enau zu dem Thema.</span></span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Um das iterieren über das Array zu optimieren empfehle ich unbedingt 2 Änderungen an dem obigen Beispiel vorzunehmen. Zum einen speichern wir imgData.data in einer extra Variablen und die for-Schleife schreiben wir wie folgt auch etwas anders. </span></span><br />
<br />
<pre class="brush: js; auto-links: false">var data = imageData.data;
for ( var i = 0, l = data.length; i < l; i += 4 ) {
var r = data[ i ];
var g = data[ i + 1 ];
var b = data[ i + 2 ];
var a = data[ i + 3 ];
}
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Auf diese Weise läuft das Auslesen der Pixelinformationen performanter ab. In den folgenden Beispielen setze ich voraus das data als extra Variable gespeichert ist.<span style="font-family: "verdana" , sans-serif;"> <br /><span style="font-family: "verdana" , sans-serif;"><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/">Hier</a> noch ein schöner Link mit weiteren Tipps zur Optimierung<span style="font-family: "verdana" , sans-serif;">.</span></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Auslesen ist das eine, </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">aber nun gehen wir einen Schritt weiter und verändern die Farbinformationen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Im folgenden Beispiel geben wir allen Pixeln aus unserem data Array die RGBA Werte für die Farbe Grün.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Grün sieht so aus:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">R = 0;
G = 255;
B = 0;
A = 255;
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und nun ändern wir die Werte, die zuvor noch rot waren entsprechend in grün um:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">for ( var i = 0, l = data.length; i < l; i += 4 ) {
data[ i ] = 0;
data[ i + 1 ] = 255;
data[ i + 2 ] = 0;
data[ i + 3 ] = 255;
}
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir haben nun allen Pixeln die im data Array enthalten sind neue Werte zugewiesen. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Doch wieso wirkt sich diese Änderung nicht aus? Unsere Canvas ist immer noch rot und nicht grün.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Damit sich unsere „Pixel Manipulation“ auswirkt müssen wir noch einen Schritt durchführen:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">context.putImageData( imageData, 0, 0 );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Mit der Methode <a href="http://www.w3schools.com/tags/canvas_putimagedata.asp">putImageData()</a> kopieren wir die von uns abgeänderten Pixelinformationen des ImageData Objekts zurück in die Canvas an die Position x = 0 und y = 0.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und nun ist unsere Canvas nicht mehr rot, sondern grün.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier nun zusammengefasst das komplette Beispiel:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var canvas = document.createElement( 'canvas' );
canvas.width = 100;
canvas.height = 100;
document.body.appendChild( canvas );
var context = canvas.getContext( '2d' );
context.fillStyle = '#FF0000';
context.fillRect( 0, 0, 100, 100 );
var imageData = context.getImageData( 0, 0, 100, 100 );
var data = imageData.data;
for ( var i = 0, l = data.length; i < l; i += 4 ) {
data[ i ] = 0;
data[ i + 1 ] = 255;
data[ i + 2 ] = 0;
data[ i + 3 ] = 255;
}
context.putImageData( imageData, 0, 0 );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/1uj5hnfv/">Beispiel<span style="font-family: "verdana" , sans-serif;"> in JSFiddle.</span></a></span></span></span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir verfügen nun über die Grundlagen und wissen wie wir Pixelinformationen auslesen und verändern können. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Natürlich macht es wenig Sinn eine komplette Fläche, also eine komplette Canvas <span style="font-family: "verdana" , sans-serif;">auf diese Weise </span>von einer Farbe in eine andere umzufärben. Dafür gibt es auch andere Methoden für die wir nicht einmal Zugriff auf die Pixel benötigen. Um aber beispielhaft zu erklären wie das ganze grundliegend funktioniert ist es dann eben doch sinnvoll.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Folgend ein etwas anderes Beispiel, <span style="font-family: "verdana" , sans-serif;">welches </span>man ohne den Zugriff auf die Pixel so nicht umsetzen könnte. Wir geben jetzt jedem einzelnen Pixel aus dem data Array per random einen zufälligen Farbwert:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var canvas = document.createElement( 'canvas' );
canvas.width = 100;
canvas.height = 100;
document.body.appendChild( canvas );
var context = canvas.getContext( '2d' );
var imageData = context.getImageData( 0, 0, 100, 100 );
var data = imageData.data;
for ( var i = 0, l = data.length; i < l; i += 4 ) {
data[ i ] = Math.floor( Math.random() * 255 );
data[ i + 1 ] = Math.floor( Math.random() * 255 );
data[ i + 2 ] = Math.floor( Math.random() * 255 );
data[ i + 3 ] = 255;
}
context.putImageData( imageData, 0, 0 );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/x8f6p6rp/">Beispiel<span style="font-family: "verdana" , sans-serif;"> in JSFiddle.</span></a></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"><span style="font-family: "verdana" , sans-serif;"> </span><span id="goog_1899226738"></span><span id="goog_1899226739"></span></span> </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier noch drei weitere JSFiddle Beispiele. Dieses Mal laden wir ein externes Bild und zeichnen dieses, nachdem es geladen worden ist, per drawImage in die Canvas und verändern dessen Pixelinformationen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<a href="https://jsfiddle.net/NiklasKnaack/pg1uyg7k/"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Beispiel 1: Farben invertieren</span></span></a><br />
<a href="https://jsfiddle.net/NiklasKnaack/mg2z8hzg/"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Beispiel 2: Ein Graustufenbild erzeugen</span></span></a><br />
<a href="https://jsfiddle.net/NiklasKnaack/my5whkv1/"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Beispiel 3: Per Schwellenwertverfahren Farbwerte zufällig segmentieren</span></span></a><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">Hier</a> noch ein externes Tutorial zu diesem Thema, das etwas tiefer in die Materie Filter eintaucht und sehr schöne Beispiele beinhaltet.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Anhand dieser Beispiele sollte klar werden wie mächtig der Zugriff auf die Pixel sein kann. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Achtung: Wenn wir mit der Methode drawImage ein Bild in die Canvas zeichnen und Zugriff auf die Pixel haben wollen, dann muss sich dieses Bild auf dem gleichen Server befinden auf dem auch das JavaScript ausgeführt wird! Ist das nicht der Fall wird die Konsole eures Browsers eine Fehlermeldung ausgeben und der Zugriff auf die Pixel wird verweigert:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<pre class="brush: js; auto-links: false">SecurityError: The operation is insecure.
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Man kann das umgehen. Aber der Weg ist steinig und nicht in jedem Fall durchzuführen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Stichwort hierbei lautet <a href="https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing">CORS</a>. Vereinfacht ausgedrückt: Der Besitzer des Bildes muss euch den Zugriff auf das Bild erlauben. Wie man das macht wird <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">hier</a> beschrieben.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wenn ihr dann ein solches Bild von einem anderen Server laden wollt, dann müsst ihr unbedingt die folgende Zeile<span style="font-family: "verdana" , sans-serif;"> in eurem Script</span> ergänzen:</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<br />
<pre class="brush: js; auto-links: false">image.crossOrigin = "anonymous";
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wichtig hierbei. Diese extra Zeile muss vor der Zeile eingefügt werden in der ihr den src-Pfad des Bildes angebt. Hier ein Beispiel wie ihr ein solches Bild laden könnt:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var image = document.createElement( 'IMG' );
image.onload = function () {
//Image ready
}
image.crossOrigin = "anonymous";
image.src = 'http://www.beispiel.de/seinBild.jpg';
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier noch einmal zum Vergleich ein Beispiel wie ihr ein Bild vom gleichen Server laden könnt:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var image = document.createElement( 'IMG' );
image.onload = function () {
//Image ready
}
image.src = 'deinBild.jpg';
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das aber nur kurz zur Erklärung. Nicht das ihr euch wundert, wenn ihr ein Bild von einem anderen/fremden Server ladet und dann die hier gelernten Inhalte nicht funktionieren.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Kommen wir nun aber zurück zum eigentlichen Inhalt dieses Tutorials. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Bisher haben wir einfach immer nur alle Pixel eines Bildes ausgelesen und/oder verändert. Was aber wenn wir gezielt einzelne Pixel ansprechen/auslesen wollen? </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Dazu brauchen wir zwei Funktionen/Methoden, die es uns erlauben anhand von XY-Koordinaten einzelne Pixel aus dem data Array anzusprechen.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Fangen wir damit an einzelne Pixel aus dem data Array per XY-Koordinaten zu verändern.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Das Problem. Wir bekommen per data Array nur über den Index Zugriff auf die einzelnen Werte. </span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Daher müssen wir einen kleinen Trick anwenden um unsere X und Y Werte in den Index umzurechnen. Eigentlich ganz einfach. Und so wird’s gemacht:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var i = ( x + y * imageData.width ) * 4;//i = index
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Verpacken wir das jetzt in einer Funktion, die als Paramater X, Y und ein Objekt (c) mit den Farbwerten RGBA entgegen nimmt, kommt das dabei raus:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">function setPixel( x, y, c ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = c.r;
data[ i + 1 ] = c.g;
data[ i + 2 ] = c.b;
data[ i + 3 ] = c.a;
};
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wir haben nun eine Funktion, die es uns erlaubt die Farbwerte eines per XY-Koordinaten ausgewählten Pixels zu verändern.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Dabei ist zu beachten, dass die X und Y Werte ganzzahlige Werte ohne Komma und Dezimalstellen sind. Schließlich gibt es keine Pixel auf Koordinaten mit Komma. Es gilt also, wenn vorhanden, Fließkommazahlen (Float) vorab in Integer umzuwandeln. Vereinfacht ausgedrückt: Bevor wir die Funktion setPixel aufrufen, müssen wir dafür sorgen, dass die<span style="font-family: "verdana" , sans-serif;"> </span>XY-Koordinaten keine Kommas mehr enthalten. Es gibt mehrere Wege das zu tun. Ich zeige hier 2 Möglichkeiten auf, wobei ich immer die zweite Variante verwende.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Variante 1 mit Math.floor():</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var x = 19.123425235;
var y = 45.534534213;
var c = { r:0, g:0, b:0, a:255 };
function setPixel( x, y, c ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = c.r;
data[ i + 1 ] = c.g;
data[ i + 2 ] = c.b;
data[ i + 3 ] = c.a;
};
setPixel( Math.floor( x ), Math.floor( y ), c );
</pre>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Variante 2 mit Bitwise OR operator:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var x = 19.123425235;
var y = 45.534534213;
var c = { r:0, g:0, b:0, a:255 };
function setPixel( x, y, c ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = c.r;
data[ i + 1 ] = c.g;
data[ i + 2 ] = c.b;
data[ i + 3 ] = c.a;
};
setPixel( x | 0, y | 0, c );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In beiden Beispielen färben wir jeweils ein Pixel schwarz ein. Daher auch die Variable c, bzw. das Objekt c mit den Werten für RGBA:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var c = { r:0, g:0, b:0, a:255 };
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Wie wir sehen beinhalten die Variablen für die XY-Koordinaten Fließkommazahlen. Einfach nur um das mit der Umwandlung zu verdeutlichen. Würden wir an dieser Stelle keine Umwandlung vornehmen, dann würden die hier gezeigten Beispiele versagen und die Funktion setPixel wäre nicht mehr in der Lage aus den XY-Koordinaten den Index für das Array zu berechnen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Ich bevorzuge die Variante 2 mit dem Bitwise OR operator, weil das, wenn man sehr viele Pixel Zugriffe auf einmal hat, einfach ein Stück weit performanter läuft als mit Math.floor().</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und noch eine Kleinigkeit gilt es bei der Funktion setPixel zu beachten. Führt ihr Berechnungen durch, bei denen es vorkommen kann, dass die XY-Koordinaten außerhalb des Bereichs der Canvas liegen, dann müsst/solltet ihr durch eine zusätzliche If-Bedingung sicherstellen, dass diese nicht gezeichnet werden. Das führt sonst zu komischen, manchmal auch interessanten, aber bestimmt nicht gewollten Effekten. Hier ein Beispiel dafür, mit der Annahme, dass unsere Canvas eine Breite und Höhe von 100 Pixeln hat und das unser Pixel außerhalb davon liegt:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">var x = -19.123425235;
var y = 450.53453213;
var c = { r:0, g:0, b:0, a:255 };
function setPixel( x, y, c ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = c.r;
data[ i + 1 ] = c.g;
data[ i + 2 ] = c.b;
data[ i + 3 ] = c.a;
};
if ( x > 0 && x <= 100 && y > 0 && y <= 100 )
setPixel( x | 0, y | 0, c );
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier noch einmal <span style="font-family: "verdana" , sans-serif;">als <a href="https://jsfiddle.net/NiklasKnaack/6s5df9cq/">Beispie<span style="font-family: "verdana" , sans-serif;">l in JSFiddle</span></a> mit Koordinaten innerhalb der Canvas.</span></span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Jetzt, wo wir wissen wie man die Farbwerte eines Pixels verändert, soll es nun darum gehen die Farbinformationen bestimmter Pixel auszulesen. Die folgende Funktion nimmt die Parameter X und Y entgegen und gibt ein Objekt zurück mit den Werten RGBA:</span></span><br />
<br />
<pre class="brush: js; auto-links: false">function getPixel( x, y ) {
var i = ( x + y * imageData.width ) * 4;
return { r:data[ i ],
g:data[ i + 1 ],
b:data[ i + 2 ],
a:data[ i + 3 ] }
};
</pre>
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In diesem <a href="https://jsfiddle.net/NiklasKnaack/jdjqw6o1/">Beispie<span style="font-family: "verdana" , sans-serif;">l in JSFiddle</span></a> lesen wir per Zufall <span style="font-family: "verdana" , sans-serif;">den Farbwert eines Pixels aus.</span><br /><br />Mit den beiden Methoden setPixel und getPixel haben wir nun ganz komfortabel Zugriff auf die einzelnen Pixel der Canvas. Von hier an stehen uns im Prinzip alle Türen offen.</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Folgend ein paar JSFiddle Beispiele mit denen wir per XY-Koordinaten die Pixel der Canvas verändern und somit Bilder aus Code generieren.</span></span><br />
<br />
<ul>
<li>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/0zfyfz07/">Beispiel 1</a></span></span></li>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/gdy7rmsd/">Beispiel 2</a></span></span></li>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/926osj1a/">Beispiel 3</a></span></span></li>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/tght51gu/">Beispiel 4</a></span></span></li>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="https://jsfiddle.net/NiklasKnaack/dbk7wjpo/">Beispiel 5</a></span></span></li>
</ul>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /></span></span>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">In einem weiteren Tutorial, das auf diesem aufbauen wird, werde ich dann erklären wie ihr die dritte Dimension und Partikel (wie <span style="font-family: "verdana" , sans-serif;">hier bei diversen <span style="font-family: "verdana" , sans-serif;">Beispielen schon gezeigt</span></span>) auf eure Canvas bringt. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Hier noch zum <span style="font-family: "verdana" , sans-serif;">Abschluss</span> eine kleine<span style="font-family: "verdana" , sans-serif;"> aber feine Auswahl an deutschsprachigen Tutorials r<span style="font-family: "verdana" , sans-serif;">und um dieses Thema:</span></span></span></span><br />
<br />
<ul>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"> <a href="http://www.html-info.eu/html5/canvas/item/pixelmanipulation.html">Pixelmanipulation</a></span></span></li>
<li><a href="http://www.elitepvpers.com/forum/coding-tutorials/3066405-canvas-mit-pixeln-arbeiten-html5-js.html"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Canvas - mit Pixeln arbeiten [HTML5+JS]</span></span></a></li>
<li><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><a href="http://www.mediaevent.de/javascript/canvas-pixel.html">Canvas: Bitmaps analysieren und manipulieren</a></span></span></li>
</ul>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"><br /><span style="font-family: "verdana" , sans-serif;">Ich hof<span style="font-family: "verdana" , sans-serif;">fe das Tutorial hat euch gefallen<span style="font-family: "verdana" , sans-serif;">. Falls noch irgendetwas unklar sein sollte hinterlasst einfach einen K<span style="font-family: "verdana" , sans-serif;">ommentar oder schreibt mir. <span style="font-family: "verdana" , sans-serif;">Ich würde mich freuen wenn <span style="font-family: "verdana" , sans-serif;">ihr <span style="font-family: "verdana" , sans-serif;">wieder vorbei schaut zu Teil 2</span>.</span></span></span></span></span></span></span></span>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-25444437337158701002016-01-25T14:34:00.000+01:002016-01-25T14:37:45.071+01:00Sinus Landscape<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2RIPPkuQcawDtj0y1s9cwR_JUKAcy7gTn2AI8PPSHu3y3pJ_x9iwK9uETGtx7-FGbCjYEJjBZdZHIS_MK68WI2v50Sr1w5539E3XTf85rmbHs55tE8hQCvKixghTLPrwHhYEy/s1600/SinusS.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2RIPPkuQcawDtj0y1s9cwR_JUKAcy7gTn2AI8PPSHu3y3pJ_x9iwK9uETGtx7-FGbCjYEJjBZdZHIS_MK68WI2v50Sr1w5539E3XTf85rmbHs55tE8hQCvKixghTLPrwHhYEy/s1600/SinusS.png" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;">Und wieder ein kleines Experiment. <br />Mit Hilfe der Sinus-, oder der Cosinusfunktion wird hier eine Art Landschaft erstellt. Über diverse Parameter lässt sich das Erscheinungsbild der Landschaft frei konfigurieren. <br />Per Mausklick könnt ihr zwischen verschiedenen Farbeschemen switchen. Die Rotation der Landschaft ist, wie bei den älteren Experimenten hier, auch wieder abhängig von der Mausposition. Aber nicht nur die Rotation, sondern auch die Position der Landschaft selbst ist abhängig von der Mausposition. <br />Für dieses Experiment wieder mit im Programm, das z-Sorting. Je nach Ausgabegerät solltet ihr das z-Sorting aber nicht bei mehr als 5000 Partikeln aktivieren. Das Sortieren kostet einfach noch immer sehr viel Performance. Vielleicht finde ich hier noch eine bessere Lösung, aber bis dahin muss es so gehen. Falls jemand Ideen oder Vorschläge zu dem Thema hat gerne hier in den Kommentaren schreiben. Weiter unten gibt´s die Function mit der ich das z-Sorting erledige.<br />Schaut euch das Experiment direkt hier an, oder, speziell wenn ihr mit einem mobilen Gerät unterwegs seid, folgt bitte diesem <a href="http://nkunited.de/blog/particles/landscape/SinusLandscape.min.html">Link</a> hier. Viel Spaß.</span></span>
<br /><br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/landscape/SinusLandscape.min.html" width="480"></iframe>
<br />
<span style="font-family: "verdana" , sans-serif;"><span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Und hier noch <span style="font-family: "verdana" , sans-serif;">die Function die für das z-Sorting verantwortlich ist. Das Array particleHolder beinhaltet alle Parti<span style="font-family: "verdana" , sans-serif;">kel die e<span style="font-family: "verdana" , sans-serif;">s darzustellen gilt, bzw.<span style="font-family: "verdana" , sans-serif;"> enthält die Partikel die sortiert werden müssen</span></span></span><span style="font-family: "verdana" , sans-serif;">:</span></span></span></span></span>
<br />
<pre class="brush: js; auto-links: false">model.particleHolder = model.particleHolder.sort( function( a, b ) {
return ( b.vectorPosition.z - a.vectorPosition.z );
} );
</pre>
Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0tag:blogger.com,1999:blog-37412491.post-7452200039304647482016-01-18T12:19:00.001+01:002016-01-18T17:47:48.166+01:00Pumping Torus Knot<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXm3ikJkB1TIq2ClhWaErFdcrMUONDaDU1voNkj6rZs1-HDuB_yJb2IwSNO9OMPx9Ma8Ba-b-fv0anTjpPCQQmqcfGW9UQNcpQkubfOt_ZTQxNiiCEX9O3dRPMI_FBOiNX5haZ/s1600/PreviewTorusKnotS.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXm3ikJkB1TIq2ClhWaErFdcrMUONDaDU1voNkj6rZs1-HDuB_yJb2IwSNO9OMPx9Ma8Ba-b-fv0anTjpPCQQmqcfGW9UQNcpQkubfOt_ZTQxNiiCEX9O3dRPMI_FBOiNX5haZ/s1600/PreviewTorusKnotS.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;">Bei diesem Experiment wird ein <a href="https://de.wikipedia.org/wiki/Torusknoten">Torusknoten</a> abgebildet der Flüssigkeit durch sich durch pumpt. Die Geometrie dazu habe ich größtenteils von <a href="http://threejs.org/">three.js</a> übernommen, genauer gesagt aus der <a href="https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/TorusKnotGeometry.js">TorusKnotGeometry.js</a>. Ich musste nur ein paar Parts umschreiben und habe dann noch das Pumpen ergänzt, welches ich mit einer simplen Sinus Kurve realisiert habe. <a href="http://www.3d-meier.de/tut8/Seite27.html">Hier</a> gibt es eine schöne Erklärung zum Thema Torusknoten in der auch die Gleichung dahinter erklärt wird.<br />Beim Experiment gibt es eine große Menge an möglichen Einstellungen. Ich will dieses Mal nicht zu sehr ins Detail gehen, bzw. die meisten Einstellungen sollten selbsterklärend sein. Probiert einfach mal ein paar Einstellungen aus und spielt an den Reglern.<br />Ich habe jetzt auch endlich Nutzer mit mobilen Endgeräten berücksichtigt. Neben einer verbesserten Darstellung und besonderen Einstellungen kann das Experiment nun auch über Touch Events gesteuert werden. Ben Centra hatte dazu dieses lesenswerte Tutorial geschrieben: <a href="http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html">Using Touch Events with the HTML5 Canvas</a>.<br />Schaut euch das Experiment direkt hier an, oder, speziell wenn ihr mit einem mobilen Gerät unterwegs seid, folgt bitte diesem <a href="http://nkunited.de/blog/particles/torusknot/TorusKnot.min.html"><b>Link</b></a> hier. Viel Spaß.</span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "verdana" , sans-serif;"> </span></span>
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/torusknot/TorusKnot.min.html" width="480"></iframe>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com1tag:blogger.com,1999:blog-37412491.post-81794067519689884322016-01-13T15:40:00.001+01:002016-01-14T00:29:24.599+01:003D Fireworks<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9rkLE0F4SSQgbKlOpe9U7iAlVrQWprTmUUi-LnZnCH7H-dn8A5_rmIBs24CN5nnljqvy5a2B1X2b3YLOZipgwGbPXpUVTTb4o36LLg4YbHjyHn28Z6pGPcPEZdmn7UNEdZbiH/s1600/fireworksPreview_S.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9rkLE0F4SSQgbKlOpe9U7iAlVrQWprTmUUi-LnZnCH7H-dn8A5_rmIBs24CN5nnljqvy5a2B1X2b3YLOZipgwGbPXpUVTTb4o36LLg4YbHjyHn28Z6pGPcPEZdmn7UNEdZbiH/s1600/fireworksPreview_S.png" /></a></div>
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;">Bei diesem JavaScript Canvas Experiment hab ich mich von einem alten Flash Experiment von mir selbst inspirieren lassen, welches ich damals für den Japantag in Düsseldorf geschrieben hatte: <br />„<a href="http://niklasknaack.blogspot.de/2009/06/fireworks-japantag-in-dusseldorf-am.html"><b>Fireworks, Japantag in Düsseldorf am Rheintum</b></a>“<br />Das war 2009 und Flash war noch schwer angesagt. Bei dem alten Experiment musste ich noch auf die dritte Dimension verzichten, weil das die Performance kaum hergab. Und jetzt, mit JavaScript, kann man ein solches Feuerwerk fast problemlos abfeuern. <br />Ich bin jedes Mal wieder aufs Neue verblüfft wie sich JavaScript in den letzten Jahren weiterentwickelt hat.<br />Aber nun zum Experiment. Wie bei den vorhergegangenen Experimenten dieser Art, so nutzt auch dieses wieder Partikel für die Darstellung, die in Form von Pixeln direkt in das <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData</a> Array der Canvas geschrieben werden. Mit dieser Technik ist es möglich eine sehr große Anzahl an Partikeln gleichzeitig zu animieren und darzustellen. Und dank des <a href="http://www.w3schools.com/html/html5_canvas.asp">Canvas Elements</a> kann so ziemlich jeder Browser (außer dem Internet Explorer 9 und älter) das auch wiedergeben. <br />Zum Starten müsst ihr nur einmal kurz mit der Maus über die Fläche weiter unten fahren und schon geht’s los. Wie immer könnt ihr über „Open Controls“ diverse Einstellungen vornehmen und so direkt Einfluss auf das Feuerwerk nehmen. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;">Folgend ein paar Anmerkungen zu den wichtigsten Einstellungen die direkt Auswirkungen auf das Feuerwerk haben:<br />Mit „Ground“ könnt ihr die Bodenplatte bzw. das Grid unten aus- und einblenden.<br />„Distance“ beschreibt die minimale Höhe in der die Feuerwerksraketen über der Bodenplatte explodieren.<br />Per „Interval“ bestimmt ihr die Häufigkeit mit der neue Raketen abgefeuert werden. Die Einheit hierbei sind Millisekunden. Und mit „Probability“ bestimmt ihr die Wahrscheinlichkeit mit der per Intervall neue Raketen in den Himmel entlassen werden. Wobei der Wert „1“ 100% entspricht. Bei „1“, also 100% werden alle 25 Millisekunden Raketen abgeschossen und bei „0.25“ nur mit einer Wahrscheinlichkeit von 25%. <br />Mit „Duration“ könnt ihr festlegen wie lange eine Explosion dauert.<br />Und per „Trail Length“ legt ihr fest ob die einzelnen Partikel eine Spur hinter sich herziehen sollen und wie lang diese ist. <br />Ich habe mich dieses Mal gegen die Option z-Sorting aktivieren zu können entschieden, weil ich das hierbei für nicht so wichtig fand, und weil das natürlich auch immer sehr viel Performance kostet. </span></span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;">Besucher mit <a href="http://nkunited.de/blog/particles/fireworks/Fireworks.min.html"><b>Mobile Devices</b></a>, oder falls ihr das Experiment lieber in einem neuen Browserfenster starten wollt klickt einfach <a href="http://nkunited.de/blog/particles/fireworks/Fireworks.min.html"><b>hier</b></a>. Ansonsten geht’s direkt hier drunter los. Viel Spaß.</span></span><br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="480" scrolling="no" src="http://nkunited.de/blog/particles/fireworks/Fireworks.min.html" width="480"></iframe>Niklashttp://www.blogger.com/profile/06019271382012195814noreply@blogger.com0