clojure-art

mathpunk 2016-01-16T22:07:55.000182Z

I would like to make SVG with ClojureScript. The end goal is generative vector art, so that I can cut vinyl as a mask for doing sandblasting. I thought maybe I should be using Snap.svg but it has no extern on cljsjs and despite the tutorials I'm having trouble understanding how to make and include externs

mathpunk 2016-01-16T22:08:27.000183Z

I am not a web developer, I'm a mathematician -- functions I get, JavaScript not so much

mathpunk 2016-01-16T22:09:20.000184Z

Perhaps my idea is folly? For now I figure I'll poke around the http://thi.ng libraries and see if anything jumps out...

eggsyntax 2016-01-16T22:12:02.000185Z

Externs are kind of a pain in the ass, unfortunately, especially the first time you have to deal with them. If you decide you want to go that route, I can point you to a couple of resources that finally helped them click for me. But for your main question, I’ll leave it to folks who have actually done vector stuff in SVG...

mathpunk 2016-01-16T22:14:00.000186Z

I'd love to read those. I mean, I don't mean to have a poor attitude but I've observed that (1) JavaScript runs everywhere and (2) seems to make a lot of people very angry so

mathpunk 2016-01-16T22:14:11.000187Z

Closing over JavaScript seems like a good thing to know how to do

mathpunk 2016-01-16T22:17:08.000188Z

@eggsyntax: I failed to tag you oops ^

eggsyntax 2016-01-16T22:25:49.000189Z

Oh, sure. The LispCast page on it is good: http://www.lispcast.com/clojurescript-externs

eggsyntax 2016-01-16T22:26:44.000191Z

Luke Vanderhart’s page about it is well-written, goes into more depth, and makes a great reference: http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html

eggsyntax 2016-01-16T22:27:59.000192Z

And Rafal Spacjer’s page isn’t just about externs, but does a great job covering all the cljs/js interop gotchas.

eggsyntax 2016-01-16T22:28:01.000193Z

@mathpunk:

eggsyntax 2016-01-16T22:29:26.000194Z

And looking at a few examples is really useful. Here’s the one I recently did for MathBox: https://github.com/cljsjs/packages/blob/master/mathbox/resources/cljsjs/mathbox/common/mathbox.ext.js

eggsyntax 2016-01-16T22:29:36.000196Z

(and all the cljsjs ones are in that same repo)

eggsyntax 2016-01-16T22:32:57.000197Z

Once you get your head around it (and it’s really much simpler in practice than it seems like when you first encounter it) the large majority of the work is just identifying every function and variable in the JS lib that you want to reference from cljs.

mathpunk 2016-01-16T22:38:47.000198Z

zomg you did mathbox?! Eeeexcellent. I saw that last year and was like o_O

mathpunk 2016-01-16T22:45:28.000199Z

@eggsyntax: I'm assuming you did not just go through the JS lib with a text editor for the deletion of the non-name parts?

eggsyntax 2016-01-16T22:47:52.000200Z

Along with some ad-hoc regex substitution, yeah. There are a lein plugin or two that can theoretically do it for you; I didn’t have much luck with them, so it seemed fastest to just do it manually. The MathBox code is a bit messy; I might have had better results with something better-organized.

eggsyntax 2016-01-16T22:48:50.000201Z

@mathpunk: I had nothing to do with writing MathBox itself — just did an externs file & then wrote the cljs-mathbox wrapper for it. 2-3 orders of magnitude less awesome :simple_smile:

eggsyntax 2016-01-16T22:49:11.000202Z

I’m a fan, though :simple_smile:

mathpunk 2016-01-16T22:49:27.000203Z

nono, I got you -- I'm just so excited there's cljsjs for mathbox because it blew my mind when i saw it

eggsyntax 2016-01-16T22:50:19.000204Z

Yeah, when I first encountered it, I was immediately psyched to use it :simple_smile:. Incorporated it into the project I was working on, and then just extracted cljs-mathbox from that.

eggsyntax 2016-01-16T22:51:34.000205Z

Oh, that reminds me, I meant to say: in case you hadn’t run across this factoid, there’s no need to write an externs file until you want to use Google Closure’s advanced compilation, so it’s easy to play with a JS lib for a while without incurring that effort.

mathpunk 2016-01-16T22:52:55.000206Z

Mmmm. Okay. Mind you that's something I need to figure out as well. I hypothesize one has the JS lib locally, and then there's a key in your project.clj naming the location. I will attempt to do this after lunch.

eggsyntax 2016-01-16T22:53:15.000207Z

Yeah, exactly.

eggsyntax 2016-01-16T22:54:07.000208Z

The simplest thing is just to import it from your HTML. Hmm, lemme check the syntax.

eggsyntax 2016-01-16T22:56:07.000209Z

For MathBox (before cljs-mathbox et al) I just did:

<script type="text/javascript" charset="utf-8" src="../vendor/MathBox-bundle.js"></script>

eggsyntax 2016-01-16T22:57:19.000210Z

(the vendor directory being in resources/public)

eggsyntax 2016-01-16T23:01:38.000211Z

@mathpunk: and then the top-level functions etc in the JS source file are available everywhere in cljs within the magic js namespace (discussed in that Spacjer blog post IIRC).