-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
162 lines (144 loc) · 6.92 KB
/
index.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<title>GAN Universe</title>
<meta charset=UTF-8 />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<meta name="keywords"
content="machine learning, generative adversarial networks, gan, universe, galaxies, ai, artificial intelligence, vision tarnsformers, phd, computer engineering, software engineering, data engineer, transformers, deep learning" />
<meta name="description"
content="The GAN universe is a machine learning experiment in which generative adversarial networks were used to generate new planets, stars and galaxies and eventually an entire universe." />
<meta name="subject" content="Davide Coccomini">
<meta name="copyright" content="Davide Coccomini">
<meta name="language" content="EN">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, October 7th, 2021, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="Machine Learning, Computer Engineering">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="Davide Coccomini">
<meta name="designer" content="Davide Coccomini">
<meta name="copyright" content="Davide Coccomini">
<meta name="owner" content="Davide Coccomini">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
<div class="overlay">
<img src="" class="image-overlay"/>
</div>
<canvas id="canvas"></canvas>
<div class="text-box">
<div class="heading">GAN Universe</div>
<div class="sub-heading">Galactic images generated by a Generative Adversarial Network</div>
<div class="button-wrapper">
<div class="button" onclick="showImages(0)">Galaxies</div>
<div class="button btn-small" onclick="showImages(1)">Celestial Bodies</div>
</div>
</div>
<div class="image-box" style="display:none">
<div class="heading image-container">
<div style="--n-rows: 3; --n-cols: 6" class="grid-container">
<style>.hex-cell:nth-of-type(5n + 1) { grid-column-start: 2 }</style>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
<div class="hex-cell"><img src="" class="image"/></div>
</div>
</div>
<div class="button" onclick="nextImages()">Explore More</div>
<div class="button" onclick="showMenu()">Go Back</div>
</div>
<script type="text/javascript" src="includes/warpspeed.min.js"></script>
<script>
let max_galaxies = 2540;
let max_bodies = 1346;
let current_category = -1;
let current_path = "";
let current_max = 0;
$( document ).ready(function() {
new WarpSpeed("canvas",'{"speed":2,"speedAdjFactor":0.03,"density":0.7,"shape":"square","warpEffect":true,"warpEffectLength":5,"depthFade":false,"starSize":3,"backgroundColor":"#000000","starColor":"#FFFFFF"}');
setInterval(function(){
var texts = ["Galactic images generated by a Generative Adversarial Network", "Explore 2540 galaxies and 1346 celestial bodies", "Read the full dedicated article 'How does an AI imagine the universe?' on Towards Data Science", "Generative Adversarial Networks are neural networks capable of generating new images", "Website based on the scientific paper titled 'Generative Adversarial Networks for Astronomical Images Generation'"]
$(".sub-heading").fadeOut(500).promise().done(function(){
var text = ""
do
text = texts[Math.floor(Math.random()*texts.length)];
while(text == $(".sub-heading").text())
$(".sub-heading").text(text)
$(".sub-heading").fadeIn(500);
});
}, 8000);
});
function speedCanvas(){
new WarpSpeed("canvas",'{"speed":20,"speedAdjFactor":0.03,"density":0.7,"shape":"square","warpEffect":true,"warpEffectLength":5,"depthFade":false,"starSize":3,"backgroundColor":"#000000","starColor":"#FFFFFF"}');
setTimeout(function(){
new WarpSpeed("canvas",'{"speed":2,"speedAdjFactor":0.03,"density":0.7,"shape":"square","warpEffect":true,"warpEffectLength":5,"depthFade":false,"starSize":3,"backgroundColor":"#000000","starColor":"#FFFFFF"}');
}, 2000);
}
function getRandomInt(max) {
return Math.floor(Math.random() * (max+1));
}
function showImages(category){
speedCanvas()
$(".text-box").fadeOut(1000).promise().done(function(){
$(".image-box").fadeIn(1000);
});
current_category = category;
if(current_category == 0){
current_max = max_galaxies
current_path = "images/galaxies/";
}else{
current_max = max_bodies
current_path = "images/bodies/";
}
nextImages()
}
function nextImages(){
$(".grid-container").fadeOut(500).promise().done(function(){
already_extracted = [];
for(var i = 0; i < 7; i++){
do
id = getRandomInt(current_max).toString()
while(already_extracted.includes(id))
$($(".image")[i]).attr("src", current_path + id + ".jpg");
}
$(".grid-container").fadeIn(500)
});
}
function showMenu(){
speedCanvas()
if(current_category == 0)
current_max = max_galaxies
else
current_max = max_bodies
$(".image-box").fadeOut(1000).promise().done(function(){
$(".text-box").fadeIn(1000);
});
}
$(".image").on('click', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
$(".image-overlay").attr("src", $(this).attr("src"))
$(".overlay").fadeIn(500)
});
$(".overlay").on('click', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
$(".overlay").fadeOut(500)
});
</script>
</body>
</html>