167 lines
5.2 KiB
HTML
Executable File
167 lines
5.2 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>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.intro {
|
|
max-width: 900px;
|
|
margin: 20px auto 10px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.intro h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.intro p {
|
|
margin: 4px 0 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.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>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="intro">
|
|
<h1>Oscillating Arrow Field Visualizer</h1>
|
|
<p>
|
|
A sketch to <s>hopefully</s> demonstrate the illusion of the <a
|
|
href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion">Müller-Lyer Illusion</a>
|
|
</p>
|
|
<p>The lines - that are the same length, should look longer and shorter based on the angle of the arrow heads.
|
|
</p>
|
|
<p>
|
|
Increasing the value adds more horizontal slices, creating a denser and more detailed pattern.
|
|
Tap or click to pause and resume the motion.
|
|
</p>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<input type="range" min="2" max="11" step="1" value="2" class="slider" id="myRange">
|
|
</div>
|
|
|
|
<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;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|