FURK4NGG
122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Furkan Karlıoğlu - 404 Page</title>
|
||
<script src="https://d3js.org/d3.v6.min.js"></script>
|
||
<style>
|
||
body { margin: 0; background: #282c34; overflow: hidden; }
|
||
text { -webkit-user-select:none!important;fill: white; font-size: 18px; font-weight: bold; pointer-events: none; text-anchor: middle; }
|
||
.output {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
-webkit-user-select:none!important;/* Metnin seçilmesini engeller */
|
||
}
|
||
.output a {
|
||
color: #ff5733;
|
||
text-decoration: none;
|
||
}
|
||
h1 {
|
||
color: white;
|
||
font-size: 36px;
|
||
text-align: center;
|
||
user-select: none; /* Başlık metnini seçilemez yapar */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script>
|
||
const width = window.innerWidth;
|
||
const height = window.innerHeight;
|
||
|
||
// Çekim gücü değişkeni (Pozitif olursa çeker, negatif olursa iter)
|
||
let cekimGucu = 7000;
|
||
|
||
const nodes = [
|
||
{ id: 1, radius: 60, text: "Not", vx: 0, vy: 0 }, // Hız bileşenleri eklendi
|
||
{ id: 2, radius: 60, text: "Found", vx: 0, vy: 0 },
|
||
{ id: 3, radius: 60, text: "404", vx: 0, vy: 0 }
|
||
];
|
||
|
||
const svg = d3.select("body").append("svg")
|
||
.attr("width", width)
|
||
.attr("height", height);
|
||
|
||
const simulation = d3.forceSimulation(nodes)
|
||
.force("center", d3.forceCenter(width / 2, height / 2)) // Ekran merkezine yönlendir
|
||
.force("collision", d3.forceCollide().radius(d => d.radius + 2)) // Çarpışmayı engelle
|
||
.force("attraction", d3.forceManyBody().strength(cekimGucu)) // Topları çekmek için kuvvet ekledik
|
||
.on("tick", ticked);
|
||
|
||
const bubbles = svg.selectAll("circle")
|
||
.data(nodes)
|
||
.enter()
|
||
.append("circle")
|
||
.attr("r", d => d.radius)
|
||
.attr("fill", "rgba(255, 87, 51, 0.8)")
|
||
.call(d3.drag()
|
||
.on("start", dragStarted)
|
||
.on("drag", dragged)
|
||
.on("end", dragEnded));
|
||
|
||
const texts = svg.selectAll("text")
|
||
.data(nodes)
|
||
.enter()
|
||
.append("text")
|
||
.text(d => d.text)
|
||
.attr("dy", 5);
|
||
|
||
// Bu fonksiyon her tick olayında çağrılacak
|
||
function ticked() {
|
||
// Momentum hesaplaması yapıyoruz (zamanla kaybolacak)
|
||
nodes.forEach(d => {
|
||
if (d.fx === null && d.fy === null) { // Eğer balon serbestse
|
||
// Momentum kaybolması: Hızı her adımda yavaşlatıyoruz
|
||
d.vx *= 0.99;
|
||
d.vy *= 0.99;
|
||
d.x += d.vx;
|
||
d.y += d.vy;
|
||
}
|
||
});
|
||
|
||
// Balonları konumlarına göre yerleştir
|
||
bubbles.attr("cx", d => d.x).attr("cy", d => d.y);
|
||
texts.attr("x", d => d.x).attr("y", d => d.y);
|
||
}
|
||
|
||
function dragStarted(event, d) {
|
||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||
d.fx = d.x;
|
||
d.fy = d.y;
|
||
d.vx = 0; // Drag başladığında hız sıfırlanır
|
||
d.vy = 0;
|
||
}
|
||
|
||
function dragged(event, d) {
|
||
// Sürükleme sırasında hız ekle
|
||
d.fx = event.x;
|
||
d.fy = event.y;
|
||
// Drag hareketine bağlı olarak hız artar
|
||
d.vx += (event.x - d.x) * 0.1;
|
||
d.vy += (event.y - d.y) * 0.1;
|
||
}
|
||
|
||
function dragEnded(event, d) {
|
||
if (!event.active) simulation.alphaTarget(0);
|
||
d.fx = null;
|
||
d.fy = null;
|
||
}
|
||
|
||
// Çekim gücünü değiştirmek için tarayıcı konsolunda şu komutu yazabilirsin:
|
||
// cekimGucu = 700; simulation.alpha(1).restart();
|
||
</script>
|
||
<p class="output">Please try to <a href="javascript:history.back()">go back</a> or <a href="/">return to the homepage</a>.</p>
|
||
</body>
|
||
</html>
|