search

tmhglnd / total-serialism

Toolbox full of Algorithmic Composition methods
MIT License
151 stars 11 forks source link

Build this for importing with a script tag #2

Closed tatecarson closed 4 years ago

tatecarson commented 4 years ago

Hello,

Nice looking library. I was wondering if you could build a bundled version of this that could be used on codepen for teaching purposes. This would usually work but I realized that's just an access point to the other files.

tmhglnd commented 4 years ago

Good idea! Not sure when I will have the time to get into it though, but maybe someone else might have time as well hopefully!

tatecarson commented 4 years ago

I have been trying to get it to work with out the script tag, with parcel. I keep getting errors. Maybe you have an example of how it's imported and used in one of your projects? For example, this gives me strange errors: https://codesandbox.io/s/total-serialism-ynf2r

Any ideas?

tmhglnd commented 4 years ago

I am doing exactly as you are, but am not working in the browser. So it seems that some of my JS coding may not be browser-compatible. I just did a small test with transpiling a small piece of my code to browser-compatible JS and this made the function work. So I will dive deeper into it and see how I can transpile everything quick and easily and or make a bundled version! I'll keep you posted and thanks for your message.

tmhglnd commented 4 years ago

I have created a bundled version for es5 under /build/ts.es5.js. It is available as well through the unpkg:

or for ES5

or a minified version

I tested it working in your codesandbox by adding the dependency total-serialism@1.6.5. You can include all the modules like so:

// all the modules
var Srl = require("total-serialism/build/ts.es5.min.js");

// a specific subset of Srl
var Gen = Srl.Generative;
var Algo = Srl.Algorithmic;
var Mod = Srl.Transform;
var Rand = Srl.Stochastic;
var TrLt = Srl.Translate;
var Util = Srl.Utility;

Test:

console.log(Gen.spread(5, 36, 48));
//=> [36, 38, 40, 43, 45]

console.log(Algo.euclid(8, 5));
//=> [1, 0, 1, 1, 0, 1, 1, 0]

console.log(Mod.palindrome([0, 7, 12, 3]));
//=> [0, 7, 12, 3, 3, 12, 7, 0]

Rand.seed(6323)
console.log(Rand.dice(6))
//=> [1, 5, 6, 3, 3, 3]

console.log(TrLt.noteToMidi(['c4', 'eb4', 'g4']));
//=> [60, 63, 67]

console.log(Util.add([36, 48, 60], 1));
//=> [37, 49, 61]

Include in a webpage like so:

<script src="https://unpkg.com/total-serialism@1.6.7/build/ts.es5.min.js"></script>

var Gen = TotalSerialism.Generative;
//etc.

I have to look into what will be the best way to make this available for import as a default entry point when installing the npm package for use in the browser, but I'm also not entirely sure how this will effect the projects that are currently using the non-es5 code. But for now this should do the trick!