1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 6 <meta charset="UTF-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 <meta name="google-site-verification" content="tm5Y6ZNTf-lBqbwniGjQPv1q02o2TuUQZ9GTYa4SMLg" /> 9 <title>mell-o-tron</title> 10 11 <meta name="description" 12 content="" /> 13 <meta name="keywords" content="latex.css,css library,class-less css,latex css" /> 14 <meta property="og:title" content="mell-o-tron" /> 15 <meta property="og:type" content="website" /> 16 17 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sugina-dev/[email protected]/style/latinmodern-roman.css" /> 18 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sugina-dev/[email protected]/style/latinmodern-sans.css" /> 19 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sugina-dev/[email protected]/style/latinmodern-mono.css" /> 20 21 <link rel="stylesheet" href="https://latex.now.sh/style.css"> 22 <link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css"/> 23 <link rel="stylesheet" href="/topmenu.css"> 24 25 <style> 26 body { 27 max-width: 45%; 28 font-size: 19px; 29 font-family: 'Latin Modern Sans'; 30 } 31 a:link { 32 color: #8ad0ff; 33 font-weight: bold; 34 background-color: transparent; 35 text-decoration: none; 36 } 37 38 a:visited { 39 color: #8ad0ff; 40 font-style: italic; 41 font-weight: bold; 42 background-color: transparent; 43 text-decoration: none; 44 } 45 46 a:hover { 47 color: #a8dcff; 48 font-weight: bold; 49 background-color: transparent; 50 text-decoration: underline; 51 } 52 53 a:active { 54 color: #8ad0ff; 55 font-weight: bold; 56 background-color: transparent; 57 text-decoration: underline; 58 } 59 60 @media (max-width: 1500px){ 61 body { 62 max-width: 90%; 63 } 64 65 } 66</style> 67 68</head> 69 70 71<body id="top" style = "background: #212121;color: white" onload="myFunction()"> 72 <nav class="top-menu" aria-label="Main navigation"> 73 <ul> 74 <li><a href="/index.html" class="active">Home</a></li> 75 <li><a href="/projects.html">Projects</a></li> 76 <li><a href="/pub_sem_teaching.html">Seminars & Teaching</a></li> 77 <li><a href="/misc.html">Misc</a></li> 78 </ul> 79 </nav> 80 <header style = "background: #1a1a1a; border-radius: 25px;text-align: center;"> 81 <div style = "text-align: center;"><b style="font-size:250%"><span class="latex"><code>mell-o-tron</code></b><br> 82 83 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> 84 85 </div> 86<b>Lorenzo Pace</b>, PhD student @ <a href="https://www.mpi-inf.mpg.de/">Max Planck Institute for Informatics</a>. 87 <br><br> 88 89
89<script> 90 91 92 function myFunction() { 93 var c = document.getElementById("myCanvas"); 94 var ctx = c.getContext("2d"); 95 intervalID = setInterval(drawOrbit, 5, ctx); 96 intervalID = setInterval(clear, 15000, ctx); 97 } 98 99 function vec_sum(a, b){ 100 return [a[0] + b[0], a[1] + b[1]]; 101 } 102 103 function vec_sub(a, b){ 104 return [a[0] - b[0], a[1] - b[1]]; 105 } 106 107 function vec_mul (k, a){ 108 return [a[0] * k, a[1] * k] 109 } 110 111 function dist(a, b){ 112 return Math.sqrt((a[0] - b[0])**2 + (a[1] - b[1])**2); 113 } 114 115 function direction(a, b){ 116 let dir = [b[0] - a[0], b[1] - a[1]] 117 let norm = dist (dir, [0,0]) 118 return vec_mul(1/norm, dir); 119 } 120 121 function dot (a, b){ 122 return a[0] * b[0] + a[1] * b[1]; 123 } 124 125 function angle_between_vecs(a, b){ 126 return Math.acos(dot(a, b) / (dist(a, [0,0]) * dist(b, [0,0]))); 127 } 128 129 function perp (a){ 130 return [-a[1], a[0]] 131 } 132 133 function rotate_vec(a, rad){ 134 a1 = [0,0] 135 a1[0] = a[0] * Math.cos(rad) - a[1] * Math.sin(rad); 136 a1[1] = a[0] * Math.sin(rad) + a[1] * Math.cos(rad); 137 138 return a1; 139 } 140 141 var prev_posx = null; 142 var prev_posy = null; 143 144 var posx = null; 145 var posy = null; 146 147 var velx_dt = null; 148 var vely_dt = null; 149 150 var rgb = [204, 255, 204] 151 152 var G = 20 153 154 var centers = []; 155 156 var eta = 1 157 158 function drawOrbit(ctx) { 159 160 ctx.beginPath(); 161 ctx.lineWidth = "2"; 162 ctx.strokeStyle = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`; 163 ctx.fillStyle = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`; 164 rgb[0] += 10 * (Math.random() - .5); 165 rgb[1] += 10 * (Math.random() - .5); 166 rgb[2] += 10 * (Math.random() - .5); 167 168 if(posx == null || dist([posx, posy], [150, 150]) > 300){ 169 clear(ctx); 170 posx = (Math.random() * 300); 171 posy = (Math.random() * 300); 172 velx_dt = (Math.random() - .5) * eta; 173 vely_dt = (Math.random() - .5) * eta; 174 } 175 else{ 176 posx += velx_dt; 177 posy += vely_dt; 178 179 var grav_acc = 0; 180 for (p of centers){ 181 let p_distance = dist([posx, posy], p); 182 183 if (p_distance <= 10){ 184 185 let tangent = perp (direction([posx, posy], p)); 186 187 alpha = angle_between_vecs([velx_dt, vely_dt], tangent); 188 189 console.log(alpha); 190 191 new_vel = rotate_vec(tangent, alpha); 192 193 norm_new_vel = dist([0,0], new_vel); 194 norm_old_vel = dist([0,0], [velx_dt, vely_dt]); 195 196 new_vel = vec_mul(norm_old_vel/norm_new_vel, new_vel) 197 198 velx_dt = new_vel[0]; 199 vely_dt = new_vel[1]; 200 } 201 202 if (p_distance <= 5){ 203 clear(ctx); 204 } 205 206 grav_acc += G / (p_distance**2); 207 208 let dir = direction([posx, posy], p); 209 210 acc = vec_mul(grav_acc, dir); 211 212 velx_dt += acc[0]; //compensate for dt with G 213 vely_dt += acc[1]; 214 } 215 } 216 ctx.moveTo(posx, posy); 217 218 219 ctx.fillRect(posx,posy,5,5); 220 221 222 ctx.stroke(); 223 } 224 225 function clear (ctx) { 226 ctx.clearRect(0, 0, 300, 300); 227 posx = null; 228 posy = null; 229 230 centers = [] 231 232 for (i in [0,1,2]) 233 centers.push([Math.random() * 150 + 150/2, Math.random() * 150 + 150/2]) 234 235 236 for (p of centers){ 237 ctx.beginPath(); 238 ctx.strokeStyle = `rgb(200,200,200)`; 239 ctx.lineWidth = "1"; 240 ctx.arc(p[0], p[1], 10, 0, 2 * Math.PI); 241 ctx.stroke(); 242 } 243 244 } 245</script>
245 246 247 </header> 248 249 250 <main> 251 <article> 252 253 </article> 254 </main> 255 256
256<script> 257 MathJax = { 258 tex: { 259 inlineMath: [['$', '$'],], 260 }, 261 } 262 const toggle = document.getElementById('typeface-toggle') 263 const typeface = document.getElementById('typeface') 264 toggle.addEventListener('click', () => { 265 document.body.classList.toggle('libertinus') 266 typeface.textContent = document.body.classList.contains('libertinus') ? 'Libertinus' : 'Latin Modern' 267 }) 268 </script>
268 269
269<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
269 270
270<script async src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
270 271 272
272<script async defer data-domain="latex.now.sh" src="https://plausible.io/js/plausible.js"></script>
272 273</body> 274<br><br> 275<div style="font-size:80%"> 276Credit to <b>Vincent Dörig</b> for their brilliant template; I'm not giving this justice, you'll find the full thing here: <a title="" 277 href="https://github.com/vincentdoerig/latex-css"> <code>https://github.com/vincentdoerig/latex-css</code></a> 278</div> 279</html> 280
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.