html5 – Blog ictbram https://ictbram.com interactive pixels pusher Thu, 27 Aug 2020 12:00:56 +0000 en-US hourly 1 https://wordpress.org/?v=5.3.4 https://ictbram.com/wp-content/uploads/2016/01/cropped-brj-32x32.png html5 – Blog ictbram https://ictbram.com 32 32 Musical notes helper app with godot https://ictbram.com/2018/02/musical-notes-helper-app-with-godot/ Sun, 04 Feb 2018 12:41:11 +0000 https://ictbram.com/?p=257

For a few years I’ve been learning how to play or compose music, just a bit on the side, a bit of theory, a bit of piano lessons.
In the summer of 2017 I’ve started the music theory for electronic music course.
I really enjoyed taking the course, made by a good instructor. Lots of mechanics and concepts in music am I beginning to get thanks to his lessons.
Creating music, composing or playing requires a lot of logic and reasoning.
To assist me with this, I wanted an helper app so I have created one.

The first two big chapters in the music theory for electronic music course were all about major and minor scales, the chords, inversions. The app was designed during these classes.
In the third and final chapter however, he starts with more special things like modes, pentatonic scales, chromatic mediants, exotic scales.
For these kind of, interesting, things my application was not yet usuable, so I put in an extra feature, the possibility to put in a “custom” scale, so you can also configure, most of, these kinds of things to assist you with.

In 2017 I’ve also started, at a really slow pace, to learn the marvelous, free and open source Godot game engine and decided to combine both domains into a project, which resulted in this musical notes helper app.

godotengine logo

The app is exported as a windows, linux, mac, android and html5 app. Sadly, the html5 version does not work in safari, so the app is currently not usable on apple devices (iPhones and iPads)
It was created with Godot 2.1. Version 3.0 of the Godot engine is just released which includes webassembly support, may have better exporting for these devices, but requires some code modifications and all. 3.1 is around the corner. It may be possible I create a new version with the new engine if the html5 export works on those devices.
I’ve also not yet succeeded to publish to the microsoft store as I did with my previous game, 3d-pong. I’m going to try to publish this project there as well.

The html5 export does work on the Xbox One’s browser, Edge. For easier access I’ve put a link to the html5 export on https://ictbram.com/music. My plan is to link all things I’m going to publish around music over there.

]]>
3d-pong dot com https://ictbram.com/2016/10/3d-pong-dot-com/ Sat, 01 Oct 2016 08:52:53 +0000 https://ictbram.com/?p=186 For me, 2015 was a transition year from flash technology to html5. Adobe Flash is a great tool, but I explored other possibilities as a publishing plaform. WebGL support in the major browsers, good sound playback, gamepad support, the possibility of saving settings in localstorage made me choose javascript.

I don’t really like to program javascript, actionscript 3 is way better I think, but javascript is a language I know a bit and can use to create things for the web. I have some professional experience as a webdeveloper using jQuery.

About 15 years ago the 3d pong game, I believe published in Macromedia Shockwave back then, was a game I thought of something really cool. That version of the game is still online in the Adobe Flash format, http://www.ponggame.org/3dpong.php

The idea of the game is great, but I think there is a huge missing feature, you need to be able to play this game split screen, so I decided to create my own version of that game with split screen included.

Unreal Engine was a tool I was considering to do that in, great platform and free until you make lots of money with your game, html5 publishing available. I made some first steps into unreal, but in the first months of 2016 I was working as a webdeveloper and was focussing more on web technology then learning a game engine.

I stumbled upon babylonjs and the crosswalk project.
Babylonjs gives a rather good performance with webgl, it had enough features to create that kinda game and it supported all of the gamepads I tested it with, in various webbrowers.
The engine is originated from a team working for Microsoft. Gamepads connected with Microsoft Edge work, that browser can be accessed on Xbox One machines, thus enabling Xbox One as a publishing platform for me, very nice.
Gamepads connected with other major browsers (Google Chrome, Mozilla firefox) on pc or android also work with the engine.
The Crosswalk project from intel can build a cordova app for android with the chromium webview, which supports WebGL and gamepads.
At first, I compiled it myself, but after a while, because of constant configuration changes needed, I used the intel xdk editor to build the app.
This works good for mobile, unfortunately, xdk does not provide the necessary configuration options to publish for android tv. Very disapointing because the television is a medium the game is actually intended for.
For this reason I also provide the apk installer files, that can be used to sideload the game on various android tv boxes.

Being a javascript game, it is rather demanding on hardware. You can play it on recent computers, android tv boxes like the Nvidia Shield, in the Xbox One browser, but the performance can be not good enough on older hardware.
It is something you’ll need to test yourself. The game is online at https://3d-pong.com https://ictbram.com/3d-pong and in the google playstore

For promoting the game I made a video which demonstrates mainly gameplay and shows the key feature of playing split screen.

I hope the game will be much played and is entertaining for lots of people and their friends. There is some documentation provided on https://3d-pong.com/about/ in English, but the menu’s in the game are provided in multiple world languages:
English, Chinese (traditional), German, French, Spanish and Russian.

** Update 16/10/2015

The android version is now also installable on android tv boxes. I’ve managed to open the apk file made by intel and repackage it with Apktool.  In the manifest xml file I’ve added a few use-feature lines:
<uses-feature android:name=”android.hardware.gamepad” android:required=”false”/>
<uses-feature android:name=”android.software.leanback” android:required=”false” />
<uses-feature android:name=”android.hardware.touchscreen” android:required=”false” />

and an extra activity :
<activity android:name=”com.ictbram.threeDeePong.MainActivity” android:label=”@string/app_name” android:configChanges=”keyboard|keyboardHidden|navigation” android:theme=”@android:style/Theme.Black.NoTitleBar”> <intent-filter> <action android:name=”android.intent.action.MAIN” /> <category android:name=”android.intent.category.LEANBACK_LAUNCHER” /> </intent-filter> </activity>

I also found and used the APK2TV tool to add in a 320×180 banner displayed on the android tv home screen.

After adding the banner, once more a repackage with Apktool and a zipalign on that apk file before it was accepted again in the android play store. That arm apk install file is also updated on the about website, the x86 not yet because I don’t have a device at hand to test it on.

From now on, 3d-pong is also published in the Microsoft Store for windows 10 devices.

]]>
Zentangle https://ictbram.com/2016/03/zentangle/ Fri, 04 Mar 2016 15:58:42 +0000 https://ictbram.com/?p=147 My mom has discovered zentangle a while ago. That is drawing repetitive patterns on little cards and making compositions. It’s fairly new, but a lot people enjoy doing this apparently. Lots of wonderful work is being made and it has a meditatively effect while doing this. It ‘s something my mom loves to do these days. With some help from my father to set up a wordpress system, she started her own blog, tangledreams.be, where she writes about zentangle.
One time she asked me, my brother and father to create a little zentangle drawing for her, with help from a book with lots of tangles (patterns) to choose from and step by step instructions to draw that specific tangle. I enjoyed the drawing tangles experience and understand the effect, that it is meditatively.

Normally, drawing zentangles, is done on little pieces of paper, but since I am a digital guy, who likes animation and has a wacom drawing tablet at hand, I tried a little experiment with drawing tangles on that and make an animation with it in Flash.
I have chosen 3 really simple patterns, made an easy composition on a frame and did a slightly different redraw on the next frame.
There are just a few frames and I put some code on it, to move frames on mouse move after click or touch move. The swf output from flash was converted to javascript with Google Swiffy so it can be used on mobile devices. A bit of animation is seen while swiping the drawing.
The result is on ictbram.be/zentangle

zenTangle

It’s just a simple experiment I did at the end of a few days, one frame a day. While doing this, I felt the good effect for clearing your mind again.
Zentangle is something you can do, to meditate and do something artistic as well I’ll remember.

** Update 03/04/2016

From now on I’m going to post my zentangle animation experiments at https://ictbram.com/ZentangleAni. I’ve tried creating gif files, also javascript and WebGL, that gives much better results on most devices.

zentanglePatroon4_01

]]>
Css3 banner https://ictbram.com/2014/12/css3-banner/ Sun, 07 Dec 2014 17:59:51 +0000 https://ictbram.com/?p=96 A few weeks ago I tried to convert a banner I’ve made in flash to css3.

The flash banner is situated here on the front page : http://www.qtrexshop.eu/

Swfobject is used to only show it when flash is available. When not, an image is shown. I like it that way. There is also an html5 slideshow on the page that works well on mobile. So on mobile, there is not to much animation going on, just the slideshow, the flash is not shown and the 2 static images instead are scaled with css.

I’ve been reading a bit about css3 animations, that there is a performance benefit over javascript, that it uses the gpu and I thought of giving it a try.

In the past I’ve made pure javascript banners for testing and the performance on mobile was to bad.

The result and workflow in css3 are nice. An image, a bit of html, and a few lines of special css for animating.

The result is here: https://ictbram.com/css3banner/

Modernizr is used to detect if cssanimations are available.

For restarting and keeping the animations synchronised I used jQuery that removes and adds the animation css again.

$(‘#kamionneke’).removeClass(‘kamionnekeAni’).animate({‘nothing’:null}, 1, function () {$(this).addClass(‘kamionnekeAni’);});

In a test environment I saw the banner was not functioning really usable on that page. The html5 slideshow even started to stutter on chrome / desktop, the rotation animation did not work on a test mobile phone, performance was not that good, maybe a bit better then javascript, but not outstanding.

So the flash banner will just remain, but I like the workflow and new possibility for bringing animation to the web. So I’m posting this as a reference for maybe a future thing.

 

]]>
Flash bugs on mobile devices https://ictbram.com/2014/10/flash-bugs-on-mobile-devices/ Sun, 19 Oct 2014 12:38:53 +0000 https://ictbram.com/?p=88 Hahaha, thanks to google swiffy I do can produce flashbugs on your mobile devices browserscreens 😀

http://ictbram.be/bugs

]]>
Flash to html5 https://ictbram.com/2014/10/flash-to-html5/ Thu, 16 Oct 2014 16:29:29 +0000 https://ictbram.com/?p=84 Today I published a little swf animation that can be seen in the browsers of iphones and ipads 😀
It’s nothing fancy, just a test:
http://qtrexramendeuren.blogspot.be/2014/10/ramen-bij-qtrex.html
With the google swiffy service, this is really easy. Just upload the swf here: https://www.google.com/doubleclick/studio/swiffy/ and they return an html5 canvas.
I love it. It’s possible to include some actionscript and have movieclips inside movieclips.
Flash is a great tool for creating interactive animation and this makes it publishable inside browsers without the plugin. Alright.
There are a some limitations, currently there is a maximum filesize of 1 MB and not all actionscript works.
But still, swiffy is pretty good, my swf was compiled with assets inside a swc and the tweenlite libray used from inside a swc worked in another test. Great stuff.

]]>
Note application https://ictbram.com/2014/08/note-application/ Sun, 31 Aug 2014 11:53:51 +0000 https://ictbram.com/?p=71 My new application: a white screen 😀

screenApp

This simple application for taking notes is made in html, javascript and css.
The app is just a big textfield with a few helpful features for editing and saving text. That’s all.
Because it’s made in html5, it works on windows / osx / linux / android / firefox os / ios / …
You don’t need to install anything, you do not need an account, you just need a webbrowser to use it.
You can rightclick on it to access the menu or press the square on the bottom right of the page.

I do most of my work on a windows machine and used to open notepad a lot for taking a quick note or for copy pasting text in it, with the purpose of losing the lay-out code in the copied text.
Notepad is just to limited.
No tabbing over multiple lines, only one ctrl-z, no duplicate line. Since I can do a bit of webdelopment I thought of creating a simple webpage with just a textfield and add a few things like those.
There are numerous webapplications available for editing text, but those often require, having an account on “their cloud”. This application does not require an account. It does not use server-side scripts for saving documents. You can download the content to your hard disk or use your webbrowser’s localstorage. Download isn’t even the right term, because everything is client-side with javascript. It stays on your device. In your own cloud with other words.

If you want to take a note on whatever machine you are on, if it has a browser that supports html5, the only thing you need to remember is the url ictbram.be/note

]]>