DNA

Strands of deoxyribonucleic acid. Loosely based on a vague memory of a stylized drawing. Accurate within a 100% margin of error.
Export to GIF for the animated version.

Log in to post a comment.

// LL 2021

const precision = 30; // min=2 max=100 step=1
const thickness = 3; // min=1 max=3 step=1
const preview = 0; // min=0 max=1 step=1 (No,Yes)
const seed = 0; // min=0 max=100 step=1

// TODO:
// Performance: Spacial partitioning for line to segment intersection
// Experiment: Do hidden line ellimination at draw time instead of load time
// Quality: Only fill gaps for dangling points of adjacent segments


Canvas.setpenopacity(1);
const turtle = new Turtle();

var outliner;

function rotX(x, y, a) { return Math.cos(a) * x - Math.sin(a) * y; }
function rotY(x, y, a) { return Math.sin(a) * x + Math.cos(a) * y; }

function getY(oy, cr, dir, offset, a) {
    return oy + dir * Math.sin(offset + a * 1.0 * Math.PI*2) * cr;
}

function walk(i, t) {
    if (i==0) {
        const rng = new RNG(seed);
        
        outliner = new Outliner(turtle, precision, thickness, preview);

        const offset = (t + rng.nextFloat()) * Math.PI * 2;
        const ox = 0;
        const oy = 0;
        const w = 250;
        const cr = 20 + (rng.nextFloat() * 0.5) * 40;
        const r = 1;
        const aa = rng.nextFloat() * Math.PI * 2;
        const step = 1/30;
        const freq = 1/step/10;
        [-1, 1].forEach(dir => {
            var previous = -1;
            var index = -2;
            for (var a=0; a<1+step/2; a+=step) {
                const x = ox -w/2 + w*a;
                const y = getY(oy, cr, dir, offset, a);
                const rx = rotX(x, y, aa);
                const ry = rotY(x, y, aa);
                const current = outliner.addPoint([rx, ry], r)
                if (previous >= 0) outliner.addSegment(previous, current);
                previous = current;
                if ((index%freq)==0) {
                    outliner.addPoint([rx, ry], r*5)
                    if (dir == 1) {
                        const y2 = getY(oy, cr, -dir, offset, a);
                        const rx2 = rotX(x, y2, aa);
                        const ry2 = rotY(x, y2, aa);
                        const opposite = outliner.addPoint([rx2, ry2], r)
                        outliner.addSegment(opposite, current);
                    }
                } else {
                    outliner.addPoint([rx, ry], r*2)
                }
                index++;
            }
        });

        outliner.build();
    }

    if (!outliner.drawNext()) return false;

    return true;
}

// Random Number Generator from https://turtletoy.net/turtle/ab7a7e539e
function RNG(t){return new class{constructor(t){this.m=2147483648,this.a=1103515245,this.c=12345,this.state=t||Math.floor(Math.random()*(this.m-1))}nextFloat(){return this.state=(this.a*this.state+this.c)%this.m,this.state/(this.m-1)}}(t)}

/////////////////////////////////////////////////////////////////
// Outliner utility code v02 (minified) - Created by Lionel Lemarie 2021
// https://turtletoy.net/turtle/a206296e80
/////////////////////////////////////////////////////////////////
function Outliner(n=turtle,r=20,o=1,e=!1){const a={},i=[];function f(n){const t=performance.now();n in a?(a[n][0]++,a[n][1]-=t):(a[n]=[1,-t],i.push(n))}function s(n){const t=performance.now();n in a&&(a[n][1]+=t)}f("Total time");const c=[],h=[],u=[],l=1e-4;function g(n){const t=1/r;for(var o=0;o<1;o+=t){x([[n[0]+n[2]*Math.cos(o*Math.PI*2),n[1]+n[2]*Math.sin(o*Math.PI*2)],[n[0]+n[2]*Math.cos((o+t)*Math.PI*2),n[1]+n[2]*Math.sin((o+t)*Math.PI*2)]])}}function d(n,t,r){return Math.cos(r)*n-Math.sin(r)*t}function v(n,t,r){return Math.sin(r)*n+Math.cos(r)*t}function p(n){const t=Math.hypot(n[1][0]-n[0][0],n[1][1]-n[0][1]);if(t<l)return[];var r=n[0][0]+n[0][2]*d(n[0][0]-n[1][0],n[0][1]-n[1][1],-.5*Math.PI)/t,o=n[0][1]+n[0][2]*v(n[0][0]-n[1][0],n[0][1]-n[1][1],-.5*Math.PI)/t,e=n[0][0]+n[0][2]*d(n[0][0]-n[1][0],n[0][1]-n[1][1],.5*Math.PI)/t,a=n[0][1]+n[0][2]*v(n[0][0]-n[1][0],n[0][1]-n[1][1],.5*Math.PI)/t,i=n[1][0]+n[1][2]*d(n[1][0]-n[0][0],n[1][1]-n[0][1],-.5*Math.PI)/t,f=n[1][1]+n[1][2]*v(n[1][0]-n[0][0],n[1][1]-n[0][1],-.5*Math.PI)/t;M([[r,o],[n[1][0]+n[1][2]*d(n[1][0]-n[0][0],n[1][1]-n[0][1],.5*Math.PI)/t,n[1][1]+n[1][2]*v(n[1][0]-n[0][0],n[1][1]-n[0][1],.5*Math.PI)/t]]),M([[e,a],[i,f]])}function M(n){const o=1/r;for(t=0;t<1-l;t+=o){x([[n[0][0]+(n[1][0]-n[0][0])*t,n[0][1]+(n[1][1]-n[0][1])*t],[n[0][0]+(n[1][0]-n[0][0])*(t+o),n[0][1]+(n[1][1]-n[0][1])*(t+o)]])}}const N=1,m={};function L(n){return 1e5*Math.floor(n[1]/N)+Math.floor(n[0]/N)}function P(n){var t=[];const r=L(n);r in m&&t.push(m[r]);var o=!1;if(t.forEach(n=>n.forEach(n=>o|=!_(n))),!o){t=[];const r=2;for(var e=-r;e<=r+.1;e+=1)for(var a=-r;a<=r+.1;a+=1){if(0==a&&0==e)continue;const r=L([n[0]+a*N,n[1]+e*N]);r in m&&t.push(m[r])}}return t}function w(n,t){for(var r=0;r<2;r++){const o=L(n[r]);o in m||(m[o]=[]),m[o].push(t)}}function I(n,t){const r=E(n[0],t[0]),o=E(n[0],t[1]),e=E(n[1],t[0]),a=E(n[1],t[1]);return!((r>l||a>l)&&(o>l||e>l))}function x(n){f("addLine");var t=!0;if(!e){f(`addLine - figure_points ${h.length}`);for(var r=0;r<h.length&&t;r++){const o=E(n[0],h[r])*(1+l),e=E(n[1],h[r])*(1+l);t&=o>h[r][2]**2,t&=e>h[r][2]**2}s(`addLine - figure_points ${h.length}`),f(`addLine - figure_segments ${u.length}`);for(r=0;r<u.length&&t;r++){const o=[0,1].map(n=>h[u[r][n]]);t&=!$(n[0],o)&&!$(n[1],o)}s(`addLine - figure_segments ${u.length}`),function(n){const t=[],r=L(n[0]);r in m&&t.push(m[r]);const o=L(n[1]);return o in m&&t.push(m[o]),t}(n).forEach(r=>{for(var o=0;o<r.length&&t;o++)t&=!I(n,c[r[o]])})}t&&(w(n,c.length),c.push(n)),s("addLine")}function E(n,t){return(n[0]-t[0])*(n[0]-t[0])+(n[1]-t[1])*(n[1]-t[1])}function $(n,t){const r=function(n,t){var r=E(t[0],t[1]);if(r<l)return 0;var o=((n[0]-t[0][0])*(t[1][0]-t[0][0])+(n[1]-t[0][1])*(t[1][1]-t[0][1]))/r;return o=Math.max(0,Math.min(1,o))}(n,t),o=t[0][2]*(1-r)+t[1][2]*r;return function(n,t,r){return E(n,[t[0][0]+r*(t[1][0]-t[0][0]),t[0][1]+r*(t[1][1]-t[0][1])])}(n,t,r)<o*o*(1-l)}const b=[];var O=0;function _(n){for(;b.length<=n;)b.push(!1);return b[n]}function S(){if(f("drawNextLine"),0==c.length)return!1;const t=n.position();var r=1e6,o=-1,h=-1;if(!e&&(f("drawNextLine - bins"),P(t).forEach(n=>{for(var e=0;e<n.length;e++)if(!_(n[e]))for(var a=0;a<2;a++){const i=E(t,c[n[e]][a]);(o<0||i<r)&&(r=i,o=n[e],h=a)}}),s("drawNextLine - bins"),o<0)){f("drawNextLine - all");for(var u=0;u<c.length&&r>1;u++)if(!_(u))for(var l=0;l<2;l++){const n=E(t,c[u][l]);(o<0||n<r)&&(r=n,o=u,h=l)}s("drawNextLine - all")}if(o<0){for(f("drawNextLine - last restort"),o=0,h=0,r=1;_(o);)o++;s("drawNextLine - last restort")}r>.01&&n.jump(c[o][h]),n.down(),n.goto(c[o][1-h]),e?c.splice(o,1):function(n){for(;b.length<=n;)b.push(!1);b[n]=!0,O++}(o),s("drawNextLine");const g=c.length-O>0;return g||(s("Total time"),console.log(""),i.forEach(n=>{var t=a[n][1],r=a[n][0],o="ms";t>1e3&&(o="sec",(t/=1e3)>60&&(o="min",t/=60)),console.log(`Outliner: ${n} - calls: ${function(n){return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")}(r)} - total: ${t.toFixed(1)} ${o}`)})),g}function k(){f("buildOutline");for(var n=0;n<h.length;n++)g(h[n]);for(n=0;n<u.length;n++){p([0,1].map(t=>h[u[n][t]]))}!function(){if(e)return;const n=[];for(var t=0;t<c.length;t++)for(var r=0;r<2;r++){var o=!1;P(c[t][r]).forEach(n=>{for(var e=NaN,a=0;a<n.length;a++)if(!I(c[t],c[n[a]]))for(var i=0;i<2;i++){const o=E(c[t][r],c[n[a]][i]);(isNaN(e)||o<e)&&(e=o,c[n[a]][i])}!isNaN(e)&&e<l&&(o=!0)}),o||n.push(c[t][r])}const a=[];for(;n.length>1;){const t=n.shift();for(var i=-1,f=NaN,s=0;s<n.length;s++){const r=E(n[s],t);(i<0||r<f)&&(f=r,i=s)}if(i>=0&&f<10){const r=n[i];n.splice(i,1),a.push([t,r])}}a.forEach(n=>{w(n,c.length),c.push(n)})}(),function(){const n=c.length;for(var t=0;t<thickness;t++)for(var r=0;r<thickness;r++)if(0!=r||0!=t)for(var o=0;o<n;o++){const n=c[o].map(n=>[n[0]-.2*r,n[1]-.2*t,n[2]]);w(n,c.length),c.push(n)}}(),s("buildOutline")}function T(n,t){return h.push([n[0],n[1],t]),h.length-1}function j(n,t){return u.push([n,t]),u.length-1}return{addPoint:(n,t)=>T(n,t),addSegment:(n,t)=>j(n,t),addPoints:n=>n.forEach(n=>T(n[0],n[1])),addSegments:n=>n.forEach(n=>j(n[0],n[1])),build:()=>k(),drawNext:()=>S(),unsortedLines:c}}