archive-com.com » COM » C » CRAFTYMIND.COM

Total: 161

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Javascript | Craftymind | Page 2
    is unable to render the Jedi custom font I didn t have time to investigate whether the super slow PC performance in Flash is my fault or Adobe s but I expect that will be uncovered soon enough As for the general differences between HTML and Flash in the text test this is exactly what I was expecting HTML was built for text rendering and this is further proof that browsers do this best GUIMark Mobile The Vector and Bitmap tests have been ported into miniature forms to test on mobile devices with a minimum resolution of 320 480 This is the area I imagine will see a lot of updates over the next 6 months I ve ordered the results by the release date of each phone tested HTML5 Vector HTML5 Bitmap Flash Vector Flash Bitmap Palm Pre c o Kevin O Shea 21 46 32 89 iPhone 3GS 10 79 12 86 Motorola Droid 8 95 12 59 Nokia N900 Flash 9 9 51 9 65 16 69 19 78 Nexus One 15 86 18 83 HTC HD2 c o Matt Emory 10 43 17 59 29 91 37 62 Two phones running the Flash player isn t conclusive evidence about Flash s performance in general in the mobile space but it does cast immediate doubts on claims that Flash is slow on ARM based smart phones Meanwhile if you want the best performance in HTML5 based web content Palm Pre and Nexus One are sitting at the top of the pile If you have results you d like to see added to the chart you can email results to mech at craftymind dot com What about video comparison I had really hoped to add a video test to this benchmark but I quickly found out there s no reliable way to record rendering performance for video objects As far as I can tell HTML5 video doesn t provide an api to catch frame dropping events or a way to determine the playback fps Blindly running a Timer object on the main thread didn t seem to help either At that point I didn t even bother seeing what hurdles Flash had to testing playback Parsing the Results I imagine half of the people reading this page will have one of two thoughts at this point Who cares if HTML5 is slower I just want Flash to die and HTML5 is still brand new it s going to get a lot faster While I m not interested in addressing the first point developers should have context around the second point There is a fundamental difference between the rendering models used in HTML5 Canvas and Flash which heavily influence the performance divide The difference is Canvas uses an immediate mode renderer while Flash uses a retained mode renderer When you write a line of javascript that draws a vector or bitmap to a Canvas the browser will immediately render that change before moving on to the next line of javascript Since the browser has to block that line of javascript while rendering it means the environment is most efficient when running on a single thread Text rendering on the other hand occurs at the end of the event loop behaving more like Flash In contrast Flash commits all renderable changes to an internal store and after the main event loop finishes processing user code it hands out rendering tasks to all available cores As a result Flash scales with both the speed of your processor cores and the number of cores available Here s an illustration to better understand Theoretically you might achieve twice the performance in Flash on a dual core system but in practice there is overhead that you need to take into account like z ordering bounds checking and re compositing and dividing tasks between cores is never perfect All of this might not seem like a big deal to HTML5 developers but the truth is the next 10 years are going to be dominated by increases to cpu core count not single threaded execution speed You can already see the results of this on a quad core i7 2 67 GHz processor Windows 7 Firefox 3 6 3 HTML5 Bitmap Game 6 07 fps Flash 10 Bitmap Game 30 1 fps HTML5 Canvas performance saw virtually no increase jumping to 4 cores while Flash performance nearly doubled Without a major shift in execution processing Javascript based animations and interactions are going to remain stagnate over the coming years Unfortunately I don t see that change coming All the talks of multithreading coming from browser vendors right now is between the browser interface and the html view but not the HTML rendering model HTML5 video is largely exempt from this problem however While the video api exposes hooks to the main thread for playback control all rendering and sound is processed under the hood on secondary threads As a result media performance increases with GPU and CPU cores TL DR There is no doubt that HTML5 adoption will grow significantly in the next 2 years and that more and more content will be targeted to SVG and Canvas implementations But developers need to be cautious with adopting one technology or another wholesale HTML5 may not be fast but it is proficient at a good amount of tasks If you need static or limited interactive content on your website HTML5 will soon be your best option If you need complex interactive content you re probably better targeting Flash As for me you ll find me abusing the hell out of both technologies and posting the results to this blog In the meantime if you want the best HTML5 performance on Windows you should be using Opera right now On the Mac side it s a tossup depending on the type of content you re interacting with If you re looking for good Flash performance on Windows any browser will do whereas on the Mac side Chrome is

    Original URL path: http://www.craftymind.com/category/javascript/page/2/ (2016-04-27)
    Open archived version from archive


  • Sean Christmann | Craftymind | Page 2
    Apple nailed this one as well provide simple notifications that updates are available for certain apps and then handle the process of installing that update Application upgrades Publishers should be able to set options for users to get discounts on major upgrades if they own a previous version Users should be able to enter serial numbers for existing applications to prove ownership of previous copies Cloud Storage Apps can use up to 50mb of cloud storage per user paid apps can choose to use a percentage of proceeds to pay for unlimited space for their users Developer Tools Developers need strong guidance on how to package their apps and test them before going live They should be able to download sample receipts for their app and test the installation process through the store itself before going live Freedom of Language There should be no restriction on languages or technologies think java that are allowable in the store Dependencies lists can be built over time into the store to help facilitate getting users the correct packages for certain apps to run I m sure there s a few other things I haven t thought of yet what would you add Cocoa Launching Space Gremlin to the Mac App store February 7 2011 Sean Christmann 2 Comments Lately I ve been on a kick instead of wishing for software to work the way I want I m just gonna build it the way I want instead Today one of those ideas has come to fruition and I m happy to announce it s launch in the new Mac App Store Space Gremlin is an app I wrote over the course of Christmas to visualize disk usage on a hard drive to help find and delete gremlins taking up too much space It features a top down view of a disks folder structure and the relational sizes between other objects It s easy to drill in to folders or slice up the view to focus on important areas While there are other apps out there on the Mac platform that address this concept I ve never found those other visualizations very usable or readable I m hoping other people out there find Space Gremlin as usable as I do so I ve added it to the new Mac App Store to handle the distribution end Since this is the launch and I m still new to the whole Mac App ecosystem I m setting a launch price of only 3 99 but it will probably settle at a higher price soon after I ve also decided to go exclusive to the Mac App Store to avoid setting up my own purchasing and validation system Give it a try and let me know what you think Big thanks to all the fellow developers and designers at EffectiveUI who helped me test this app If you re interested there is also a free demo available on the website http www spacegremlinapp com apps mac osx

    Original URL path: http://www.craftymind.com/author/admin/page/2/ (2016-04-27)
    Open archived version from archive

  • Sean Christmann | Craftymind | Page 11
    full text Again there are 2 approaches to pattern matching strings in AS3 RegExp and String indexOf The idea is to apply pattern matching on the raw string representation of the xml to create a new xml string containing only the nodes matched The new string is then cast back into an XMLList to be placed in the datagrid RexExp matching var pattern RegExp new RegExp searchTerm ig var result Array rawXMLString match pattern filteredXMLList new XMLList result join Filter Time 31000 14000 ms 31 14 seconds IndexOf matching private function searchStringFor source String term String String var lowersource String source toLowerCase var lowerterm String term toLowerCase var i Number 0 var out String var pos Number 0 while i 1 pos lowersource indexOf lowerterm i if pos 1 out source substring source lastIndexOf pos source indexOf pos 1 i pos term length else i pos return out filteredXMLList new XMLList searchStringFor rawXMLString searchTerm Filter Time 200 50 ms While the RegExp and indexOf are performing the same match RegExp clearly has a long way to go before being viable in AS3 Even using simply pattern matches with String search during Method 1 above was 3 times slower then an indexOf during iteration IndexOf in Method 2 on the other hand has gotten us down to a 200 50 ms filter time 50 ms is decent but 200 ms still feels slow Final Method Key search reference copy At this point indexOf searches on the full string block appear to be the fastest way of filtering and it provides the most room for refinement Two aspects are contributing to the slowdown at this point 1 unneccessarily searching the full xml structure 2 constructing a new xml string and casting it to XMLList after each search We can cover both issues by initially loading the xml string into an XMLList and iterating that list to generate a second string containing just the fullName field and the index that fullName belongs to in the original XMLList rawXMLList XMLList urlLoader data var count int 0 for each var node XML in rawXMLList fullNameIndex node fullName toLowerCase count count This will generate a string looking like Antiques 0 Antiques Antiquities Classical Amer 1 Antiques Antiquities Classical Amer Egyptian 2 Antiques Antiquities Classical Amer Greek 3 Antiques Antiquities Classical Amer Roman 4 Now when we do an indexOf search on the above string we can look ahead to the index inside the tags to find which reference in the original rawXMLList to use Those references are then set into a new XMLList to display private function searchStringInAttribute list XMLList attributelist String term String XMLList var output XMLList new XMLList var i Number 0 var pos Number 0 var index int 0 var count int 0 while i 1 pos attributelist indexOf term i if pos 1 index int attributelist substring attributelist indexOf pos 1 attributelist indexOf pos output count list index count i pos term length else i pos return output filteredXMLList searchStringInAttribute rawXMLList fullNameIndex

    Original URL path: http://www.craftymind.com/author/admin/page/11/ (2016-04-27)
    Open archived version from archive

  • Flash | Craftymind | Page 2
    Operas numbers Bitmap Gaming Test The bitmap test was designed to simulate a tower defense type game The test stresses pushing around lots of bitmap assets that animate each frame The entire rectangle view needs to be cleared each frame to account for all the changes happening in the scene The test supports a minimal amount of z depth ordering but not so much as to cause user scripts to take more then 1 millisecond to execute Both environments are using anti aliasing to scale the bitmap images HTML5 Flash 10 Windows 7 Internet Explorer 8 0 7600 N A 17 34 Firefox 3 6 3 5 78 17 7 Chrome 4 1 249 10 1 15 98 Opera 10 53 13 59 17 23 Safari 4 0 5 Error 17 29 Avg 9 82 fps Avg 17 1 fps Snow Leopard Safari 4 0 5 11 76 13 21 Firefox 3 6 3 7 5 14 09 Chrome 5 0 342 7 4 19 96 Opera 10 10 5 86 14 53 Avg 8 13 fps Avg 15 44 fps Linux Mint Firefox 3 5 9 4 84 fps 10 91 fps Safari on PC again only renders one frame per mousedown event so the results are impossible to verify These results are really surprising Chrome on OS X manages to push Flash higher then even Windows based browsers I was so surprised I ended up rebooting and running the test again just to make sure something wasn t wrong We re starting to see a trend where HTML5 on average runs slower for Canvas based animations and I ll explain why a bit further below Linux takes a huge performance hit in this test but the percentage difference mirrors the other platforms exactly With Nvidia drivers I d imagine the real numbers would be closer to Mac performance Text Column Test This test is designed to push the text layout and rendering engine in HTML and Flash The test utilizes custom fonts introduced with CSS3 as well as multibyte character string This is my least favorite test in the group because it doesn t simulate any real world test cases however it should provide a good estimate of how quickly a page full of text can be calculated I call it the iceberg test since 80 of the hit on the CPU happens outside the renderable view It works because although text that overflows outside the textblock doesn t get rendered it does have to get calculated in order to know how many lines of text can be scrolled HTML pages do this all the time when you load a site with text below the fold HTML5 Flash 10 Windows 7 Internet Explorer 8 0 7600 21 79 1 51 Firefox 3 6 3 24 7 1 5 Chrome 4 1 249 23 58 1 44 Opera 10 53 21 16 1 49 Safari 4 0 5 30 1 46 Avg 24 24 fps Avg 1 48 fps Snow Leopard Safari 4 0 5 27 26 16 24 Firefox 3 6 3 23 61 18 71 Chrome 5 0 342 26 07 22 85 Opera 10 10 22 72 15 22 Avg 24 91 fps Avg 18 25 fps Linux Mint Firefox 3 5 9 25 89 11 67 Safari continues to show problems on PC Safari reports 30 fps but it looks like it s running at 10 fps I ve included the results but they re really wrong Internet Explorer renders the view but is unable to display the custom fonts Chrome on both platforms is unable to render the Jedi custom font I didn t have time to investigate whether the super slow PC performance in Flash is my fault or Adobe s but I expect that will be uncovered soon enough As for the general differences between HTML and Flash in the text test this is exactly what I was expecting HTML was built for text rendering and this is further proof that browsers do this best GUIMark Mobile The Vector and Bitmap tests have been ported into miniature forms to test on mobile devices with a minimum resolution of 320 480 This is the area I imagine will see a lot of updates over the next 6 months I ve ordered the results by the release date of each phone tested HTML5 Vector HTML5 Bitmap Flash Vector Flash Bitmap Palm Pre c o Kevin O Shea 21 46 32 89 iPhone 3GS 10 79 12 86 Motorola Droid 8 95 12 59 Nokia N900 Flash 9 9 51 9 65 16 69 19 78 Nexus One 15 86 18 83 HTC HD2 c o Matt Emory 10 43 17 59 29 91 37 62 Two phones running the Flash player isn t conclusive evidence about Flash s performance in general in the mobile space but it does cast immediate doubts on claims that Flash is slow on ARM based smart phones Meanwhile if you want the best performance in HTML5 based web content Palm Pre and Nexus One are sitting at the top of the pile If you have results you d like to see added to the chart you can email results to mech at craftymind dot com What about video comparison I had really hoped to add a video test to this benchmark but I quickly found out there s no reliable way to record rendering performance for video objects As far as I can tell HTML5 video doesn t provide an api to catch frame dropping events or a way to determine the playback fps Blindly running a Timer object on the main thread didn t seem to help either At that point I didn t even bother seeing what hurdles Flash had to testing playback Parsing the Results I imagine half of the people reading this page will have one of two thoughts at this point Who cares if HTML5 is slower I just want Flash to die and

    Original URL path: http://www.craftymind.com/category/flash/page/2/ (2016-04-27)
    Open archived version from archive

  • Flash | Craftymind | Page 5
    XMLList and bound to a datagrid From there searches should match keywords in the fullName attribute and the datagrid will show only the entries matched Method 1 Iteration There are 2 ways to iterate the search either use AS3 s built in E4X expressions to generate unique xml lists or use collection filtering on the existing list The first method flexes the power of E4X expressions but takes a hit on swapping out the datagrid with a new dataprovider the second works on the existing dataprovider but lacks any indexing power xml might provide E4X expression filtering filteredXMLList rawXMLList fullName indexOf searchTerm 1 Filter Time 200 ms Collection Filtering filteredXMLListCollection new XMLListCollection rawXMLList filteredXMLListCollection filterFunction collectionFilter private function collectionFilter item XML Boolean return item fullName indexOf searchTerm 1 Filter Time 300 200 ms Using E4X expressions is more powerful then filtering but the total time for both methods still feels sluggish in the UI Method 2 Pattern matching full text Again there are 2 approaches to pattern matching strings in AS3 RegExp and String indexOf The idea is to apply pattern matching on the raw string representation of the xml to create a new xml string containing only the nodes matched The new string is then cast back into an XMLList to be placed in the datagrid RexExp matching var pattern RegExp new RegExp searchTerm ig var result Array rawXMLString match pattern filteredXMLList new XMLList result join Filter Time 31000 14000 ms 31 14 seconds IndexOf matching private function searchStringFor source String term String String var lowersource String source toLowerCase var lowerterm String term toLowerCase var i Number 0 var out String var pos Number 0 while i 1 pos lowersource indexOf lowerterm i if pos 1 out source substring source lastIndexOf pos source indexOf pos 1 i pos term length else i pos return out filteredXMLList new XMLList searchStringFor rawXMLString searchTerm Filter Time 200 50 ms While the RegExp and indexOf are performing the same match RegExp clearly has a long way to go before being viable in AS3 Even using simply pattern matches with String search during Method 1 above was 3 times slower then an indexOf during iteration IndexOf in Method 2 on the other hand has gotten us down to a 200 50 ms filter time 50 ms is decent but 200 ms still feels slow Final Method Key search reference copy At this point indexOf searches on the full string block appear to be the fastest way of filtering and it provides the most room for refinement Two aspects are contributing to the slowdown at this point 1 unneccessarily searching the full xml structure 2 constructing a new xml string and casting it to XMLList after each search We can cover both issues by initially loading the xml string into an XMLList and iterating that list to generate a second string containing just the fullName field and the index that fullName belongs to in the original XMLList rawXMLList XMLList urlLoader data var count int 0

    Original URL path: http://www.craftymind.com/category/flash/page/5/ (2016-04-27)
    Open archived version from archive

  • GUIMark 2 - HTML5 Vector Test
    GUIMark Vector Chart Test Current 10 fps

    Original URL path: http://www.craftymind.com/factory/guimark2/HTML5ChartingTest.html (2016-04-27)
    Open archived version from archive

  • GUIMark 2 - Flash Vector Test
    Flash 9 required Source Code

    Original URL path: http://www.craftymind.com/factory/guimark2/FlashChartingTest.html (2016-04-27)
    Open archived version from archive

  • GUIMark 2 - HTML5 Vector Test 1 Pixel
    GUIMark Vector Chart Test 1 Pixel Current 10 fps

    Original URL path: http://www.craftymind.com/factory/guimark2/HTML5AltChartingTest.html (2016-04-27)
    Open archived version from archive



  •