111 lines
4.0 KiB
HTML
Executable File
111 lines
4.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
|
|
<style> body {padding: 0; margin: 0;} </style>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
|
|
|
<div class="slidecontainer">
|
|
<input type="range" min="2" max="11" step="1" value="2" class="slider" id="myRange">
|
|
</div>
|
|
</head>
|
|
|
|
|
|
<style>
|
|
.slidecontainer {
|
|
width: 100%; /* Width of the outside container */
|
|
}
|
|
|
|
/* The slider itself */
|
|
.slider {
|
|
-webkit-appearance: none; /* Override default CSS styles */
|
|
appearance: none;
|
|
width: 100%; /* Full-width */
|
|
height: 25px; /* Specified height */
|
|
background: #d3d3d3; /* Grey background */
|
|
outline: none; /* Remove outline */
|
|
opacity: 1; /* Set transparency (for mouse-over effects on hover) */
|
|
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none; /* Override default look */
|
|
appearance: none;
|
|
width: 25px; /* Set a specific slider handle width */
|
|
height: 25px; /* Slider handle height */
|
|
background: #434343; /* Grey background */
|
|
cursor: pointer; /* Cursor on hover */
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 25px; /* Set a specific slider handle width */
|
|
height: 25px; /* Slider handle height */
|
|
background: #434343; /* Grey background */
|
|
cursor: pointer; /* Cursor on hover */
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let vMargin, hMargin, arrowHeight, t, lineNum;
|
|
let lineMove = true;
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight * 0.6);
|
|
hMargin = 12;
|
|
arrowHeight = 25;
|
|
t = 0;
|
|
lineNum = 1;
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight * 0.6);
|
|
}
|
|
|
|
function draw(){
|
|
background(43);
|
|
angleMode(DEGREES);
|
|
lineNum = document.getElementById('myRange').value;
|
|
|
|
drawLine(hMargin, lineNum+1);
|
|
|
|
if (lineMove) {
|
|
t++;
|
|
}
|
|
|
|
if (t == 360) {
|
|
t = 0;
|
|
}
|
|
}
|
|
|
|
function drawLine(hm, vm) {
|
|
//let changex = map(sin(t), -1, 1, -22, 22);
|
|
let changex = sin(t) * 18;
|
|
vm /= 10;
|
|
for (let j = 1; j < vm - 1; j++) {
|
|
|
|
stroke(255, 34, 63);
|
|
strokeWeight(4);
|
|
line(width / hm, j*height / vm, width / 2, j*height / vm); //red line
|
|
|
|
stroke(69, 98, 255);
|
|
line(width / 2, j*height / vm, (hm - 1) * width / hm, j*height / vm); //blue line
|
|
|
|
stroke(255);
|
|
line(width / hm, j * height / vm, width / hm + changex, (j *height / vm) - arrowHeight); //left top
|
|
line(width / hm + changex, (j*height / vm) + arrowHeight, width / hm, j*height / vm); //left bottom
|
|
|
|
line((hm - 1) * width / hm + changex, j*height / vm + arrowHeight, (hm - 1) * width / hm, j*height / vm); //right bottom
|
|
line(width / 2 - changex, j * height / vm + arrowHeight, width / 2, j *height / vm); //center bottom
|
|
|
|
line((hm - 1) * width / hm, j * height / vm, (hm - 1) * width / hm + changex, (j *height / vm) - arrowHeight); //right bottom
|
|
line(width / 2, j*height / vm, width / 2 - changex, (j*height / vm) - arrowHeight); //center top
|
|
}
|
|
}
|
|
|
|
function mouseClicked() {
|
|
lineMove = !lineMove;
|
|
}
|
|
</scipt>
|
|
</html>
|