100 dots - DNA Helix

100-dots-dna-helix.markdown

100 dots - DNA Helix

My attempt for @CodePen's "100 dots" challenge using #zdog by @metafizzyco. https://codepen.io/corentinth/pen/WNeRdWP/right

A Pen by Corentin on CodePen.

License.

index.pug

canvas#canvas
p.top (drag to rotate)
p.bottom
  | By 
  a(href='https://twitter.com/cthmsst') Corentin Thomasset

script.js

const LINE_W = 50;
const BALL_W = 8;
const COUNT = 50;
const SPACING = 14;

const illo = new Zdog.Illustration({
  element: "#canvas",
  dragRotate: true,
  resize: "fullscreen"
});

const Line = new Zdog.Shape({
  path: [{ x: LINE_W }, { x: -LINE_W }],
  stroke: 2,
  color: "#ffd460"
});

const Dot = new Zdog.Shape({
  stroke: BALL_W * 2,
  color: "#ea5455"
});

for (let i = 0; i < COUNT; ++i) {
  const line = Line.copy({
    addTo: illo,
    rotate: {
      y: Zdog.TAU / COUNT * 2 * i
    },
    translate: {
      y: -(COUNT / 2 * SPACING) + i * SPACING
    }
  });

  Dot.copy({
    addTo: line,
    translate: {
      x: -(BALL_W + LINE_W + 10)
    }
  });

  Dot.copy({
    addTo: line,
    translate: {
      x: BALL_W + LINE_W+10
    }
  });
}

illo.updateRenderGraph();

const animate = () => {
  illo.rotate.y += 0.02;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

scripts

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

style.less

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#canvas {
  background: #2d4059;
}

p{
  position: absolute;
  margin: 10px;
  font-family: Calibri, sans-serif;
  right: 0;
  
  &, a{
      color: #b1592c;
  }
  &.top{
      top:0;
  }
  &.bottom{
      bottom:0;
  }
}