Writing a Atom editor plugin, animated syntax coloring

Question

I am in for a little experiment, I just need someone to guide me..

I want to make my own custom syntax coloring (for Javascript), and that needs to be animated.

Big plus would be (if it is possible) is posibility of using shader-language for fonts animating (fragment shader). Is such thing possible in Atom?

EXAMPLES:

Well two ideas are 'event based' animations and 'persistent-animation'.

Event based:

Imagine you are writing Javascript, and when you write 'function', it doesn't directly colorize, but slowly fade into it's color.

Example code:

keyword('function').on('creation', function(keywordAnimableObject) {

 keywordAnimableObject.fromTo ({opacity:0, color:rgb(0,0,0)}, {opacity:1, color:rgb(1,1,0) });

});

Persistent based:

Every keyword or symbol (if, else &&, function, (), {}, commas and so on), would have it's own frequency. Let's say 'function' would have frequency of 0.5Hz, if else would have 0.25Hz ... and so own.

This frequency would modify the keywords color 'hue' for example.

keyword('function').on('idle', function(keywordAnimableObject, time) {

 var baseColor = rgb(1,1,0);

 var frequency = 0.5;

 var currColor = hueShiftBy(baseColor, Math.sin(time*2*PI*frequency);

 keywordAnimableObject.set({ color: currColor });

});

Also, if shaders would be possible, every keyword would have subtle animated pattern.

Now imagine if you have error somewhere, frequency would be higher, for example 1.5Hz and more 'annoying'.

allKeywords().on('notDeclared', function(keywordAnimableObject, time) {

 var baseColor = Color.red;

 var frequency = 1.5;

 var currColor = hueShiftBy(baseColor, Math.sin(time*2*PI*frequency);

 keywordAnimableObject.set({ color: currColor });

});

Ok, I realize this could be fucking annoying but I think it is worth experimenting with :). Not just for animating but really making beautiful syntax styling not just coloring..

Answer 1

I believe you can achieve most of the things in your examples through plain css. But you'll have to take into consideration many things that could go wrong with both approaches (CSS and JS)

If you go the JS route, you have two way of handling things:

• The first and, IMO, cleaner way to do that is to register to the tokens related events on the editor to be notified when keywords like function are matched. At that point you do not have a reference to a DOM element yet, and you may not get one at all if the token is created for an off-screen part of the current buffer (only lines visible in the pane area are actually present in the DOM). However, if you can retrieve a DOM element for the token you'll be able to do whatever you want with it.
• The second option is to use a mutation observer to track changes in the editor view and matches the elements that correspond to what you want animate (for that you'll need to know the classes applied to the elements). Performance-wise this approach is a show-stopper, mutation observers are not really cheap and every DOM-related operation are generally slow by comparison with dealing with plain JS objects.

If you go the CSS route, things get much more simpler:

Build or generate css animation for the visual effects you want to use and affect them to the selector of the tokens you want to match. For instance, to set an animation for the function keyword in JS files use something like this:

.editor .source.js .function {
  animation: blink 0.4s; // where blink is css animation defined beforehand
}

You can use linear or looping animations, css states (:hover for instance) and everything available in CSS. And you shouldn't have to worry too much about the life cycle of the targeted elements as Atom is already limiting the render of the buffer to the lines visible in the editor view.

As for your last point about shaders, there are CSS filters available in Chrome (and so in Atom), these filters can be somewhat customized using SVG filters, but being not really familiar with those features I can't say how difficult it is to use them. Regarding custom shaders, AFAIK the support was dropped in Chrome due to many issues with performances and hit test of altered elements.