Fork me on GitHub
#clojure-art
<
2016-01-16
>
mathpunk22:01:55

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

mathpunk22:01:27

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

mathpunk22:01:20

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

eggsyntax22:01:02

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...

mathpunk22:01:00

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

mathpunk22:01:11

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

mathpunk22:01:08

@eggsyntax: I failed to tag you oops ^

eggsyntax22:01:49

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

eggsyntax22:01:44

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

eggsyntax22:01:59

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

eggsyntax22:01:26

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

eggsyntax22:01:36

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

eggsyntax22:01:57

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.

mathpunk22:01:47

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

mathpunk22:01:28

@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?

eggsyntax22:01:52

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.

eggsyntax22:01:50

@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

eggsyntax22:01:11

I’m a fan, though simple_smile

mathpunk22:01:27

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

eggsyntax22:01:19

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.

eggsyntax22:01:34

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.

mathpunk22:01:55

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.

eggsyntax22:01:15

Yeah, exactly.

eggsyntax22:01:07

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

eggsyntax22:01:07

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

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

eggsyntax22:01:19

(the vendor directory being in resources/public)

eggsyntax23:01:38

@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).