Astigmatism test

astigmatism-test.markdown

Astigmatism test

A Pen by Danylo Yakymenko on CodePen.

License.

index.html

<div id="log">0°</div>
<svg id="svg" viewBox="200 200 600 600">
      <polyline class="line" points="200,200 800,200" />
  
  <text x="320" y="220" class="middle">Be sure your head position is vertical. </text> 
  <text x="270" y="240" class="middle">Rotate the image so that the left lines are the sharpest.   </text> 
  
  <g id="spinner">
    <circle class="big-circle" cx="500" cy="500" r="200" />
    <circle class="small-circle" cx="500" cy="500" r="5" />
    
<polyline class="line" points="460,400 460,600" />
<polyline class="line" points="440,400 440,600" />
<polyline class="line" points="420,400 420,600" />
<polyline class="line" points="400,400 400,600" />
<polyline class="line" points="380,400 380,600" />
<polyline class="line" points="360,400 360,600" />
<polyline class="line" points="340,400 340,600" />
<polyline class="line" points="320,400 320,600" />
<polyline class="line" points="300,400 300,600" />
<polyline class="line" points="280,400 280,600" />
<polyline class="line" points="260,400 260,600" />

<polyline class="line" points="540,400 740,400" />
<polyline class="line" points="540,420 740,420" />
<polyline class="line" points="540,440 740,440" />
<polyline class="line" points="540,460 740,460" />
<polyline class="line" points="540,480 740,480" />
<polyline class="line" points="540,500 740,500" />
<polyline class="line" points="540,520 740,520" />
<polyline class="line" points="540,540 740,540" />
<polyline class="line" points="540,560 740,560" />
<polyline class="line" points="540,580 740,580" />
<polyline class="line" points="540,600 740,600" />

<text x="200" y="500" class="heavy">A</text>    
<text x="800" y="500" class="heavy">A</text> 
  </g>
</svg>

script.js

var log = document.querySelector("#log");

gsap.set("#spinner", {transformOrigin: "center"});

Draggable.create("#spinner", {
	type: "rotation",
  onDrag: updateRotation,
});

function updateRotation() {
  var angle = this.rotation
  angle = (180+(angle % 180))%180

  log.innerHTML = angle.toFixed(1) + "°";
}

scripts

<script src="https://cdn.jsdelivr.net/npm/gsap@3.0.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.0.5/dist/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script>

style.scss

#svg {
  position: fixed;
  width: 100%;
  height: 100%;
	touch-action: none;
}

#spinner {
  cursor: pointer;
  border: solid 1px red !important;
}

.big-circle {
  fill: white;
  // stroke: black;
  // stroke-width: 6;
}

.small-circle {
  fill: black;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 5;
}
#log {
  text-align: center;
  font-size: 24px;
  margin-top: 20px;
}

.heavy {
  font: bold 30px sans-serif;
}

.middle {
  font: 20px sans-serif;
}