Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

mmm PIE!

Pryme8

By Pryme8,
in Announcements

 Share

Recommended Posts

Pryme8 Newbie

Pryme8

Posted
Posted

So, I know everyone has been working on their own 2d systems, and this one is not GL accelerated yet but it is extremely versatile and tailor able.  I call it PIE, or Pryme Interface Elements.

The whole idea is a node and element based system, with multiple layers that are propagated with throttled async calls.  Resulting in highly modular and quickly deploy-able elements.  The two examples in the video were created in a matter of hours, and any more elements to them can be easily added.  You will have to excuse the video lag, my pc hates screen recording, but the new work rig should be here soon so no more worries on that as of later this week I hope.

The Idea is you have your Pie, which is a target element or if none is set the body is targeted, the system then creates a stack of canvas, by default 4 but this can by changed in the arguments.  The Pie is the container for all Nodes, which contain Elements, which contain hotspots, which contain events, which can also contain responses.  The graphic data is reserved in the RAM on runtime and is able to be referenced by all elements in the stack at any point of a response or callback.  All Nodes, Elements, and Hotspots have a transform Object that effects their positions including rotation and soon scale.

All standard DOM elements are easily deploy-able as new Nodes with a little bit of scripting, and later versions will include methods to create these elements automatically.

Events already supported:
> Drag-able Elements with Custom Response Output and limits
> Spin Elements or Knobs, with Custom Response Output and limits
> Mouse Overs and Alt Images
> MouseClick/MouseDown/Mouse Up and Custom Responses
> Keyboard Input with Custom Responses

All events can also have an unlimited number of callbacks attached as well.

All graphic types that can be drawn to canvas supported, and procedural graphics as well, that do not calculate unless their data changes.

All elements are cloneable.
All functions are chainable.

Soon to include, Sprite Sheets and Animations.

OK here is the demo, I'm not putting this out there yet until it can be mimified and bugged I am confident with a little bit of hard work, I can make standard DOM Obsolete, especially once I kick in the web workers and GL acceleration.

The demo first shows and audio track dock, with knobs that have output that can control things (though not shown in this demo) and secondly a real time Browser Synth, that has both mouse and keyboard events, and live sound productions being visualized by BABYLON JS particles.

This is super simple examples, the keyboards UI was created in less then a hour, and all the elements were super easy to make!

I should post the demo of the synth this video does it no justice, everything is extremely responsive, and you have the ability to hit like every key at once if you wanted...

To show how easy it was to make the UI here is a section of the script:

...
var bg_grid = this.UI.createPGraphic('BG-Grid',    function(el, ctx, canvas){
                                var ui = this.parent;                
                                ctx.fillStyle = this.vars.gridBaseColor;
                                ctx.fillRect(0,0,canvas.width, canvas.height);
                                var x = 0, y = 0, sTick = 0;
                                ctx.strokeStyle = this.vars.gridLineColor;
                
                                ctx.beginPath();
                                while(x<canvas.width || y<canvas.height){
                                    if(sTick){ctx.lineWidth = 0.5;sTick++;}else{ctx.lineWidth = 0.2;sTick--;}
                                        ctx.beginPath();
                                        ctx.moveTo(x,0);
                                        ctx.lineTo(x,canvas.height);
                                        ctx.moveTo(0,y);
                                        ctx.lineTo(canvas.width,y);
                                        ctx.stroke();
                                        x+=this.vars.gridSize;
                                        y+=this.vars.gridSize;
                                        }    
                                },
                                {gridSize:40, gridBaseColor : 'rgb(20,180,120)', gridLineColor : 'rgb(120,60,180)'},
                                {});    
    var background_node = this.UI.createNode('Background', {layer:0});
    var background_grid = background_node.createElement('Background-Graphic', bg_grid, {}, true);
    this.UI.update = 1;
...
//BUILD UI
    var base = parent.UI.createGraphic('shsynth_base', './imgs/ui/shsynth_base.png');
    var displayBase = parent.UI.createGraphic('displayBase', './imgs/ui/display_base.png');
    var lKey = parent.UI.createGraphic('lKeyUp', './imgs/ui/LKeyUp.png');
    var lKeyD = parent.UI.createGraphic('lKeyDown', './imgs/ui/LKeyDown.png');
    var bKey = parent.UI.createGraphic('bKeyUp', './imgs/ui/blackkeyUp.png');
    var bKeyD = parent.UI.createGraphic('bKeyDown', './imgs/ui/blackkeyDown.png');
    var tKey = parent.UI.createGraphic('tKeyUp', './imgs/ui/tKeyUp.png');
    var tKeyD = parent.UI.createGraphic('tKeyDown', './imgs/ui/tKeyDown.png');
    var jKey = parent.UI.createGraphic('jKeyUp', './imgs/ui/JKeyUp.png');
    var jKeyD = parent.UI.createGraphic('jKeyDown', './imgs/ui/JKeyDown.png');
    var lastKey = parent.UI.createGraphic('lastKey', './imgs/ui/wholeKeyUp.png');
    var lastKeyD = parent.UI.createGraphic('lastKeyD', './imgs/ui/wholeKeyDown.png');
    var keyOverG = parent.UI.createGraphic('keyOver', './imgs/ui/keyCover.png');
    
    this.UI = parent.UI.createNode('shsynth_base', {transform:{x:((parent.UI.layers[0].width)*0.5)-450,y:(parent.UI.layers[0].height) - 260}, layer:1});
    
    this.UI.createElement('Display_Base', displayBase, {transform:{x:145,y:(parent.UI.layers[0].height) - 1010}, layer:0}, true);
    base = this.UI.createElement('shsynth_base_image', base, {layer:1}, true);
    
    this.UI.createElement('C', lKey, {transform:{x:208,y:60}, layer:2, noteStep:0 }, true);
    this.UI.createElement('Db', bKey, {transform:{x:234.5,y:60}, layer:1, noteStep:1 }, true);
    this.UI.createElement('D', tKey, {transform:{x:247.5,y:60}, layer:2, noteStep:2 }, true);
    parent.UI.clone('Db',{name: "Eb", args:{transform:{x:274, y:60}, layer:1, noteStep:3}});
    this.UI.createElement('E', jKey, {transform:{x:286,y:60}, layer:2, noteStep:4 }, true);
    parent.UI.clone('C',{name: "F", args:{transform:{x:325, y:60}, layer:2, noteStep:5}});
    parent.UI.clone('Db',{name: "Gb", args:{transform:{x:352.5, y:60} , layer:1, noteStep:6}});
    parent.UI.clone('D',{name: "G", args:{transform:{x:364.5, y:60}, layer:2, noteStep:7}});
    parent.UI.clone('Db',{name: "Ab", args:{transform:{x:390.5, y:60} , layer:1, noteStep:8}});
    parent.UI.clone('D',{name: "A", args:{transform:{x:403.5, y:60}, layer:2, noteStep:9}});
    parent.UI.clone('Db',{name: "Bb", args:{transform:{x:430, y:60} , layer:1, noteStep:10}});
    parent.UI.clone('E',{name: "B", args:{transform:{x:442, y:60}, layer:2, noteStep:11}});
    
    
    parent.UI.clone('C',{name: "C2", args:{transform:{x:481, y:60}, layer:2, noteStep:12}});
    parent.UI.clone('Db',{name: "Db2", args:{transform:{x:508, y:60} , layer:1, noteStep:13}});
    parent.UI.clone('D',{name: "D2", args:{transform:{x:520, y:60}, layer:2, noteStep:14}});
    parent.UI.clone('Db',{name: "Eb2", args:{transform:{x:546, y:60}, layer:1, noteStep:15}});
    parent.UI.clone('E',{name: "E2", args:{transform:{x:558.5, y:60}, layer:2, noteStep:16}});
    parent.UI.clone('C',{name: "F2", args:{transform:{x:597.5, y:60}, layer:2, noteStep:17}});
    parent.UI.clone('Db',{name: "Gb2", args:{transform:{x:624, y:60} , layer:1, noteStep:18}});
    parent.UI.clone('D',{name: "G2", args:{transform:{x:637, y:60}, layer:2, noteStep:19}});
    parent.UI.clone('Db',{name: "Ab2", args:{transform:{x:663, y:60} , layer:1, noteStep:20}});
    parent.UI.clone('D',{name: "A2", args:{transform:{x:675.5, y:60}, layer:2, noteStep:21}});
    parent.UI.clone('Db',{name: "Bb2", args:{transform:{x:701.5, y:60} , layer:1, noteStep:22}});
    parent.UI.clone('E',{name: "B2", args:{transform:{x:713.5, y:60}, layer:2, noteStep:23}});
    
    this.UI.createElement('C3', lastKey, {transform:{x:752.5,y:60}, layer:2, noteStep:24}, true);
    
    
    this.UI.createElement('keyOver', keyOverG, {transform:{x:205.5,y:35}, layer:2}, true);
    
    
     parent.UI.createHotspot('C_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C');    
     parent.UI.createHotspot('Db_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Db');
     parent.UI.createHotspot('D_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'D');
     parent.UI.createHotspot('Eb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Eb');
     parent.UI.createHotspot('E_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'E');
     parent.UI.createHotspot('F_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'F');
     parent.UI.createHotspot('Gb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Gb');
     parent.UI.createHotspot('G_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'G');    
     parent.UI.createHotspot('Ab_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Ab');    
     parent.UI.createHotspot('A_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'A');
     parent.UI.createHotspot('Bb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Bb');    
     parent.UI.createHotspot('B_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'B');    
     parent.UI.createHotspot('C2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C2');
     parent.UI.createHotspot('Db2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Db2');
     parent.UI.createHotspot('D2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'D2');
      parent.UI.createHotspot('Eb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Eb2');
     parent.UI.createHotspot('E2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'E2');
     parent.UI.createHotspot('F2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'F2');
     parent.UI.createHotspot('Gb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Gb2');
     parent.UI.createHotspot('G2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'G2');    
     parent.UI.createHotspot('Ab2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Ab2');    
     parent.UI.createHotspot('A2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'A2');
     parent.UI.createHotspot('Bb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Bb2');    
     parent.UI.createHotspot('B2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'B2');
    parent.UI.createHotspot('C3_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C3');    
    
    
    
    
     var keyDown = parent.UI.createEvent('mousedown', (function(e, p){
...
}));
        
    parent.UI.attach('C_Hot', keyDown);    
    parent.UI.attach('Db_Hot', keyDown);
    parent.UI.attach('D_Hot', keyDown);
    parent.UI.attach('Eb_Hot', keyDown);
    parent.UI.attach('E_Hot', keyDown);
    parent.UI.attach('F_Hot', keyDown);
    parent.UI.attach('Gb_Hot', keyDown);
    parent.UI.attach('G_Hot', keyDown);
    parent.UI.attach('Ab_Hot', keyDown);
    parent.UI.attach('A_Hot', keyDown);
    parent.UI.attach('Bb_Hot', keyDown);
    parent.UI.attach('B_Hot', keyDown);
    parent.UI.attach('C2_Hot', keyDown);
    parent.UI.attach('Db2_Hot', keyDown);
    parent.UI.attach('D2_Hot', keyDown);
    parent.UI.attach('Eb2_Hot', keyDown);
    parent.UI.attach('E2_Hot', keyDown);
    parent.UI.attach('F2_Hot', keyDown);
    parent.UI.attach('Gb2_Hot', keyDown);
    parent.UI.attach('G2_Hot', keyDown);
    parent.UI.attach('Ab2_Hot', keyDown);
    parent.UI.attach('A2_Hot', keyDown);
    parent.UI.attach('Bb2_Hot', keyDown);
    parent.UI.attach('B2_Hot', keyDown);
    parent.UI.attach('C3_Hot', keyDown);


I will be releasing this library soon, along with a Browser tool for Real time Music Production Linked to Custom 3d Visualizations and that are controlled by different nodes and instruments you have set up, with a quick variable linking system so shaders, and all properties of the scene can be effected real time to the music being produced.  Mainly targeting DJ's and Live Producers, but also including nodes for Timeline/Automatons for note rolls and other effects...

I have been sitting on this for like 2 weeks and have not had a chance to work on it because of my busy schedule and a timeline I need to meet for a client, but I figured it was time to give the world a taste of my PIE... (the mmm... is www turned upside down ^_^)

Comments, Concerns, Criticism?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...