tag:blogger.com,1999:blog-36190239684767017592024-03-04T23:32:46.661-08:00Pl4n3's worldBlog about (Web-) Programming, Graphics and Games.pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.comBlogger90125tag:blogger.com,1999:blog-3619023968476701759.post-19326598997484130182017-06-12T02:55:00.001-07:002017-06-12T02:55:57.856-07:00Running webapp: pdf-podcast & geolocation<a class="twitter-moment" href="https://twitter.com/i/moments/874201765763325952">Running webapp: pdf-podcast & geolocation</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-37036001381470609032017-01-26T06:29:00.000-08:002017-01-26T06:31:10.235-08:00Text search with a folding editor<img border="0" style="float:right;" height=150 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPqyb1zY1mEY7JnT6euLYN4YkHVrtTX1QmlO8MR0WVE4WJJIylsGeTLYr8tqVLJS1qeBgmEoqe6n3LkgSopyr7I7AkKWlJyeOVpukT3RWJnWHOBIji3ZjM3hvFWRAbx_v9lrByqIetDU/s1600/folded.gif" />Implemented text search for the web folding editor. Similar to the advantage of folding editors in general, that an overview of a whole document can be given while details are blended out (folded), with text search an <b>overview of lots or all text-occurences is visible at once</b>. In Detail finding text works as follows:<ol><li>Highlight all visible occurences.<li>Highlight closed folders with a number of hidden occurences inside.<li>Successively point the cursor to different occurences, possibly open folders for hidden occurences and closing them again if next occurence is elsewhere.</ol>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-86635337948766456812016-12-12T16:36:00.000-08:002016-12-17T06:11:50.403-08:00Happy Feast of Winterveil!<img style="float:right;height:225px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVoUefKLHPXIhbxWM7t5vo_0xyt-5J-MfqmgywlBJLolFB-M6mYz9LPOy762Z01hBYfClHTRhzvYsM9gdBVwovT_QkKngZauhp3P_pKJeLY2IeFrY-3tQJ6aUdKsqoc50nFIWmcKDzeKE/s1600/santascr0.png" /><iframe style="float:right;" width="400" height="225" src="https://www.youtube.com/embed/MnM-Jrkd7eo" frameborder="0" allowfullscreen></iframe>Last blogpost of this year, everyone a good transition to <b>2017</b>! Assembled 2 2D javascript experiments. First has a walking and tumbling Santa Claus with randomly generated snow flakes. Second renders vegetation, moving as a frog runs through it.<br><br><span style="font-size:2em;line-height:1em;"><a href=https://pl4n3.github.io/canvas/bod2/santa.htm>► Start Santa Claus</a><br><a href=https://pl4n3.github.io/canvas/cutouts.htm?jumprun&noapps>► Start Vegetation</a></span><br><br>
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-71019719142688990642016-11-28T05:41:00.001-08:002016-11-28T06:58:52.706-08:00Recent subjectsProjects and contents that currently didnt manage to get own blogposts, only tweets. π
<div style="-moz-column-width:200pt;column-width:200pt;-webkit-column-width:200pt;">
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Updated an older canvas-demo of textured triangles. Big speedup. New: <a href="https://t.co/w6gpr9YI58">https://t.co/w6gpr9YI58</a> Old: <a href="https://t.co/ZNzTNO5tzN">https://t.co/ZNzTNO5tzN</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="https://t.co/IMlHTXVCyA">pic.twitter.com/IMlHTXVCyA</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/802551180899524608">November 26, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Winter is coming. <a href="https://t.co/dUyELfDLP7">pic.twitter.com/dUyELfDLP7</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/797372931911352320">November 12, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">There's something in the fog.. π¨ <a href="https://t.co/nb6njKJKdZ">pic.twitter.com/nb6njKJKdZ</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/788856958325579778">October 19, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Tool to spot and visualize movie collaborations (using Wikidata) is online: <a href="https://t.co/01FGxxgNpb">https://t.co/01FGxxgNpb</a>. Example: Lots Cronenberg Shore collabs. <a href="https://t.co/1b8qPwhG6c">pic.twitter.com/1b8qPwhG6c</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/788055421110083584">October 17, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Some progress on a game experiment. People can jump. πΆπ½ππ½ <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="https://t.co/KDpVYj43om">https://t.co/KDpVYj43om</a> <a href="https://t.co/zOoYBMEFZN">pic.twitter.com/zOoYBMEFZN</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/787033537690136577">October 14, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Experimenting with animated 360Β° photos. <a href="https://t.co/89POQTyzKh">https://t.co/89POQTyzKh</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="https://t.co/Ar6usNuc6q">pic.twitter.com/Ar6usNuc6q</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/783435434198179840">October 4, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div style="break-inside: avoid-column;-webkit-break-inside: avoid-column;-moz-break-inside: avoid-column;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Doing optimization using <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> triangulateShape, triangles ~3000 -> ~300. Should help with collision performance. <a href="https://t.co/Hd5gomTwKV">pic.twitter.com/Hd5gomTwKV</a></p>— β4n3 β¨ (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/771873705865732096">September 3, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-75786813716130384322016-07-19T06:40:00.001-07:002016-10-03T23:57:24.940-07:00Buckminster Fullers Jitterbug<a href="https://pbs.twimg.com/media/CnmywiHXgAAhA3S.jpg:large" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://pbs.twimg.com/media/CnmywiHXgAAhA3S.jpg:large" height="150" /></a>Another small demo inspired by an article of journal '<a href="spektrum.de">Spektrum der Wissenschaft</a>'. Its a simulation of a so called dancing octahedron (or Buckminster Fullers jitterbug), where trianglepoints are connected pairwise. In the simulation having only the triangles would make the object fold together. Thus auxilliary structure (gray lines) is needed to shape its form and behavior. In the demo the object can be dragged around (mouse/touch).<br><br>
<span style="font-size:2em;line-height:1em;"><a href=http://pl4n3.neocities.org/canvas/bod3.htm>► Start</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-77032635955845396902016-06-19T16:43:00.001-07:002016-06-20T05:13:45.745-07:00Conet Android App<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3Yu7Z_rwlGqxVZMEQws1Zi8bNHhmDvwc0ckfdfyqx8xhMMIO3ZCn-CtnjmjyoxEVC7vGsK5VnDbUoTVcX0FUcltjKSiQzp9sWKFAxHcAKWfO8MYvfpiwyweUd-UmSZHD5v33sZPPa9U/s1600/conet1.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/AVvXsEiM3Yu7Z_rwlGqxVZMEQws1Zi8bNHhmDvwc0ckfdfyqx8xhMMIO3ZCn-CtnjmjyoxEVC7vGsK5VnDbUoTVcX0FUcltjKSiQzp9sWKFAxHcAKWfO8MYvfpiwyweUd-UmSZHD5v33sZPPa9U/s320/conet1.png" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGT0SBRXhFAh5wt4we6fhEcO_W1oJBKBW5XuqZCOXEqrjSZT5wIsHJOgLnIxz4kq6cAkHyTQDk9xSyoJ9HFH79skCSl7YyYRYqbj1DTj32sBWGM0WQ1wAyLDb0AGUdSFoO7HGylAyN4v8/s1600/conet0.png" imageanchor="1" style="float:right; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGT0SBRXhFAh5wt4we6fhEcO_W1oJBKBW5XuqZCOXEqrjSZT5wIsHJOgLnIxz4kq6cAkHyTQDk9xSyoJ9HFH79skCSl7YyYRYqbj1DTj32sBWGM0WQ1wAyLDb0AGUdSFoO7HGylAyN4v8/s100/conet0.png" /></a>
My first android app is online. Its a basic webserver with simple file-upload and file-synchronize via home wifi, thus creating a <b>decentralized local wifi cloud</b>. App is currently public beta:<br><br>
<span style="font-size:2em;line-height:1em;"><a href=https://play.google.com/apps/testing/pl4n3.conet>► Install</a></span><br>
<br>
Project consists of 2 components:<br>
1.) a basic webserver where webapps are able not only to simply load files from filesystem (XMLHttpRequest) but also to save them to it.<br>
2.) if there are multiple devices with this app running connected to home wifi, they see each other and synchronize files.<br>
Thus Conet is somewhat like working with cloud files, without the cloud: Edit data on a device (possibly offline), then after getting home, file-changes are distributed to other devices, where the work might continue.<br>
<b>Howto start:</b> Start app. Start browser with url "localhost:7000". See examples.
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-46251001872241603222016-04-25T16:24:00.000-07:002016-04-26T16:31:09.785-07:00Wloom 17: Script-Generated Levels<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbgl2Fzevnu7y115yJczSpPfveIm7iqg2Fzvmf5tkUw3WgnNYzGb4yMohWZobE3rBPfiQzW1ckZjnemWbtQDZpno5Vxz_PRHTO5aw45iWnMjjCq6CLqb8PZ3eMMEanJo9vv8G9EGHBfj0/s1600/beam4.png" imageanchor="1" style="float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbgl2Fzevnu7y115yJczSpPfveIm7iqg2Fzvmf5tkUw3WgnNYzGb4yMohWZobE3rBPfiQzW1ckZjnemWbtQDZpno5Vxz_PRHTO5aw45iWnMjjCq6CLqb8PZ3eMMEanJo9vv8G9EGHBfj0/s480/beam4.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNR-x_KjaBr7uS0D7Onh2ZLPIRf4jFU_W7SDDmlwT5eGI_Z_hms_8FNgZznwWuCdMY9lXDjpWp_J13rQ9Cqzh2RUtSd6dF0kpEnnnMeYCSFLaSgN58XqT5fQ_roHy4WIlWCvE6UuPgzAI/s1600/wloomhills.jpg" imageanchor="1" style="float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNR-x_KjaBr7uS0D7Onh2ZLPIRf4jFU_W7SDDmlwT5eGI_Z_hms_8FNgZznwWuCdMY9lXDjpWp_J13rQ9Cqzh2RUtSd6dF0kpEnnnMeYCSFLaSgN58XqT5fQ_roHy4WIlWCvE6UuPgzAI/s480/wloomhills.jpg" /></a>Mission is to create game levels with scripts. First demo shows 3d architecture being constructed using simple commands (box,gate,corridor,..) and raytracing. Second has a simple landscape with transparent vegetation. For each demo there are 3 links, the level-script shown with the <a href="http://pl4n3.blogspot.de/2016/02/recent-projects-dawn-2016.html">web folding editor</a>, the level-script run in the <a href="http://pl4n3.blogspot.de/2013/05/creating-3d-content-using-mobile-web.html">web 3d editor</a> and the resulting level playable in wloom game environment.<br><br>
Demo 1: Architecture<br>
<span style="font-size:1.5em;"><a href="https://dl.dropboxusercontent.com/u/55896607/test/frogMultiline.htm?fn=../canvas/w3dit/script/beam4.txt">Source</a> · <a href="https://dl.dropboxusercontent.com/u/55896607/canvas/edit3d.htm?script=Conet.download(%7Bfn%3A%27w3dit%2Fscript%2Fbeam4.txt%27%2Cnocache%3A1%2Cf%3Afunction(s)%20%7B%0A%20%20try%20%7B%0A%20%20eval(s)%3B%0A%20%20%7D%20catch%20(e)%20%7B%20log(e)%3B%20%7D%0A%7D%7D)%3B">3d-Editor</a> · <a href="https://dl.dropboxusercontent.com/u/55896607/shooter/shooter.htm?map=editStatic&three=1&pd5fn=objs/mapGen/beam4.txt">Play</a></span><br><br>
Demo 2: Landscape with transparent vegetation<br>
<span style="font-size:1.5em;"><a href="https://dl.dropboxusercontent.com/u/55896607/test/frogMultiline.htm?fn=../canvas/w3dit/script/hills.txt">Source</a> · <a href="https://dl.dropboxusercontent.com/u/55896607/canvas/edit3d.htm?script=Conet.download(%7Bfn%3A%27w3dit%2Fscript%2Fhills.txt%27%2Cnocache%3A1%2Cf%3Afunction(s)%20%7B%0A%20%20try%20%7B%0A%20%20eval(s)%3B%0A%20%20%7D%20catch%20(e)%20%7B%20log(e)%3B%20%7D%0A%7D%7D)%3B">3d-Editor</a> · <a href="https://dl.dropboxusercontent.com/u/55896607/shooter/shooter.htm?map=editStatic&three=1&pd5fn=objs/mapGen/hills.txt">Play</a></span>
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-3033800358489648552016-02-28T08:47:00.002-08:002016-03-09T02:51:46.943-08:00Recent projects, Start 2016<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0clyurmzmVVaSGpPff1Tm96tUKOxfHtXbPVI_8u81ddHbcFbOhDQusVKO6wLm7tDE_QIJIWPge8cp4BJXRkPTJ2yDND1pzBlPLB7vnmtXy3JmsZsgRia7dALV-Qsf5UaMXnK3wRSGa40/s1600/20160118_151007.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/AVvXsEh0clyurmzmVVaSGpPff1Tm96tUKOxfHtXbPVI_8u81ddHbcFbOhDQusVKO6wLm7tDE_QIJIWPge8cp4BJXRkPTJ2yDND1pzBlPLB7vnmtXy3JmsZsgRia7dALV-Qsf5UaMXnK3wRSGa40/s480/20160118_151007.jpg" /></a>
<div style="float:left;margin:3px;"><img style="" height=100 src="https://pbs.twimg.com/media/CaPVt65WcAEFfjL.jpg:large" /><br>History wikidata visualisation: ellipse > line. <a href="https://dl.dropboxusercontent.com/u/55896607/test/wikidataTime.htm">[Start]</a><br>Also first time tinkering with SVG.</div>
<div style="float:left;margin:3px;"><img style="" height=100 src="https://pbs.twimg.com/media/CZRwLqAWIAIslgc.jpg:large"/><br>New Threejs demo is online. Now with textures,<br>details, skybox aaand.. hamburger menu. <a href="https://dl.dropboxusercontent.com/u/55896607/three/deep5.htm">[Start]</a></div>
<div style="float:left;margin:3px;"><img style="" height=100 src="https://pbs.twimg.com/media/CWodW2eWcAAo9Xm.png:large"/><br>Web folding editor with syntax highlighting<br>for mobile and desktop. <a href="https://dl.dropboxusercontent.com/u/55896607/test/frogMultiline.htm">[Start]</a></div>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-90350462817820014482015-10-26T07:24:00.001-07:002015-10-27T16:01:15.742-07:00Recent Three.js demos<div style="float:left;"><blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Graph VR app is now somewhat featurecomplete. Waiting for continuation inspiration now. :) <a href="https://t.co/1siZb7DjJZ">https://t.co/1siZb7DjJZ</a> <a href="http://t.co/Lqtqz47C4C">pic.twitter.com/Lqtqz47C4C</a></p>— β4n3 (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/649021630665113600">September 30, 2015</a></blockquote></div>
<div style="float:left;"><blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Made a quick <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> test, inspired by 'Monument Valley' game. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="https://t.co/sxQEWRsdPv">https://t.co/sxQEWRsdPv</a> <a href="https://t.co/mnN4jjAENg">pic.twitter.com/mnN4jjAENg</a></p>— β4n3 (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/657221985236353026">October 22, 2015</a></blockquote></div>
<div style="float:left;"><blockquote class="twitter-tweet" lang="en" style="float:left;"><p lang="en" dir="ltr">Extended <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> demo: Map is single mesh, editable (import/export) and npcs run around. <a href="https://t.co/yvXIR9IUfN">https://t.co/yvXIR9IUfN</a> <a href="https://t.co/4vgwD58o0Y">pic.twitter.com/4vgwD58o0Y</a></p>— β4n3 (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/658636954821619717">October 26, 2015</a></blockquote></div>
<div style="float:left;"><blockquote class="twitter-tweet" data-conversation="none" lang="en"><p lang="en" dir="ltr">In time for Halloween the <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> demo got more detail/spooky gfx. Procedural maps are fun. <a href="https://t.co/diYHFTmXsA">https://t.co/diYHFTmXsA</a> <a href="https://t.co/8KIWOHVxaH">pic.twitter.com/8KIWOHVxaH</a></p>— β4n3 (@Pl4n3) <a href="https://twitter.com/Pl4n3/status/659080135975550976">October 27, 2015</a></blockquote></div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-63288061457729246342015-09-08T18:46:00.000-07:002015-09-08T18:46:48.904-07:00Back to VR, now mobile.About <a href="http://pl4n3.blogspot.de/2013/10/wloom-14-webgl-run.html">2 years ago</a> I got the Oculus VR device DK1. It was great pixelated fun. VR apps could be written in the browser with the help of plugins or socket-connection to an external vr application. Today browsers start to make it easier by implementing WebVR (and deprecate plugins, but thats another story).<br>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wvlf5V0YKTLNMyolvMn2Gc7bDcEUCmlB8dmJP8TJskHy71J1UD0hSc1cRzzB25IjRPnOB3esYoyeH7CVDU7ydmV2UqxsT73UrFXbnUg-l5-4p2jsXBNqduzNwPTXACxsaJWdtNdDWgk/s1600/s6vr.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wvlf5V0YKTLNMyolvMn2Gc7bDcEUCmlB8dmJP8TJskHy71J1UD0hSc1cRzzB25IjRPnOB3esYoyeH7CVDU7ydmV2UqxsT73UrFXbnUg-l5-4p2jsXBNqduzNwPTXACxsaJWdtNdDWgk/s320/s6vr.jpg" /></a></div>
Now that I needed a new mobile phone to replace the trusty samsung s3 mini, it was a quick decision to get a s6 together with a gear vr device (by samsung & oculus). Its great fun again, less pixelated. Oculus home app starts as soon as s6 and gear vr are connected and has <a href="http://www.wareable.com/vr/best-samsung-gear-vr-apps-the-games-demos-and-experiences-to-download-first-816">great apps and vr media</a>, my current favorites are 'Dreadhalls' and 'Anshar Wars'. When I wanted to examine WebVR, there was the problem, that Oculus home app always autostarted and no browser would be visible through the VR device. First solutions, the internet offered, were to somehow disrupt the usb connection between s6 and gear vr or stop gear vr service with a rooted android or to switch to <a href="http://forum.xda-developers.com/gear-vr/general/gear-vr-development-t3029081">oculus developer mode</a>, which only works, if you have (fake-) deployed an oculus vr app, else you only get the message 'You are not a developer!'. Didnt liked them solutions and thought to ditch gear vr and get a google cardboard (or similar universal vr device) instead. Also thought, this would be the worst vendor lockin issue ever. Then I got pointed to the app <a href="https://play.google.com/store/apps/details?id=com.ospolice.packagedisablerpro">Package Disabler Pro</a>, which is able to suspend gear vr service on a not rooted system (for 1.70 β¬). Now WebVR was possible, did test it with the <a href="http://vihart.github.io/webVR-playing-with/spindex">spindex app</a>, found on this <a href="http://webglvr.tumblr.com/">WebVR tumblr</a>. The spindex app uses WebVR and falls back to PhoneVR, if the browser doesnt support WebVR. I adapted this approach for the Wloom game environment:<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/shooter/shooter.htm?map=run1&glge=0&magic3d=1>► Simple gfx</a><br><a href=https://dl.dropboxusercontent.com/u/55896607/shooter/shooter.htm?map=run1&threevr=1>► Complex gfx</a></span><br><br>
Finally a general thought about phone VR. I always wanted to do computer work outside (park/garden), but stationary hardware and sunlight make that difficult. There are notebooks/laptops, but sunlight is still a issue and you might want a bigger display or multiple screens. Phone VR could be the solution to mobile workplaces, phones have all the tech within and the power of desktop (office) pc's. Phone is always there, for the workplace only vr-glasses and maybe bluetooth keyboard is additionally needed. With VR, screensize is no issue (can be 360Β°). What is needed is VR workplace software, like VR desktop, but maybe utilizing not only the bigger field of view, but also the additional dimension that comes with VR.pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-90002842471298527132015-07-23T18:36:00.001-07:002015-07-24T02:08:50.254-07:00Wikidata Historymaps<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYTUYnNd93OWzUG9bDQ-tayoAC2zrOh5QTzvEksPUphmaYEP2oMKtfNeJ7kG4YkCqBhxcOR03db8pLDpJJmY_ymNmosih27NxBu57-4zovaXW4mIkBwHPLy-MyOsDJwBb8vhtW7Q24EY/s1600/historyMaps0.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/AVvXsEhCYTUYnNd93OWzUG9bDQ-tayoAC2zrOh5QTzvEksPUphmaYEP2oMKtfNeJ7kG4YkCqBhxcOR03db8pLDpJJmY_ymNmosih27NxBu57-4zovaXW4mIkBwHPLy-MyOsDJwBb8vhtW7Q24EY/s400/historyMaps0.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHg4neNOiohh3cdK8eyII7PCtDAxOwYdX5ENM0Gnfqf_aNm-397jQ19E-6GxEVqRmR9tn85lFU1-FCFXdD22lAXB4h5s8eehTaILPy8U1aSQhXz3pTOM7AeqfNDm41SAP9-tC90JfRrNc/s1600/historyMaps1.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/AVvXsEgHg4neNOiohh3cdK8eyII7PCtDAxOwYdX5ENM0Gnfqf_aNm-397jQ19E-6GxEVqRmR9tn85lFU1-FCFXdD22lAXB4h5s8eehTaILPy8U1aSQhXz3pTOM7AeqfNDm41SAP9-tC90JfRrNc/s400/historyMaps1.jpg" /></a>The project fetches history data from wikidata (with time/location) and displays them using google maps. Data fetching starts with a person (i.e. its wididata id) and recursivly loads a number of data of ancestor and descendants. Places of historic events are clickable markers, where a description window can be shown. There are lines drawn between places of a persons history and between places of ancestors to descendants.<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/test/wikidataMaps.htm?Q149674>► Niklot</a><br><a href=https://dl.dropboxusercontent.com/u/55896607/test/wikidataMaps.htm?Q105378>► Henry the Lion</a></span><br><br>Some interesting aspects from a programming perspective: the wikidata barcode logo is 'wiki' in morse code (<a href=https://discoveranjali.wordpress.com/2014/06/17/small-insight-into-the-wikidata-logo/>ref</a>). Wikimedia commons image urls are of the form a/ab/(filename), where 'ab' are the first characters of the md5 hash of the filename.pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-13695281315185525382015-05-05T17:09:00.001-07:002015-05-06T02:08:19.028-07:00Gree - 3d graphs (of json or javascript)<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZOhn71-RAM82vZNN7ihREZ6zQXD0FW5lajsyou4e4NNZQS9V2Kfzm4wsXpjyEQnBCoDBxurZsn5HnU-UWgStarB-uM1Yq3u82It-L6h5TN0USHknVx3KgOzSAalxBE_PbrLBLsZHagw/s1600/graph3d0.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZOhn71-RAM82vZNN7ihREZ6zQXD0FW5lajsyou4e4NNZQS9V2Kfzm4wsXpjyEQnBCoDBxurZsn5HnU-UWgStarB-uM1Yq3u82It-L6h5TN0USHknVx3KgOzSAalxBE_PbrLBLsZHagw/s320/graph3d0.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JdzIAmToWsS0tbJBzg3JdYWC0skDQhAPmjb6f8H-8whgHKnQJbfUDtAfhOZTdO3Qq_SfjKDTM6daOBDURKRLTrKsEyMpmFYYVCwtkg65By4LB2sdC21zfdrJfLXsA6SikmI_i710UEs/s1600/graph3d2.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/AVvXsEj6JdzIAmToWsS0tbJBzg3JdYWC0skDQhAPmjb6f8H-8whgHKnQJbfUDtAfhOZTdO3Qq_SfjKDTM6daOBDURKRLTrKsEyMpmFYYVCwtkg65By4LB2sdC21zfdrJfLXsA6SikmI_i710UEs/s200/graph3d2.png" /></a>Experimenting on a new project called '<b>Gree</b>' (from <b>GR</b>aphs with <a href=http://threejs.org/>thr<b>EE</b>.js</a>) to display and edit 3d graphs of json data or sourcecode. Motive is, that complex interconnected networks are difficult to display in 2d, e.g. edges overlap. 3d should improve visibility. To best utilize this, stereoscopic view (e.g. via vr device) is needed, since else the graph stays 2d projection. Currently there are 2 applications. The first is a general 3d graph tool. Graph data is represented and editable in json format. The graph can be modified by dragging its nodes.
<br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/three/graphJson.htm>► Gree Json</a></span>
<br><br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi65Ga183rabLSgCz02UV8qv-_3ac-6wmmUiK2rj37C_DB0n2YsOWlHpnOnm4hp5kxan97YjA-tg8qRjrV7LNW80Hx7FY0SQYg5BdI1hQ8swcqHdFj5ccdlm1fgXZhRJiYJGw4-i0RHxoo/s1600/graph3d1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi65Ga183rabLSgCz02UV8qv-_3ac-6wmmUiK2rj37C_DB0n2YsOWlHpnOnm4hp5kxan97YjA-tg8qRjrV7LNW80Hx7FY0SQYg5BdI1hQ8swcqHdFj5ccdlm1fgXZhRJiYJGw4-i0RHxoo/s320/graph3d1.png" /></a>Second application generates 3d graphs of javascript sourcecode and vice versa. Why make 3d graphs of sourcecode? Code (display/editing) can be in a way redundant, because everytime a function is called, its name must be written. So a function name can appear multiple times. Alternatively a function could be represented as graph node (its name only displayed once) and everytime it is called, an edge to that node is drawn. This project tries to go that direction. Here an edge between 2 function nodes is drawn if one function is called from the other. For complex code with lots functions this can give a quick overview of code semantics. 3d positions of nodes are stored as comments above related functions. If the graph is modified by dragging its nodes, javascript can be generated with updated position comments. Javascript is parsed with <a href=https://github.com/marijnh/acorn>acorn.js</a> and generated with <a href=https://github.com/estools/escodegen>escodegen.js</a>.
<br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/three/graphJs.htm>► Gree Javascript</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-23386928463085963552015-04-18T15:49:00.001-07:002015-04-18T15:53:50.883-07:00Mona Lisa & Fractal Tree<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iAJMWtR8YJWxtCApbqZ5wNUiSzLUFxJqhmb-2N8brmV9zHu6sWYnn73TNhLWWRPdXYaBC5a5icl4K2fdET2Ity58D0v8m4ISJcT37UkaMfEzNzsA4zemj4SvCZXL4oSBvQXrROpIH0g/s1600/index.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iAJMWtR8YJWxtCApbqZ5wNUiSzLUFxJqhmb-2N8brmV9zHu6sWYnn73TNhLWWRPdXYaBC5a5icl4K2fdET2Ity58D0v8m4ISJcT37UkaMfEzNzsA4zemj4SvCZXL4oSBvQXrROpIH0g/s370/index.png" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLXzitSvy84l8wo0835ymEkfhjXoyzDJZbvNUwhn1gikJHR_O9xDc9Yfleo4oItSCiMVJ6whYG9olXPXiweMhJYx6AOz2sH0JwDwyyUedRb2nHGHlHxsyzAeH5P3pkuYuWCPMY0rs6KY/s1600/monalisa.jpg" imageanchor="1" style="float: right; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLXzitSvy84l8wo0835ymEkfhjXoyzDJZbvNUwhn1gikJHR_O9xDc9Yfleo4oItSCiMVJ6whYG9olXPXiweMhJYx6AOz2sH0JwDwyyUedRb2nHGHlHxsyzAeH5P3pkuYuWCPMY0rs6KY/s320/monalisa.jpg" /></a>
Two more cutout demos:<br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutouts.htm?monalisa>► Mona Lisa</a><br><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutouts.htm?ast>► Fractal Tree</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-68984297151227035602015-01-20T16:58:00.000-08:002015-01-21T07:30:27.491-08:00Hearthstone inspired card game test<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJeNBMjzKqxYBEH_Z54V6xp8qPCw-dyU4lZ7blT6AKykGECE0JrM7r8LXVJXwJS-bmeLnlXwb1oZNKoEvHaAO3WSRcRHdDUjriZuEBhr3RWJWrt2hzebJegy5Cx8gXz70WLKR3vG5kZ4/s1600/scr0.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/AVvXsEjqJeNBMjzKqxYBEH_Z54V6xp8qPCw-dyU4lZ7blT6AKykGECE0JrM7r8LXVJXwJS-bmeLnlXwb1oZNKoEvHaAO3WSRcRHdDUjriZuEBhr3RWJWrt2hzebJegy5Cx8gXz70WLKR3vG5kZ4/s400/scr0.png" /></a>Its a card game for 2 players, human versus the computer. Cards have 3 properties: cost, attackpoints (ap) and hitpoints (hp). A card with 4 cost can have 4 ap and 4 hp. It might have more/less ap, but then less/more hp too. General formula is cost/2=ap+hp. Cards can attack opponents cards or the opponent directly. If a card gets attacked or attacks its hp decrease by the ap of the other card. If a player is attacked directly, its hp decreases, if its value is 0, the game ends. The game is written for html canvas 2d, optionally webgl. It is based on the same rendering code as a <a href=http://pl4n3.blogspot.de/2014/01/cutoutjs-game-test.html>previous game demo</a>. A focus of this game test is playability on mobile devices, as card games are perfect for them (and there is now Hearthstone for android and ios too). <br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutouts.htm?cards>►Start game</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-80147978486670363172014-12-21T10:42:00.000-08:002014-12-21T10:48:01.238-08:00Finale 2014<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhenj5aH3yx4i4mWPAr23dnJg4pCUxV6QD1d29RrIQ-MV3A3rBslAf9aLC2LpueSbKXTyO0mp7k2MtRhb5YKg4DBCvN8bPndphV-0hXdpGBqIzNzI7emU-DQl-rWLvutTHyFcLgjxeF4hk/s1600/20140918_095727-PANO.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhenj5aH3yx4i4mWPAr23dnJg4pCUxV6QD1d29RrIQ-MV3A3rBslAf9aLC2LpueSbKXTyO0mp7k2MtRhb5YKg4DBCvN8bPndphV-0hXdpGBqIzNzI7emU-DQl-rWLvutTHyFcLgjxeF4hk/s600/20140918_095727-PANO.jpg" /></a>Long time no blogpost. Reasons were vacation, work on projects continued, this posting will summarize some. Also it will be the last text of 2014, so to everyone nice holidays and a good transition to 2015! <ul><li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gGKumRYRaS965cKq3ghjpPV72TJ7xQUmMYKUxeJOKXYT1hNzijwSZ007tBf7WLaF6Vk55Q9PTR8JF6ahpJo2jof0xHzXWJv4kIy8FQvGOUkgq0Z6cfDy4vXA3jQv4N7t6rMQdwK06as/s1600/w3dit0.jpg" imageanchor="1" style="clear: left; float: right; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gGKumRYRaS965cKq3ghjpPV72TJ7xQUmMYKUxeJOKXYT1hNzijwSZ007tBf7WLaF6Vk55Q9PTR8JF6ahpJo2jof0xHzXWJv4kIy8FQvGOUkgq0Z6cfDy4vXA3jQv4N7t6rMQdwK06as/s320/w3dit0.jpg" /></a>
<strong>Web 3D editor</strong> now has a three.js renderer instead of the previous plain canvas technique. The plain canvas is still there as overlay to display editing informations. The scripting functionality of the editor can be used to create demos. Scripts can be started via menu or url parameter. As an example the following link loads a xmas baneling with ragdoll physics and scripted animation:
<br><br><span style="font-size:2em;line-height:1em;"><a href="https://dl.dropboxusercontent.com/u/55896607/canvas/edit3d.htm?script=var%20scLoadC%3D0;%0Afunction%20scLoaded%28fn,o%29%20{%0A%20%20scLoadC%2B%2B;%0A%20%20//onsole.log%28%27scLoaded%20%27%2Bfn%29;%0A%20%20if%20%28lo.anims%29%20%0A%20%20%20%20Pd5.animStart%28lo,lo.anims[1].a%29;%0A%20%20else%20%0A%20%20%20%20scalePoints%280.05%29;%0A%20%20if%20%28scLoadC%3C2%29%20return;%0A%20%20aX%3D0.43;%0A%20%20aY%3D-2.356;%0A%20%20scale%3D150;%0A%20%20tr.set3%280,-1.3,-0.45%29;%0A%20%20drawNew%3Dtrue;%0A%20%20//bulletTest%28%29;%0A%20%20Menu.cmenu%3DmCanvasOverlay;Menu.action%28%29;%0A%20%20selMode%3DBONES;%20%20%0A%20%20menuSwitch%28{},%27Bulletize%27%29;%0A%20%20scToggleAnim%28%29;%0A}%0AmLoadMultiple.checked%3Dtrue;%0AimportS%28%27objs/beton/n3.txt%27,scLoaded%29;%0AimportS%28%27objs/bane/phys.txt%27,scLoaded%29;%0Afunction%20scToggleAnim%28%29%20{%0A%20%20menuSwitch%28matoggle,%27matoggle%27%29;%0A%20%20setTimeout%28scToggleAnim,1000%2B%0A%20%20%20Math.floor%28Math.random%28%29*%28lo.animStop%3F3000:1000%29%29%29;%0A}%0A//setTimeout%28function%28%29%20{},1000%29;">►Start</a></span><br><br>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0kPtkegOgz17dSODKhiFC1xBi1FqpOCiMuT76QSyFXx1eFOEp_shEmdmiXiWKHMwC_L7pN-ZN1fA9QU7YbGBylBieLCowHiqNyGDkBjaJtld19ErMRkEP2uTWphSv9zS4hPsE6xkuCo/s1600/schedule.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/AVvXsEiG0kPtkegOgz17dSODKhiFC1xBi1FqpOCiMuT76QSyFXx1eFOEp_shEmdmiXiWKHMwC_L7pN-ZN1fA9QU7YbGBylBieLCowHiqNyGDkBjaJtld19ErMRkEP2uTWphSv9zS4hPsE6xkuCo/s100/schedule.png" /></a>
Another project (work in progress) is to <b>display train schedules</b>, not as single routes, but as route networks. Single routes can be optimal, but sometimes, especially on routes with lots changes, there are multiple equally good routes. Choosing the right route can be easier using a network of all relevant routes, with all information combined. Problematic with this project is, that lots train companies dont provide raw data of train connections, hopefully OpenData gets more traction.<br><br>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP852JjJ57KhgcV6ohAJfMjtHpknZOz9PR9QgydaUrc-yH004JAuNDutJJe3q6IL-3fH7Va9tUrweLtXe5S4TrDTdbwJ3v8HS0BKB2xq6sSe1cFQtg8XRHD6X16iFJ3LK7eW52FuB52Lk/s1600/race_20.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP852JjJ57KhgcV6ohAJfMjtHpknZOz9PR9QgydaUrc-yH004JAuNDutJJe3q6IL-3fH7Va9tUrweLtXe5S4TrDTdbwJ3v8HS0BKB2xq6sSe1cFQtg8XRHD6X16iFJ3LK7eW52FuB52Lk/s160/race_20.gif" /></a>
Finally a canvas <b>racing game demo</b>.
<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/race/race.htm>►Start</a></span><br><br>
</ul> pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-78591961761846910592014-08-09T13:00:00.000-07:002014-08-09T13:02:41.122-07:00Tagdox - minimal tag-based document app<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K9n7UgD3gC03S2UZn6wG3rkknu1GKLF4NaEbResYesE76bAnf889liUbOR-KQFK1HEuF_l2xKZ0beMUnZTEV6lC7zqWFHE8w3oZwJeyPyInp3iyVLPhlCPoyl_s7bN_9gjMfR0bswhU/s1600/screen0.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K9n7UgD3gC03S2UZn6wG3rkknu1GKLF4NaEbResYesE76bAnf889liUbOR-KQFK1HEuF_l2xKZ0beMUnZTEV6lC7zqWFHE8w3oZwJeyPyInp3iyVLPhlCPoyl_s7bN_9gjMfR0bswhU/s400/screen0.jpg" /></a><ul><li>The app maintains a list of documents, each has a <b>title, body, tags and a timestamp</b>.<li>The documentlist can be confined via tags(pulldown) and/or free-text search.<li>The documentlist can be ordered by title or timestamp.<li>There is functionality to edit,add & delete documents.<li>At startup documentlist is loaded from <b>localStorage or file</b> (JSON format), on change documentlist is saved to localStorage and can be exported to a file.<li>The use case here is a <b>movie collection</b>. The timestamp can be used to store when a movie was watched and to choose which to watch next.<li>The app is quite minimal, it consists of 3 files: data, backgroundimage and source, which has <b>~11kB vanilla javascript</b> unminified.</ul><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/blog/blog.htm>►Start Tagdox</a></span><br>(use case: collection of 570 movies)pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-27148508909794873472014-05-23T16:55:00.000-07:002014-08-09T13:00:42.546-07:00Webpage for Hearthstone data log, graph and statistics<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjocWbrX8X675pkGPuW4mYBDr3WhkZeB7oq1zOTWsfFzpEuoYYk50USUfrwOaIjANEa8h0DgLuOKqO6fRhkSKn06dEHZXmFCn_pMU1lxCiR0DtRVr9GM81v-Drb7QuKAj35Pw5nXSbfrsA/s1600/hscomb.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/AVvXsEjocWbrX8X675pkGPuW4mYBDr3WhkZeB7oq1zOTWsfFzpEuoYYk50USUfrwOaIjANEa8h0DgLuOKqO6fRhkSKn06dEHZXmFCn_pMU1lxCiR0DtRVr9GM81v-Drb7QuKAj35Pw5nXSbfrsA/s400/hscomb.png" /></a>The page lets you record results of Hearthstone games. By clicking buttons 'win' or 'loose' an outcome of a game is logged with a timestamp. The resulting game rank is visualized as graph. Data is saved in browsers localStorage and also listed in a textarea (json format). There it can be edited, imported or exported. Finally a win-ratio statistics is available, generated by counting results of each hour of each weekday. <br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/graph.htm>►Start</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-90164853730572337172014-03-13T16:57:00.002-07:002014-03-13T17:15:57.247-07:00Wloom 16: Gravity game test<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc2sMi4FKS8K9BhJspw8sgugatiB_qkJ6lWzoU1lO0XqZkYzvGbuxYpQSB88S5I5nX_8RcAIwaZxQrJxTFT0AmwIXaal-Li0wgEjXY8dpmtH6dZ6D6azCecjr7ucBDWrNNfGUFQtXhrk/s1600/gravity0.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc2sMi4FKS8K9BhJspw8sgugatiB_qkJ6lWzoU1lO0XqZkYzvGbuxYpQSB88S5I5nX_8RcAIwaZxQrJxTFT0AmwIXaal-Li0wgEjXY8dpmtH6dZ6D6azCecjr7ucBDWrNNfGUFQtXhrk/s500/gravity0.png" /></a></div>Game mission is to evacuate a (unconcious) robot to the exit by toggling gravity up or down. Gravity and ragdoll physics is done by <a href=http://code.google.com/p/bulletjs/>bullet.js</a>. <br><br><span style="font-size:2em;line-height:1em;"><a href=http://youtu.be/p9ClcPDksjE>►Youtube</a><br><a href=https://dl.dropbox.com/u/55896607/shooter/shooter.htm?map=bullet1&deskthree=1>►Start game</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-48730315875734841352014-02-13T09:09:00.000-08:002014-02-13T09:10:25.013-08:00Overview of (sub-) projects and their relations<div style="position:relative;font-family:Arial;font-size:11px;line-height:13px;">
<canvas style="" id="canvasproj" width="530" height="470"></canvas>
<div style="position:absolute;left:100px;top:20px;background-color:#ddb;">
<b><a href="https://dl.dropboxusercontent.com/u/55896607/vecmath.js">vecmath.js</a></b><br>- vector/matrix math<br>- mostly ported from java</div>
<div style="position:absolute;left:300px;top:20px;background-color:#ddb;">
<b><a href="https://dl.dropboxusercontent.com/u/55896607/menu.js">menu.js</a></b><br>- screen proportional menus/gui<br>- desktop/mobile (mouse/touch)</div>
<div style="position:absolute;left:20px;top:100px;background-color:#ddb;">
<b><a href="http://pl4n3.blogspot.de/search/label/bullet.js">bullet.js</a></b><br>- 3D physics engine
<br>- ported from jbullet</div>
<div style="position:absolute;left:100px;top:180px;background-color:#ddb;">
<b><a href="https://dl.dropboxusercontent.com/u/55896607/canvas/pd5.js">pd5.js</a></b><br>- bone-tree 3d objects
<br>- key frame animation, io<br>- inspired by doom3 md5 structure</div>
<div style="position:absolute;left:300px;top:200px;background-color:#ddb;">
<b><a href="http://pl4n3.blogspot.de/2013/01/wepaint-web-paint-app.html">WePaint</a></b><br>- web paint app<br>- transparency, sprite animation</div>
<div style="position:absolute;left:150px;top:290px;background-color:#ddb;">
<b><a href="http://pl4n3.blogspot.de/search/label/W3dit">W3dit</a></b><br>- web 3d editor<br>- mesh,bones,animations,textures</div>
<div style="position:absolute;left:100px;top:400px;background-color:#ddb;">
<b><a href="http://pl4n3.blogspot.de/search/label/Wloom">Wloom</a></b><br>- WebGl game env/testing ground
<br>- optionally uses three.js or glge libs</div>
<div style="position:absolute;left:300px;top:400px;background-color:#ddb;">
<b><a href="http://pl4n3.blogspot.de/2014/01/cutoutjs-game-test.html">cutout.js</a></b><br>- 2D bone-tree object animation/gametest
<br>- canvas or WebGl renderer</div>
</div>
<script type="application/x-javascript">
var canvas = document.getElementById('canvasproj'),ct=canvas.getContext('2d');
function arrow(nx0,ny0,nx1,ny1,s,sdx,sf) {
var dx=nx1-nx0,dy=ny1-ny0,l=Math.sqrt(dx*dx+dy*dy);
dx/=l;dy/=l;
var r=2,x0=nx0+dx*r,y0=ny0+dy*r,
x1=nx0+dx*(l-r),y1=ny0+dy*(l-r),aw=3,aw2=aw*3;
ct.beginPath();
ct.moveTo(x0,y0);
ct.lineTo(x1,y1);
ct.stroke();
ct.beginPath();
ct.moveTo(x0,y0);
ct.lineTo(x0+dx*aw2+dy*aw,y0+dy*aw2-dx*aw);
ct.lineTo(x0+dx*aw2-dy*aw,y0+dy*aw2+dx*aw);
ct.lineTo(x0,y0);
ct.fill();
if (s) {
var a=s.split('\n');
if (!sf) sf=0.5;
for (var h=0;h<a.length;h++)
ct.fillText(a[h],nx0+dx*l*sf+sdx,ny0+dy*l*sf+h*10);
}
}
ct.fillStyle='#cccccc';ct.fillRect(0,0,canvas.width,canvas.height);
ct.fillStyle='#000';
ct.textAlign='end';
arrow(98,40,40,98,'uses',-2);
arrow(60,146,98,200,'optional use\n(ragdoll)',-4);
ct.textAlign='start';
arrow(140,64,140,178,'uses',2);
arrow(180,240,180,288,'uses',2);
arrow(350,64,250,288,'uses',4);
arrow(320,245,270,288,'integrates for\ntexture paint',8);
arrow(370,64,370,198,'uses',2);
arrow(440,64,480,398,'uses',2);
arrow(380,245,380,398,'gets content\nfrom: sprites,\ncutout definition',2);
arrow(220,334,220,398,'gets content from',2);
ct.textAlign='end';
arrow(120,240,120,398,'uses',-2);
arrow(320,64,170,398,'uses',-2,0.3);
</script>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-73236723150040675092014-01-31T19:53:00.000-08:002014-01-31T19:57:38.209-08:00cutout.js - Game Test<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdrkx9b2E-r7K1FyJ9ghdNZZ_zGxVA-gmuvkB2XOfAvdMbwBPtYacCGvuUOND74QLr3l7yVgsEGmx_MThyphenhyphenDfWVPVAhOYFCEXD-vrHlB-WcqbKEGVTnA1tRXLTG78kXyiA76z1SmOCY3v4/s1600/cutout15.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdrkx9b2E-r7K1FyJ9ghdNZZ_zGxVA-gmuvkB2XOfAvdMbwBPtYacCGvuUOND74QLr3l7yVgsEGmx_MThyphenhyphenDfWVPVAhOYFCEXD-vrHlB-WcqbKEGVTnA1tRXLTG78kXyiA76z1SmOCY3v4/s600/cutout15.png" /></a></div>The animation project of a <a href=http://pl4n3.blogspot.de/2013/09/cutoutjs-javascript-cutout-animation.html>previous blogpost</a> is now extended to a game experiment, with following features:<ul><li>Canvas or WebGl renderer via menu<li>Stereo WebAudio synth effects<li>Particle system<li>Various controls depending on system and browser: keys (wasd,cursor,ctrl), mouse, touch or gamepad</ul>Game mission is to fight the mobs. Health regenerates over time. One should only fight single ncps at once. Current quest is to finish the game in less than 264.9 seconds. :)
<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutouts.htm>►Start game</a><br><a href=https://github.com/Pl4n3/cutout.js>►Github repository</a></span>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-80453999555612153712013-12-22T11:44:00.000-08:002014-01-10T09:58:31.590-08:00WebAudio Piano App<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8p5xd83XlmMD1AAXqCZqrSAZHIOEZErwtoPDCGWCTG9d5DOOMjB3tpsUbguFpDfFJgzkWLuk8PvVaOQPNG8Kw5ZARtKXUebq5g2aRB2RrtgwURMECNNnOaqu91FrVenU8V0jagB5pcjg/s1600/piano24.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/AVvXsEj8p5xd83XlmMD1AAXqCZqrSAZHIOEZErwtoPDCGWCTG9d5DOOMjB3tpsUbguFpDfFJgzkWLuk8PvVaOQPNG8Kw5ZARtKXUebq5g2aRB2RrtgwURMECNNnOaqu91FrVenU8V0jagB5pcjg/s500/piano24.png" /></a></div> Doing some WebAudio experiments. <a href="http://flippinawesome.org/2013/10/28/audio-synthesis-in-javascript/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer947c2&utm_medium=twitter">This tutorial</a> helped to start playing music. From there the piano app was implemented, which displays music notes on piano keys. To get music data, a midi-file parser was written, with the help of <a href="http://faydoc.tripod.com/formats/mid.htm">this format description</a> and the <a href="https://github.com/gasman/jasmid">jasmid library</a>. There are 4 different view modes, which are shown on the picture. Replay speed, volume and a replay range can be modified. To start the app, click one of the following links. <br><br>
<span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/piano2.htm?reed>►Solaris theme, Bach</a><br><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/piano2.htm?winter19>►Deception, Winterreise, Schubert</a><br><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/piano2.htm?stillenacht>►Silent night</a>
</span><br><br>With the carol, since probably there wont be more blogposts in this year, happy holidays and a good transition to 2014 for everyone! :)
<br><br><b>Update 10.1.2014:</b> Single tracks can be muted/hidden and screenshot menuitem added.pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-6116017239091889222013-11-06T08:24:00.000-08:002014-02-13T07:28:53.298-08:00Wloom 15: bullet.js (and Web 3d editor update)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh757dCK8JZGwOp8sMJgxaPhVGCvPnJ_GWJXESEJ16DLRiUQsOsoALmuMBA7TZx8FL2qF5-nF4PmKiL6HqK-FaoqTQDUWSBlZ9EaCnnsBmitYBm1QKDG03bnX9zh5QWp59mHamQ448mhcc/s1600/bullet_8.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh757dCK8JZGwOp8sMJgxaPhVGCvPnJ_GWJXESEJ16DLRiUQsOsoALmuMBA7TZx8FL2qF5-nF4PmKiL6HqK-FaoqTQDUWSBlZ9EaCnnsBmitYBm1QKDG03bnX9zh5QWp59mHamQ448mhcc/s1600/bullet_8.gif" /></a></div>WebGl game environment 'Wloom' can optionally utilize <a href=http://code.google.com/p/bulletjs/>bullet.js</a> physics libary. This library is now also integrated into the Web 3d editor 'W3dit'. Some thoughts on this version:<ul><li>A first test is a fight game demo (subtitle: High art of low punches).<li>The physics library simulates a physical virtual reality. Another virtual reality layer can be added by using Oculus Rift renderer and device. -> VRΒ²<li>With oculus, canvas hud overlay isnt sufficient anymore, thus a 3d hud with canvas texture is added.<li>In the web editor, press menu 'A.toggle' to see animation and physics.</ul><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropbox.com/u/55896607/shooter/shooter.htm?map=bullet0&deskthree=1>►Start game demo</a><br>
<a href=https://dl.dropboxusercontent.com/u/55896607/canvas/edit3d.htm?bullettest>►Start web editor</a>
</span><br><br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ECXewX6xe4NYOr-sAm4E-fQRrxPj1cd1GExit6K3K8MKlp7liuZ6Lhn8-w4EZag2Luj0WSb4N-ogkp-dfE1BkXmXL0E1fDV53TtgemeUxP4785gT67RzBnki0QfYmDXp40ttZACG19Q/s1600/bullet2.jpg" imageanchor="1" style="float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ECXewX6xe4NYOr-sAm4E-fQRrxPj1cd1GExit6K3K8MKlp7liuZ6Lhn8-w4EZag2Luj0WSb4N-ogkp-dfE1BkXmXL0E1fDV53TtgemeUxP4785gT67RzBnki0QfYmDXp40ttZACG19Q/s240/bullet2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeeKvEtLALIEGmaYC20E2owOsbVbN18CKP9AblFDPfMUxcdJEABsQr2CI7qRrBGTnehSs1mxv2ryMdbcbpePwr71aUuP2v_FUCOydYwNsBhTbztxah-yokJGzT6V1vHHIaL0vx80i_dA/s1600/bullet1.png" imageanchor="1" style="float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeeKvEtLALIEGmaYC20E2owOsbVbN18CKP9AblFDPfMUxcdJEABsQr2CI7qRrBGTnehSs1mxv2ryMdbcbpePwr71aUuP2v_FUCOydYwNsBhTbztxah-yokJGzT6V1vHHIaL0vx80i_dA/s150/bullet1.png" /></a>
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-80596943708008034332013-10-15T18:18:00.000-07:002013-10-16T05:53:37.312-07:00Rantzau Genealogy
<div style="position:relative;font-family:Arial;font-size:12;float:left;margin-right:10px;">
<canvas id="canvas" width=520 height=570></canvas>
<div style="position:absolute;left:270px;top:212px;background-color:#ddb;">
<b>Frantz von Rantzau</b> 1606-1677<br></div>
<div style="position:absolute;left:270px;top:192px;background-color:#ddb;">
<b>Hans Danielsen von Rantzau</b> 1567-1649<br></div>
<div style="position:absolute;left:270px;top:173px;background-color:#ddb;">
<b>Daniel Rantzau</b> 1534-1589<br></div>
<div style="position:absolute;left:270px;top:153px;background-color:#ddb;">
<b>Henning Rantzau</b> 1495-1537<br></div>
<div style="position:absolute;left:270px;top:133px;background-color:#ddb;">
<b>Schack Rantzau</b> 1445-1510<br></div>
<div style="position:absolute;left:270px;top:231px;background-color:#ddb;">
<b>Christian Rantzau</b> 1649-1704<br></div>
<div style="position:absolute;left:270px;top:250px;background-color:#ddb;">
<b>Hans zu Rantzau</b> 1693-1769<br>removes serfdom<br></div>
<div style="position:absolute;left:270px;top:283px;background-color:#ddb;">
<b>Schack Carl Rantzau</b><br>Movie "A royal affair"<br>
<center>
<a href=http://en.wikipedia.org/wiki/A_Royal_Affair>
<img width=160 src=http://upload.wikimedia.org/wikipedia/en/thumb/5/58/A_Royal_Affair.jpg/220px-A_Royal_Affair.jpg />
</a>
</center>
</div>
<div style="position:absolute;left:270px;top:114px;background-color:#ddb;">
<b>Henning Rantzau</b> 1395-1470<br></div>
<div style="position:absolute;left:270px;top:95px;background-color:#ddb;">
<b>Henneke Rantzau</b> 1375-1397<br></div>
<div style="position:absolute;left:270px;top:75px;background-color:#ddb;">
<b>Henneke Rantzau</b> 1335-1390<br></div>
<div style="position:absolute;left:270px;top:56px;background-color:#ddb;">
<b>Otto IV Rantzau</b> -1398<br></div>
<div style="position:absolute;left:270px;top:36px;background-color:#ddb;">
<b>Otto III Rantzau</b> 1310-1362<br></div>
<div style="position:absolute;left:160px;top:10px;background-color:#ddb;">
<b>Otto II Rantzau</b><br></div>
<div style="position:absolute;left:10px;top:43px;background-color:#ddb;">
<b>Cai I Rantzau</b> -1340<br></div>
<div style="position:absolute;left:10px;top:75px;background-color:#ddb;">
<b>Cai II Rantzau</b> -1397<br></div>
<div style="position:absolute;left:10px;top:95px;background-color:#ddb;">
<b>Breide Rantzau</b> -1440<br></div>
<div style="position:absolute;left:10px;top:120px;background-color:#ddb;">
<b>Heinrich Rantzau</b> 1437-1497<br></div>
<div style="position:absolute;left:10px;top:147px;background-color:#ddb;">
<b>Johann Rantzau</b> 1492-1565<br></div>
<div style="position:absolute;left:10px;top:173px;background-color:#ddb;">
<b>Heinrich Rantzau</b> 1526-1599<br></div>
<div style="position:absolute;left:10px;top:192px;background-color:#ddb;">
<b>Gerhard zu Rantzau</b> 1558-1627<br></div>
<div style="position:absolute;left:10px;top:212px;background-color:#ddb;">
<b>Christian zu Rantzau</b> 1613-1663<br></div>
<div style="position:absolute;left:10px;top:231px;background-color:#ddb;">
<b>Detlef zu Rantzau</b> 1644-1697<br></div>
<div style="position:absolute;left:10px;top:270px;background-color:#ddb;">
<b>Wilhelm Adolf zu Rantzau</b> 1688-1734<br>builds church<br>
<center>
<a href=http://commons.wikimedia.org/wiki/File:HeiligenGeistKirche.JPG>
<image src=http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/HeiligenGeistKirche.JPG/180px-HeiligenGeistKirche.JPG /><br>
<span style="font-size:0.8em;">Image by PodracerHH</span></a></center>
</div>
</div><script type="application/x-javascript">
var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');
ctx.fillStyle='#cccccc';ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(270,197);ctx.lineTo(270,217);
ctx.moveTo(270,158);ctx.lineTo(270,178);
ctx.moveTo(270,178);ctx.lineTo(270,197);
ctx.moveTo(270,138);ctx.lineTo(270,158);
ctx.moveTo(270,217);ctx.lineTo(270,236);
ctx.moveTo(270,236);ctx.lineTo(270,255);
ctx.moveTo(270,255);ctx.lineTo(270,288);
ctx.moveTo(270,61);ctx.lineTo(270,80);
ctx.moveTo(270,41);ctx.lineTo(270,61);
ctx.moveTo(160,15);ctx.lineTo(270,41);
ctx.moveTo(160,15);ctx.lineTo(10,48);
ctx.moveTo(10,48);ctx.lineTo(10,80);
ctx.moveTo(10,80);ctx.lineTo(10,100);
ctx.moveTo(10,100);ctx.lineTo(10,125);
ctx.moveTo(10,125);ctx.lineTo(10,152);
ctx.moveTo(10,152);ctx.lineTo(10,178);
ctx.moveTo(10,178);ctx.lineTo(10,197);
ctx.moveTo(10,197);ctx.lineTo(10,217);
ctx.moveTo(10,217);ctx.lineTo(10,236);
ctx.moveTo(10,236);ctx.lineTo(10,275);
ctx.moveTo(270,119);ctx.lineTo(270,138);
ctx.moveTo(270,100);ctx.lineTo(270,119);
ctx.moveTo(270,80);ctx.lineTo(270,100);
ctx.closePath();ctx.stroke();
</script>
Recently I watched the very nice movie "A royal affair", which has a character called "Rantzau". A local church was also build by a "Rantzau" and I wondered, how they are connected. Wikipedia, <a href=http://www.rantzau-online.de/stammbaum/stammbaum/stammbaumuebersicht.pdf>a PDF</a>, <a href=http://books.google.de/books?id=lm0yAAAAYAAJ&pg=RA1-PA21&lpg=RA1-PA21&dq=graf+schack+carl+rantzau&source=bl&ots=RaNeCphCHS&sig=tm0lbFSQGahBJ7lYwXbHL-GOKXA&hl=de&sa=X&ei=iV9aUtbENsrQ0QXzoYGwBA&redir_esc=y#v=onepage&q=graf%20schack%20carl%20rantzau&f=false>google books</a> and the website <a href=http://skeel.info/getperson.php?personID=I18814&tree=ks>seel.info</a> finally reconstructed the links between the two. The internet stays awesome. :)
pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-32987447233043542002013-10-04T08:36:00.000-07:002013-10-08T15:26:21.278-07:00Wloom 14: WebGl Run<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighsos3yJubJzzqICCQCTa9Yp52hQXTAcqmwwk6YFa6TP-9MSkWuC_JKQNAYXqmFatND6sQuV_Y18jLwe8mMCz_1KlqZ6Az3NVz6Uaq8x_HMA1AC8r6XP2S3qC-9IIB-WoybospPEDSYs/s1600/wloom14.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/AVvXsEighsos3yJubJzzqICCQCTa9Yp52hQXTAcqmwwk6YFa6TP-9MSkWuC_JKQNAYXqmFatND6sQuV_Y18jLwe8mMCz_1KlqZ6Az3NVz6Uaq8x_HMA1AC8r6XP2S3qC-9IIB-WoybospPEDSYs/s500/wloom14.jpg" /></a>This WebGl game demo is inspired by Temple Run and similar games. The protagonist runs along beziercurves, must collect gems and avoid foes. The demo ought to run smooth on mobile devices using simple WebGl rendering and on desktop with more graphics effects via three.js or glge. A various number of input controls is supported (if device and browser has it): keyboard, mouse, touch, tilt and gamepad.<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropbox.com/u/55896607/shooter/shooter.htm?map=run1&deskthree=1>►Start</a></span><br><br>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7PP4u7ksBT0HKEiq9pfUzTjJMikZNWG8cUz52Bl_DGT3-nyfXBEeK5H1POvyt66aOFT1MxW6SAfDDb-svdS9pJ-M5mVcu1YRyUI-0vtN_KzIi1j9AGeZx9naGlOAkWoVK9JpOAjz-S8/s1600/wloom151.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7PP4u7ksBT0HKEiq9pfUzTjJMikZNWG8cUz52Bl_DGT3-nyfXBEeK5H1POvyt66aOFT1MxW6SAfDDb-svdS9pJ-M5mVcu1YRyUI-0vtN_KzIi1j9AGeZx9naGlOAkWoVK9JpOAjz-S8/s200/wloom151.jpg" /></a>
<b>Update 9.10.2013: </b> Got an oculus rift device and added a Three.js render mode for it. If you have the device and <a href=https://github.com/benvanik/vr.js>a browser plugin</a> installed, virtual reality is there. pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0tag:blogger.com,1999:blog-3619023968476701759.post-66749391246722543722013-09-11T09:04:00.000-07:002013-09-18T04:29:08.224-07:00cutout.js - Javascript Cutout Animation<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgz_HuWKzHC0S77AXZXVLV2X-CyTKZEYRBRBBdn08W2BYdhTJZ7yF3gv3xrdNMEJtf9Y2knUP0qBLzB86fQyA2cLM1BB_uUAljViSQKdCe8Fd66E1vS1U0ng60N9PLJ_ez444gaS2O6nk/s1600/cutout2.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgz_HuWKzHC0S77AXZXVLV2X-CyTKZEYRBRBBdn08W2BYdhTJZ7yF3gv3xrdNMEJtf9Y2knUP0qBLzB86fQyA2cLM1BB_uUAljViSQKdCe8Fd66E1vS1U0ng60N9PLJ_ez444gaS2O6nk/s500/cutout2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnR28hqu8JNB7fMBfvImPEilgLuS38WXIXMcw8xBN6E2V_87rsVv4Qj0xnPlnj0UZobtCxt6Nzi__DlL61K85qcnXHRBCGEDLpuyxp1PiNA68eLaxQ0655IoOigxg6g07rk1-DcvxvmxE/s1600/hand.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/AVvXsEjnR28hqu8JNB7fMBfvImPEilgLuS38WXIXMcw8xBN6E2V_87rsVv4Qj0xnPlnj0UZobtCxt6Nzi__DlL61K85qcnXHRBCGEDLpuyxp1PiNA68eLaxQ0655IoOigxg6g07rk1-DcvxvmxE/s1600/hand.png" /></a>This project provides javascript cutout animation, inspirated by Monty Python and others. A first case study is a swinging Mona Lisa. Click the links to start the animation or to browse the project at github.
<br><br><span style="font-size:2em;line-height:1em;"><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutout.htm>►Start<span style="font-size:0.5em;"> canvas 2d</span></a><br><a href=https://dl.dropboxusercontent.com/u/55896607/canvas/cutoutw.htm>►Start<span style="font-size:0.5em;"> webgl</span></a><br><a href=https://github.com/Pl4n3/cutout.js>►Github<span style="font-size:0.5em;"> repository</span></a></span>
<br><br><br>Some notes on how the project was developed.<ul><li>At first there was the canvas 2d version. For browsers, that dont have hardware accelerated sprites, and to compare performances, a webgl version was implemented.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljUigBpbhbrdZf3zCKWSwC5xFErUyrRnI-zcngC1WEdqxrRbwdMvJzH0dO3tfKuZfirYN3WskM26KQT_z1yKN3jI4T9PHCaOFIbA_aWK2kCbmwMdwYCqsMOKrSF6z3FYRKFZCQXcbYYk/s1600/canv0.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 2em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljUigBpbhbrdZf3zCKWSwC5xFErUyrRnI-zcngC1WEdqxrRbwdMvJzH0dO3tfKuZfirYN3WskM26KQT_z1yKN3jI4T9PHCaOFIbA_aWK2kCbmwMdwYCqsMOKrSF6z3FYRKFZCQXcbYYk/s200/canv0.jpg" /></a><li>Another canvas demo, which tests performance of transparent transformed sprites and was made before the cutout project, is <a href=https://dl.dropboxusercontent.com/u/55896607/canvas/sprites1.htm>here</a>.<li>The cutout segments are drawn using matrix operations. The canvas 2d api originally didnt had a method to read a current matrix. This is added currently (context.currentTransform). Until it is in every browser, own matrix manipulation using vecmath.js is done.<li>Cutout segments are taken from one <a href="https://dl.dropboxusercontent.com/u/55896607/canvas/paint/monalisa.png">partly transparent image</a>. It was drawn with the <a href="https://dl.dropboxusercontent.com/u/55896607/canvas/paint.htm">web paint app</a> and following steps:<li>The canvas-width of the original Mona Lisa image was doubled (<b>Menu/Edit/Dimension</b>), so that the original image is on the left, transparency is on the right side.<li>Cutout segments were cut from the original image (<b>Menu/Tools/Rect</b>) and copied to the right side. Then transparency around them was drawn with <b>Menu/Tools/Eraser</b>.<li>Finally, when all segments were done, the original image needed to be changed so that it constitutes the background. To dont have to draw new background, where Da Vinci didnt bothered, there is <b>Menu/Tools/CopyBrush</b>. With this tool the original background areas were multiplied, so that they covered the whole image.</ul>pl4n3http://www.blogger.com/profile/07521483139208164051noreply@blogger.com0