something in the way

a tumblog about design + code
Jun 27

Paper.js [Scripts]

Media_httpwwwcreative_difka

Created by Jürg LehniJonathan Puckey, Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves

Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator, originally developed by Jürg and Jonathan and with more than 10 years of development.

Feature overview :
- A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.
- The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
- A well designed and battle hardened Programming Interface.
- There is a good reason for the word Vector in Vector Graphics. Paper.js offers best of breed Vector Mathematics through its core types such as PointSizeand Rectangle.
- PaperScript, a simple extension of JavaScript allows the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and the manipulation of Point and Size objects using direct math operations as if they were plain numbers.
- Simple, yet elaborate mouse and keyboard interaction.
- Construct paths and manipulate their curves and segments in very convenient ways.
- Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with square ends and miter limits.
- Smoothen curves, simplify path segments by fitting curves through points.
- Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.

For more information see paperjs.org

Media_httpwwwcreative_gjpmz
Media_httpwwwcreative_ercnp
Media_httpwwwcreative_guhyw
Media_httpwwwcreative_fiaek
Media_httpwwwcreative_whhdd
Media_httpwwwcreative_jiyzh


Paper.js [Scripts] is a post from: CreativeApplications.Net | Follow us on Twitter - Facebook - Flickr - Vimeo

Related Posts:

Media_httpfeedsfeedbu_jwvqh
Media_httpfeedsfeedbu_amfre
Media_httpfeedsfeedbu_wbdfd
Media_httpfeedsfeedbu_eaemt
Media_httpfeedsfeedbu_acjhf
Media_httpfeedsfeedbu_uicja
Media_httpfeedsfeedbu_ffcrx
Dec 10

flKinect: Socket server + AS3 library for Microsoft Kinect


Media_httpapitweetmem_ufsff

Well… Now I may just have to get myself a Microsoft Kinect! I saw on Saqoosha’s blog that he was playing around with this and thought I would post this here. Koji Kimura wrote a Cocoa application to allow communication between the Microsoft Kinect and Flash. It looks amazing and opens up a whole new world of possibilities and it looks like the AS3 API is also very easy to use!

Media_httpwwwwebkitch_aefdg

More info and downloads on Koji’s site.

As you may have guessed it is Mac only. If you know of any similar projects for Windows or Linux don’t hesitate to leave a comment below!

Update: Here’s another AS3 library + socket server app for Mac.
Update 2: Also check out as3kinect.org.

Jun 17

Sencha Touch: The end of native; A new touch framework for the Web

As I walked around Moscone last week, I saw some prophets speaking of a future that isn't all Native. A future where the Web is the platform. Others saw it too:

Media_httpajaxiancomw_akjxg

I pondered who would be behind the act and smiled as I had a good idea. The group behind this all is the newly named Sencha (formerly Ext JS). On the back of news of the new company and Sencha Labs, we get a glimpse of their new product: Sencha Touch:

Media_httpajaxiancomw_hwxem

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

There are some good demos of apps such as GeoCongress, which shows off:

Media_httpajaxiancomw_jwtia

  • HTML5 Geolocation
  • Sench Touch icon set
  • JSONP Proxy
  • YQL Data Proxy
  • Momentum scrolling
  • Scroll touch event
  • Pop-up Overlays
  • Mobile form elements
  • CSS3 Gradients
  • CSS3 Transitions
  • Multi-Card Layout
  • Tab Panel Component
  • Scrollable list view
  • Swappable headers

Once you see what the framework can do with examples, what better way to get a deeper look than walking though as much of it as possible? Michael Mullany, VP Products, sat down and gave us just that. Sencha Touch comes with a "kitchen sink" demo that shows off much of its abilities. Here we see Michael showing off said demo:

After seeing this at work, we asked Michael some questions about the new product:

How are Ext JS, jQTouch, and Sencha Touch related?

We talked about some of this in the Sencha name change post. Jonathan Stark is taking over jQTouch maintainership, Dave Kaneda will remain involved but he's been spending most of his energy on Sencha Touch. Sencha Touch has some Ext JS DNA (OO javascript, a lot of the data package is common), but the UI components are completely different.

Having David part of Sencha Touch has been incredibly important. That's one of the reasons why the UI components are staggeringly beautiful, and there's been so much attention to ease of styling.

With respect to jQTouch vs. Sencha Touch. jQTouch is a good solution for people who need some progressive enhancement of web content, but it's not a full application framework.

What is the licensing plan for Sencha Touch?

The initial beta is under a GPLv3 + FLOSS license. We’d like to give open source folks the benefit before we introduce a commercial trial license. And we’d like to take the opportunity to emphasize something that many people miss: that we have Free and Open Source exceptions as part of our GPLv3 license. So if you want to, you can include Sencha Touch in your Apache and OSI approved licensed projects without triggering the GPL’ing of your project.

Can I make native looking controls for the particular platform at runtime?

In the beta, you can build multiple themes easily (for example, our Android theme is 20 lines of customized SASS), and serve them up to different clients based on user agent. We do want to provide a client-side switcher by release time. SASS is really an extraordinary technology. This would be far, far harder without it.

Are there any differences between it running on various platforms?

There are some minor differences, for example CSS 3D Transitions don't work on Android, for example (no cube transitions). And Apple GPU accelerates more stuff. You can look at our demo apps across iPhone and Android. They really do work cross-platform.

How do I do layout with Sencha Touch?

We think most people will use fairly simple layouts with the built-in components since the screen sizes are small. Tabs, carousels, lists. If they want to get more complex, they can use the more complex layouts or just extend the built-in classes.

Can I create native apps from these? How do I access native services on the device?

Right now, you're going to take Sencha and wrap it with phone-gap. But about two third of non-game apps don't do any special device access, and camera access is on its way.

How does Sencha Touch feel to program (e.g. just like Ext?)

It's still object oriented javascript but it's really very simple. People can just look at the source to the demo apps (which are reasonably rich apps) and make their own decision.

Can I progressively enhance a mobile Web app and sprinkle in some of this goodness?

I think the success of iPhone native mobile apps shows that for mobile factors, it's better if you think about layout and navigation first, then pour content into your containers & paths. In many ways, I think it's the reverse of the desktop web. Desktop web apps can be random access in their user pathing, mobile apps have to be hierarchical or otherwise constrained -- because you don't have a lot of space and you can't waste it on navigation controls.

Media_httpfeedsfeedbu_wddof
Media_httpfeedsfeedbu_mmqlm
Media_httpfeedsfeedbu_mxwjw
Oct 2

ActionScript3/Flash10 software synthesizer SiON released

Media_httpblogjaction_erdpd

Hello all, I’m kei mesuda aka keim japanese free-game home brewer.

I just release completely new software synthesizer named “SiON” (pronounced as “scion”), so let me introduce my work.

The SiON library works on ActionScript3/Flash10. This provides a simple sound synchronization with DisplayObject and an easy dynamic sound generation. You can generate various sounds without any mp3 files and wave data. The musical sequence is represented as simple text data “Music Macro Language”. It makes your sounding SWF file very very small.

This library’s development center is here in spark project. You can get newest version’s swc file, asdoc and svn link.


- Demonstrations

You can use SiON in Wonderfl and I posted some demonstrations.

Other works using SiON are shown in tag [SiON] in Wonderfl. I plan to post some other works with SiON at wonderfl, please check my page if you want more.

And this is another demonstration for SiON. The MMLTalks is an MML hosting service powered by SiON. Here, you can listen many musics generated only by SiON software synthsizer without any mp3 files and wave data.


- Synthesizer specifications

The SiON software synthesizer is an extention of the sound chip YM2151s emulator. Currently, SiON includes 4 types of sound modules.

    • Extended Emulators of various Frequency Modulation synthesizing sound chips; The emulation code is based on the time-proven emulators, MAME, fmgen and x68sound.dll. And the outputs of various sound chips (OPM,OPNA,OPL3,OPX,MA3) are reproducible by giving same parameters of actual equipments.
      • Simulator of PSG and wave memory sound chips; The SiONs Extended FM synth can simulate various PSG chips (AY-3-8910, DCSG, 2A03, SSG) and wave memory sound chips(SCC, C15, GameBoy).
        • Physical Modeling Guitar synthesizer; SiON also includes Guitar Physical modeling synthesizer based on Karplus strong algorism.
          • PCM sound module; The SiON handles MP3 sound (Sound Class) as a PCM sound modules source wave. This means you can control the pitch of MP3 file by musical sequence.

            The SiON can modify the output from these sound modules by low-pass filter with ADSR envelop, ring modulation, pitch/amplitude modulation.


            - Sequencer specifications

            The SiON uses Music Macro Language (MML) as a musical score data. The MML is a simple powerful language to represent musical sequence. For example, “[ccggaag2 ffeeddc2 | [ggffeed2]]” represents “the ABC song” in MML. The reference manual is here, mml editor here, and you can refer MMLs of various great musics here in MMLTalks (and click rightmost button in song title).


            - Effector specifications

            SiON includes many sound effectors like reverb, chorus, delay, wave shaper, various filters, speaker simulator and so on. These effectors can be control from MML. Please see the discriptions in the MML reference manual.

            Now detail discription is under construction, please check my blog or development center. And if you have any questions or comments, please leave comment on this post or contact me by e-mail (but sorry for my poor English..).

            Sequencer specification.
            SiON uses Music Macro Language (MML) as a musical score data. The MML is a simple powerful language to represent musical sequence. For example, “[ccggaag2 ffeeddc2 | [ggffeed2]]” represents “the ABC song” in MML. Reference manual here and you can try to play mml here.
            This site MMLTalks is the MML hosting service powered by SiON, you can refer many MMLs to represent grate musics.
            Jul 8

            AS3 Library for OAuth with Twitter for AIR Apps

            AIR is very popular for creating twitter clients, Sönke Rohde just made it much easier to make AIR apps for twitter with an AS3 library for Twitter. This library is built on top of core oauth as3 library by iotashan.  Core OAuth as3 library is a standard OAuth library this can be used for your own OAuth backends or connecting to other OAuth services as well.

            A very nice feature of this library, in addition to being coded cleanly and as3 style, is the ability to have the Twitter OAuth page render inside of Flash.

            Instead of opening the Twitter authorization page in the browser the library also contains OAuthLoader which is a wrapper around HTMLLoader which enables to directly show the authorization page within an AIR window:

            // use this in the requestTokenHandler instead of navigateToURL
            var loader:OAuthLoader = new OAuthLoader();
            loader.load(request);
            loader.percentWidth = 100;
            loader.percentHeight = 100;
            var w:Window = new Window();
            w.width = 800;
            w.height = 400;
            w.title = req.url;
            w.addChild(loader);
            w.open();
            Media_httpfeedsfeedbu_ofppb

            Get Updates

            Tags

            Archive

            2012 (1)
            2011 (11)