electro-music.com   Dedicated to experimental electro-acoustic
and electronic music
 
    Front Page  |  Radio
 |  Media  |  Forum  |  Wiki  |  Links
Forum with support of Syndicator RSS
 FAQFAQ   CalendarCalendar   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   LinksLinks
 RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in  Chat RoomChat Room 
 Forum index » Clavia Nord Modular » Nord Modular G2 Discussion
SVG2
Post new topic   Reply to topic Moderators: Nord Modular Editors
Page 1 of 1 [21 Posts]
View unread posts
View new posts in the last week
Mark the topic unread :: View previous topic :: View next topic
Author Message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Sat Dec 06, 2014 9:05 pm    Post subject: SVG2
Subject description: G2 modules rendered in browser with SVG
Reply with quote  Mark this post and the followings unread

I have got to start dinner soon so I thought I would post about my weekends programming efforts.

I was fooling with the idea of doing synth modules in svg so they would allow you to zoom in without loosing quality.

I was poking around inside the G2 demo editor looking for the bmp's of the modules and came across some text resources which seemed to be definition files for all the elements of each module. So I converted them to JSON and fiddled with a bit of code and it turns out that is what they were.

Here is a quick sample page (only tested with FF/Chrome on Windows sorry). There are some missing elements that were handled with little inline bitmaps. These will need to be manually converted to svg paths but they are typically quite simple (like the triangle in a env vca module).

You can zoom in/out using the Ctrl+mouse wheel.

What can I do with these? I'm not sure but was thinking it might be better to show patches posted on the site via this instead of attaching a jpg.

With a node.js app doing the USB donkey work, an in browser patch editor might just be doable.
Back to top
View user's profile Send private message
brunov



Joined: Aug 03, 2011
Posts: 227
Location: delft
Audio files: 1
G2 patch files: 2

PostPosted: Sun Dec 07, 2014 12:45 am    Post subject: Reply with quote  Mark this post and the followings unread

hello ian-s,

that looks very interesting. I also used these module definitions extracted from the recource file for the os-editor. At one stage I tried to base the graphics on svg only it became too complex. This may be different if you use javascript as a programming language.

I also found a nice cable simulation in java script over here : http://lab.andre-michelle.com/cable-interface

My apporach would be, what I also want to do for the os-editor, to split the application in a front end and a back end. The front end with the user interface would produce osc messages for the back end. The back end could sit anywhere on a netwerk and will have a physical usb connection with the g2.

So that way the front end could also be some other osc capable tool or m4l or maybe your implementation in a browser.

Bruno

_________________
My old OS NMG2 editor: http://sourceforge.net/projects/nmg2editor/?source=directory
My new G2 editor FMX: http://www.bverhue.nl/g2dev/?page_id=17
Source code: https://github.com/BVerhue/nord_g2_editor
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Sun Dec 07, 2014 3:12 am    Post subject: Reply with quote  Mark this post and the followings unread

Hi Brunov.

I was hoping that your existing usb code could act as a host.

That cable simulation looks really nice, love the wobbly effect. It uses flash unfortunately.

The current code allows for re-use so an input or knob is defined visually only once. Each module also has a single dynamically generated template.
The on screen modules are just a group>use nested element pair, with the template name applied to the use, and position/module color applied to the outer g element. If there are any interactive elements like knobs, then an 'area' and movable pointer for each is also added to the <g>

I'll finish off the missing bitmaps then have a crack at the animated envelope graphs next week.
Back to top
View user's profile Send private message
brunov



Joined: Aug 03, 2011
Posts: 227
Location: delft
Audio files: 1
G2 patch files: 2

PostPosted: Sun Dec 07, 2014 4:11 am    Post subject: Reply with quote  Mark this post and the followings unread

ian-s wrote:
It uses flash unfortunately.


Oh, yes, sorry Embarassed

I found something you could maybe use or adapt, for the icons on buttons in my editor, I made some svg-images. I'll attach the file.


Symbols.zip
 Description:

Download
 Filename:  Symbols.zip
 Filesize:  33.3 KB
 Downloaded:  339 Time(s)


_________________
My old OS NMG2 editor: http://sourceforge.net/projects/nmg2editor/?source=directory
My new G2 editor FMX: http://www.bverhue.nl/g2dev/?page_id=17
Source code: https://github.com/BVerhue/nord_g2_editor
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Mon Dec 08, 2014 12:08 pm    Post subject: Reply with quote  Mark this post and the followings unread

brunov wrote:
I found something you could maybe use or adapt, for the icons on buttons in my editor, I made some svg-images. I'll attach the file.


Very nice. That will help a lot. It's not till you see them all laid out like that that you realize how much work is yet to be done.

I have added a value display for the adsr (using qfingers python table which drops right in to javascript).

I had assumed that the knob/value display pairs would just work, but they seem to be jumbled somehow. If I can't figure out the relationship I may have to resort to manually reordering. The controls need to be in the same order as the parameters from the pch2/usb data which I havn't looked at yet.

My naive implementation of knob movement is way off. Drag to rotate ratio is way too high.
Back to top
View user's profile Send private message
cappy2112



Joined: Dec 24, 2004
Posts: 2465
Location: San Jose, California
Audio files: 2
G2 patch files: 1

PostPosted: Sun Dec 14, 2014 10:53 am    Post subject: Reply with quote  Mark this post and the followings unread

ian-s wrote:
brunov wrote:
I found something you could maybe use or adapt, for the icons on buttons in my editor, I made some svg-images. I'll attach the file.


Very nice. That will help a lot. It's not till you see them all laid out like that that you realize how much work is yet to be done.

I have added a value display for the adsr (using qfingers python table which drops right in to javascript).

I had assumed that the knob/value display pairs would just work, but they seem to be jumbled somehow. If I can't figure out the relationship I may have to resort to manually reordering. The controls need to be in the same order as the parameters from the pch2/usb data which I havn't looked at yet.


My naive implementation of knob movement is way off. Drag to rotate ratio is way too high.


Good job to both of you!
I had no idea that anyone was working on alternate editors.

_________________
Free Tibet. Release the Panchen Lama from prison. Let the Dalai Lama return to his home.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Mon Dec 15, 2014 3:23 am    Post subject: Reply with quote  Mark this post and the followings unread

Thanks Tony, I'm still in the fooling around phase. Brunov has done all the hard work on the usb protocol etc.

This new app has the beginnings of the wobbly patch cord happening.

Some javascript taken from a cloth simulation, de-mootooled and adapted from canvas to svg.

The app logic just shifts a single cable from point to point. The cable acts strangely at the moment (but kind of like my real ms20/50 patch cables). I need to adjust constraints based on total distance between points and tweak the physics.

I've done a few more bmp to svg conversions and gotten the multi-state switches to work. Started tidying up the code but it is still quite a mess sorry.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Wed Dec 17, 2014 1:34 am    Post subject: Reply with quote  Mark this post and the followings unread

update.

Only works on chrome at the moment. FF is quite a bit slower anyway (the price you pay for superior rendering I guess).

Slow progress, I have decoupled the socket locations from the dom so I will have to figure out another way of changing the mouse pointer.

You can make multiple connections now. No need for drag, just click 1st socket then click second socket. Click away from a socket to cancel.
The cable will settle to a suitable length after the second point is connected, new cables default to the same length as the last.

The animation only happens on the last cable, I could have a circular queue of cable physics objects but one seems to work well enough.

This app was supposed to be a simple pch2 viewer, so you can look at patches without the editor or demo being loaded (ie at work). The updatable knob/switch/patching is only being tested for a future svg front end for Brunov's editor.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Mon Jan 05, 2015 2:25 pm    Post subject: Reply with quote  Mark this post and the followings unread

Hi everybody

progress update

Well the "text resources as source for auto svg" route came up against a brick wall. The control order doesn't match the parameter order so I was faced with the task of re-ordering all the controls/inputs/outputs to match the parameter order.
The code was getting very messy (even for me) so I chose instead to take the nice g2ools python module.py and parameter.py source, convert it to javascript (using javascript), then add a few lines of code to show the graphic elements alongside the list. Simply clicking on the correct control/input etc. After each module group, the javascript object was converted back to source using JSON.stringify().

Still a lot of tedious work but now I have a nice neat javascript object definition for each module and parameter.

I'm still working on the controls (so many different types) but a lot are done and the app will now read your local pch2 files and display the VA with the knob/switch positions set for variation 1.
Patch cables are also shown but the random bend looks a little too stiff and I don't re-factor the socket colours yet.

The control parameter value windows should be easier now but the Graph displays are going to be an interesting challenge :¬)

This version is for display only, no code for patching or adjusting controls.

I did get FF working but seem to have broken something so that FF has stopped working again, I'll address that later.
Works on android and ipad (chrome) though.
Back to top
View user's profile Send private message
blue hell
Site Admin


Joined: Apr 03, 2004
Posts: 24079
Location: The Netherlands, Enschede
Audio files: 278
G2 patch files: 320

PostPosted: Tue Jan 06, 2015 5:09 pm    Post subject: Reply with quote  Mark this post and the followings unread

Ah the wires are visible in FF now, looks great!

(with the NM Classic background Cool )

For in case you can use it, http://bluehell.electro-music.com/small_stuff/wires.txt is what I did with wires. It looks a bit more like how the Clavia wires are.

If you want so I could isolate the envelope drawing code I did too - it is not as good as Clavia's maybe, Clavia applies some scaling to preserve the overall shape better even at extreme time settings, or so it seems (but my envelopes have far greater time ranges, so that could be the issue too).

Edit : added the basic envelope calculations to that file as well.

_________________
Jan
also .. could someone please turn down the thermostat a bit.
Posted Image, might have been reduced in size. Click Image to view fullscreen.
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Wed Jan 07, 2015 10:58 am    Post subject: Reply with quote  Mark this post and the followings unread

Blue Hell wrote:
Ah the wires are visible in FF now, looks great!

(with the NM Classic background Cool )


Thanks Jan

FF didn't like the getBBox() call I was using as a shortcut when calculating the center of a knob, so I now use a look up based on knob type.

The tile background came from the G2 Editor resource dump. It is spooky but I had just finished a new tile in gimp when I saw your post.

I have tried translating your code but I must have screwed something up, the cords look a little too uniform and have exaggerated shapes.

Code:
      var Patchcord = function(sx,sy,dx,dy) {
         this.points = [4];
         this.points[0] = new FastVector(sx,sy);
         this.points[3] = new FastVector(dx,dy);
      }
      Patchcord.prototype = {
         shake: function() {
            var angle1 = 15+(Math.random()*21);
            var strength1 = 20+(Math.random()*21);
            var angle2 = 20+(Math.random()*21);
            var strength2 = 20+(Math.random()*21);
            var dir1 = this.points[0].subtract(this.points[3]).rotate(angle1);
            var dir2 = this.points[0].subtract(this.points[3]).rotate(angle2);
            dir1.multiply(strength1).divide(100);
            dir2.multiply(strength2).divide(100);
            this.points[1] = this.points[0].subtract(dir1);
            this.points[2] = this.points[3].add(dir2);
         },
         getCurvePath: function() {
            this.shake();
            return this.points[0].toString("M")+this.points[1].toString("C")+this.points[2].toString(",")+this.points[3].toString(",");
         },
         getStraitPath: function() {
         }
      }


I like the way the cords fall with the physics engine from the earlier versions so I was planning to use that if it wasn't too slow.

Thanks again for your help.
Back to top
View user's profile Send private message
blue hell
Site Admin


Joined: Apr 03, 2004
Posts: 24079
Location: The Netherlands, Enschede
Audio files: 278
G2 patch files: 320

PostPosted: Wed Jan 07, 2015 11:45 am    Post subject: Reply with quote  Mark this post and the followings unread

Maybe ... the angle ... my code works with degrees converted to radians in the procedure Rotate .. not sure what js does.

Here it looks like :

Posted Image, might have been reduced in size. Click Image to view fullscreen.

_________________
Jan
also .. could someone please turn down the thermostat a bit.
Posted Image, might have been reduced in size. Click Image to view fullscreen.
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Wed Jan 07, 2015 9:23 pm    Post subject: Reply with quote  Mark this post and the followings unread

Yes, sorry Jan.

I forgot to mention that the cables in Wren curve beautifully and like you said, much like the Clavia editor.

Also have been wanting to say that Wren sounds amazing btw.

I'll take another look at the point rotate code tonight.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Thu Jan 08, 2015 12:40 am    Post subject: Reply with quote  Mark this post and the followings unread

Got the converted code working by ditching the deg2rad conversion and generating the angles in smaller units, also re-factoring some of the math.

Curve is probably a little too subtle now but it will do.

New code now in the main link.

Thanks again Jan.

I wonder if this could be integrated with the nmg2 patch archive so you didn't need to keep jpg files on the server? I think the prf2 file format is mostly 4 pch2 structures in a wrapper.
Back to top
View user's profile Send private message
blue hell
Site Admin


Joined: Apr 03, 2004
Posts: 24079
Location: The Netherlands, Enschede
Audio files: 278
G2 patch files: 320

PostPosted: Thu Jan 08, 2015 2:50 am    Post subject: Reply with quote  Mark this post and the followings unread

Yes, you can tune it with the angle and strength paremeters, these could be under user control too.

I think it would be great for the site to have a patch viewer, and am willing to put some work in to help make that happen. So .. let me know what I can do please :-)

And thank you for the kind words Ian.

_________________
Jan
also .. could someone please turn down the thermostat a bit.
Posted Image, might have been reduced in size. Click Image to view fullscreen.
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Thu Jan 08, 2015 11:33 am    Post subject: Reply with quote  Mark this post and the followings unread

Excellent.

I'm back at work after the xmas break so probably a week or two for me to finish the missing controls etc.

The code is 100% client side so nothing required by the server except to host the html(x1)/js(x3) files. The js files would be cached on the client side most of the time.

Probably the least intrusive way to integrate would be a few lines of javascript on the site dom ready event that looked for download links to .pch2/.prf2 files and appended a small viewer icon that linked through to the viewer app when clicked. Alternatively, it could insert an iframe below the download box to show the patch inline.

Will pm you when I have the code ready.
Back to top
View user's profile Send private message
blue hell
Site Admin


Joined: Apr 03, 2004
Posts: 24079
Location: The Netherlands, Enschede
Audio files: 278
G2 patch files: 320

PostPosted: Thu Jan 08, 2015 11:53 am    Post subject: Reply with quote  Mark this post and the followings unread

Ok :-)
_________________
Jan
also .. could someone please turn down the thermostat a bit.
Posted Image, might have been reduced in size. Click Image to view fullscreen.
Back to top
View user's profile Send private message Visit poster's website
dorremifasol



Joined: Sep 28, 2006
Posts: 814
Location: Barcelona, Spain
Audio files: 7
G2 patch files: 49

PostPosted: Mon Jan 12, 2015 6:03 am    Post subject: Reply with quote  Mark this post and the followings unread

Woah, this is awesome Very Happy
_________________
Cheers,
Albert
Back to top
View user's profile Send private message Visit poster's website
blue hell
Site Admin


Joined: Apr 03, 2004
Posts: 24079
Location: The Netherlands, Enschede
Audio files: 278
G2 patch files: 320

PostPosted: Sun Jan 18, 2015 6:35 am    Post subject: Reply with quote  Mark this post and the followings unread

Ian sent me some code that I uploaded, and I made [see] links for the G2 archive, see http://electro-music.com/g2patches.php?owner=ian-s for instance.

It works here with firefox.

I could use some suggestions as to how to integrate this nicely ... got to warn though that the forum code is not easily modifiable everywhere, so probably there will be some compromises.

prf2 files come out a bit messy, not sure if those should be disabled from seeing.

_________________
Jan
also .. could someone please turn down the thermostat a bit.
Posted Image, might have been reduced in size. Click Image to view fullscreen.
Back to top
View user's profile Send private message Visit poster's website
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Sun Jan 18, 2015 10:44 am    Post subject: Reply with quote  Mark this post and the followings unread

Thanks Jan

I forgot to mention that I hadn't added the code to strip pch2 data out of a prf2 yet. The choose file option checks the file extension but the direct link does not. Will work on that tonight.

Also some things don't work too well on iPad, iOS Safari doesn't support rgba stops for gradients and I must have used innerHTML (not textContent) for the modules names as they are not visible. The auto-sizing of the background is also a little wrong.

I've only scratched the surface of the graphing functions, LFOB and LFOSHP are the only ones that function at the moment.
Back to top
View user's profile Send private message
ian-s



Joined: Apr 01, 2004
Posts: 2669
Location: Auckland, New Zealand
Audio files: 42
G2 patch files: 626

PostPosted: Tue Jan 27, 2015 9:13 pm    Post subject: Reply with quote  Mark this post and the followings unread

Thanks to Jan the app is now hosted and integrated with the electro-music site.

In the patch listing pages, Jan has included a direct link (see) that allows the prf2 or pch2 to be viewed.

Still a lot missing but the LFO and envelope graphs are working.

There is about a 10/1 difference in speed between FF and Chrome. FF undoubtedly does a higher quality render but Chrome is way faster.

You can find a link at the top of the app page that, if you drag it to your bookmarks bar, will allow viewing patches from the general g2 forum pages.

It works by doing a query on the forum page DOM and if it finds a G2 file download link, opens a new window to the viewer. If there is more than one link on a single page, it converts each paperclip icon to a clickable link to the viewer.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic Moderators: Nord Modular Editors
Page 1 of 1 [21 Posts]
View unread posts
View new posts in the last week
Mark the topic unread :: View previous topic :: View next topic
 Forum index » Clavia Nord Modular » Nord Modular G2 Discussion
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Forum with support of Syndicator RSS
Powered by phpBB © 2001, 2005 phpBB Group
Copyright © 2003 through 2009 by electro-music.com - Conditions Of Use