Updates with dvd logo animation; add cool predictions; update index page with description

This commit is contained in:
Logan Hunt 2022-03-17 10:32:22 -06:00
parent 59ceec2b60
commit 230f98aa49
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
4 changed files with 161 additions and 46 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -6,20 +6,42 @@
<style> <style>
body { body {
margin: 0; margin: 0;
background: black; background-color: black;
height: 100%; }
width: 100%; #container {
margin: 0;
width: 100vw;
height: 100vh;
} }
#dvd-logo { #dvd-logo {
width: 200px; width: 200px;
position: absolute; position: absolute;
left: -200px; /* So that logo doesn't flash at top left corner when document loads */ left: -200px;
top: -200px; top: -200px;
} }
.controls {
padding: 12px;
position: fixed;
bottom: 0;
right: 0;
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
border-radius: 8px;
margin-right: 6px;
margin-bottom: 6px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container">
<img id="dvd-logo" src="images/dvd-logo.png"> <img id="dvd-logo" src="images/dvd-logo.png">
<div class="controls">
<span id="iteration-count"></span>
<br>
<input type="range" min="0" max="500" id="iteration-slider">
</div>
</div>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>

View File

@ -1,42 +1,135 @@
const randUpTo = (max) => Math.random() * max const global_state = {
iterations: 0
const randomHue = (element) => {
element.style.filter = `brightness(0.5) sepia(1) saturate(10000%) hue-rotate(${randUpTo(360)}deg)`;
}
const clamp = (val, max) => val > max ? max : val;
const updateLogo = (logo, element) => {
const screen_height = window.innerHeight;
const screen_width = window.innerWidth;
const collide_y = logo.y <= 0 || (logo.y + element.clientHeight) >= screen_height;
const collide_x = logo.x <= 0 || (logo.x + element.clientWidth) >= screen_width;
logo.dx *= (collide_x ? -1 : 1);
logo.dy *= (collide_y ? -1 : 1);
if (collide_y || collide_x) {
randomHue(element);
}
// Clamp in case user changes screen size
logo.x = clamp(logo.x + logo.dx, screen_width - element.clientWidth);
logo.y = clamp(logo.y + logo.dy, screen_height - element.clientHeight);
element.style.left = `${logo.x}px`;
element.style.top = `${logo.y}px`;
}; };
window.onload = () => { const ALLOWED_ERROR = 0.01;
let logo = {
x: randUpTo(window.innerWidth),
y: randUpTo(window.innerHeight),
dx: 2,
dy: 2
};
const dvdLogo = document.getElementById("dvd-logo");
setInterval(() => updateLogo(logo, dvdLogo), 15); // ~ 67 hz const randUpTo = (max) => Math.random() * max
const withinError = (a, b, error=ALLOWED_ERROR) => Math.abs(a - b) < error;
const normalize = (vec) => {
const magnitude = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
return {
x: vec.x / magnitude,
y: vec.y / magnitude
};
} }
const findNextIntersection = ({x, y, dx, dy}, max_width, max_height) => {
const slope = dy / dx;
const y_intercept = y - (slope * x);
const intersections = [
{x: 0, y: y_intercept},
{x: max_width, y: slope * max_width + y_intercept},
{x: -y_intercept / slope, y: 0},
{x: (max_height - y_intercept) / slope, y: max_height}
];
return intersections.find((cross) => {
const cross_dir_hat = normalize({x: cross.x - x, y: cross.y - y});
const logo_dir_hat = normalize({x: dx, y: dy});
const in_bounds = cross.x >= 0 && cross.x <= max_width && cross.y >= 0 && cross.y <= max_height;
return in_bounds && withinError(cross_dir_hat.x, logo_dir_hat.x) && withinError(cross_dir_hat.y, logo_dir_hat.y);
});
};
const handleCollision = (obj, max_width, max_height) => {
const collide_y = obj.y <= 0 || obj.y >= max_height;
const collide_x = obj.x <= 0 || obj.x >= max_width;
obj.dx *= (collide_x ? -1 : 1);
obj.dy *= (collide_y ? -1 : 1);
return {collide_y, collide_x};
}
const updateLogo = (logo, max_width, max_height) => {
const {collide_x, collide_y} = handleCollision(logo, max_width, max_height);
if (collide_y || collide_x) {
logo.dColorWheel = randUpTo(2*Math.PI)
logo.onIntersection(logo, max_width, max_height);
}
logo.x = Math.max(0, Math.min(logo.x + logo.dx, max_width));
logo.y = Math.max(0, Math.min(logo.y + logo.dy, max_height));
};
const drawLogo = (logo, element) => {
element.style.left = `${logo.x}px`;
element.style.top = `${logo.y}px`;
element.style.filter = `brightness(0.5) sepia(1) saturate(10000%) hue-rotate(${logo.dColorWheel}rad)`;
}
const makeSvg = (coords) => {
const makeLine = (a, b, color='white') => `<line x1="${a.x}" x2="${b.x}" y1="${a.y}" y2="${b.y}" stroke="${color}" />`;
return `
<svg xmlns='http://www.w3.org/2000/svg' width='${window.innerWidth}px' height='${window.innerHeight}px'>
<rect x="0" y="0" width="${window.innerWidth}" height="${window.innerHeight}" fill="black"/>
${coords.map((_,i) => {
if (i == 0) {
return;
}
return makeLine(coords[i-1], coords[i], 'red');
}).join('')}
</svg>
`;
}
const setBackgroundToSvg = (svg) => {
document.getElementById("container").style.background = 'url(data:image/svg+xml;base64,'+btoa(svg)+')';
}
const makeListOfFutureCollisionsAndDraw = (logo, max_width, max_height) => {
let next_int = {x: logo.x, y: logo.y, dx: logo.dx, dy: logo.dy};
let intersections = [{...next_int}];
for (let i = 0; i < global_state.iterations; i++) {
const next = findNextIntersection(next_int, max_width, max_height);
next_int.x = next.x;
next_int.y = next.y;
handleCollision(next_int, max_width, max_height);
intersections.push(next);
}
// Transform each intersection to the center of the logo
intersections.map((x) => {
x.x += logo.width/2;
x.y += logo.height/2;
});
setBackgroundToSvg(makeSvg(intersections));
};
let drawNewPaths;
window.onload = () => {
const dvdLogo = document.getElementById("dvd-logo");
let logo = {
x: Math.floor(randUpTo(window.innerWidth-dvdLogo.clientWidth)),
y: Math.floor(randUpTo(window.innerHeight-dvdLogo.clientHeight)),
dx: 2,
dy: 2,
width: dvdLogo.clientWidth,
height: dvdLogo.clientHeight,
onIntersection: makeListOfFutureCollisionsAndDraw,
dColorWheel: 0
};
setInterval(() => {
updateLogo(logo, window.innerWidth-logo.width, window.innerHeight-logo.height);
drawLogo(logo, dvdLogo);
}, 22);
drawNewPaths = () => makeListOfFutureCollisionsAndDraw(logo, window.innerWidth-logo.width, window.innerHeight-logo.height);
drawNewPaths();
window.onresize = drawNewPaths;
document.getElementById("iteration-slider").value = global_state.iterations;
document.getElementById("iteration-count").innerHTML = `${global_state.iterations} iterations`;
}
document.getElementById("iteration-slider").oninput = function() {
global_state.iterations = parseInt(this.value, 10);
document.getElementById("iteration-count").innerHTML = `${global_state.iterations} iterations`;
drawNewPaths();
}

View File

@ -21,9 +21,9 @@
<br> <br>
🤓 I'm Simponic. 🤓 I'm Simponic.
<br> <br>
📖 This pages hosts strictly static content. 📖 This page hosts strictly static content.
<br> <br>
🔔 Visit <a href="https://simponic.xyz">simponic.xyz</a> to view my "real" website. 🔔 My "real website" is at <a href="https://simponic.xyz">simponic.xyz</a>.
</p> </p>
<div class="projects-grid"> <div class="projects-grid">
<div class="project" onclick="window.location='dvd-logo/index.html'"> <div class="project" onclick="window.location='dvd-logo/index.html'">
@ -33,7 +33,7 @@
<div class="project-body"> <div class="project-body">
<h1>DVD Logo Bouncing Animation</h1> <h1>DVD Logo Bouncing Animation</h1>
<p>Brings back the nostalgia of old-school DVD players, as discussed in <a href="https://www.youtube.com/watch?v=QOtuX0jL85Y">The Office</a>.</p> <p>Brings back the nostalgia of old-school DVD players with an intersection predictor. The twist: no Canvas API! Only svg's and absolute positioned images!</p>
</div> </div>
</div> </div>