html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Konan">
<title>Project Bluebird</title>
<link rel="stylesheet" href="styles.css">
<link rel="preload" href="style.css" as="style">
<link rel="prefetch" href="https://i.ibb.co/WfBcGPV/DALL-E-2024-11-15-17-35-46-A-surreal-scene-showing-a-battle-between-a-tough-stoic-man-and-a-delicate.webp">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js" defer></script>
<!-- If it doesn't load fullscreen, please reload -->
</head>
<body>
<canvas id="canvas"></canvas>
<div id="typewriter"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body, html {
display: flow-root;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background: black;
}
canvas {
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#typewriter {
position: relative;
font-size: 0.865rem;
font-weight: 650;
color: rgba(222, 222, 222, 0.965);
font-family: 'Courier New', Courier, monospace, Arial;
text-shadow:
8px 6px 1px rgba(255, 255, 255,
0.85),
8px 12px 1.75px rgba(222, 18, 102, 0.865),
-3px -4px 2.25px rgba(12, 128, 67, 0.25),
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function () {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const typewriterElement = document.getElementById("typewriter");
// Fullscreen canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log("Initialization done. Load Pictures...");
let edgeData = [];
let ready = false;
console.log("Initialization complete. Loading the image...");
const img = new Image();
img.crossOrigin = "anonymous"; // set cross-origin-attribut (here: no user-datas for better performance)
img.src = 'https://i.ibb.co/WfBcGPV/DALL-E-2024-11-15-17-35-46-A-surreal-scene-showing-a-battle-between-a-tough-stoic-man-and-a-delicate.webp';
img.onload = () => {
console.log("Image loaded successfully. Starting processing...");
processSingleImage(img);
};
function processSingleImage(img) {
const scale = 0.25;
const brightnessThreshold = 120;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run