33 lines
1.1 KiB
HTML
33 lines
1.1 KiB
HTML
|
{% 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 %}
|