223 lines
5.3 KiB
HTML
Executable File
223 lines
5.3 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: 0.2s;
|
|
/* 0.2 seconds transition on hover */
|
|
transition: opacity 0.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>
|