jsfiddle.net
Open in
urlscan Pro
2606:4700:3037::6815:310f
Public Scan
URL:
https://jsfiddle.net/qcrbj1y8
Submission: On October 03 via manual from EE — Scanned from DE
Submission: On October 03 via manual from EE — Scanned from DE
Form analysis 1 forms found in the DOM
POST https://fiddle.jshell.net/_display/?editor_console=true
<form method="post" id="layout-container" target="result" action="https://fiddle.jshell.net/_display/?editor_console=true" autocomplete="off">
<input type="hidden" name="authenticity_token" value="9akzJpZ3ydoqOliE59Bg78FqkYN4rdUX3JYIunl5dzFxjVyY044SmaSbkNjWuukw/f0DtNWkiqvnf+QjJn7ZYw==">
<header id="header">
<section id="fiddle-info">
<ul class="headerActions">
<li class="sidebarToggle disabled">
<a data-tippy-simple-content="Collapse sidebar" data-tippy-pro="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 12C2 8.31087 2 6.4663 2.81382 5.15877C3.1149 4.67502 3.48891 4.25427 3.91891 3.91554C5.08116 3 6.72077 3 10 3H14C17.2792 3 18.9188 3 20.0811 3.91554C20.5111 4.25427 20.8851 4.67502 21.1862 5.15877C22 6.4663 22 8.31087 22 12C22 15.6891 22 17.5337 21.1862 18.8412C20.8851 19.325 20.5111 19.7457 20.0811 20.0845C18.9188 21 17.2792 21 14 21H10C6.72077 21 5.08116 21 3.91891 20.0845C3.48891 19.7457 3.1149 19.325 2.81382 18.8412C2 17.5337 2 15.6891 2 12Z"></path>
<path d="M9.5 3L9.5 21"></path>
<path d="M5 7H6M5 10H6"></path>
</svg>
</a>
</li>
<li class="disabled">
<a id="toggle-privacy" data-tippy-simple-content="Make this fiddle private" data-tippy-pro="" class="mode_public">
<svg class="tpPrivate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 16.5V14.5"></path>
<path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12104 13.2453 4 14.3624 4 15.5C4 16.6376 4.12104 17.7547 4.26781 18.8447Z"></path>
<path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9" stroke="currentColor"></path>
</svg>
<svg class="tpPublic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 16.5V14.5"></path>
<path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12105 13.2453 4 14.3624 4 15.5C4 16.6376 4.12105 17.7547 4.26781 18.8447Z"></path>
<path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C13.9593 2 15.5 3.5 16 5"></path>
</svg>
</a>
</li>
<li class="fiddleAuthor">
<div id="author-info" class="faCont">
<span class="pseudoAvatar" data-tippy-simple-content="Someone created this fiddle <strong>1 minute</strong> ago">AN</span>
</div>
<input type="hidden" name="description" value="">
<input type="text" name="title" placeholder="Untitled fiddle" value="" size="30">
</li>
</ul>
</section>
<ul id="actions" class="headerActions">
<li class="runButton">
<a id="run" data-tippy-simple-content="Run fiddle" data-tippy-shortcut="CMD + Enter" href="">
<svg width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" fill="none" stroke="currentColor"><path d="M23 4v6h-6"></path><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></g></svg>
<span>Run</span></a>
</li>
<li class="">
<a id="save" data-tippy-simple-content="Save fiddle" data-tippy-shortcut="CMD + S" href="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
</a>
</li>
<li class="visible">
<a id="fork" data-tippy-simple-content="Fork fiddle into a new one" href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 8C7.10457 8 8 7.10457 8 6C8 4.89543 7.10457 4 6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8Z"></path>
<path d="M12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20Z"></path>
<path d="M18 8C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8Z"></path>
<path d="M6.01734 8.74104C6.01734 10.4146 5.77537 12.1999 9.22051 11.9858H12.0053M17.9929 8.57654C18.1259 11.9858 16.9199 11.7651 15.7861 11.9858H12.0053M12.0053 15.7005V11.9858"></path>
</svg>
</a>
</li>
<li class="hidden ">
<a id="mark_favourite" data-tippy-simple-content="Set this version as base" href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 17.9808V9.70753C4 6.07416 4 4.25748 5.17157 3.12874C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.12874C20 4.25748 20 6.07416 20 9.70753V17.9808C20 20.2867 20 21.4396 19.2272 21.8523C17.7305 22.6514 14.9232 19.9852 13.59 19.1824C12.8168 18.7168 12.4302 18.484 12 18.484C11.5698 18.484 11.1832 18.7168 10.41 19.1824C9.0768 19.9852 6.26947 22.6514 4.77285 21.8523C4 21.4396 4 20.2867 4 17.9808Z"></path>
<path d="M4 7H20"></path>
</svg>
</a>
</li>
<li class="">
<a id="collaborate" data-tippy-simple-content="Collaborate on this fiddle" href="">
<svg width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" fill="none" stroke="currentColor"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></g></svg>
</a>
</li>
<li class="divider"></li>
<!-- <li class="actionItem dropdown">
<a id="upvote-iframe-load" class="aiButtonVote dropdownTrigger" href="#upvote" data-popover-trigger="upvote">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#87C449" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
Vote for features</a>
</li> -->
<li>
<a id="switch-grid" href="" data-tippy-simple-content="Change panels layout" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
<path d="M20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28248 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088Z"></path>
<path d="M9 21.5L9 2.5"></path>
<path d="M21.5 12L9 12"></path>
</svg>
</a>
</li>
<li>
<a class="showModalTrigger" href="" data-tippy-simple-content="Editor settings" data-modal-id="modal-editor-settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
<path d="M11 12C11 13.6569 9.65685 15 8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12Z"></path>
<path d="M16 6H8C4.68629 6 2 8.68629 2 12C2 15.3137 4.68629 18 8 18H16C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6Z"></path>
</svg>
</a>
</li>
<li>
<a id="switch-theme" href="" data-tippy-simple-content="Switch theme" aria-expanded="false">
<svg class="isLight" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z"></path>
</svg>
<svg class="isDark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"></path>
<path d="M12 2V3.5M12 20.5V22M19.0708 19.0713L18.0101 18.0106M5.98926 5.98926L4.9286 4.9286M22 12H20.5M3.5 12H2M19.0713 4.92871L18.0106 5.98937M5.98975 18.0107L4.92909 19.0714"></path>
</svg>
</a>
</li>
<li class="divider"></li>
<li class="visible ">
<a class="showModalTrigger" href="" data-modal-id="modal-embed" data-tippy-simple-content="Embed fiddle on websites/blogs">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 7C18.7745 7.16058 19.3588 7.42859 19.8284 7.87589C21 8.99181 21 10.7879 21 14.38C21 17.9721 21 19.7681 19.8284 20.8841C18.6569 22 16.7712 22 13 22H11C7.22876 22 5.34315 22 4.17157 20.8841C3 19.7681 3 17.9721 3 14.38C3 10.7879 3 8.99181 4.17157 7.87589C4.64118 7.42859 5.2255 7.16058 6 7"></path>
<path d="M12.0253 2.00052L12 14M12.0253 2.00052C11.8627 1.99379 11.6991 2.05191 11.5533 2.17492C10.6469 2.94006 9 4.92886 9 4.92886M12.0253 2.00052C12.1711 2.00657 12.3162 2.06476 12.4468 2.17508C13.3531 2.94037 15 4.92886 15 4.92886"></path>
</svg>
<span>Embed</span></a>
</li>
<li class="proButton">
<a href="/pro/" class="showModalTrigger" data-modal-id="modal-pro">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linecap="round" class="nc-icon-wrapper" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></g></svg>
<span>Go PRO</span></a>
</li>
</ul>
<!-- <div class="dropdownCont hidden" data-popover-ref="upvote" data-popover-position="left">
<div class="dcWrapper" style="width: 750px;" id="votehub-cont">
<script type="text/javascript">
let votehubLoaded = false
document.querySelector("#upvote-iframe-load").addEventListener("click", function(){
async function loadVoteHub(){
const response = await fetch("https://vote-hub.app/api/voter")
const obj = await response.json()
const userId = obj.voter
let frame = `<iframe src="https://vote-hub.app/votings/c3246f03-9571-43a3-b4ed-a26f4c290757/embed?identifier=${userId}&show_name=1&show_description=1&show_total=0&show_percent=1" style="width: 100%; min-height: calc(100vh - 90px); border: none"></iframe>`
let frameCont = document.querySelector("#voting-iframe-cont")
if (!votehubLoaded){
frameCont.innerHTML = frame
votehubLoaded = true
}
}
loadVoteHub()
})
</script>
<style>
#votehub-cont {
display: grid;
grid-template-columns: 2fr 1fr;
}
#voting-iframe-cont {
position: relative;
left: -10px;
width: 100%;
}
#approved-votes {
padding: 20px;
background-color: rgba(0,0,0,0.04);
border-radius: 10px;
}
#approved-votes h3 {
font-weight: bold;
font-size: 14px;
margin-bottom: 15px;
}
#approved-votes li {
margin-top: 5px;
}
#approved-votes a {
color: #2E71FF;
}
.aiButtonVote {
border: solid 1px rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 0 10px;
margin-top: 10px;
height: 35px;
display: flex;
outline: none;
text-decoration: none;
color: #fff;
align-items: center;
justify-content: center;
position: relative;
font-weight: bold;
}
.aiButtonVote:hover {
border: solid 1px #fff;
text-decoration: none;
}
.aiButtonVote svg {
margin-right: 7px;
}
.aiButtonVote:after {
content: "January";
display: block;
position: absolute;
right: -10px;
bottom: -12px;
color: #222;
font-size: 11px;
font-weight: normal;
border-radius: 5px;
padding: 2px 5px;
background-color: #87C449;
}
</style>
<div id="voting-iframe-cont">
Loading ...
</div>
<div id="approved-votes">
<h3>Planned features by votes</h3>
<ul>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Publish fiddles as mini-websites</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Save fiddles as templates</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Download a zipped fiddle</a></li>
</ul>
</div>
</div>
</div> -->
</header>
<aside id="sidebar">
<h1>
<a data-tippy-simple-content="Create a new fiddle" href="/">
<svg width="46px" height="33px" viewBox="0 0 46 33">
<g stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M23.4888889,20.543316 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473" id="Oval-1" stroke-linecap="round"></path>
<path d="M22.5111111,19.5900174 C24.5595344,21.7145959 26.9249697,24.4666667 29.5167986,24.4666667 C32.1278053,24.4666667 34.2444444,22.4967196 34.2444444,20.0666667 C34.2444444,17.6366138 32.1278053,15.6666667 29.5167986,15.6666667 C27.1652748,15.6666667 26.0154526,17.1207706 25.3570852,17.8208603" id="Oval-1-Copy" stroke-linecap="round"></path>
<path d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round"></path>
</g>
</svg>
<span class="seoTitle">JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.</span>
</a>
</h1>
<section id="sidebar-main">
<div class="sidebarItem si_collections">
<h3 class="toggler proBadge" data-tippy-simple-content="Collections">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path
d="M9.93417 1.25L10 1.25L14.0658 1.25C14.9523 1.24995 15.7161 1.24991 16.3278 1.33215C16.9833 1.42028 17.6117 1.61902 18.1213 2.12868C18.631 2.63835 18.8297 3.2667 18.9179 3.92221C19.0001 4.53387 19.0001 5.29769 19 6.18417L19 6.25C19 6.80229 18.5523 7.25 18 7.25C17.4477 7.25 17 6.80229 17 6.25C17 5.27893 16.9979 4.65122 16.9357 4.18871C16.8774 3.75497 16.7832 3.61902 16.7071 3.5429C16.631 3.46677 16.495 3.37263 16.0613 3.31431C15.5988 3.25213 14.9711 3.25 14 3.25H10C9.02893 3.25 8.40122 3.25213 7.93871 3.31431C7.50497 3.37263 7.36902 3.46677 7.2929 3.5429C7.21677 3.61902 7.12263 3.75497 7.06431 4.18871C7.00213 4.65122 7 5.27893 7 6.25C7 6.80229 6.55229 7.25 6 7.25C5.44772 7.25 5 6.80229 5 6.25L5 6.18417C4.99995 5.29769 4.99991 4.53387 5.08215 3.92221C5.17028 3.2667 5.36902 2.63835 5.87868 2.12868C6.38835 1.61902 7.0167 1.42028 7.67221 1.33215C8.28387 1.24991 9.04769 1.24995 9.93417 1.25Z"
fill="currentColor"></path>
<path opacity="0.4"
d="M16.0391 9.25C17.1754 9.24999 18.0826 9.24998 18.8104 9.32056C19.558 9.39306 20.1948 9.54555 20.7611 9.90142C21.3018 10.2411 21.7589 10.6982 22.0986 11.2389C22.4544 11.8052 22.6069 12.442 22.6794 13.1896C22.75 13.9174 22.75 14.8246 22.75 15.9609V16.0391C22.75 17.1754 22.75 18.0826 22.6794 18.8104C22.6069 19.558 22.4544 20.1948 22.0986 20.7611C21.7589 21.3018 21.3018 21.7589 20.7611 22.0986C20.1948 22.4544 19.558 22.6069 18.8104 22.6794C18.0826 22.75 17.1754 22.75 16.0391 22.75H7.96092C6.82461 22.75 5.91736 22.75 5.18963 22.6794C4.44204 22.6069 3.80522 22.4544 3.23886 22.0986C2.69825 21.7589 2.24111 21.3018 1.90142 20.7611C1.54555 20.1948 1.39306 19.558 1.32056 18.8104C1.24998 18.0826 1.24999 17.1754 1.25 16.0391V16.0391V15.9609V15.9609C1.24999 14.8246 1.24998 13.9174 1.32056 13.1896C1.39306 12.442 1.54555 11.8052 1.90142 11.2389C2.24111 10.6982 2.69825 10.2411 3.23886 9.90142C3.80522 9.54555 4.44204 9.39306 5.18963 9.32056C5.91736 9.24998 6.82462 9.24999 7.96093 9.25H7.96094H16.0391H16.0391Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 13C9.55228 13 10 13.4477 10 14C10 14.5523 10.4477 15 11 15H13C13.5523 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14C16 15.6569 14.6569 17 13 17H11C9.34315 17 8 15.6569 8 14C8 13.4477 8.44772 13 9 13Z"
fill="currentColor"></path>
<path
d="M16.0402 5.25H7.95983C7.29398 5.24999 6.73442 5.24998 6.27656 5.28738C5.79784 5.3265 5.34288 5.41144 4.91102 5.63148C4.25245 5.96704 3.71702 6.50247 3.38147 7.16104C3.16142 7.59289 3.07648 8.04785 3.03737 8.52658C3.00274 8.9504 3.00018 9.46132 3 10.0631C3.07764 10.0066 3.1573 9.95267 3.23885 9.90142C3.75778 9.57536 4.33585 9.42003 5.00409 9.34053C5.00802 9.0849 5.01571 8.87328 5.03073 8.68944C5.05974 8.3344 5.11104 8.17194 5.16348 8.06902C5.30729 7.78677 5.53676 7.5573 5.819 7.41349C5.92193 7.36105 6.08439 7.30975 6.43943 7.28074C6.80614 7.25078 7.28342 7.25 7.99999 7.25H16C16.7166 7.25 17.1938 7.25078 17.5606 7.28074C17.9156 7.30975 18.0781 7.36105 18.181 7.41349C18.4632 7.5573 18.6927 7.78677 18.8365 8.06902C18.8889 8.17194 18.9402 8.3344 18.9692 8.68944C18.9843 8.87328 18.992 9.08491 18.9959 9.34054C19.6641 9.42004 20.2422 9.57536 20.7611 9.90142C20.8427 9.95267 20.9223 10.0066 21 10.0631C20.9998 9.46132 20.9972 8.9504 20.9626 8.52658C20.9235 8.04785 20.8386 7.59289 20.6185 7.16104C20.283 6.50247 19.7475 5.96704 19.089 5.63148C18.6571 5.41144 18.2021 5.3265 17.7234 5.28738C17.2656 5.24998 16.706 5.24999 16.0402 5.25Z"
fill="currentColor"></path>
</svg>
<span>Collections <a class="proBadgeSelf" href="/pro/" target="_blank">PRO</a></span>
</h3>
<div class="body">
<h4>Select collections:</h4>
<ul class="commonActions">
<li>
<a class="showModalTrigger" data-modal-id="modal-pro" href="/pro/">
<svg viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path d="M12 4V20M20 12H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>New collection</span>
</a>
</li>
</ul>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem si_resources">
<script type="text/javascript">
var resources = []
</script>
<h3 class="toggler " data-tippy-simple-content="Resources">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.4038 14.0251C15.098 13.2945 16.0976 12.75 17.25 12.75C18.4024 12.75 19.402 13.2945 20.0962 14.0251C20.7838 14.7486 21.25 15.7359 21.25 16.75V19.75C21.25 20.3023 20.8023 20.75 20.25 20.75C19.6977 20.75 19.25 20.3023 19.25 19.75L19.25 16.75C19.25 16.3346 19.0447 15.8219 18.6464 15.4028C18.2549 14.9908 17.7544 14.75 17.25 14.75C16.7456 14.75 16.2451 14.9908 15.8536 15.4028C15.4553 15.8219 15.25 16.3346 15.25 16.75V20.25C15.25 20.5261 15.4739 20.75 15.75 20.75C16.0261 20.75 16.25 20.5261 16.25 20.25V16.75C16.25 16.1977 16.6977 15.75 17.25 15.75C17.8023 15.75 18.25 16.1977 18.25 16.75V20.25C18.25 21.6307 17.1307 22.75 15.75 22.75C14.3693 22.75 13.25 21.6307 13.25 20.25L13.25 16.75C13.25 15.7359 13.7162 14.7486 14.4038 14.0251Z"
fill="currentColor"></path>
<g opacity="0.4">
<path
d="M16.989 1.40314C15.8497 1.24997 14.3941 1.24998 12.5564 1.25H11.4436C9.60588 1.24998 8.15026 1.24997 7.01105 1.40313C5.83864 1.56076 4.8897 1.89287 4.14133 2.64123C3.39297 3.38958 3.06085 4.33852 2.90321 5.51094C2.75004 6.65014 2.75004 8.10576 2.75004 9.94351L2.75 14.5489C2.74998 16.1511 2.74996 17.4205 2.86865 18.4247C2.9905 19.4557 3.24632 20.3044 3.82812 21.0133C4.02552 21.2539 4.24609 21.4744 4.48664 21.6718C5.19558 22.2536 6.04427 22.5095 7.07523 22.6313C8.07942 22.75 9.34874 22.75 10.9509 22.75H12.5563C12.6912 22.75 12.8241 22.75 12.9548 22.7499C12.3611 22.0865 12 21.2104 12 20.25V16.75C12 15.3611 12.6299 14.0773 13.4976 13.1641C14.3804 12.2351 15.6916 11.5 17.25 11.5C18.8084 11.5 20.1196 12.2351 21.0024 13.1641C21.0873 13.2534 21.1699 13.3464 21.2499 13.4426V9.94359C21.25 8.10585 21.25 6.65018 21.0968 5.51098C20.9392 4.33856 20.6071 3.38961 19.8587 2.64124C19.1103 1.89288 18.1614 1.56076 16.989 1.40314Z"
fill="currentColor"></path>
<path d="M19.3252 21.8018C19.2806 21.7816 19.2367 21.76 19.1936 21.7371C19.1627 21.8084 19.1297 21.8786 19.0947 21.9475C19.1732 21.9017 19.2501 21.8532 19.3252 21.8018Z" fill="currentColor"></path>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 6C6.75 5.58579 7.08579 5.25 7.5 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6C17.25 6.41421 16.9142 6.75 16.5 6.75H7.5C7.08579 6.75 6.75 6.41421 6.75 6Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 10C6.75 9.58579 7.08579 9.25 7.5 9.25H13.5C13.9142 9.25 14.25 9.58579 14.25 10C14.25 10.4142 13.9142 10.75 13.5 10.75H7.5C7.08579 10.75 6.75 10.4142 6.75 10Z" fill="currentColor">
</path>
</svg>
<span> Resources <strong class="resourcesLabel">URL</strong> <strong class="resourcesLabel">cdnjs</strong>
<em id="resource-counter" class="hidden">0</em>
</span>
</h3>
<div class="body">
<ul id="external_resources_list">
</ul>
<div id="external-resources-form">
<p>
<input id="external_resource" type="text" name="q" value="" placeholder="JavaScript/CSS URL" autocomplete="off">
<a id="add_external_resource" class="submit" href="#" title="Add resource">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</a>
</p>
</div>
<input type="hidden" value="" id="external_resources_id" name="add_external_resources">
<ul class="resourcesInfo">
<li>Paste a direct CSS/JS URL</li>
<li>Type a library name to fetch from CDNJS</li>
</ul>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem si_async">
<h3 class="toggler" data-tippy-simple-content="Async requests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6V3C11 2.44772 11.4477 2 12 2Z" fill="currentColor"></path>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C12.5523 17 13 17.4477 13 18V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V18C11 17.4477 11.4477 17 12 17Z" fill="currentColor"></path>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M17 12C17 11.4477 17.4477 11 18 11L21 11C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H18C17.4477 13 17 12.5523 17 12Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11L6 11C6.55228 11 7 11.4477 7 12C7 12.5523 6.55228 13 6 13H3C2.44772 13 2 12.5523 2 12Z" fill="currentColor"></path>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
d="M19.0706 4.92961C19.4611 5.32014 19.4611 5.9533 19.0706 6.34383L16.9493 8.46515C16.5588 8.85567 15.9256 8.85567 15.5351 8.46515C15.1446 8.07462 15.1446 7.44146 15.5351 7.05093L17.6564 4.92961C18.0469 4.53909 18.6801 4.53909 19.0706 4.92961Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.46515 15.5351C8.85567 15.9256 8.85567 16.5588 8.46515 16.9493L6.34383 19.0706C5.9533 19.4611 5.32014 19.4611 4.92961 19.0706C4.53909 18.6801 4.53909 18.0469 4.92961 17.6564L7.05093 15.5351C7.44146 15.1446 8.07462 15.1446 8.46515 15.5351Z"
fill="currentColor"></path>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd"
d="M15.5351 15.5351C15.9256 15.1446 16.5588 15.1446 16.9493 15.5351L19.0706 17.6564C19.4611 18.0469 19.4611 18.6801 19.0706 19.0706C18.6801 19.4611 18.0469 19.4611 17.6564 19.0706L15.5351 16.9493C15.1446 16.5588 15.1446 15.9256 15.5351 15.5351Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.92961 4.92961C5.32014 4.53909 5.9533 4.53909 6.34383 4.92961L8.46515 7.05093C8.85567 7.44146 8.85567 8.07462 8.46515 8.46515C8.07462 8.85567 7.44146 8.85567 7.05093 8.46515L4.92961 6.34383C4.53909 5.9533 4.53909 5.32014 4.92961 4.92961Z"
fill="currentColor"></path>
</svg>
<span>Async requests</span>
</h3>
<div class="body">
<p>Simulating async requests:</p>
<ul class="asyncTable">
<li><strong>JSON</strong> <a href="#" target="_blank"><code>/echo/json/</code></a></li>
<li><strong>JSONP</strong> <a href="#" target="_blank"><code>/echo/jsonp/</code></a></li>
<li><strong>HTML</strong> <a href="https://jsfiddle.net/6he52mnr/1/" target="_blank"><code>/echo/html/</code></a></li>
<li><strong>XML</strong> <a href="#" target="_blank"><code>/echo/xml/</code></a></li>
</ul>
<p>See <a href="https://jsfiddle.gitbook.io/help/async-requests" target="_new">docs</a> for more info.</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem si_changelog">
<a class="showModalTrigger toggler" data-tippy-simple-content="Changelog" data-modal-id="modal-changelog">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path opacity="0.4" d="M12.5564 1.25C14.3941 1.24998 15.8497 1.24997 16.989 1.40314C18.1614 1.56076 19.1103 1.89288 19.8587 2.64124C20.6071 3.38961 20.9392 4.33856 21.0968 5.51098C21.25 6.65018 21.2499 8.1058 21.2499 9.94354V9.94359V14.0564V14.0565C21.2499 15.8942 21.25 17.3498 21.0968 18.489C20.9392 19.6614 20.6071 20.6104 19.8587 21.3588C19.1103 22.1071 18.1614 22.4392 16.989 22.5969C15.8497 22.75 14.3941 22.75 12.5564 22.75H12.5563H11.4436H11.4435C9.60579 22.75 8.15016 22.75 7.01094 22.5969C5.83851 22.4392 4.88956 22.1071 4.14119 21.3587C3.39283 20.6104 3.06072 19.6614 2.9031 18.489C2.74994 17.3498 2.74997 15.8941 2.75 14.0564V14.0563L2.75004 9.94351C2.75004 8.10576 2.75004 6.65014 2.90321 5.51094C3.06085 4.33852 3.39297 3.38958 4.14133 2.64123C4.88969 1.89287 5.83863 1.56076 7.01105 1.40313C8.15025 1.24997 9.60587 1.24998 11.4436 1.25H11.4436H12.5563H12.5564Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7C7 6.44772 7.44772 6 8 6H16C16.5523 6 17 6.44772 17 7C17 7.55228 16.5523 8 16 8H8C7.44772 8 7 7.55228 7 7ZM7 12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12ZM7 17C7 16.4477 7.44772 16 8 16L12 16C12.5523 16 13 16.4477 13 17C13 17.5523 12.5523 18 12 18L8 18C7.44771 18 7 17.5523 7 17Z" fill="currentColor"></path>
</svg>
<span>Changelog</span>
</a>
</div> <!-- /sidebarItem -->
<div id="widgets">
<h4>JSFiddle Apps</h4>
<ul>
<li>
<a href="" class="showModalTrigger buttonCPG" data-modal-source="/widget/color-palette-generator" data-modal-id="modal-cpg" data-tippy-simple-content="Color Palette Generator">
<svg width="38px" height="40px" viewBox="0 0 38 40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(18.000000, 0.000000)" fill-rule="nonzero">
<path d="M20,3 C20,1.447 18.552,0 17,0 L1,0 C0.448,0 0,0.447 0,1 L0,30 L20,30 L20,3 Z" fill="#F5EEE2"></path>
<path d="M1,40 L17,40 C18.552,40 20,38.553 20,37 L20,30 L0,30 L0,39 C0,39.553 0.448,40 1,40 Z" fill="#E6E6E6"></path>
<circle fill="#B3B3B3" cx="10" cy="35" r="3"></circle>
</g>
<g transform="translate(9.000000, 0.000000)" fill-rule="nonzero">
<path d="M20,3 C20,1.447 18.552,0 17,0 L1,0 C0.448,0 0,0.447 0,1 L0,30 L20,30 L20,3 Z" fill="#FB7F64"></path>
<path d="M1,40 L19,40 C19.552,40 20,39.553 20,39 L20,30 L0,30 L0,39 C0,39.553 0.448,40 1,40 Z" fill="#E6E6E6"></path>
<circle fill="#B3B3B3" cx="10" cy="35" r="3"></circle>
</g>
<g fill-rule="nonzero">
<path d="M20,3 C20,1.447 18.552,0 17,0 L3,0 C1.448,0 0,1.447 0,3 L0,30 L20,30 L20,3 Z" fill="#3E503C"></path>
<path d="M3,40 L19,40 C19.552,40 20,39.553 20,39 L20,30 L0,30 L0,37 C0,38.553 1.448,40 3,40 Z" fill="#E6E6E6"></path>
<circle fill="#B3B3B3" cx="10" cy="35" r="3"></circle>
</g>
<rect fill-opacity="0.05" fill="#000000" x="20" y="30" width="1" height="10"></rect>
<rect fill-opacity="0.05" fill="#000000" x="29" y="30" width="1" height="10"></rect>
</svg><span>Color Palette Generator</span>
</a>
</li>
</ul>
</div>
</section>
<section id="sidebar-user">
<ul class="commonActions">
<li>
<a href="/user/login/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
<span>Sign in</span>
</a>
</li>
</ul>
</section>
<section id="sidebar-footer">
<div class="twitterCont">
<!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jsfiddlenet" id="_carbonads_js"></script> -->
<script type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIEKQ7&placement=jsfiddlenet" id="_carbonads_js"></script>
<div id="ethical-sponsor" data-ea-publisher="jsfiddlenet" data-ea-manual="true" data-ea-verbosity="quiet" data-ea-type="image"></div>
</div>
<!-- <div id="support-jsfiddle">
<h3>Support the development of JSFiddle and get extra features ✌🏻</h3>
<a href="/pro/">Become a supporter</a>
</div> -->
<!-- <div id="fallback">
<a href="https://instagram.com/oskarkrawczyk" target="_blank">
<h3>Lifestyle, adventure and backstage photographer based in Warsaw, Poland.</h3>
<img src="/img/fallback/logo-adunit.jpg" />
</a>
</div> -->
<!-- <div id="fallback">
<a href="https://pixelpeeper.com/exif-data-viewer?utm_source=jsfiddle" target="_blank">
<h3>Exif Data Viewer: turn JPG files into Lightroom presets.</h3>
<img src="/img/fallback/logo-adunit.jpg" />
</a>
</div> -->
</section>
</aside> <!-- #sidebar -->
<main id="content">
<div id="editor">
<div class="panel-v left" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_html" name="code_html" style="display: none;"></textarea>
<div class="windowLabelCont codeLang_html">
<a id="panel-settings-html" class="windowLabel showModalTrigger" data-panel="html" data-modal-id="modal-panel-options" data-trigger-check="#panel-settings-section-html">
<span class="label">HTML</span>
<div class="iconCont"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" fill="none" class="nc-icon-wrapper"><path d="M6 9l6 6 6-6"></path></g></svg></div>
</a>
<a class="panelTidy" data-panel="html" data-tippy-simple-content="Tidy the code with Prettify">
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 1.815 C 3.450 1.931,3.282 2.167,3.260 2.442 C 3.235 2.750,3.376 3.005,3.657 3.161 L 3.800 3.240 6.000 3.240 L 8.200 3.240 8.337 3.168 C 8.614 3.022,8.765 2.750,8.740 2.442 C 8.718 2.167,8.550 1.931,8.293 1.815 C 8.176 1.762,8.128 1.761,6.000 1.761 C 3.872 1.761,3.824 1.762,3.707 1.815 M10.740 1.798 C 10.429 1.909,10.208 2.274,10.257 2.595 C 10.300 2.873,10.520 3.136,10.775 3.211 C 10.965 3.268,11.538 3.269,11.726 3.213 C 11.907 3.159,12.108 2.978,12.186 2.796 C 12.259 2.625,12.254 2.340,12.173 2.173 C 12.099 2.021,11.915 1.852,11.769 1.803 C 11.607 1.747,10.891 1.744,10.740 1.798 M3.707 5.309 C 3.110 5.578,3.102 6.402,3.693 6.683 C 3.826 6.746,3.834 6.746,4.749 6.746 L 5.671 6.747 5.835 6.665 C 6.106 6.530,6.247 6.302,6.247 6.000 C 6.247 5.698,6.106 5.470,5.835 5.335 L 5.671 5.253 4.749 5.254 C 3.880 5.254,3.820 5.258,3.707 5.309 M8.293 5.278 C 7.978 5.374,7.761 5.668,7.761 6.000 C 7.761 6.395,8.050 6.709,8.442 6.740 C 8.751 6.765,9.006 6.624,9.160 6.343 C 9.227 6.221,9.238 6.171,9.238 6.000 C 9.238 5.829,9.227 5.779,9.160 5.657 C 9.065 5.483,8.915 5.350,8.752 5.295 C 8.625 5.251,8.407 5.244,8.293 5.278 M11.237 5.296 C 11.083 5.351,10.917 5.502,10.833 5.663 C 10.774 5.776,10.761 5.835,10.761 6.000 C 10.761 6.242,10.841 6.420,11.016 6.569 C 11.224 6.748,11.243 6.750,12.550 6.741 C 13.692 6.734,13.723 6.732,13.827 6.676 C 14.085 6.536,14.239 6.284,14.239 6.000 C 14.239 5.716,14.085 5.464,13.827 5.324 C 13.722 5.268,13.695 5.267,12.533 5.262 C 11.544 5.257,11.328 5.263,11.237 5.296 M3.779 8.785 C 3.426 8.911,3.228 9.211,3.260 9.569 C 3.278 9.763,3.349 9.905,3.499 10.044 C 3.706 10.235,3.761 10.245,4.548 10.235 L 5.240 10.227 5.364 10.154 C 5.700 9.956,5.841 9.532,5.681 9.195 C 5.597 9.017,5.399 8.840,5.225 8.789 C 5.036 8.732,3.934 8.730,3.779 8.785 M7.779 8.785 C 7.426 8.911,7.228 9.211,7.260 9.569 C 7.284 9.836,7.454 10.071,7.707 10.185 C 7.824 10.237,7.874 10.239,9.735 10.239 C 11.881 10.240,11.799 10.247,12.007 10.044 C 12.163 9.893,12.222 9.758,12.235 9.531 C 12.249 9.283,12.178 9.112,11.994 8.946 C 11.765 8.740,11.835 8.747,9.735 8.748 C 8.245 8.749,7.860 8.756,7.779 8.785 M3.808 12.277 C 3.120 12.466,3.065 13.402,3.724 13.700 C 3.817 13.742,3.956 13.747,5.253 13.747 L 6.680 13.747 6.805 13.684 C 7.062 13.557,7.253 13.265,7.253 13.000 C 7.253 12.735,7.062 12.443,6.805 12.316 L 6.680 12.253 5.307 12.248 C 4.252 12.244,3.904 12.250,3.808 12.277 " stroke="none" fill="currentColor" fill-rule="evenodd"></path></svg>
</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-overlayscroll fontSize_1" translate="no" style="clip-path: inset(0px);">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-overlayscroll-horizontal" cm-not-content="true" style="display: none;">
<div></div>
</div>
<div class="CodeMirror-overlayscroll-vertical" cm-not-content="true" style="display: block; bottom: 0px;">
<div style="height: 46.4977px; top: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 6032px; padding-right: 6px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>302</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 18.5938px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation" style="">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">html</span>, <span class="cm-tag">body</span> {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">position</span>: <span class="cm-atom">absolute</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">top</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">left</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">right</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">7</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">bottom</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">8</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">padding</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>//<span class="cm-property">cursor</span>: <span class="cm-atom">none</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">margin</span>: <span class="cm-number">0px</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">overflow</span>: <span class="cm-atom">hidden</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">display</span>: <span class="cm-atom">flex</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">height</span>: <span class="cm-number">100%</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">width</span>: <span class="cm-number">100%</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">background-color</span>: <span class="cm-atom">#000</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag">canvas</span> {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">19</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">margin</span>: <span class="cm-atom">auto</span> <span class="cm-atom">auto</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">20</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">21</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">style</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">22</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">23</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">id</span>=<span class="cm-string">"2d-fragment-shader"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"x-shader/x-fragment"</span><span class="cm-tag cm-bracket">></span>// <![CDATA[</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">24</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">25</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">// Look below at line 23 for realism.</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">26</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">27</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">#ifdef GL_ES</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">28</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">precision mediump float;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">29</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">#endif</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">30</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">31</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">#define PI 3.14159265359</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">32</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">#define G 0.0000000006674</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">33</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">34</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform sampler2D u_image;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">35</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">varying vec2 v_texCoord;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">36</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">37</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform vec2 u_resolution;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">38</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform vec2 u_mouse;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">39</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform float u_mass;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">40</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform float u_time;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">41</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">uniform float u_clickedTime;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">42</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">43</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">vec2 rotate(vec2 mt, vec2 st, float angle){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">44</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>//float cos = cos((angle + u_clickedTime) * PI); // try replacing * 1.0 with * PI</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">45</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>//float sin = sin(angle * 0.0); // try removing the * 0.0</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">46</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>//if(abs(angle) < 0.05)</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">47</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> // angle = 0.0;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">48</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>// Uncomment these two lines for realism</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">49</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float cos = cos(angle);// * (1.0 + u_clickedTime * 0.3);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">50</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float sin = 0.0;//sin(angle) * (u_clickedTime * 0.3);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">51</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">52</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float nx = (cos * (st.x - mt.x)) + (sin * (st.y - mt.y)) + mt.x;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">53</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float ny = (cos * (st.y - mt.y)) - (sin * (st.x - mt.x)) + mt.y;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">54</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>return vec2(nx, ny);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">55</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">56</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">57</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">void main() {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">58</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> vec2 st = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y)/u_resolution;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">59</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>vec2 mt = vec2(u_mouse.x, u_resolution.y - u_mouse.y)/u_resolution;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">60</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">61</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float dx = st.x - mt.x;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">62</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float dy = st.y - mt.y;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">63</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">64</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float dist = sqrt((dx * dx + dy * dy)*1024.0);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">65</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>//float distsq =(dx * dx + dy * dy);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">66</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>float pull = (100000000000.0*(1.0-u_clickedTime))/(dist*dist)*G;//(u_mass-u_clickedTime) / (dist * dist * dist * dist);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">67</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">68</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> vec3 color = vec3(0.0);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">69</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">70</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>vec2 r = rotate(mt,st,pull);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">71</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>vec4 imgcolor = texture2D(u_image, r);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">72</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>color = vec3(</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">73</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>(imgcolor.x - (pull * 0.19)),</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">74</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>(imgcolor.y - (pull * 0.19)), </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">75</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>(imgcolor.z - (pull * 0.19))</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">76</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">77</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">78</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">79</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> gl_FragColor = vec4(color,1.);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">80</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">81</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;">// ]]><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">82</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">id</span>=<span class="cm-string">"2d-vertex-shader"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"x-shader/x-vertex"</span><span class="cm-tag cm-bracket">></span>// <![CDATA[</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">83</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>attribute vec2 a_position;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">84</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>attribute vec2 a_texCoord;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">85</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">86</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>varying vec2 v_texCoord;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">87</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>void main() {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">88</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>gl_Position = vec4(a_position, 0, 1);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">89</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>v_texCoord = a_texCoord;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">90</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">91</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>// ]]><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">92</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">93</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">94</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// set up global javascript variables</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">95</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">96</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">bgUrl</span> <span class="cm-operator">=</span> <span class="cm-string">'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Hubble_ultra_deep_field.jpg/2048px-Hubble_ultra_deep_field.jpg'</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">97</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">98</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">blackholeMass</span> <span class="cm-operator">=</span> <span class="cm-number">1500</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">99</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">curblackholeMass</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">100</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">101</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">canvas</span>, <span class="cm-def">gl</span>; <span class="cm-comment">// canvas and webgl context</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">102</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">103</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">shaderScript</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">104</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">shaderSource</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">105</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">vertexShader</span>; <span class="cm-comment">// Vertex shader. Not much happens in that shader, it just creates the vertex's to be drawn on</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">106</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">fragmentShader</span>; <span class="cm-comment">// this shader is where the magic happens. Fragment = pixel. Vertex = kind of like "faces" on a 3d model. </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">107</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">buffer</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">108</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">109</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">110</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">/* Variables holding the location of uniform variables in the WebGL. We use this to send info to the WebGL script. */</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">111</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">locationOfTime</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">112</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">locationOfResolution</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">113</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">locationOfMouse</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">114</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">locationOfMass</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">115</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">locationOfclickedTime</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">116</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">117</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">originY</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span>,</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">118</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-def">originX</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">119</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">120</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">mouse</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">121</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">122</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">startTime</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Date</span>().<span class="cm-property">getTime</span>(); <span class="cm-comment">// Get start time for animating</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">123</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">currentTime</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">124</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">125</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">clicked</span> <span class="cm-operator">=</span> <span class="cm-atom">false</span>,</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">126</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-def">clickedTime</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">127</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">128</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">document</span>).<span class="cm-property">mousedown</span>(<span class="cm-keyword">function</span>(){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">129</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">clicked</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">130</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">131</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">$</span>(<span class="cm-variable">document</span>).<span class="cm-property">mouseup</span>(<span class="cm-keyword">function</span>(){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">132</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">clicked</span> <span class="cm-operator">=</span> <span class="cm-atom">false</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">133</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">134</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">135</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">init</span>(<span class="cm-def">image</span>) {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">136</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// standard canvas setup here, except get webgl context</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">137</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">canvas</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">'glscreen'</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">138</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span> <span class="cm-operator">=</span> <span class="cm-variable">canvas</span>.<span class="cm-property">getContext</span>(<span class="cm-string">'webgl'</span>) <span class="cm-operator">||</span> <span class="cm-variable">canvas</span>.<span class="cm-property">getContext</span>(<span class="cm-string">'experimental-webgl'</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">139</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">canvas</span>.<span class="cm-property">width</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> <span class="cm-operator">>=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span> <span class="cm-operator">?</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> : <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">140</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">canvas</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> <span class="cm-operator">>=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span> <span class="cm-operator">?</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> : <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">141</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">142</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span> <span class="cm-operator">=</span> {<span class="cm-property">x</span>: <span class="cm-variable">originX</span><span class="cm-operator">/</span><span class="cm-number">2</span>, <span class="cm-property">y</span>: <span class="cm-operator">-</span>(<span class="cm-variable">originY</span><span class="cm-operator">/</span><span class="cm-number">2</span>) <span class="cm-operator">+</span> <span class="cm-variable">canvas</span>.<span class="cm-property">height</span>, <span class="cm-property">moved</span>: <span class="cm-atom">false</span>};</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">143</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">$</span>(<span class="cm-variable">document</span>).<span class="cm-property">mousemove</span>(<span class="cm-keyword">function</span>(<span class="cm-def">e</span>) {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">144</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span>.<span class="cm-property">x</span> <span class="cm-operator">=</span> <span class="cm-variable-2">e</span>.<span class="cm-property">pageX</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">145</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span>.<span class="cm-property">y</span> <span class="cm-operator">=</span> <span class="cm-operator">-</span><span class="cm-variable-2">e</span>.<span class="cm-property">pageY</span> <span class="cm-operator">+</span> <span class="cm-variable">canvas</span>.<span class="cm-property">height</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">146</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span>.<span class="cm-property">moved</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">147</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>});</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">148</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">149</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// give WebGL it's viewport</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">150</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">viewport</span>(<span class="cm-number">0</span>, <span class="cm-number">0</span>, <span class="cm-variable">gl</span>.<span class="cm-property">drawingBufferWidth</span>, <span class="cm-variable">gl</span>.<span class="cm-property">drawingBufferHeight</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">151</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">152</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// kind of back-end stuff</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">153</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">buffer</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createBuffer</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">154</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">bindBuffer</span>(<span class="cm-variable">gl</span>.<span class="cm-property">ARRAY_BUFFER</span>, <span class="cm-variable">buffer</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">155</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">bufferData</span>(</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">156</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">ARRAY_BUFFER</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">157</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">new</span> <span class="cm-variable">Float32Array</span>([</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">158</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">159</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">160</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">161</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">162</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">163</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>]), </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">164</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">STATIC_DRAW</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">165</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>); <span class="cm-comment">// ^^ That up there sets up the vertex's used to draw onto. I think at least, I haven't payed much attention to vertex's yet, for all I know I'm wrong.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">166</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">167</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">shaderScript</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">"2d-vertex-shader"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">168</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">shaderSource</span> <span class="cm-operator">=</span> <span class="cm-variable">shaderScript</span>.<span class="cm-property">text</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">169</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">vertexShader</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createShader</span>(<span class="cm-variable">gl</span>.<span class="cm-property">VERTEX_SHADER</span>); <span class="cm-comment">//create the vertex shader from script</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">170</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">shaderSource</span>(<span class="cm-variable">vertexShader</span>, <span class="cm-variable">shaderSource</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">171</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">compileShader</span>(<span class="cm-variable">vertexShader</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">172</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">173</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">shaderScript</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">"2d-fragment-shader"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">174</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">shaderSource</span> <span class="cm-operator">=</span> <span class="cm-variable">shaderScript</span>.<span class="cm-property">text</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">175</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">fragmentShader</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createShader</span>(<span class="cm-variable">gl</span>.<span class="cm-property">FRAGMENT_SHADER</span>); <span class="cm-comment">//create the fragment from script</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">176</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">shaderSource</span>(<span class="cm-variable">fragmentShader</span>, <span class="cm-variable">shaderSource</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">177</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">compileShader</span>(<span class="cm-variable">fragmentShader</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">178</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">179</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">program</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createProgram</span>(); <span class="cm-comment">// create the WebGL program. This variable will be used to inject our javascript variables into the program.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">180</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">attachShader</span>(<span class="cm-variable">program</span>, <span class="cm-variable">vertexShader</span>); <span class="cm-comment">// add the shaders to the program</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">181</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">attachShader</span>(<span class="cm-variable">program</span>, <span class="cm-variable">fragmentShader</span>); <span class="cm-comment">// ^^</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">182</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">linkProgram</span>(<span class="cm-variable">program</span>);<span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-comment">// Tell our WebGL application to use the program</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">183</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">useProgram</span>(<span class="cm-variable">program</span>); <span class="cm-comment">// ^^ yep, but now literally use it.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">184</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">185</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">186</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">/* </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">187</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">188</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>Alright, so here we're attatching javascript variables to the WebGL code. First we get the location of the uniform variable inside the program. </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">189</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">190</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>We use the gl.getUniformLocation function to do this, and pass thru the program variable we created above, as well as the name of the uniform variable in our shader.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">191</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">192</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>*/</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">193</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfResolution</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_resolution"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">194</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfMouse</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_mouse"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">195</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfMass</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_mass"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">196</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfTime</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_time"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">197</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfclickedTime</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_clickedTime"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">198</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">199</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">/*</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">200</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">201</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>Then we simply apply our javascript variables to the program. </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">202</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>Notice, it gets a bit tricky doing this. If you're editing a float value, gl.uniformf works. </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">203</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">204</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>But if we want to send over an array of floats, for example, we'd use gl.uniform2f. We're specifying that we are sending 2 floats at the end. </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">205</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">206</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>You can also send it over to the program as a vector, by using gl.uniform2fv.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">207</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>To read up on all of the different gl.uniform** stuff, to send any variable you want, I'd recommend using the table (found on this site, but you need to scroll down about 300px) </span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">208</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">209</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html#uniforms</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">210</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">211</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-comment"><span class="cm-tab" role="presentation" cm-text=" "> </span>*/</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">212</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform2f</span>(<span class="cm-variable">locationOfResolution</span>, <span class="cm-variable">canvas</span>.<span class="cm-property">width</span>, <span class="cm-variable">canvas</span>.<span class="cm-property">height</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">213</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform2f</span>(<span class="cm-variable">locationOfMouse</span>, <span class="cm-variable">mouse</span>.<span class="cm-property">x</span>, <span class="cm-variable">mouse</span>.<span class="cm-property">y</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">214</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfMass</span>, <span class="cm-variable">curblackholeMass</span><span class="cm-operator">*</span><span class="cm-number">0.00001</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">215</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfTime</span>, <span class="cm-variable">currentTime</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">216</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfclickedTime</span>, <span class="cm-variable">clickedTime</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">217</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">218</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">219</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">var</span> <span class="cm-def">texCoordLocation</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getAttribLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"a_texCoord"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">220</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">221</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// provide texture coordinates for the rectangle.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">222</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">var</span> <span class="cm-def">texCoordBuffer</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createBuffer</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">223</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">bindBuffer</span>(<span class="cm-variable">gl</span>.<span class="cm-property">ARRAY_BUFFER</span>, <span class="cm-variable-2">texCoordBuffer</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">224</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">bufferData</span>(<span class="cm-variable">gl</span>.<span class="cm-property">ARRAY_BUFFER</span>, <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">new</span> <span class="cm-variable">Float32Array</span>([</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">225</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">226</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">227</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">228</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-operator">-</span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">229</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-operator">-</span><span class="cm-number">1.0</span>, </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">230</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-number">1.0</span>, <span class="cm-number">1.0</span>]), </span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">231</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-variable">gl</span>.<span class="cm-property">STATIC_DRAW</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">232</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">enableVertexAttribArray</span>(<span class="cm-variable-2">texCoordLocation</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">233</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">vertexAttribPointer</span>(<span class="cm-variable-2">texCoordLocation</span>, <span class="cm-number">2</span>, <span class="cm-variable">gl</span>.<span class="cm-property">FLOAT</span>, <span class="cm-atom">false</span>, <span class="cm-number">0</span>, <span class="cm-number">0</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">234</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">235</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Create a texture.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">236</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">var</span> <span class="cm-def">texture</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">createTexture</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">237</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">bindTexture</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-variable-2">texture</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">238</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">239</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Set the parameters so we can render any size image.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">240</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">texParameteri</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_WRAP_S</span>, <span class="cm-variable">gl</span>.<span class="cm-property">REPEAT</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">241</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">texParameteri</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_WRAP_T</span>, <span class="cm-variable">gl</span>.<span class="cm-property">REPEAT</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">242</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">texParameteri</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_MIN_FILTER</span>, <span class="cm-variable">gl</span>.<span class="cm-property">NEAREST</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">243</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">texParameteri</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_MAG_FILTER</span>, <span class="cm-variable">gl</span>.<span class="cm-property">NEAREST</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">244</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">245</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Upload the image into the texture.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">246</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">texImage2D</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TEXTURE_2D</span>, <span class="cm-number">0</span>, <span class="cm-variable">gl</span>.<span class="cm-property">RGBA</span>, <span class="cm-variable">gl</span>.<span class="cm-property">RGBA</span>, <span class="cm-variable">gl</span>.<span class="cm-property">UNSIGNED_BYTE</span>, <span class="cm-variable-2">image</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">247</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">248</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">render</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">249</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">250</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">251</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">render</span>() {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">252</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">var</span> <span class="cm-def">now</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Date</span>().<span class="cm-property">getTime</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">253</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">currentTime</span> <span class="cm-operator">=</span> (<span class="cm-variable-2">now</span> <span class="cm-operator">-</span> <span class="cm-variable">startTime</span>) <span class="cm-operator">/</span> <span class="cm-number">1000</span>; <span class="cm-comment">// update the current time for animations</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">254</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">255</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">if</span>(<span class="cm-variable">curblackholeMass</span> <span class="cm-operator"><</span> <span class="cm-variable">blackholeMass</span> <span class="cm-operator">-</span> <span class="cm-number">50</span>){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">256</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">curblackholeMass</span> <span class="cm-operator">+=</span> (<span class="cm-variable">blackholeMass</span><span class="cm-operator">-</span><span class="cm-variable">curblackholeMass</span>) <span class="cm-operator">*</span> <span class="cm-number">0.03</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">257</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">258</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">259</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">if</span>(<span class="cm-variable">clicked</span>){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">260</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">clickedTime</span> <span class="cm-operator">+=</span> <span class="cm-number">0.03</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">261</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span>(<span class="cm-variable">clickedTime</span> <span class="cm-operator">></span> <span class="cm-number">0</span> <span class="cm-operator">&&</span> <span class="cm-variable">clicked</span> <span class="cm-operator">==</span> <span class="cm-atom">false</span>) {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">262</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">clickedTime</span> <span class="cm-operator">+=</span> <span class="cm-operator">-</span>(<span class="cm-variable">clickedTime</span><span class="cm-operator">*</span><span class="cm-number">0.015</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">263</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">264</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">265</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">if</span>(<span class="cm-variable">mouse</span>.<span class="cm-property">moved</span> <span class="cm-operator">==</span> <span class="cm-atom">false</span>){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">266</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span>.<span class="cm-property">y</span> <span class="cm-operator">=</span> (<span class="cm-operator">-</span>(<span class="cm-variable">originY</span><span class="cm-operator">/</span><span class="cm-number">2</span>) <span class="cm-operator">+</span> <span class="cm-variable">Math</span>.<span class="cm-property">sin</span>(<span class="cm-variable">currentTime</span> <span class="cm-operator">*</span> <span class="cm-number">0.7</span>) <span class="cm-operator">*</span> ((<span class="cm-variable">originY</span> <span class="cm-operator">*</span> <span class="cm-number">0.25</span>))) <span class="cm-operator">+</span> <span class="cm-variable">canvas</span>.<span class="cm-property">height</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">267</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">mouse</span>.<span class="cm-property">x</span> <span class="cm-operator">=</span> (<span class="cm-variable">originX</span><span class="cm-operator">/</span><span class="cm-number">2</span>) <span class="cm-operator">+</span> <span class="cm-variable">Math</span>.<span class="cm-property">sin</span>(<span class="cm-variable">currentTime</span> <span class="cm-operator">*</span> <span class="cm-number">0.6</span>) <span class="cm-operator">*</span> <span class="cm-operator">-</span>(<span class="cm-variable">originX</span> <span class="cm-operator">*</span> <span class="cm-number">0.35</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">268</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">269</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">270</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfMass</span>, <span class="cm-variable">curblackholeMass</span><span class="cm-operator">*</span><span class="cm-number">0.00001</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">271</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform2f</span>(<span class="cm-variable">locationOfMouse</span>, <span class="cm-variable">mouse</span>.<span class="cm-property">x</span>, <span class="cm-variable">mouse</span>.<span class="cm-property">y</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">272</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfTime</span>, <span class="cm-variable">currentTime</span>); <span class="cm-comment">// update the time uniform in our shader</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">273</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">uniform1f</span>(<span class="cm-variable">locationOfclickedTime</span>, <span class="cm-variable">clickedTime</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">274</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">275</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">window</span>.<span class="cm-property">requestAnimationFrame</span>(<span class="cm-variable">render</span>, <span class="cm-variable">canvas</span>); <span class="cm-comment">// request the next frame</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">276</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">277</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">positionLocation</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getAttribLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"a_position"</span>); <span class="cm-comment">// do stuff for those vertex's</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">278</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">enableVertexAttribArray</span>(<span class="cm-variable">positionLocation</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">279</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">vertexAttribPointer</span>(<span class="cm-variable">positionLocation</span>, <span class="cm-number">2</span>, <span class="cm-variable">gl</span>.<span class="cm-property">FLOAT</span>, <span class="cm-atom">false</span>, <span class="cm-number">0</span>, <span class="cm-number">0</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">280</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">drawArrays</span>(<span class="cm-variable">gl</span>.<span class="cm-property">TRIANGLES</span>, <span class="cm-number">0</span>, <span class="cm-number">6</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">281</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">282</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">283</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">window</span>.<span class="cm-property">addEventListener</span>(<span class="cm-string">'load'</span>, <span class="cm-keyword">function</span>(<span class="cm-def">event</span>){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">284</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">var</span> <span class="cm-def">image</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Image</span>();</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">285</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable-2">image</span>.<span class="cm-property">crossOrigin</span> <span class="cm-operator">=</span> <span class="cm-string">"Anonymous"</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">286</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable-2">image</span>.<span class="cm-property">src</span> <span class="cm-operator">=</span> <span class="cm-variable">bgUrl</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">287</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable-2">image</span>.<span class="cm-property">onload</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">288</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">init</span>(<span class="cm-variable-2">image</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">289</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">290</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">291</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">292</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">293</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">window</span>.<span class="cm-property">addEventListener</span>(<span class="cm-string">'resize'</span>, <span class="cm-keyword">function</span>(<span class="cm-def">event</span>){</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">294</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// just re-doing some stuff in the init here, to enable resizing.</span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">295</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">296</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">canvas</span>.<span class="cm-property">width</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> <span class="cm-operator">>=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span> <span class="cm-operator">?</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> : <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">297</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">canvas</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> <span class="cm-operator">>=</span> <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span> <span class="cm-operator">?</span> <span class="cm-variable">window</span>.<span class="cm-property">innerWidth</span> : <span class="cm-variable">window</span>.<span class="cm-property">innerHeight</span>;</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">298</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">gl</span>.<span class="cm-property">viewport</span>(<span class="cm-number">0</span>, <span class="cm-number">0</span>, <span class="cm-variable">canvas</span>.<span class="cm-property">width</span>, <span class="cm-variable">canvas</span>.<span class="cm-property">height</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">299</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">locationOfResolution</span> <span class="cm-operator">=</span> <span class="cm-variable">gl</span>.<span class="cm-property">getUniformLocation</span>(<span class="cm-variable">program</span>, <span class="cm-string">"u_resolution"</span>);</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">300</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">301</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">302</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">canvas</span> <span class="cm-attribute">id</span>=<span class="cm-string">"glscreen"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">canvas</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 6032px;"></div>
<div class="CodeMirror-gutters" style="height: 6082px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_js" name="code_js" style="display: none;"></textarea>
<div class="windowLabelCont codeLang_js focused">
<a id="panel-settings-js" class="windowLabel showModalTrigger" data-panel="js" data-modal-id="modal-panel-options" data-trigger-check="#panel-settings-section-js">
<span class="label">JavaScript</span>
<div class="iconCont"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" fill="none" class="nc-icon-wrapper"><path d="M6 9l6 6 6-6"></path></g></svg></div>
</a>
<a class="panelTidy" data-panel="js" data-tippy-simple-content="Tidy the code with Prettify">
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 1.815 C 3.450 1.931,3.282 2.167,3.260 2.442 C 3.235 2.750,3.376 3.005,3.657 3.161 L 3.800 3.240 6.000 3.240 L 8.200 3.240 8.337 3.168 C 8.614 3.022,8.765 2.750,8.740 2.442 C 8.718 2.167,8.550 1.931,8.293 1.815 C 8.176 1.762,8.128 1.761,6.000 1.761 C 3.872 1.761,3.824 1.762,3.707 1.815 M10.740 1.798 C 10.429 1.909,10.208 2.274,10.257 2.595 C 10.300 2.873,10.520 3.136,10.775 3.211 C 10.965 3.268,11.538 3.269,11.726 3.213 C 11.907 3.159,12.108 2.978,12.186 2.796 C 12.259 2.625,12.254 2.340,12.173 2.173 C 12.099 2.021,11.915 1.852,11.769 1.803 C 11.607 1.747,10.891 1.744,10.740 1.798 M3.707 5.309 C 3.110 5.578,3.102 6.402,3.693 6.683 C 3.826 6.746,3.834 6.746,4.749 6.746 L 5.671 6.747 5.835 6.665 C 6.106 6.530,6.247 6.302,6.247 6.000 C 6.247 5.698,6.106 5.470,5.835 5.335 L 5.671 5.253 4.749 5.254 C 3.880 5.254,3.820 5.258,3.707 5.309 M8.293 5.278 C 7.978 5.374,7.761 5.668,7.761 6.000 C 7.761 6.395,8.050 6.709,8.442 6.740 C 8.751 6.765,9.006 6.624,9.160 6.343 C 9.227 6.221,9.238 6.171,9.238 6.000 C 9.238 5.829,9.227 5.779,9.160 5.657 C 9.065 5.483,8.915 5.350,8.752 5.295 C 8.625 5.251,8.407 5.244,8.293 5.278 M11.237 5.296 C 11.083 5.351,10.917 5.502,10.833 5.663 C 10.774 5.776,10.761 5.835,10.761 6.000 C 10.761 6.242,10.841 6.420,11.016 6.569 C 11.224 6.748,11.243 6.750,12.550 6.741 C 13.692 6.734,13.723 6.732,13.827 6.676 C 14.085 6.536,14.239 6.284,14.239 6.000 C 14.239 5.716,14.085 5.464,13.827 5.324 C 13.722 5.268,13.695 5.267,12.533 5.262 C 11.544 5.257,11.328 5.263,11.237 5.296 M3.779 8.785 C 3.426 8.911,3.228 9.211,3.260 9.569 C 3.278 9.763,3.349 9.905,3.499 10.044 C 3.706 10.235,3.761 10.245,4.548 10.235 L 5.240 10.227 5.364 10.154 C 5.700 9.956,5.841 9.532,5.681 9.195 C 5.597 9.017,5.399 8.840,5.225 8.789 C 5.036 8.732,3.934 8.730,3.779 8.785 M7.779 8.785 C 7.426 8.911,7.228 9.211,7.260 9.569 C 7.284 9.836,7.454 10.071,7.707 10.185 C 7.824 10.237,7.874 10.239,9.735 10.239 C 11.881 10.240,11.799 10.247,12.007 10.044 C 12.163 9.893,12.222 9.758,12.235 9.531 C 12.249 9.283,12.178 9.112,11.994 8.946 C 11.765 8.740,11.835 8.747,9.735 8.748 C 8.245 8.749,7.860 8.756,7.779 8.785 M3.808 12.277 C 3.120 12.466,3.065 13.402,3.724 13.700 C 3.817 13.742,3.956 13.747,5.253 13.747 L 6.680 13.747 6.805 13.684 C 7.062 13.557,7.253 13.265,7.253 13.000 C 7.253 12.735,7.062 12.443,6.805 12.316 L 6.680 12.253 5.307 12.248 C 4.252 12.244,3.904 12.250,3.808 12.277 " stroke="none" fill="currentColor" fill-rule="evenodd"></path></svg>
</a>
<span class="isModuleInfo" data-tippy-placement="auto" data-tippy-simple-content="You can import/export other fiddles as modules, for example: <br><code>import moduleName from '@jsfiddle/oskar/9s8a71.js'</code>"><em>Module</em></span>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-overlayscroll fontSize_1 CodeMirror-focused" translate="no" style="clip-path: inset(0px);">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-overlayscroll-horizontal" cm-not-content="true" style="display: none;">
<div></div>
</div>
<div class="CodeMirror-overlayscroll-vertical" cm-not-content="true" style="display: none;">
<div></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 27px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors" style="">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 18.5938px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 27px;"></div>
<div class="CodeMirror-gutters" style="height: 77px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-horizontal" style="width: 1px;"></div>
<div class="panel-v right" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_css" name="code_css" style="display: none;"></textarea>
<div class="windowLabelCont codeLang_css">
<a id="panel-settings-css" class="windowLabel showModalTrigger" data-panel="css" data-modal-id="modal-panel-options" data-trigger-check="#panel-settings-section-css">
<span class="label">CSS</span>
<div class="iconCont"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" fill="none" class="nc-icon-wrapper"><path d="M6 9l6 6 6-6"></path></g></svg></div>
</a>
<a class="panelTidy" data-panel="css" data-tippy-simple-content="Tidy the code with Prettify">
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.707 1.815 C 3.450 1.931,3.282 2.167,3.260 2.442 C 3.235 2.750,3.376 3.005,3.657 3.161 L 3.800 3.240 6.000 3.240 L 8.200 3.240 8.337 3.168 C 8.614 3.022,8.765 2.750,8.740 2.442 C 8.718 2.167,8.550 1.931,8.293 1.815 C 8.176 1.762,8.128 1.761,6.000 1.761 C 3.872 1.761,3.824 1.762,3.707 1.815 M10.740 1.798 C 10.429 1.909,10.208 2.274,10.257 2.595 C 10.300 2.873,10.520 3.136,10.775 3.211 C 10.965 3.268,11.538 3.269,11.726 3.213 C 11.907 3.159,12.108 2.978,12.186 2.796 C 12.259 2.625,12.254 2.340,12.173 2.173 C 12.099 2.021,11.915 1.852,11.769 1.803 C 11.607 1.747,10.891 1.744,10.740 1.798 M3.707 5.309 C 3.110 5.578,3.102 6.402,3.693 6.683 C 3.826 6.746,3.834 6.746,4.749 6.746 L 5.671 6.747 5.835 6.665 C 6.106 6.530,6.247 6.302,6.247 6.000 C 6.247 5.698,6.106 5.470,5.835 5.335 L 5.671 5.253 4.749 5.254 C 3.880 5.254,3.820 5.258,3.707 5.309 M8.293 5.278 C 7.978 5.374,7.761 5.668,7.761 6.000 C 7.761 6.395,8.050 6.709,8.442 6.740 C 8.751 6.765,9.006 6.624,9.160 6.343 C 9.227 6.221,9.238 6.171,9.238 6.000 C 9.238 5.829,9.227 5.779,9.160 5.657 C 9.065 5.483,8.915 5.350,8.752 5.295 C 8.625 5.251,8.407 5.244,8.293 5.278 M11.237 5.296 C 11.083 5.351,10.917 5.502,10.833 5.663 C 10.774 5.776,10.761 5.835,10.761 6.000 C 10.761 6.242,10.841 6.420,11.016 6.569 C 11.224 6.748,11.243 6.750,12.550 6.741 C 13.692 6.734,13.723 6.732,13.827 6.676 C 14.085 6.536,14.239 6.284,14.239 6.000 C 14.239 5.716,14.085 5.464,13.827 5.324 C 13.722 5.268,13.695 5.267,12.533 5.262 C 11.544 5.257,11.328 5.263,11.237 5.296 M3.779 8.785 C 3.426 8.911,3.228 9.211,3.260 9.569 C 3.278 9.763,3.349 9.905,3.499 10.044 C 3.706 10.235,3.761 10.245,4.548 10.235 L 5.240 10.227 5.364 10.154 C 5.700 9.956,5.841 9.532,5.681 9.195 C 5.597 9.017,5.399 8.840,5.225 8.789 C 5.036 8.732,3.934 8.730,3.779 8.785 M7.779 8.785 C 7.426 8.911,7.228 9.211,7.260 9.569 C 7.284 9.836,7.454 10.071,7.707 10.185 C 7.824 10.237,7.874 10.239,9.735 10.239 C 11.881 10.240,11.799 10.247,12.007 10.044 C 12.163 9.893,12.222 9.758,12.235 9.531 C 12.249 9.283,12.178 9.112,11.994 8.946 C 11.765 8.740,11.835 8.747,9.735 8.748 C 8.245 8.749,7.860 8.756,7.779 8.785 M3.808 12.277 C 3.120 12.466,3.065 13.402,3.724 13.700 C 3.817 13.742,3.956 13.747,5.253 13.747 L 6.680 13.747 6.805 13.684 C 7.062 13.557,7.253 13.265,7.253 13.000 C 7.253 12.735,7.062 12.443,6.805 12.316 L 6.680 12.253 5.307 12.248 C 4.252 12.244,3.904 12.250,3.808 12.277 " stroke="none" fill="currentColor" fill-rule="evenodd"></path></svg>
</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-overlayscroll fontSize_1" translate="no" style="clip-path: inset(0px);">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-overlayscroll-horizontal" cm-not-content="true" style="display: none;">
<div></div>
</div>
<div class="CodeMirror-overlayscroll-vertical" cm-not-content="true" style="display: none;">
<div></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 27px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 18.5938px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 27px;"></div>
<div class="CodeMirror-gutters" style="height: 77px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel resultsPanel" style="height: calc(50% - 0.5px);">
<div class="resultsCont minimized consoleEnabled">
<div class="iframeCont">
<iframe name="result"
allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events; speaker-selection;"
sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" allowpaymentrequest="" frameborder="0"
src="//fiddle.jshell.net/qcrbj1y8/show/?editor_console=">
</iframe>
</div>
<div class="windowLabelCont">
<span class="windowLabel hidden"> Result </span>
<em class="size hidden">675px</em>
</div>
<div id="console">
<section class="header">
<svg class="logo" height="16" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<polyline points="4,17 10,11 4,5"></polyline>
<line x1="12" x2="20" y1="19" y2="19"></line>
</g>
</svg>
<h3>Console</h3>
<div class="consoleActions">
<a id="console-clear" href="#">Clear console</a>
<a id="console-minimize" href="#">Minimize</a>
</div>
<div id="console-summary">
<span class="log ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="info ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="warn ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<path
d="M10.29 3.86l-8.47 14.14 -7.80912e-08 1.35236e-07c-.552351.956547-.224686 2.17975.73186 2.7321 .297614.171855.634491.264121.97814.267898h16.94l-1.12917e-07 1.24109e-09c1.1045-.0121397 1.99004-.917357 1.9779-2.02186 -.00377709-.343648-.0960428-.680526-.267898-.97814l-8.47-14.14 1.92952e-08 3.18097e-08c-.572861-.944407-1.80285-1.2456-2.74726-.672744 -.275097.166869-.505875.397647-.672744.672744Z">
</path>
<line x1="12" x2="12" y1="9" y2="13"></line>
<line x1="12" x2="12.01" y1="17" y2="17"></line>
</g>
</svg>0 </span>
<span class="error active">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<polygon points="7.86,2 16.14,2 22,7.86 22,16.14 16.14,22 7.86,22 2,16.14 2,7.86 7.86,2"></polygon>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>1 </span>
</div>
</section>
<ul id="console-output">
<li class="system">JSFiddle Console (beta). Turn on/off in Editor settings.</li>
<li class="system">☁️ "Running fiddle"</li>
<li class="error">"<a class='gotoLine' href='#337:16'>337:16</a> Uncaught TypeError: Cannot set properties of undefined (setting 'width')"</li>
</ul><input id="console-input" type="text" placeholder=">_">
</div>
</div>
</div>
</div>
</div>
<div id="problem-banner"></div>
</main> <!-- #content -->
<div class="modalBody hasHeader commonLayout mediumModal" id="modal-panel-options">
<div class="modalApp">
<header>
<h1>Code panel options</h1>
<h2>Change code languages, preprocessors and plugins</h2>
</header>
<main class="modalContent">
<div id="modal-top-menu">
<ul class="commonActions">
<li>
<label class="fxLink">
<input id="panel-settings-section-html" type="radio" name="modalTopMenu" value="1" checked="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path opacity="0.3"
d="M16.326 2.25C17.359 2.24997 18.2153 2.24994 18.8841 2.34627C19.5877 2.44761 20.2181 2.6721 20.6833 3.22714C21.1465 3.77985 21.2624 4.44172 21.249 5.15733C21.2361 5.84111 21.1001 6.69801 20.9352 7.7363L19.5518 16.4526C19.4001 17.4078 19.1964 18.183 18.7028 18.8047C18.2074 19.4287 17.4982 19.8003 16.5912 20.1548L13.6974 21.2858L13.5922 21.327C12.9918 21.5623 12.5129 21.75 12 21.75C11.4871 21.75 11.0082 21.5623 10.4078 21.327L10.4078 21.327L10.3026 21.2858L7.40879 20.1548C6.50182 19.8003 5.79259 19.4287 5.29715 18.8047C4.80361 18.183 4.59985 17.4078 4.44824 16.4526L3.06474 7.73624C2.89992 6.69797 2.76389 5.8411 2.75102 5.15733C2.73756 4.44172 2.85348 3.77985 3.3167 3.22714C3.78187 2.6721 4.41229 2.44761 5.1159 2.34627C5.78474 2.24994 6.64101 2.24997 7.67398 2.25H7.67401H16.326H16.326Z"
fill="currentColor"></path>
<path
d="M10.0269 7C9.77907 7 9.51005 7.0115 9.25813 7.06737C8.99694 7.12529 8.67847 7.24735 8.41894 7.52632C8.15803 7.80676 8.05936 8.13523 8.02236 8.40473C7.98689 8.66311 7.99905 8.93419 8.02145 9.18257L8.20243 11.1896C8.2348 11.5485 8.30216 12.1624 8.77232 12.5858C9.23758 13.0048 9.85209 13.0141 10.2079 13.0141L12.9304 13.0141C13.1388 13.0141 13.243 13.0141 13.3027 13.0806C13.3623 13.1472 13.3509 13.2507 13.328 13.4579L13.2072 14.5538L11.9594 14.9732L10.6624 14.5373C10.5238 14.0493 10.035 13.7362 9.52495 13.8273C8.98127 13.9244 8.61922 14.4438 8.71629 14.9875C8.76163 15.2414 8.85139 15.579 9.10768 15.8777C9.36411 16.1766 9.68609 16.3191 9.94161 16.405L11.3152 16.8666L11.3467 16.8773L11.3532 16.8795C11.4743 16.921 11.705 17 11.9594 17C12.2139 17 12.4445 16.921 12.5656 16.8795L12.5725 16.8772L12.6046 16.8663L13.8399 16.4511C13.9762 16.4053 14.1424 16.3495 14.2869 16.2827C14.4444 16.2098 14.6567 16.0892 14.8347 15.8695C15.0134 15.649 15.0872 15.4157 15.1254 15.2452C15.1603 15.0897 15.1795 14.9158 15.195 14.7745L15.3646 13.236C15.3924 12.9839 15.4101 12.7093 15.379 12.4474C15.3468 12.1747 15.2527 11.8392 14.9904 11.5517C14.7296 11.2658 14.4062 11.1414 14.1426 11.0826C13.8879 11.0258 13.6151 11.0141 13.3631 11.0141L10.5603 11.014C10.3867 11.014 10.2999 11.014 10.2426 10.9617C10.1853 10.9093 10.1775 10.8229 10.1619 10.65L10.0524 9.43594C10.034 9.2321 10.0248 9.13018 10.0843 9.0651C10.1438 9.00002 10.2461 9.00002 10.4508 9.00002L15 9C15.5523 9 16 8.55228 16 8C16 7.44771 15.5523 7 15 7H10.0269Z"
fill="currentColor"></path>
</svg>
<span>HTML</span>
</label>
</li>
<li>
<label class="fxLink">
<input id="panel-settings-section-js" type="radio" name="modalTopMenu" value="2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path opacity="0.3"
d="M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50272 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03144 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03144 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50272 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.7326 11.25C12.1468 11.25 12.4826 11.5858 12.4826 12V16C12.4826 17.5188 11.2513 18.75 9.73256 18.75C8.71373 18.75 7.82528 18.1956 7.35092 17.3755C7.14351 17.017 7.26603 16.5582 7.62458 16.3508C7.98313 16.1434 8.44192 16.2659 8.64933 16.6245C8.86659 17 9.27083 17.25 9.73256 17.25C10.4229 17.25 10.9826 16.6904 10.9826 16V12C10.9826 11.5858 11.3183 11.25 11.7326 11.25Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.9844 13.5C13.9844 12.2574 14.9917 11.25 16.2344 11.25H16.7344C17.7532 11.25 18.6417 11.8044 19.116 12.6245C19.3234 12.983 19.2009 13.4418 18.8424 13.6492C18.4838 13.8566 18.025 13.7341 17.8176 13.3755C17.6003 13 17.1961 12.75 16.7344 12.75H16.2344C15.8202 12.75 15.4844 13.0858 15.4844 13.5C15.4844 13.9142 15.8202 14.25 16.2344 14.25H17.2344C18.477 14.25 19.4844 15.2574 19.4844 16.5C19.4844 17.7426 18.477 18.75 17.2344 18.75H16.7344C15.7155 18.75 14.8271 18.1956 14.3527 17.3755C14.1453 17.017 14.2678 16.5582 14.6264 16.3508C14.9849 16.1434 15.4437 16.2659 15.6511 16.6245C15.8684 17 16.2726 17.25 16.7344 17.25H17.2344C17.6486 17.25 17.9844 16.9142 17.9844 16.5C17.9844 16.0858 17.6486 15.75 17.2344 15.75H16.2344C14.9917 15.75 13.9844 14.7426 13.9844 13.5Z"
fill="currentColor"></path>
</svg>
<span>JavaScript</span>
</label>
</li>
<li>
<label class="fxLink">
<input id="panel-settings-section-css" type="radio" name="modalTopMenu" value="3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none">
<path opacity="0.3"
d="M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50272 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03144 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03144 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50272 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z"
fill="currentColor"></path>
<path
d="M15.25 8C15.25 7.58579 15.5858 7.25 16 7.25C17.0473 7.25 17.8655 8.11469 17.8655 9.14286V10.3838C17.8655 10.4937 17.9083 10.5956 17.979 10.668L18.3733 11.0721C18.8756 11.5866 18.8755 12.4134 18.3733 12.9279L17.979 13.332C17.9083 13.4043 17.8655 13.5063 17.8655 13.6162V14.8571C17.8655 15.8853 17.0473 16.75 16 16.75C15.5858 16.75 15.25 16.4142 15.25 16C15.25 15.5858 15.5858 15.25 16 15.25C16.1849 15.25 16.3655 15.0913 16.3655 14.8571V13.6162C16.3655 13.12 16.5578 12.6405 16.9055 12.2843L17.183 12L16.9055 11.7157C16.5578 11.3595 16.3655 10.88 16.3655 10.3838V9.14286C16.3655 8.90866 16.1849 8.75 16 8.75C15.5858 8.75 15.25 8.41421 15.25 8Z"
fill="currentColor"></path>
<path
d="M8.75 8C8.75 7.58579 8.41421 7.25 8 7.25C6.95269 7.25 6.13448 8.11469 6.13448 9.14286V10.3838C6.13448 10.4937 6.09167 10.5956 6.02105 10.668L5.62665 11.0721C5.12445 11.5866 5.12445 12.4134 5.62665 12.9279L6.02105 13.332C6.09167 13.4043 6.13448 13.5063 6.13448 13.6162V14.8571C6.13448 15.8853 6.95269 16.75 8 16.75C8.41421 16.75 8.75 16.4142 8.75 16C8.75 15.5858 8.41421 15.25 8 15.25C7.81515 15.25 7.63448 15.0913 7.63448 14.8571V13.6162C7.63448 13.12 7.44224 12.6405 7.09447 12.2843L6.81702 12L7.09447 11.7157C7.44224 11.3595 7.63448 10.88 7.63448 10.3838V9.14286C7.63448 8.90866 7.81515 8.75 8 8.75C8.41421 8.75 8.75 8.41421 8.75 8Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 12C9 11.4477 9.44772 11 10 11H10.009C10.5612 11 11.009 11.4477 11.009 12C11.009 12.5523 10.5612 13 10.009 13H10C9.44772 13 9 12.5523 9 12ZM12.991 12C12.991 11.4477 13.4388 11 13.991 11H14C14.5523 11 15 11.4477 15 12C15 12.5523 14.5523 13 14 13H13.991C13.4388 13 12.991 12.5523 12.991 12Z"
fill="currentColor"></path>
</svg>
<span>CSS</span>
</label>
</li>
</ul>
</div>
<div id="panel-options-tabs">
<div class="windowSettings html" data-panel="html">
<section>
<h3>Language</h3>
<ul class="multiRadioCont commonActions smallActions">
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_html" data-panel_id="id_code_html" data-panel="html" data-panel-name="HTML" data-mime-type="text/html" value="0" checked="">
<span>HTML</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_html" data-panel_id="id_code_html" data-panel="html" data-panel-name="HAML" data-mime-type="text/x-haml" value="1">
<span>HAML</span>
</label>
</li>
</ul> <!-- /multiRadioCont -->
</section>
<section>
<h3>Doctype</h3>
<div class="selectCont">
<select name="doctype">
<option id="dtd_XHTML 1.0 Strict" value="1">XHTML 1.0 Strict</option>
<option id="dtd_XHTML 1.0 Transitional" value="2">XHTML 1.0 Transitional</option>
<option selected="" id="dtd_HTML 5" value="3">HTML 5</option>
<option id="dtd_HTML 4.01 Strict" value="4">HTML 4.01 Strict</option>
<option id="dtd_HTML 4.01 Transitional" value="5">HTML 4.01 Transitional</option>
<option id="dtd_HTML 4.01 Frameset" value="6">HTML 4.01 Frameset</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
</section>
<!-- <section>
<h3>Body tag</h3>
<div class="fieldCont">
<input id="id_body_tag" type="text" name="body_tag" maxlength="255" value="">
</div>
</section> -->
<input id="id_body_tag" type="hidden" name="body_tag" maxlength="255" value="">
</div> <!-- /windowSettings -->
<div class="windowSettings js" data-panel="js">
<section>
<h3>Language</h3>
<ul class="multiRadioCont commonActions smallActions">
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="JavaScript" data-mime-type="text/javascript" value="0" checked="">
<span>JavaScript</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="CoffeeScript" data-mime-type="text/coffeescript" value="1">
<span>CoffeeScript</span>
</label>
</li>
<li style="display:none">
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="JavaScript 1.7" data-mime-type="application/javascript" value="2">
<span>JavaScript 1.7</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="Babel + JSX" data-mime-type="text/jsx" value="3">
<span>Babel + JSX</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="TypeScript" data-mime-type="text/typescript" value="4">
<span>TypeScript</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="CoffeeScript 2" data-mime-type="text/coffeescript" value="5">
<span>CoffeeScript 2</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="Vue" data-mime-type="text/javascript" value="6">
<span>Vue</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="React" data-mime-type="text/jsx" value="7">
<span>React</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_js" data-panel_id="id_code_js" data-panel="js" data-panel-name="Preact" data-mime-type="text/jsx" value="8">
<span>Preact</span>
</label>
</li>
</ul> <!-- /multiRadioCont -->
</section>
<section>
<h3>Extensions</h3>
<div class="panelExtrasChoice">
<div class="selectCont">
<select name="js_lib" id="js_lib">
<optgroup label="Alpine.js">
<option value="409">Alpine.js 2.1.2</option>
</optgroup>
<optgroup label="AngularJS">
<option value="137">AngularJS 1.1.1</option>
<option value="180">AngularJS 1.2.1</option>
<option value="283">AngularJS 1.4.8</option>
<option value="281">AngularJS 2.0.0-alpha.47</option>
</optgroup>
<optgroup label="Bonsai">
<option value="120">Bonsai 0.4.1</option>
</optgroup>
<optgroup label="Brick">
<option value="176">Brick edge</option>
</optgroup>
<optgroup label="CreateJS">
<option value="170">CreateJS 2013.09.25</option>
<option value="279">CreateJS 2015.05.21</option>
</optgroup>
<optgroup label="D3">
<option value="134">D3 3.x</option>
<option value="386">D3 4.13.0</option>
<option value="397">D3 5.9.2</option>
</optgroup>
<optgroup label="Dojo">
<option value="87">Dojo (nightly)</option>
<option value="372">Dojo 1.4.8</option>
<option value="370">Dojo 1.5.6</option>
<option value="368">Dojo 1.6.5</option>
<option value="366">Dojo 1.7.12</option>
<option value="364">Dojo 1.8.14</option>
<option value="362">Dojo 1.9.11</option>
<option value="360">Dojo 1.10.8</option>
<option value="358">Dojo 1.11.4</option>
<option value="356">Dojo 1.12.2</option>
</optgroup>
<optgroup label="Ember">
<option value="190">Ember (latest)</option>
</optgroup>
<optgroup label="Enyo">
<option value="115">Enyo (nightly)</option>
<option value="116">Enyo 2.0.1</option>
<option value="121">Enyo 2.1</option>
<option value="145">Enyo 2.2.0</option>
<option value="214">Enyo 2.4.0</option>
<option value="238">Enyo 2.5.1</option>
<option value="299">Enyo 2.7.0</option>
</optgroup>
<optgroup label="ExtJS">
<option value="23">ExtJS 3.1.0</option>
<option value="109">ExtJS 3.4.0</option>
<option value="107">ExtJS 4.1.0</option>
<option value="80">ExtJS 4.1.1</option>
<option value="147">ExtJS 4.2.0</option>
<option value="258">ExtJS 5.0.0</option>
<option value="256">ExtJS 5.1.0</option>
<option value="338">ExtJS 6.2.0</option>
</optgroup>
<optgroup label="FabricJS">
<option value="250">FabricJS 1.5.0</option>
<option value="342">FabricJS 1.7.7</option>
<option value="378">FabricJS 1.7.15</option>
<option value="380">FabricJS 1.7.20</option>
</optgroup>
<optgroup label="Glow">
</optgroup>
<optgroup label="Inferno">
<option value="336">Inferno 1.0.0-beta9</option>
</optgroup>
<optgroup label="JSBlocks">
<option value="252">JSBlocks (edge)</option>
</optgroup>
<optgroup label="KineticJS">
<option value="124">KineticJS 4.0.5</option>
<option value="139">KineticJS 4.3.1</option>
</optgroup>
<optgroup label="Knockout.js">
<option value="104">Knockout.js 2.0.0</option>
<option value="117">Knockout.js 2.1.0</option>
<option value="122">Knockout.js 2.2.1</option>
<option value="163">Knockout.js 2.3.0</option>
<option value="172">Knockout.js 3.0.0</option>
<option value="388">Knockout.js 3.4.2</option>
</optgroup>
<optgroup label="Lo-Dash">
<option value="167">Lo-Dash 2.2.1</option>
</optgroup>
<optgroup label="Minified">
<option value="164">Minified 1.0 beta1</option>
</optgroup>
<optgroup label="MithrilJS">
<option value="273">MithrilJS 0.2.0</option>
<option value="390">MithrilJS 1.1.6</option>
</optgroup>
<optgroup label="Mootools">
<option value="59">Mootools (nightly)</option>
<option value="62">Mootools 1.3.2</option>
<option value="63">Mootools 1.3.2 (compat)</option>
<option value="95">Mootools 1.4.5</option>
<option value="96">Mootools 1.4.5 (compat)</option>
<option value="216">Mootools 1.5.1</option>
<option value="263">Mootools 1.5.2</option>
<option value="329">Mootools 1.5.2 (compat)</option>
<option value="325">Mootools 1.6.0</option>
<option value="327">Mootools 1.6.0 (compat)</option>
</optgroup>
<optgroup label="No-Library">
<option value="11" selected="">No-Library (pure JS)</option>
</optgroup>
<optgroup label="OpenUI5">
<option value="271">OpenUI5 (latest, mobile)</option>
</optgroup>
<optgroup label="Paper.js">
<option value="158">Paper.js 0.22</option>
</optgroup>
<optgroup label="Pixi">
<option value="315">Pixi 3.0.11</option>
<option value="331">Pixi 4.0.0</option>
</optgroup>
<optgroup label="Processing.js">
<option value="67">Processing.js 1.2.3</option>
<option value="81">Processing.js 1.3.6</option>
<option value="135">Processing.js 1.4.1</option>
<option value="206">Processing.js 1.4.7</option>
</optgroup>
<optgroup label="Prototype">
<option value="4">Prototype 1.6.1.0</option>
<option value="265">Prototype 1.7.3</option>
</optgroup>
<optgroup label="RactiveJS">
<option value="287">RactiveJS 0.7.3</option>
</optgroup>
<optgroup label="Raphael">
<option value="30">Raphael 1.4</option>
<option value="36">Raphael 1.5.2</option>
<option value="76">Raphael 2.1.0</option>
</optgroup>
<optgroup label="React">
<option value="159">React 0.3.2</option>
<option value="166">React 0.4.0</option>
<option value="184">React 0.8.0</option>
<option value="192">React 0.9.0</option>
<option value="285">React 0.14.3</option>
</optgroup>
<optgroup label="RightJS">
<option value="45">RightJS 2.1.1</option>
<option value="136">RightJS 2.3.1</option>
</optgroup>
<optgroup label="Riot">
<option value="382">Riot 3.7.4</option>
</optgroup>
<optgroup label="Shipyard">
<option value="99">Shipyard (nightly)</option>
<option value="105">Shipyard 0.2</option>
</optgroup>
<optgroup label="Thorax">
<option value="143">Thorax 2.0.0rc3</option>
<option value="174">Thorax 2.0.0rc6</option>
</optgroup>
<optgroup label="Three.js">
<option value="82">Three.js r54</option>
<option value="399">Three.js 105</option>
</optgroup>
<optgroup label="Underscore">
<option value="111">Underscore 1.3.3</option>
<option value="133">Underscore 1.4.3</option>
<option value="160">Underscore 1.4.4</option>
<option value="267">Underscore 1.8.3</option>
</optgroup>
<optgroup label="Vue">
<option value="236">Vue (edge)</option>
<option value="289">Vue 1.0.12</option>
<option value="344">Vue 2.2.1</option>
</optgroup>
<optgroup label="WebApp Install">
<option value="142">WebApp Install 0.1</option>
</optgroup>
<optgroup label="XTK">
<option value="106">XTK edge</option>
</optgroup>
<optgroup label="YUI">
<option value="9">YUI 2.8.0r4</option>
<option value="102">YUI 3.5.0</option>
<option value="118">YUI 3.6.0</option>
<option value="123">YUI 3.7.3</option>
<option value="130">YUI 3.8.0</option>
<option value="153">YUI 3.10.1</option>
<option value="182">YUI 3.14.0</option>
<option value="204">YUI 3.16.0</option>
<option value="230">YUI 3.17.2</option>
</optgroup>
<optgroup label="Zepto">
<option value="90">Zepto 1.0rc1</option>
</optgroup>
<optgroup label="jQuery">
<option value="46">jQuery (edge)</option>
<option value="131">jQuery 1.9.1</option>
<option value="248">jQuery 2.1.3</option>
<option value="319">jQuery 2.2.4</option>
<option value="376">jQuery 3.2.1</option>
<option value="384">jQuery 3.3.1</option>
<option value="401">jQuery 3.4.1</option>
</optgroup>
<optgroup label="jQuery Slim">
<option value="407">jQuery Slim 3.2.1</option>
<option value="405">jQuery Slim 3.3.1</option>
<option value="403">jQuery Slim 3.4.1</option>
</optgroup>
<optgroup label="jTypes">
<option value="165">jTypes 2.1.0</option>
</optgroup>
<optgroup label="qooxdoo">
<option value="127">qooxdoo 2.0.3</option>
<option value="126">qooxdoo 2.1</option>
</optgroup>
<optgroup label="svg.js">
<option value="395">svg.js 2.6.5</option>
<option value="393">svg.js 2.7.1</option>
<option value="391">svg.js 3.0.5</option>
</optgroup>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
<ul id="js_dependency">
</ul>
</div>
</section>
<section>
<h3><code>script</code> attribute</h3>
<label>
<div class="fieldCont">
<input id="id_js_lib_option" type="text" name="js_lib_option" maxlength="255" placeholder="ie. data-type=""" value="">
</div>
</label>
</section>
</div> <!-- /windowSettings -->
<div class="windowSettings css" data-panel="css">
<section>
<h3>Language</h3>
<ul class="multiRadioCont commonActions smallActions">
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="CSS" data-mime-type="text/css" value="0" checked="">
<span>CSS</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="SCSS" data-mime-type="text/x-scss" value="1">
<span>SCSS</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="SASS" data-mime-type="text/x-sass" value="2">
<span>SASS</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="PostCSS (Stage 0+)" data-mime-type="text/css" value="4">
<span>PostCSS (Stage 0+)</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="PostCSS (Stage 3+)" data-mime-type="text/css" value="5">
<span>PostCSS (Stage 3+)</span>
</label>
</li>
<li>
<label class="fxLink">
<input class="panelChoice" type="radio" name="panel_css" data-panel_id="id_code_css" data-panel="html" data-panel-name="Tailwind CSS" data-mime-type="text/css" value="6">
<span>Tailwind CSS</span>
</label>
</li>
</ul> <!-- /multiRadioCont -->
</section>
<section>
<!-- <h3>Options</h3> -->
<h3>Reset CSS</h3>
<label class="checkboxCont">
<input type="checkbox" name="normalize_css" id="id_normalize_css" value="1">
<span class="checkbox"></span>
</label>
</section>
</div> <!-- /windowSettings -->
</div>
</main>
<a class="closeModal" data-unloadframe="true" data-act-as="close-modal" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke-linecap="round" class="nc-icon-wrapper" fill="none" stroke="#222222" stroke-width="2" stroke-linejoin="round"><path d="M18 6L6 18"></path><path d="M6 6l12 12"></path></g></svg></a>
</div>
</div>
</form>Text Content
*
*
* AN
* Run
*
*
*
*
*
*
*
*
*
* Embed
* Go PRO
JSFIDDLE - TEST YOUR JAVASCRIPT, CSS, HTML OR COFFEESCRIPT ONLINE WITH JSFIDDLE.
COLLECTIONS PRO
SELECT COLLECTIONS:
* New collection
RESOURCES URL CDNJS 0
* Paste a direct CSS/JS URL
* Type a library name to fetch from CDNJS
ASYNC REQUESTS
Simulating async requests:
* JSON /echo/json/
* JSONP /echo/jsonp/
* HTML /echo/html/
* XML /echo/xml/
See docs for more info.
Changelog
JSFIDDLE APPS
* Color Palette Generator
* Sign in
HTML
xxxxxxxxxx
302
1
<style>
2
html, body {
3
position: absolute;
4
top: 0px;
5
left: 0px;
6
right: 0px;
7
bottom: 0px;
8
padding: 0px;
9
//cursor: none;
10
margin: 0px;
11
overflow: hidden;
12
display: flex;
13
height: 100%;
14
width: 100%;
15
background-color: #000;
16
}
17
18
canvas {
19
margin: auto auto;
20
}
21
</style>
22
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
23
<script id="2d-fragment-shader" type="x-shader/x-fragment">// <![CDATA[
24
25
// Look below at line 23 for realism.
26
27
#ifdef GL_ES
28
precision mediump float;
29
#endif
30
31
#define PI 3.14159265359
32
#define G 0.0000000006674
33
34
uniform sampler2D u_image;
35
varying vec2 v_texCoord;
36
37
uniform vec2 u_resolution;
38
uniform vec2 u_mouse;
39
uniform float u_mass;
40
uniform float u_time;
41
uniform float u_clickedTime;
42
43
vec2 rotate(vec2 mt, vec2 st, float angle){
44
//float cos = cos((angle + u_clickedTime) * PI); // try replacing * 1.0 with * PI
45
//float sin = sin(angle * 0.0); // try removing the * 0.0
46
//if(abs(angle) < 0.05)
47
// angle = 0.0;
48
// Uncomment these two lines for realism
49
float cos = cos(angle);// * (1.0 + u_clickedTime * 0.3);
50
float sin = 0.0;//sin(angle) * (u_clickedTime * 0.3);
51
52
float nx = (cos * (st.x - mt.x)) + (sin * (st.y - mt.y)) + mt.x;
53
float ny = (cos * (st.y - mt.y)) - (sin * (st.x - mt.x)) + mt.y;
54
return vec2(nx, ny);
55
}
56
57
void main() {
58
vec2 st = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y)/u_resolution;
59
vec2 mt = vec2(u_mouse.x, u_resolution.y - u_mouse.y)/u_resolution;
60
61
float dx = st.x - mt.x;
62
float dy = st.y - mt.y;
63
64
float dist = sqrt((dx * dx + dy * dy)*1024.0);
65
//float distsq =(dx * dx + dy * dy);
66
float pull = (100000000000.0*(1.0-u_clickedTime))/(dist*dist)*G;//(u_mass-u_clickedTime) / (dist * dist * dist * dist);
67
68
vec3 color = vec3(0.0);
69
70
vec2 r = rotate(mt,st,pull);
71
vec4 imgcolor = texture2D(u_image, r);
72
color = vec3(
73
(imgcolor.x - (pull * 0.19)),
74
(imgcolor.y - (pull * 0.19)),
75
(imgcolor.z - (pull * 0.19))
76
);
77
78
79
gl_FragColor = vec4(color,1.);
80
}
81
// ]]></script>
82
<script id="2d-vertex-shader" type="x-shader/x-vertex">// <![CDATA[
83
attribute vec2 a_position;
84
attribute vec2 a_texCoord;
85
86
varying vec2 v_texCoord;
87
void main() {
88
gl_Position = vec4(a_position, 0, 1);
89
v_texCoord = a_texCoord;
90
}
91
// ]]></script>
92
<script>
93
94
// set up global javascript variables
95
96
var bgUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Hubble_ultra_deep_field.jpg/2048px-Hubble_ultra_deep_field.jpg'
97
98
var blackholeMass = 1500;
99
var curblackholeMass = 0;
100
101
var canvas, gl; // canvas and webgl context
102
103
var shaderScript;
104
var shaderSource;
105
var vertexShader; // Vertex shader. Not much happens in that shader, it just creates the vertex's to be drawn on
106
var fragmentShader; // this shader is where the magic happens. Fragment = pixel. Vertex = kind of like "faces" on a 3d model.
107
var buffer;
108
109
110
/* Variables holding the location of uniform variables in the WebGL. We use this to send info to the WebGL script. */
111
var locationOfTime;
112
var locationOfResolution;
113
var locationOfMouse;
114
var locationOfMass;
115
var locationOfclickedTime;
116
117
var originY = window.innerHeight,
118
originX = window.innerWidth;
119
120
var mouse;
121
122
var startTime = new Date().getTime(); // Get start time for animating
123
var currentTime = 0;
124
125
var clicked = false,
126
clickedTime = 0;
127
128
$(document).mousedown(function(){
129
clicked = true;
130
});
131
$(document).mouseup(function(){
132
clicked = false;
133
});
134
135
function init(image) {
136
// standard canvas setup here, except get webgl context
137
canvas = document.getElementById('glscreen');
138
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
139
canvas.width = window.innerWidth >= window.innerHeight ? window.innerWidth : window.innerHeight;
140
canvas.height = window.innerWidth >= window.innerHeight ? window.innerWidth : window.innerHeight;
141
142
mouse = {x: originX/2, y: -(originY/2) + canvas.height, moved: false};
143
$(document).mousemove(function(e) {
144
mouse.x = e.pageX;
145
mouse.y = -e.pageY + canvas.height;
146
mouse.moved = true;
147
});
148
149
// give WebGL it's viewport
150
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
151
152
// kind of back-end stuff
153
buffer = gl.createBuffer();
154
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
155
gl.bufferData(
156
gl.ARRAY_BUFFER,
157
new Float32Array([
158
-1.0, -1.0,
159
1.0, -1.0,
160
-1.0, 1.0,
161
-1.0, 1.0,
162
1.0, -1.0,
163
1.0, 1.0]),
164
gl.STATIC_DRAW
165
); // ^^ That up there sets up the vertex's used to draw onto. I think at least, I haven't payed much attention to vertex's yet, for all I know I'm wrong.
166
167
shaderScript = document.getElementById("2d-vertex-shader");
168
shaderSource = shaderScript.text;
169
vertexShader = gl.createShader(gl.VERTEX_SHADER); //create the vertex shader from script
170
gl.shaderSource(vertexShader, shaderSource);
171
gl.compileShader(vertexShader);
172
173
shaderScript = document.getElementById("2d-fragment-shader");
174
shaderSource = shaderScript.text;
175
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //create the fragment from script
176
gl.shaderSource(fragmentShader, shaderSource);
177
gl.compileShader(fragmentShader);
178
179
program = gl.createProgram(); // create the WebGL program. This variable will be used to inject our javascript variables into the program.
180
gl.attachShader(program, vertexShader); // add the shaders to the program
181
gl.attachShader(program, fragmentShader); // ^^
182
gl.linkProgram(program); // Tell our WebGL application to use the program
183
gl.useProgram(program); // ^^ yep, but now literally use it.
184
185
186
/*
187
188
Alright, so here we're attatching javascript variables to the WebGL code. First we get the location of the uniform variable inside the program.
189
190
We use the gl.getUniformLocation function to do this, and pass thru the program variable we created above, as well as the name of the uniform variable in our shader.
191
192
*/
193
locationOfResolution = gl.getUniformLocation(program, "u_resolution");
194
locationOfMouse = gl.getUniformLocation(program, "u_mouse");
195
locationOfMass = gl.getUniformLocation(program, "u_mass");
196
locationOfTime = gl.getUniformLocation(program, "u_time");
197
locationOfclickedTime = gl.getUniformLocation(program, "u_clickedTime");
198
199
/*
200
201
Then we simply apply our javascript variables to the program.
202
Notice, it gets a bit tricky doing this. If you're editing a float value, gl.uniformf works.
203
204
But if we want to send over an array of floats, for example, we'd use gl.uniform2f. We're specifying that we are sending 2 floats at the end.
205
206
You can also send it over to the program as a vector, by using gl.uniform2fv.
207
To read up on all of the different gl.uniform** stuff, to send any variable you want, I'd recommend using the table (found on this site, but you need to scroll down about 300px)
208
209
https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html#uniforms
210
211
*/
212
gl.uniform2f(locationOfResolution, canvas.width, canvas.height);
213
gl.uniform2f(locationOfMouse, mouse.x, mouse.y);
214
gl.uniform1f(locationOfMass, curblackholeMass*0.00001);
215
gl.uniform1f(locationOfTime, currentTime);
216
gl.uniform1f(locationOfclickedTime, clickedTime);
217
218
219
var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
220
221
// provide texture coordinates for the rectangle.
222
var texCoordBuffer = gl.createBuffer();
223
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
224
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
225
-1.0, -1.0,
226
1.0, -1.0,
227
-1.0, 1.0,
228
-1.0, 1.0,
229
1.0, -1.0,
230
1.0, 1.0]),
231
gl.STATIC_DRAW);
232
gl.enableVertexAttribArray(texCoordLocation);
233
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
234
235
// Create a texture.
236
var texture = gl.createTexture();
237
gl.bindTexture(gl.TEXTURE_2D, texture);
238
239
// Set the parameters so we can render any size image.
240
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
241
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
242
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
243
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
244
245
// Upload the image into the texture.
246
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
247
248
render();
249
}
250
251
function render() {
252
var now = new Date().getTime();
253
currentTime = (now - startTime) / 1000; // update the current time for animations
254
255
if(curblackholeMass < blackholeMass - 50){
256
curblackholeMass += (blackholeMass-curblackholeMass) * 0.03;
257
}
258
259
if(clicked){
260
clickedTime += 0.03;
261
} else if(clickedTime > 0 && clicked == false) {
262
clickedTime += -(clickedTime*0.015);
263
}
264
265
if(mouse.moved == false){
266
mouse.y = (-(originY/2) + Math.sin(currentTime * 0.7) * ((originY * 0.25))) + canvas.height;
267
mouse.x = (originX/2) + Math.sin(currentTime * 0.6) * -(originX * 0.35);
268
}
269
270
gl.uniform1f(locationOfMass, curblackholeMass*0.00001);
271
gl.uniform2f(locationOfMouse, mouse.x, mouse.y);
272
gl.uniform1f(locationOfTime, currentTime); // update the time uniform in our shader
273
gl.uniform1f(locationOfclickedTime, clickedTime);
274
275
window.requestAnimationFrame(render, canvas); // request the next frame
276
277
positionLocation = gl.getAttribLocation(program, "a_position"); // do stuff for those vertex's
278
gl.enableVertexAttribArray(positionLocation);
279
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
280
gl.drawArrays(gl.TRIANGLES, 0, 6);
281
}
282
283
window.addEventListener('load', function(event){
284
var image = new Image();
285
image.crossOrigin = "Anonymous";
286
image.src = bgUrl;
287
image.onload = function() {
288
init(image);
289
}
290
291
});
292
293
window.addEventListener('resize', function(event){
294
// just re-doing some stuff in the init here, to enable resizing.
295
296
canvas.width = window.innerWidth >= window.innerHeight ? window.innerWidth : window.innerHeight;
297
canvas.height = window.innerWidth >= window.innerHeight ? window.innerWidth : window.innerHeight;
298
gl.viewport(0, 0, canvas.width, canvas.height);
299
locationOfResolution = gl.getUniformLocation(program, "u_resolution");
300
});
301
</script>
302
<canvas id="glscreen"></canvas>
JavaScript
Module
xxxxxxxxxx
1
1
CSS
xxxxxxxxxx
1
1
Result 675px
CONSOLE
Clear console Minimize
0 0 0 1
* JSFiddle Console (beta). Turn on/off in Editor settings.
* ☁️ "Running fiddle"
* "<a class='gotoLine' href='#337:16'>337:16</a> Uncaught TypeError: Cannot set
properties of undefined (setting 'width')"
CODE PANEL OPTIONS
CHANGE CODE LANGUAGES, PREPROCESSORS AND PLUGINS
* HTML
* JavaScript
* CSS
LANGUAGE
* HTML
* HAML
DOCTYPE
XHTML 1.0 Strict XHTML 1.0 Transitional HTML 5 HTML 4.01 Strict HTML 4.01
Transitional HTML 4.01 Frameset
LANGUAGE
* JavaScript
* CoffeeScript
* JavaScript 1.7
* Babel + JSX
* TypeScript
* CoffeeScript 2
* Vue
* React
* Preact
EXTENSIONS
Alpine.js 2.1.2 AngularJS 1.1.1 AngularJS 1.2.1 AngularJS 1.4.8 AngularJS
2.0.0-alpha.47 Bonsai 0.4.1 Brick edge CreateJS 2013.09.25 CreateJS 2015.05.21
D3 3.x D3 4.13.0 D3 5.9.2 Dojo (nightly) Dojo 1.4.8 Dojo 1.5.6 Dojo 1.6.5 Dojo
1.7.12 Dojo 1.8.14 Dojo 1.9.11 Dojo 1.10.8 Dojo 1.11.4 Dojo 1.12.2 Ember
(latest) Enyo (nightly) Enyo 2.0.1 Enyo 2.1 Enyo 2.2.0 Enyo 2.4.0 Enyo 2.5.1
Enyo 2.7.0 ExtJS 3.1.0 ExtJS 3.4.0 ExtJS 4.1.0 ExtJS 4.1.1 ExtJS 4.2.0 ExtJS
5.0.0 ExtJS 5.1.0 ExtJS 6.2.0 FabricJS 1.5.0 FabricJS 1.7.7 FabricJS 1.7.15
FabricJS 1.7.20 Inferno 1.0.0-beta9 JSBlocks (edge) KineticJS 4.0.5 KineticJS
4.3.1 Knockout.js 2.0.0 Knockout.js 2.1.0 Knockout.js 2.2.1 Knockout.js 2.3.0
Knockout.js 3.0.0 Knockout.js 3.4.2 Lo-Dash 2.2.1 Minified 1.0 beta1 MithrilJS
0.2.0 MithrilJS 1.1.6 Mootools (nightly) Mootools 1.3.2 Mootools 1.3.2 (compat)
Mootools 1.4.5 Mootools 1.4.5 (compat) Mootools 1.5.1 Mootools 1.5.2 Mootools
1.5.2 (compat) Mootools 1.6.0 Mootools 1.6.0 (compat) No-Library (pure JS)
OpenUI5 (latest, mobile) Paper.js 0.22 Pixi 3.0.11 Pixi 4.0.0 Processing.js
1.2.3 Processing.js 1.3.6 Processing.js 1.4.1 Processing.js 1.4.7 Prototype
1.6.1.0 Prototype 1.7.3 RactiveJS 0.7.3 Raphael 1.4 Raphael 1.5.2 Raphael 2.1.0
React 0.3.2 React 0.4.0 React 0.8.0 React 0.9.0 React 0.14.3 RightJS 2.1.1
RightJS 2.3.1 Riot 3.7.4 Shipyard (nightly) Shipyard 0.2 Thorax 2.0.0rc3 Thorax
2.0.0rc6 Three.js r54 Three.js 105 Underscore 1.3.3 Underscore 1.4.3 Underscore
1.4.4 Underscore 1.8.3 Vue (edge) Vue 1.0.12 Vue 2.2.1 WebApp Install 0.1 XTK
edge YUI 2.8.0r4 YUI 3.5.0 YUI 3.6.0 YUI 3.7.3 YUI 3.8.0 YUI 3.10.1 YUI 3.14.0
YUI 3.16.0 YUI 3.17.2 Zepto 1.0rc1 jQuery (edge) jQuery 1.9.1 jQuery 2.1.3
jQuery 2.2.4 jQuery 3.2.1 jQuery 3.3.1 jQuery 3.4.1 jQuery Slim 3.2.1 jQuery
Slim 3.3.1 jQuery Slim 3.4.1 jTypes 2.1.0 qooxdoo 2.0.3 qooxdoo 2.1 svg.js 2.6.5
svg.js 2.7.1 svg.js 3.0.5
SCRIPT ATTRIBUTE
LANGUAGE
* CSS
* SCSS
* SASS
* PostCSS (Stage 0+)
* PostCSS (Stage 3+)
* Tailwind CSS
RESET CSS
* This fiddle has previously unsaved changes. Apply changes Discard
KEEP JSFIDDLE RUNNING.
WHITELIST US IN YOUR CONTENT BLOCKER.
We've been providing web developers, educators, students, companies with
JSFiddle free for many years.
Your can help us in one of two ways:
* Whitelist JSFiddle in your content blocker
* Go PRO and get access to additional PRO features →
* AD-FREE
All ads in the editor and listing pages are turned completely off.
* USE PRE-RELEASED FEATURES
You get to try and use features (like the Palette Color Generator) months
before everyone else.
* FIDDLE COLLECTIONS
Sort and categorize your Fiddles into multiple collections.
* PRIVATE COLLECTIONS AND FIDDLES
You can make as many Private Fiddles, and Private Collections as you wish!
* CONSOLE
Debug your Fiddle with a minimal built-in JavaScript console.
JOIN THE 4+ MILLION USERS, AND KEEP THE JSFIDDLE DREAM ALIVE.
* AD-FREE
All ads in the editor and listing pages are turned completely off.
* USE PRE-RELEASED FEATURES
You get to try and use features (like the Palette Color Generator) months
before everyone else.
* FIDDLE COLLECTIONS
Sort and categorize your Fiddles into multiple collections.
* PRIVATE COLLECTIONS AND FIDDLES
You can make as many Private Fiddles, and Private Collections as you wish!
* CONSOLE
Debug your Fiddle with a minimal built-in JavaScript console.
JSFiddle is used by you and 4+ million other developers, in many companies ...
... and top educational institutions:
image/svg+xml
Join as PRO
COLOR PALETTE GENERATOR
GENERATE A COOL COLOR PALETTE WITH A FEW CLICKS
SHARE OR EMBED FIDDLE
CUSTOMIZE THE EMBEDDABLE EXPERIENCE FOR WEBSITES
TABS:
JavaScript HTML CSS Result
VISUAL:
Light Dark
EMBED SNIPPET PREFER IFRAME?:
<script async src="{embedSrc}"></script>
<iframe width="100%" height="300" src="{embedSrc}" frameborder="0"
loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
No autoresizing to fit the code
Render blocking of the parent page
EDITOR SETTINGS
CUSTOMIZE THE BEHAVIOR AND FEEL OF THE EDITOR
BEHAVIOR
Auto-run code
Only auto-run code that validates
Auto-save code
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
Hot reload CSS NEW
Hot reload HTML NEW
GENERAL
Line numbers
Wrap lines
Indent with tabs
Code hinting (autocomplete)
Indent size:
2 spaces 3 spaces 4 spaces
Key map:
Default Sublime Text EMACS Vim
Font size:
Default Big Bigger Jabba
CONSOLE
Console in the editor
Clear console on run
YOUR RECENT FIDDLES
RECENTRY CREATED FIDDLES, INCLUDING ONES CREATED WHILE LOGGED OUT
JSFIDDLE CHANGELOG
A LOG OF ALL THE CHANGES MADE TO JSFIDDLE – BIG AND SMALL.
* NEW TAILWIND CSS
Added Tailwind CSS to the list of precompilers - even though it's really
HTML, you can activate it from the dropdown in the CSS panel. Tailwind CSS
would be best used with HTML Hot-reload enabled.
* UPDATE CODE LINTING AND FORMATTING
We've replaced the dated code linter and formatted with more modern ones:
Stylelint and Prettier.
* NEW JSFIDDLE 3.0
The 3.0 updates brings a lot of changes, most notably a modern UI refresh.
There was an increadible amount of under-the-hood changes for the front-end,
we've mostly moved away from pre-processors. The light/dark themes are using
a modern light-dark() approach. The refactoring allows for more changes to be
made in a spedier manner.
* In the new sidebar you can find our mini-apps (right now the Color Palette
Generator)
* System theme follows your OS settings
* CSS Hot-reload - styles update immidietly as you type
* HTML Hot-reload (experimental) - update HTML immidietly as you type
* Results panel color follows the selected theme
* Title and description are now a single field
* Public Profile page is completelty redesigned and can be easily used as
your code showcase
* Groups are now Collections and we have big plans for them
* Collections are completely redesigned
* Users can now add groups straight from the editor
* NEW IMPORT FIDDLES AS MODULES
Import fiddle code into other fiddles with Modules and Imports.
JS Modules: import [name] from '@jsfiddle/[username]/[fiddle].js'
CSS Import: @import url('@jsfiddle/[username]/[fiddle].css')
See how this works in this fiddle.
* CHANGE FIDDLE LISTING SHOWS LATEST VERSION
The fiddle listings (Public, Private, Titled, etc) will now display latest
versions instead of the ones saved as Base versions - this was causing more
confusion than good, so we decided to change this long-standing behavior.
* CHANGE EVALUATE CODE INTO THE CONSOLE
Custom Console beta is getting more stable and feature-rich. Just added the
ability to evaluate code in the console.
* NEW CONSOLE IN THE EDITOR
Introducing the first beta of the editor console - it's going to show you
logs, warnings, errors without the need of opening full devtools.
Console is avaialble for all users during beta, after that it'll be available
for JSFiddle supporters.
* NEW MORE USER'S SOCIAL LINKS (DEV.TO, STACK OVERFLOW, MEDIUM)
You can add more of your social links `Settings / Social Media`, for Dev.to,
Stack Overflow and Medium. These will be displayed on the profile section in
Editor's sidebar and your public profile.
* CHANGE REFACTORED UNSAVED DRAFTS FEATURE
Unsaved drafts feature is completely rewritten with 100% fewer bugs and 10x
more maintainable codebase – as the author of the previous one, I had hard
times figuring out what it does 🥴
ADD A NEW COLLECTION
COLLECT YOUR FIDDLES IN COLLECTIONS