Skip to content

Instantly share code, notes, and snippets.

View shamansir's full-sized avatar
💭
Noodling

Ulric Wilfred shamansir

💭
Noodling
View GitHub Profile
@shamansir
shamansir / index.html
Created February 2, 2017 22:01
Use RPD from node_modules
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Core with Network</title>
<!-- gulp html-head ==style quartz ==io json ==renderer svg ==toolkit util ==root .. -->
<!-- Built with RPD v2.0.0 <http://shamansir.github.io/rpd> -->
@shamansir
shamansir / Whatever.elm
Last active December 13, 2017 13:37
Elm v0.18 ports with headless program (send value to JS once)
port module NodeRepl21 exposing (..)
import Html exposing (Html, div, text, span)
import Html
import Dict
import Platform exposing (..)
import Json.Decode
f_o_o_b_a_r_122 = (div [] [])
f_o_o_b_a_r_123 = (div [])
f_o_o_b_a_r_124 = (Html.a)
@shamansir
shamansir / draw_svg.js
Last active December 31, 2024 05:08
draw SVG path on canvas
// take SVG commands and draw this path to HTML5 canvas
// commandList should look like that: [ { marker: "M", values: [ 10, 10 ] },
// { marker: "l", values: [ 5, 7 ] },
// { marker: "C", values: [ -5, 7.2, .3, -16, 24, 10 ] },
// . . .
// { marker: "z", values: [ ] } ]
// there's another gist which has the code to parse SVG paths:
// https://gist.github.com/shamansir/0ba30dc262d54d04cd7f79e03b281505
@shamansir
shamansir / _.js
Last active March 3, 2025 02:02
Parse and convert any SVG path to the list of commands with JavaScript + Regular Expressions
// svgPathToCommands('M10,10 l 5,7 C-5,7.2,.3-16,24,10 z');
//
// produces:
//
// [ { marker: "M", values: [ 10, 10 ] },
// { marker: "l", values: [ 5, 7 ] },
// { marker: "C", values: [ -5, 7.2, 0.3, -16, 24, 10 ] },
// { marker: "z", values: [ ] } ]
//
// commandsToSvgPath(svgPathToCommands('M10,10 l 5,7 C-5,7.2,.3-16,24,10 z'))
@shamansir
shamansir / rrect.js
Last active August 29, 2015 14:28
SVG generate partially rounded rectangle path
// based on http://bl.ocks.org/mbostock/3468167
function roundedRect(x, y, width, height, rtl, rtr, rbr, rbl) {
return "M" + x + "," + y
+ (rtl ? ("v" + rtl
+ "a" + rtl + "," + rtl + " 0 0 1 " + rtl + "," + -rtl) : "")
+ "h" + (width - (rtl ? rtl : 0) - (rtr ? rtr : 0))
+ (rtr ? ("a" + rtr + "," + rtr + " 0 0 1 " + rtr + "," + rtr) : "")
+ "v" + (height - (rtr ? rtr : 0) - (rbr ? rbr : 0))
+ (rbr ? ("a" + rbr + "," + rbr + " 0 0 1 " + -rbr + "," + rbr) : "")
// allows to check if the spy was called with specified arguments in exact order,
// like:
// ```
// var spy = createSpy('foo');
// spy('a', { prop: 'foo' });
// spy('b', { prop: 'bar' });
// spy('c', { prop: 'baz' });
// spy('d', { prop: 'fuz' });
// expect(spy).toHaveBeenCalledInOrder() {[
@shamansir
shamansir / _.md
Last active August 29, 2015 14:18
Tributary inlet
@shamansir
shamansir / spread.js
Last active August 29, 2015 14:15
Spread-Repeat
function numIter(max) {
return function(signal) {
if (signal) {
var value = 0;
return signal.takeWhile(function() { return value < max; })
.map(function() { console.log('iter('+max+')', value); return value++; })
} else {
return Kefir.fromBinder(function(emitter) {
var value = 0;
@shamansir
shamansir / progress.js
Created February 10, 2015 09:47
monitor html5 audio loading progress
// source: http://jspro.brothercake.com/media-events/progress.html
// article: http://www.sitepoint.com/essential-audio-and-video-events-for-html5/
(function()
{
//create a new video element with "auto" preload and native "controls"
var media = document.body.appendChild(document.createElement('video'));
media.setAttribute('preload', 'auto');
@shamansir
shamansir / _toolkit.js
Last active August 29, 2015 14:14
RPD Toolkit example
Rpd.channeltype('pd/t-num', {
show: function(t_num) { return t_num ? t_num.value : '?'; }
});
Rpd.channeltype('pd/spinner', {
adapt: function(val) {
return { value: val, time: Date.now() };
}
});