{% set meta={"title": "Pixel Circle", "desc": "Generate circles for games like Minecraft"} %}
{% extends "/_base.html" %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script src="main.js"></script>
{% endblock %}
{% block content %}
<div>
Radius:
<input type="range" min="0" max="100" value="5" style="width: 25%" id="radius-slider" oninput="updateRadius(this.value)" width="1000px" step="0.1">
<input type="text" id="radius-text" oninput="updateRadius(this.value);" value="5">
</div>
<div>
    <input type="checkbox" id="even-center" oninput="updateCenter(this.checked);"> Even center?
</div>
<div>
Accuracy (increase for large circles):
<input type="text" id="accuracy" oninput="updateAccuracy(this.value);" value="8000">
</div>
<div id="canvas-wrapper"></div>
<div>
    <input type="button" id="reset" onclick="resetMotion();" value="Reset motion">
</div>
<script>
document.getElementById("defaultCanvas0").onwheel = function(event){
    event.preventDefault();
};
document.getElementById( "canvasId" ).onmousewheel = function(event){
    event.preventDefault();
};
</script>
{% endblock %}