index.html (9196B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>banna - about me</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <link rel="stylesheet" href="/styles/style.css" /> 8 <link rel="stylesheet" href="/styles/look.css" /> 9 <link rel="stylesheet" href="/styles/codetheme.css" /> 10 <script src="/scripts/highlight.js"></script> 11 <script>hljs.initHighlightingOnLoad();</script> 12 </head> 13 14 <body> 15 <div id="sidebar"> 16 <div id="logo"> 17 <a href="/"> 18 <img src="/banna.png" alt="banna.tech" height="45" width="201" /> 19 </a> 20 </div> 21 <div id="nav"> 22 <a class="" href="/post">blog</a> 23 <a class="" href="/things">things</a> 24 <a class="current" href="/about">about</a> 25 </div> 26 </div> 27 28 <div id="wrapper"> 29 <div id="content"> 30 <div class="post aboutbox"> 31 <div class="content"> 32 <p style="font-family: 'MuseoSlab500',sans-serif;padding-left: 30px;font-size: 32px;border-bottom: 2px solid #cecece;text-shadow: 1px 1px #cecece; margin-top:0px;">welcome to Paul's internet site<img src="https://i.banna.tech/ensign.svg" height="73px" width="73px"></p> 33 34 <p>I have a passion for mathematics and the interconnected web of sciences.</p> 35 <p>You can find me on a skateboard, drinking tea, authoring commits on <a href="https://github.com/bannatech/">GitHub</a> and <a href="https://soundcloud.com/pals_space/">writing songs</a>!</p> 36 <p>M: paul@nanner.co.</p> 37 <p>content by paul, compiled by <a href="http://pnbp.nanner.co">pnbp</a>.</p> 38 </div> 39 </div> 40 41 <script type="text/javascript"> 42 /** 43 Turtle Graphics implemented in JavaScript 44 45 initiate with a canvas object passed in Turtle() 46 **/ 47 function Turtle(canvas) { 48 "use strict"; 49 this.canvas = canvas; 50 this.c = canvas.getContext("2d"); 51 this.c.lineWidth = 1; 52 this.c.fillStyle = "#000000"; 53 this.loc = [this.canvas.width / 2, this.canvas.height / 2]; 54 this.head = 0; 55 this.lineOffset = 0.5; 56 this.colorMode = 'hex'; 57 this.forward = function (dist) { 58 var piAngle = (Math.PI / 180) * this.head, 59 x = this.loc[0] + dist * Math.cos(piAngle), 60 y = this.loc[1] + dist * Math.sin(piAngle); 61 this.c.beginPath(); 62 this.c.moveTo((this.loc[0]) + this.lineOffset, (this.loc[1]) + this.lineOffset); 63 this.loc = [x, y]; 64 this.c.lineTo((this.loc[0]) + this.lineOffset, (this.loc[1]) + this.lineOffset); 65 this.c.stroke(); 66 this.c.closePath(); 67 }; 68 69 this.backward = function (dist) { 70 var piAngle = (Math.PI / 180) * this.head, x = this.loc[0] - dist * Math.cos(piAngle), y = this.loc[1] - dist * Math.sin(piAngle); 71 this.c.beginPath(); 72 this.c.moveTo(Math.round(this.loc[0]) + this.lineOffset, Math.round(this.loc[1]) + this.lineOffset); 73 this.loc = [x, y]; 74 this.c.lineTo(Math.round(this.loc[0]) + this.lineOffset, Math.round(this.loc[1]) + this.lineOffset); 75 this.c.stroke(); 76 this.c.closePath(); 77 }; 78 this.right = function (amount) { 79 this.head = this.head + amount; 80 if (this.head > 360) { 81 this.head = this.head - 360; 82 } 83 return this.head; 84 }; 85 86 this.left = function (amount) { 87 this.head = this.head - amount; 88 if (this.head < 0) { 89 this.head = this.head + 360; 90 } 91 return this.head; 92 }; 93 94 this.pencolor = function (color) { 95 if (this.colorMode === 'hex') { 96 this.c.strokeStyle = color; 97 } else if (this.colorMode === 'rgb') { 98 this.c.strokeStyle = '#' + color[0].toString(16) + color[1].toString(16) + color[2].toString(16); 99 } else if (this.colorMode === 'rgba') { 100 this.c.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + "," + (color[3] / 255) + ")"; 101 } 102 }; 103 104 this.pensize = function (x) { 105 this.c.lineWidth = x; 106 }; 107 } 108 function Ctx(canvas, op, up, dn){ 109 this.canvas = canvas; 110 this.op = op; 111 this.up = up; 112 this.dn = dn; 113 this.i = 0; 114 this.increment = 0.1; 115 this.translation = 0; 116 this.offset = 0; 117 } 118 </script> 119 <script type="text/javascript"> 120 var initalHeight = window.innerHeight; 121 var context = new Ctx(null, null, null, null); 122 var linelen = ( ( Math.min(window.innerHeight, window.innerWidth ) / 2 ) / 10); 123 124 var rule = { 125 axiom : 0, 126 rules : [ 127 ["1","1"], 128 ["0","1[0]0"] 129 ] 130 } 131 132 var op = generateString(rule,9); 133 134 window.onload = main; 135 window.onresize = update; 136 window.orientationchange = update; 137 138 var oldx = window.innerWidth; 139 function update() { 140 if (context.drawing == false && oldx != window.innerWidth) { 141 main(); 142 oldx = window.innerWidth; 143 } 144 } 145 146 function main () { 147 document.getElementsByTagName("html")[0].style.backgroundColor = "rgba(0,0,0,0)"; 148 149 var post = document.getElementsByClassName("post")[0]; 150 151 var sidebar = document.getElementById("sidebar"); 152 var canvas = document.getElementById("canvas"); 153 154 if (window.innerWidth > 950) { 155 canvas.width = window.innerWidth - 205; 156 } else { 157 canvas.width = window.innerWidth; 158 canvas.style.marginTop=sidebar.offsetHeight; 159 } 160 var body = document.body, 161 html = document.documentElement; 162 163 canvas.height = Math.max( body.scrollHeight, body.offsetHeight, 164 html.clientHeight, html.scrollHeight, html.offsetHeight ); 165 166 var up = new Turtle(canvas); 167 var dn = new Turtle(canvas); 168 169 up.pencolor("#EEEEEE"); 170 up.pensize(Math.phi); 171 dn.pensize(Math.phi); 172 173 up.loc = [canvas.width / 2, initalHeight / 2]; 174 dn.loc = [canvas.width / 2, initalHeight / 2]; 175 176 operate(up,dn,op, {r:60,l:60}, linelen); 177 178 context = new Ctx(canvas, op, up, dn); 179 180 context.drawing = false; 181 182 canvas.addEventListener('mousedown', function(evt) { 183 184 if (context.drawing == false) 185 { 186 context.drawing = true; 187 loop(0); 188 }; 189 }, true); 190 } 191 192 function wavey(x) { 193 return ((Math.abs(Math.sin((1/3)*x))*10)/((1/18)*x)); 194 } 195 function draw() 196 { 197 var f = wavey(context.i+context.translation) + context.offset; 198 var a = scale(f, 60, 10, 60, 0); 199 200 var angles = { 201 l:a, 202 r:a 203 } 204 205 context.canvas.getContext('2d').clearRect(0,0,context.canvas.width,context.canvas.height); 206 207 context.up.loc = [canvas.width / 2, initalHeight / 2]; 208 context.dn.loc = [canvas.width / 2, initalHeight / 2]; 209 210 operate(context.up, context.dn, context.op, angles, linelen); 211 } 212 function loop(timestamp) { 213 214 draw(); 215 216 context.i += context.increment; 217 218 if (context.drawing && (context.i < 33 && context.i > 0)) 219 { 220 window.requestAnimationFrame(loop); 221 } 222 else 223 { 224 context.drawing = false; 225 context.increment *= -1; 226 227 if (context.translation == -33) 228 { 229 context.translation = 0; 230 context.offset = 0; 231 } 232 else 233 { 234 context.translation = -33; 235 context.offset = 60 - ((60 * Math.sin(11))/11); 236 } 237 } 238 } 239 240 function tol(val, target, tol) { 241 if (((target - tol) < val) && (val < (target + tol))) 242 { 243 return true; 244 } else 245 { 246 return false; 247 } 248 } 249 250 function scale(n, max, min, largest, smallest) { 251 return ( min + (max-min)/(largest-smallest)*(n-smallest)); 252 } 253 254 function mousePosition (evt,canvas) { 255 var rect = canvas.getBoundingClientRect(); 256 return { 257 x: evt.clientX - rect.left, 258 y: evt.clientY - rect.top 259 }; 260 } 261 function generateString (rule,generation) { 262 var string = rule.axiom +""; 263 for (var i = 0; i < generation; i++) { 264 for (var x = 0; x < rule.rules.length; x++) { 265 string = replaceAll(rule.rules[x][0],rule.rules[x][1],string); 266 } 267 } 268 return string; 269 } 270 271 function replaceAll(find, replace, str) { 272 return str.replace(new RegExp(find, 'g'), replace); 273 } 274 275 function operate (up,dn,op,turn,line) { 276 var turn = turn; 277 var stack = []; 278 up.head = 270; 279 dn.head = 270; 280 for (var i = 0; i < op.length; i++) { 281 if (op[i] == "0" || op[i] == "1") { 282 up.forward(line); 283 dn.forward(-line); 284 } else if (op[i] == "[") { 285 var val_up = [up.loc,up.head]; 286 var val_dn = [dn.loc,dn.head]; 287 stack.push(val_up) 288 stack.push(val_dn) 289 up.left(turn.l); 290 dn.left(turn.l); 291 } else if (op[i] == "]") { 292 var res_dn = stack.pop(); 293 dn.loc = res_dn[0]; 294 dn.head = res_dn[1]; 295 dn.right(turn.r); 296 297 var res_up = stack.pop(); 298 up.loc = res_up[0]; 299 up.head = res_up[1]; 300 up.right(turn.r); 301 } 302 } 303 } 304 </script> 305 <style> 306 #canvas { 307 position:fixed; 308 top:0px; 309 left:205px; 310 z-index:-1; 311 background-color:#204C58; 312 background-image:url('https://i.banna.tech/background.png'); 313 background-repeat:repeat; 314 } 315 @media screen and (max-width:950px) { 316 #canvas { 317 left:0px; 318 } 319 } 320 </style> 321 <canvas id="canvas"> </canvas> 322 323 </div> 324 </div> 325 </body> 326 </html>