Perception: The target 🎯

A simulation of how you perceive a dartboard given what time it is in the pub.

Log in to post a comment.

// Forked from "The target 🎯" by Jurgen
// https://turtletoy.net/turtle/1a0f6e9939

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(-.7);

//ratio for plotting on turtletoy
const ratio = .4;

const timeInPub = 0; //min=0 max=9 step=1 (19h00, 20h00, 21h00, 22h00, 23h00, 00h00, 01h00, 02h00, 03h00, 04h00)
const xSimplexZoom = .01;
const ySimplexZoom = .01 + (timeInPub > 4? .01 * (timeInPub - 5) / 9: 0);
const magnitude = 8 * timeInPub / 9;


//official dartboard sizes in mm
let fullRadius = 225.5;
let scoreRadius = 170;
let bull = 16;
let bullsEye = 6.35;
let innerScoreRadius = 107;
let doubleTripple = 8;

// Global code will be evaluated once.
const turtle = new Turtle();
const noiseXY = [new SimplexNoise((Math.random() * 100) | 0), new SimplexNoise((Math.random() * 100) | 0)];
const polygons = new Polygons();
const text = new Text();
const slowbro = Slowbro();
slowbro.radians();
slowbro.thickness = 10 * ratio;


let colors = {
    //angle, distance
    white: [1.2, .13],
    black: [2.5, 999],
    green: [.8, .3],
    red: [1.7, .5],
    clear: [0, .05]
};

// The walk function will be called until it returns false.
function walk(i) {
    for(let j = 0; j < 20; j++) {
        let a = (Math.PI / 20) + (j * Math.PI / 10);
        let b = (Math.PI / 20) + ((j + 1) * Math.PI / 10);

        let doubles = getPolygon((scoreRadius - doubleTripple) * ratio, scoreRadius * ratio, a, b);
        doubles.addHatching(...colors[j % 2 == 1? 'red':'green']);
        polygons.draw(turtle, doubles, true);

        let triples = getPolygon((innerScoreRadius - doubleTripple) * ratio, innerScoreRadius * ratio, a, b);
        triples.addHatching(...colors[j % 2 == 1? 'red':'green']);
        polygons.draw(turtle, triples, true);

        let p = getPolygon(bull * ratio, scoreRadius * ratio, a, b);
        p.addHatching(...colors[j % 2 == 1? 'black':'white']);
        polygons.draw(turtle, p, true);
    };
    
    for(let [index, r] of [
        [bullsEye * ratio, colors.red],
        [bull * ratio, colors.green],
        [fullRadius * ratio, colors.black],
        [Math.sqrt(40000), colors.clear]
    ].entries()) {
        let pts = [];
        let pi2 = Math.PI * 2;
        let incr = 1 / r[0];
        for(let a = 0; a <= pi2; a += incr) {
            pts.push([Math.sin(a) * r[0], Math.cos(a) * r[0]]);
        }
        let p = polygons.create();
        p.addPoints(...pts.map(pt => warp(pt)));
        p.addOutline();
        p.addHatching(...r[1]);
        polygons.draw(turtle, p, true);
    }
    
    let scores = [11, 14, 9, 12, 5, 20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8];
    let textRadius = (-fullRadius * ratio) * .9;
    let twoDigitOffset = (-fullRadius * ratio) * .09;
    for(let i = 0; i < scores.length; i++) {
        let a = i * Math.PI * 2 / scores.length;
        let x = Math.cos(a) * textRadius;
        let y = Math.sin(a) * textRadius;

        let textFlipped =  a <= Math.PI? -1: 1;
        let textDirection = a + ((Math.PI / 2 ) * textFlipped);
        let digitOffset = twoDigitOffset / (scores[i] > 9? 1: 2);
        let xOffset = Math.sin(a) * digitOffset * textFlipped;
        let yOffset = Math.cos(a) * digitOffset * -textFlipped;
        write(x - xOffset, y - yOffset, '' + scores[i], ratio, textDirection);
    }
    
    return false;
}


function getPolygon(rInner, rOuter, a, b) {
    function add2(a, b) { return [a[0]+b[0], a[1]+b[1]]; }
    function sub2(a, b) { return [a[0]-b[0], a[1]-b[1]]; }
    function scale2(a, s) { return [a[0]*s, a[1]*s]; }
    
    let params = [30, [Math.sin(a) * rInner, Math.cos(a) * -rInner], [Math.sin(a) * rOuter, Math.cos(a) * -rOuter]];
    let points = Array.from({length: params[0]}).map((v, i, a) => add2(params[1], scale2(sub2(params[2], params[1]), i/(a.length - 1))));

    let tenthPi = Math.PI / 10;
    let incr = 1 / rOuter;
    for(let z = 0; z < tenthPi; z += incr) {
        points.push([Math.sin(a + z) * rOuter, Math.cos(a + z) * -rOuter]);
    }
    

    params = [30, [Math.sin(b) * rOuter, Math.cos(b) * -rOuter], [Math.sin(b) * rInner, Math.cos(b) * -rInner]];
    
    Array.from({length: params[0]}).map((v, i, a) => add2(params[1], scale2(sub2(params[2], params[1]), i/(a.length - 1)))).forEach(pt => 
        points.push(pt)
    )
/*    points.push(
        [Math.sin(b) * rOuter, Math.cos(b) * -rOuter],
        [Math.sin(b) * rInner, Math.cos(b) * -rInner]
    );
*/
    incr = 1 / rInner;
    for(let z = 0; z < tenthPi; z += incr) {
        points.push([Math.sin(b - z) * rInner, Math.cos(b - z) * -rInner]);
    }

    let p = polygons.create();
    p.addPoints(...points.map(pt => warp(pt)));

    p.addOutline();
    
    return p;
}

function write(x, y, txt, scale, heading) {
    let h = slowbro.h();
    slowbro.seth(heading);
    slowbro.jump(x, y);
    text.print(slowbro, txt, scale); 
    slowbro.seth(h);
}

////////////////////////////////////////////////////////////////
// Polygon Clipping utility code - Created by Reinder Nijhoff 2019
// (Polygon binning by Lionel Lemarie 2021)
// https://turtletoy.net/turtle/a5befa1f8d
////////////////////////////////////////////////////////////////
function Polygons(){const t=[],s=25,e=Array.from({length:s**2},t=>[]),n=class{constructor(){this.cp=[],this.dp=[],this.aabb=[]}addPoints(...t){let s=1e5,e=-1e5,n=1e5,h=-1e5;(this.cp=[...this.cp,...t]).forEach(t=>{s=Math.min(s,t[0]),e=Math.max(e,t[0]),n=Math.min(n,t[1]),h=Math.max(h,t[1])}),this.aabb=[s,n,e,h]}addSegments(...t){t.forEach(t=>this.dp.push(t))}addOutline(){for(let t=0,s=this.cp.length;t<s;t++)this.dp.push(this.cp[t],this.cp[(t+1)%s])}draw(t){for(let s=0,e=this.dp.length;s<e;s+=2)t.jump(this.dp[s]),t.goto(this.dp[s+1])}addHatching(t,s){const e=new n;e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]);const h=Math.sin(t)*s,o=Math.cos(t)*s,a=200*Math.sin(t),i=200*Math.cos(t);for(let t=.5;t<150/s;t++)e.dp.push([h*t+i,o*t-a],[h*t-i,o*t+a]),e.dp.push([-h*t+i,-o*t-a],[-h*t-i,-o*t+a]);e.boolean(this,!1),this.dp=[...this.dp,...e.dp]}inside(t){let s=0;for(let e=0,n=this.cp.length;e<n;e++)this.segment_intersect(t,[.1,-1e3],this.cp[e],this.cp[(e+1)%n])&&s++;return 1&s}boolean(t,s=!0){const e=[];for(let n=0,h=this.dp.length;n<h;n+=2){const h=this.dp[n],o=this.dp[n+1],a=[];for(let s=0,e=t.cp.length;s<e;s++){const n=this.segment_intersect(h,o,t.cp[s],t.cp[(s+1)%e]);!1!==n&&a.push(n)}if(0===a.length)s===!t.inside(h)&&e.push(h,o);else{a.push(h,o);const n=o[0]-h[0],i=o[1]-h[1];a.sort((t,s)=>(t[0]-h[0])*n+(t[1]-h[1])*i-(s[0]-h[0])*n-(s[1]-h[1])*i);for(let n=0;n<a.length-1;n++)(a[n][0]-a[n+1][0])**2+(a[n][1]-a[n+1][1])**2>=.001&&s===!t.inside([(a[n][0]+a[n+1][0])/2,(a[n][1]+a[n+1][1])/2])&&e.push(a[n],a[n+1])}}return(this.dp=e).length>0}segment_intersect(t,s,e,n){const h=(n[1]-e[1])*(s[0]-t[0])-(n[0]-e[0])*(s[1]-t[1]);if(0===h)return!1;const o=((n[0]-e[0])*(t[1]-e[1])-(n[1]-e[1])*(t[0]-e[0]))/h,a=((s[0]-t[0])*(t[1]-e[1])-(s[1]-t[1])*(t[0]-e[0]))/h;return o>=0&&o<=1&&a>=0&&a<=1&&[t[0]+o*(s[0]-t[0]),t[1]+o*(s[1]-t[1])]}};return{list:()=>t,create:()=>new n,draw:(n,h,o=!0)=>{reducedPolygonList=function(n){const h={},o=200/s;for(var a=0;a<s;a++){const c=a*o-100,r=[0,c,200,c+o];if(!(n[3]<r[1]||n[1]>r[3]))for(var i=0;i<s;i++){const c=i*o-100;r[0]=c,r[2]=c+o,n[0]>r[2]||n[2]<r[0]||e[i+a*s].forEach(s=>{const e=t[s];n[3]<e.aabb[1]||n[1]>e.aabb[3]||n[0]>e.aabb[2]||n[2]<e.aabb[0]||(h[s]=1)})}}return Array.from(Object.keys(h),s=>t[s])}(h.aabb);for(let t=0;t<reducedPolygonList.length&&h.boolean(reducedPolygonList[t]);t++);h.draw(n),o&&function(n){t.push(n);const h=t.length-1,o=200/s;e.forEach((t,e)=>{const a=e%s*o-100,i=(e/s|0)*o-100,c=[a,i,a+o,i+o];c[3]<n.aabb[1]||c[1]>n.aabb[3]||c[0]>n.aabb[2]||c[2]<n.aabb[0]||t.push(h)})}(h)}}}

////////////////////////////////////////////////////////////////
// Text utility code. Created by Reinder Nijhoff 2019
// https://turtletoy.net/turtle/1713ddbe99
// Jurgen 2021: Fixed Text.print() to restore turtle._fullCircle
//.             if was in e.g. degrees mode (or any other)
////////////////////////////////////////////////////////////////
function Text() {
    class Text {
        print (t, str, scale = 1, italic = 0, kerning = 1) {
            let fc = t._fullCircle;
            t.radians();
            let pos = [t.x(), t.y()], h = t.h(), o = pos;
            str.split('').map(c => {
                const i = c.charCodeAt(0) - 32;
                if (i < 0 ) {
                    pos = o = this.rotAdd([0, 48*scale], o, h);
                } else if (i > 96 ) {
                    pos = this.rotAdd([16*scale, 0], o, h);
                } else {
                    const d = dat[i], lt = d[0]*scale, rt = d[1]*scale, paths = d[2];
                    paths.map( p => {
                        t.up();
                    	p.map( s=> {
                        	t.goto(this.rotAdd([(s[0]-s[1]*italic)*scale - lt, s[1]*scale], pos, h));
                        	t.down();
                        });
                    });
                    pos = this.rotAdd([(rt - lt)*kerning, 0], pos, h);
                }
            });
            t._fullCircle = fc;
        }
        rotAdd (a, b, h) {
            return [Math.cos(h)*a[0] - Math.sin(h)*a[1] + b[0], 
                    Math.cos(h)*a[1] + Math.sin(h)*a[0] + b[1]];
        }
    }
    
const dat = ('br>eoj^jl<jqirjskrjq>brf^fe<n^ne>`ukZdz<qZjz<dgrg<cmqm>`thZhw<lZlw<qao_l^h^e_caccdeefg'+
'gmiojpkqmqporlshsercp>^vs^as<f^h`hbgdeeceacaab_d^f^h_k`n`q_s^<olmmlolqnspsrrspsnqlol>]wtgtfsereqfph'+
'nmlpjrhsdsbraq`o`makbjifjekckaj_h^f_eaecffhimporqssstrtq>eoj`i_j^k_kajcid>cqnZl\\j_hcghglhqjulxnz>c'+
'qfZh\\j_lcmhmllqjuhxfz>brjdjp<egom<ogem>]wjajs<ajsj>fnkojpiojnkokqis>]wajsj>fnjniojpkojn>_usZaz>`ti'+
'^f_dbcgcjdofrisksnrpoqjqgpbn_k^i^>`tfbhak^ks>`tdcdbe`f_h^l^n_o`pbpdofmicsqs>`te^p^jfmfogphqkqmppnrk'+
'shserdqco>`tm^clrl<m^ms>`to^e^dgefhekenfphqkqmppnrkshserdqco>`tpao_l^j^g_ebdgdlepgrjsksnrppqmqlping'+
'kfjfggeidl>`tq^gs<c^q^>`th^e_dadceegfkgnhpjqlqopqorlshserdqcocldjfhigmfoepcpao_l^h^>`tpeohmjjkikfjd'+
'hcecddaf_i^j^m_oapepjoomrjshserdp>fnjgihjikhjg<jniojpkojn>fnjgihjikhjg<kojpiojnkokqis>^vrabjrs>]wag'+
'sg<amsm>^vbarjbs>asdcdbe`f_h^l^n_o`pbpdofngjijl<jqirjskrjq>]xofndlcicgdfeehekfmhnknmmnk<icgefhfkgmh'+
'n<ocnknmpnrntluiugtdsbq`o_l^i^f_d`bbad`g`jambodqfrislsorqqrp<pcokompn>asj^bs<j^rs<elol>_tc^cs<c^l^o'+
'_p`qbqdpfoglh<chlhoipjqlqopqorlscs>`urcqao_m^i^g_eadccfckdnepgrismsorqprn>_tc^cs<c^j^m_oapcqfqkpnop'+
'mrjscs>`sd^ds<d^q^<dhlh<dsqs>`rd^ds<d^q^<dhlh>`urcqao_m^i^g_eadccfckdnepgrismsorqprnrk<mkrk>_uc^cs<'+
'q^qs<chqh>fnj^js>brn^nnmqlrjshsfreqdndl>_tc^cs<q^cl<hgqs>`qd^ds<dsps>^vb^bs<b^js<r^js<r^rs>_uc^cs<c'+
'^qs<q^qs>_uh^f_daccbfbkcndpfrhslsnrppqnrkrfqcpan_l^h^>_tc^cs<c^l^o_p`qbqepgohlici>_uh^f_daccbfbkcnd'+
'pfrhslsnrppqnrkrfqcpan_l^h^<koqu>_tc^cs<c^l^o_p`qbqdpfoglhch<jhqs>`tqao_l^h^e_caccdeefggmiojpkqmqpo'+
'rlshsercp>brj^js<c^q^>_uc^cmdpfrisksnrppqmq^>asb^js<r^js>^v`^es<j^es<j^os<t^os>`tc^qs<q^cs>asb^jhjs'+
'<r^jh>`tq^cs<c^q^<csqs>cqgZgz<hZhz<gZnZ<gznz>cqc^qv>cqlZlz<mZmz<fZmZ<fzmz>brj\\bj<j\\rj>asazsz>fnkc'+
'ieigjhkgjfig>atpeps<phnfleiegfehdkdmepgrislsnrpp>`sd^ds<dhffhekemfohpkpmopmrkshsfrdp>asphnfleiegfeh'+
'dkdmepgrislsnrpp>atp^ps<phnfleiegfehdkdmepgrislsnrpp>asdkpkpiognfleiegfehdkdmepgrislsnrpp>eqo^m^k_j'+
'bjs<gene>atpepuoxnylzizgy<phnfleiegfehdkdmepgrislsnrpp>ate^es<eihfjemeofpips>fni^j_k^j]i^<jejs>eoj^'+
'k_l^k]j^<kekvjyhzfz>are^es<oeeo<ikps>fnj^js>[y_e_s<_ibfdegeifjijs<jimfoeretfuius>ateees<eihfjemeofp'+
'ips>atiegfehdkdmepgrislsnrppqmqkphnfleie>`sdedz<dhffhekemfohpkpmopmrkshsfrdp>atpepz<phnfleiegfehdkd'+
'mepgrislsnrpp>cpgegs<gkhhjfleoe>bsphofleieffehfjhkmlompopporlsisfrep>eqj^jokrmsos<gene>ateeeofrhsks'+
'mrpo<peps>brdejs<pejs>_ubefs<jefs<jens<rens>bseeps<pees>brdejs<pejshwfydzcz>bspees<eepe<esps>cqlZj['+
'i\\h^h`ibjckekgii<j[i]i_jakbldlfkhgjkllnlpkrjsiuiwjy<ikkmkojqirhthvixjylz>fnjZjz>cqhZj[k\\l^l`kbjci'+
'eigki<j[k]k_jaibhdhfihmjilhnhpirjskukwjy<kkimiojqkrltlvkxjyhz>^vamakbhdgfghhlknlplrksi<akbidhfhhill'+
'nmpmrlsisg>brb^bscsc^d^dsese^f^fsgsg^h^hsisi^j^jsksk^l^lsmsm^n^nsoso^p^psqsq^r^rs').split('>').map(
    r=> { return [r.charCodeAt(0)-106,r.charCodeAt(1)-106, r.substr(2).split('<').map(a => {const ret 
    = []; for (let i=0; i<a.length; i+=2) {ret.push(a.substr(i, 2).split('').map(b => b.charCodeAt(0)
    -106));} return ret; })]; });

    return new Text();
}

////////////////////////////////////////////////////////////////
// Slowbro utility code. Created by Lionel Lemarie 2021
// Based on Slowpoke by Reinder, which removes most duplicate
// lines Slowbro adds optional thickness to the lines
////////////////////////////////////////////////////////////////
function Slowbro(x, y) {
    const linesDrawn = {};
    class Slowbro extends Turtle {
        constructor(x, y) {
        	super(x, y);
        	this.thickness = 1; this.offset = 0.2;
			this.slowpoke_skip = this.slowpoke_draw = 0;
        }
        goto(xx, yy) {
            if (Array.isArray(xx)) { yy = xx[1]; xx = xx[0]; }
            const pt = warp([xx, yy]);
            x = pt[0];
            y = pt[1];
            const ox = this.x(), oy = this.y();
            if (this.isdown()) {
                const p = [x, y], o = [ox, oy];
                const h1 = o[0].toFixed(2) + '_' + p[0].toFixed(2) + o[1].toFixed(2) + '_' + p[1].toFixed(2);
                const h2 = p[0].toFixed(2) + '_' + o[0].toFixed(2) + p[1].toFixed(2) + '_' + o[1].toFixed(2);
                if (linesDrawn[h1] || linesDrawn[h2]) {
                    super.up(); super.goto(p); super.down();
                    this.slowpoke_skip++;
                    return;
                }
                linesDrawn[h1] = linesDrawn[h2] = true;
                this.slowpoke_draw++;

            	for (var dx = this.thickness-1; dx >=0 ; dx--) {
            		for (var dy = this.thickness-1; dy >= 0; dy--) {
            			if (!dx && !dy) continue;
            			super.goto( x + dx * this.offset,  y + dy * this.offset);
            			super.goto(ox + dx * this.offset, oy + dy * this.offset);
            		}
            	}
            } 
            super.goto(x, y);
        }
    }
    return new Slowbro(x, y);
}


////////////////////////////////////////////////////////////////
// Simplex Noise utility code. Created by Reinder Nijhoff 2020
// https://turtletoy.net/turtle/6e4e06d42e
// Based on: http://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
////////////////////////////////////////////////////////////////
function SimplexNoise(seed = 1) {const grad = [  [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],[1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],[0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1] ];const perm = new Uint8Array(512);const F2 = (Math.sqrt(3) - 1) / 2, F3 = 1/3;const G2 = (3 - Math.sqrt(3)) / 6, G3 = 1/6;const dot2 = (a, b) => a[0] * b[0] + a[1] * b[1];const sub2 = (a, b) => [a[0] - b[0], a[1] - b[1]];const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];const sub3 = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];class SimplexNoise {constructor(seed = 1) {for (let i = 0; i < 512; i++) {perm[i] = i & 255;}for (let i = 0; i < 255; i++) {const r = (seed = this.hash(i+seed)) % (256 - i)  + i;const swp = perm[i];perm[i + 256] = perm[i] = perm[r];perm[r + 256] = perm[r] = swp;}}noise2D(p) {const s = dot2(p, [F2, F2]);const c = [Math.floor(p[0] + s), Math.floor(p[1] + s)];const i = c[0] & 255, j = c[1] & 255;const t = dot2(c, [G2, G2]);const p0 = sub2(p, sub2(c, [t, t]));const o  = p0[0] > p0[1] ? [1, 0] : [0, 1];const p1 = sub2(sub2(p0, o), [-G2, -G2]);const p2 = sub2(p0, [1-2*G2, 1-2*G2]);let n =  Math.max(0, 0.5-dot2(p0, p0))**4 * dot2(grad[perm[i+perm[j]] % 12], p0);n += Math.max(0, 0.5-dot2(p1, p1))**4 * dot2(grad[perm[i+o[0]+perm[j+o[1]]] % 12], p1);n += Math.max(0, 0.5-dot2(p2, p2))**4 * dot2(grad[perm[i+1+perm[j+1]] % 12], p2);return 70 * n;}hash(i) {i = 1103515245 * ((i >> 1) ^ i);const h32 = 1103515245 * (i ^ (i>>3));return h32 ^ (h32 >> 16);}}return new SimplexNoise(seed);}

function warp(pt) { function add2(a, b) { return [a[0]+b[0], a[1]+b[1]]; }function scale2(a, s) { return [a[0]*s,a[1]*s]; }return add2(pt, scale2([noiseXY[0].noise2D(scale2(pt, xSimplexZoom)), noiseXY[1].noise2D(scale2(pt, ySimplexZoom))], magnitude));}