hokasu

java
let container;
let camera, scene, renderer;
let uniforms;

function init() {
  container = document.getElementById( 'container' );

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

  var colours = [];
  colours.push([138, 79, 125]);
  colours.push([136, 120, 128]);
  colours.push([136, 160, 150]);
  colours.push([187, 171, 139]);
  colours.push([239, 130, 117]);
  for(var i = 0; i < colours.length; i++) {
    var c = colours[i];
    colours[i] = new THREE.Vector3(c[0] / 255, c[1] / 255, c[2] / 255);
  }
  window.colours = colours;

  uniforms = {
    u_time: { type: "f", value: 1.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    u_mouse: { type: "v2", value: new THREE.Vector2() },
    u_colours: { type: "v3v", value: colours }
  };

  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );

  container.appendChild( renderer.domElement );

  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );

  document.onmousemove = function(e){
    uniforms.u_mouse.value.x = e.pageX
    uniforms.u_mouse.value.y = e.pageY
  }
}

function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
  // console.log(uniforms.u_colours);
  requestAnimationFrame( animate );
  render();
}

function render() {
  uniforms.u_time.value += 0.05;
  renderer.render( scene, camera );
}



init();
animate();

css
body {
  margin: 0;
  padding: 0;
}

#container {
  position: fixed;

}
@import url(https://fonts.googleapis.com/css?family=Voltaire|Abel);

.pfor {display: none;}

#profile {
background-color:transparent;
border: 0px;}
body {
background-image: url('');
background: #transparent;}


#if{
position:absolute;
bottom:45px;
left:45px;
background:url('');
background: #7c828c;
width:561px;
height:385px;
z-index:100;
}



 .my{
position:absolute;
top:20px;
left:20px;
width:521px;
height:345px;
background: #0b0f16;
opacity: 0.85;

opacity: 0.85;
filter: alpha(opacity=85);
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}

 .life{
position:absolute;
top:20px;
left:20px;
width:521px;
height:345px;
overflow:hidden;
}

 .is{
position:absolute;
bottom: 0px;
left: 0px;
width: 561px;
height: 33px;
}

 .ones{
position:absolute;
bottom:37px;
width:516px;
height:308px;
overflow:hidden;
}

 .and{
width:516px;
height:308px;
overflow:auto;
}

 .zeros{
color:#194da0;
font-size:16px;
text-align:justify;
line-height:14px;
font-family: 'Abel', sans-serif;
letter-spacing:0.5px;
margin: 5px;
background: #0b0f16;
}

a.data:link, a.data:active, a.data:visited{
display: block;
float: left;
width:50px;
margin-left: 32px;
margin-right:32px;
font-family: 'Voltaire', sans-serif;
text-decoration: none;
font-size: 12px!important;
letter-spacing: 3px;
color: #4f4433;
padding: 7px;
text-align: center!important;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.data:hover{
color: #c5d5f3;
text-shadow: 0px 0px 3px #0df4a9;
text-decoration: none;
}

#im{
position:absolute;
bottom:65px;
left: 250px;
height: 345px;
width:405px;
overflow:hidden;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
z-index:87;
}

#im:hover{
left:560px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

 .still{
position:absolute;
right:0px;
top:121px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid #4286f4;
}

 .alive{
position:absolute;
top:0px;
left:50px;
height: 345px;
width:300px;
overflow: auto;
background: #0b0f16;
opacity: 1.00;
filter: alpha(opacity=100);
}

 .real{
position:absolute;
bottom:1px;
left:117px;
font-family: 'Voltaire', sans-serif;
font-size:14px;
letter-spacing:1px;
color: #ffffff;
}

a:active, a:link, a:visited{
font-family: 'Voltaire', sans-serif;
color:#e0caa8;
text-decoration:none;
}

a:hover{
cursor:help;
color:#ccc;
text-decoration:line-through;
}

b {
font-family: 'Voltaire', sans-serif;
font-weight:light;
letter-spacing: 1px;
}

i{
color:#f5fcd4 ;
font-weight:light;
letter-spacing: 1px;
font-style:italic;
}

h1{
font-size: 13px;
width: 100%;
font-family: century;
font-weight: normal;
line-height: 12px;
text-transform: uppercase;
text-align: left;
text-indent:10px;
border-bottom: 1px dotted #070a07;
}

h1:first-letter{
font-family:century;
color: #c9c9c9;
font-size: 18px;
font-weight: light;
text-shadow: 0px 0px 3px #0df4a9;
}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #cb8;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #cb8;border: 0px ;width: 12px;}


html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
 void main() {
 gl_Position = vec4( position, 1.0 );
 }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">


 uniform vec2 u_resolution;
 uniform vec2 u_mouse;
 uniform float u_time;
 uniform vec3 u_colours[ 5 ];

 const float multiplier = .5;
 const int octaves = 4;

 const float seed = 86135.7315468;

 float random2d(vec2 uv) {
 return fract(
 sin(
 dot( uv.xy, vec2(12.9898, 78.233) )
 ) * seed);
 }
 mat2 rotate2d(float _angle){
 return mat2(cos(_angle),sin(_angle),
 -sin(_angle),cos(_angle));
 }

 // Created by inigo quilez - iq/2013
 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
 // http://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm

 vec2 random2( vec2 p ) {
 return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
 }

 vec3 voronoi( in vec2 x, inout vec2 nearest_point, inout vec2 s_nearest_point, inout float s_nearest_distance, inout float nearest_distance, in bool highlight, vec2 mouse) {
 vec2 n = floor(x);
 vec2 f = fract(x);

 // first pass: regular voronoi
 vec2 mg, mr;
 float md = 8.0;
 float smd = 8.0;
 for (int j= -1; j <= 1; j++) {
 for (int i= -1; i <= 1; i++) {
 vec2 g = vec2(float(i),float(j));
 vec2 o = random2( n + g );
 o = 0.5 + 0.4*sin((u_time / 10.) + 6.2831*o);
 o *= length(mouse.y) * 2.;

 vec2 r = g + o - f;
 float d = dot(r,r);

 if( d<md ) {
 smd = md;
 s_nearest_distance = md;
 nearest_distance = d;
 md = d;
 mr = r;
 mg = g;
 nearest_point = n + g;
 } else if( smd > d ) {
 s_nearest_distance = d;
 nearest_distance = d;
 smd = d;
 s_nearest_point = n + g;
 }
 }
 }

 // second pass: distance to borders
 md = 8.0;
 for (int j= -2; j <= 2; j++) {
 for (int i= -2; i <= 2; i++) {
 vec2 g = mg + vec2(float(i),float(j));
 vec2 o = random2( n + g );
 o = 0.5 + 0.4*sin((u_time / 10.) + 6.2831*o);
 o *= length(mouse.y) * 2.;

 vec2 r = g + o - f;

 if ( dot(mr-r,mr-r)>0.00001 ) {
 md = min(md, dot( 0.5*(mr+r), normalize(r-mr) ));
 }
 }
 }
 return vec3(md, mr);
 }

 vec3 getColour(vec2 nearest_point, vec2 s_nearest_point, float modMultiplier) {
 vec3 colour = vec3(0.2);
 vec3 next_colour = vec3(0.2);
 float segment = floor(u_time / 2.);
 float intermix = u_time / 2. - segment;
 float index = mod(floor(random2d(nearest_point) * modMultiplier) + segment, modMultiplier);
 float next_index = mod(floor(random2d(nearest_point) * modMultiplier) + segment + 1., modMultiplier);
 if(index == 0.) {
 colour = u_colours[0];
 } else if(index == 1.) {
 colour = u_colours[1];
 } else if(index == 2.) {
 colour = u_colours[2];
 } else if(index == 3.) {
 colour = u_colours[3];
 } else if(index == 4.) {
 colour = u_colours[4];
 }
 if(next_index == 0.) {
 next_colour = u_colours[0];
 } else if(next_index == 1.) {
 next_colour = u_colours[1];
 } else if(next_index == 2.) {
 next_colour = u_colours[2];
 } else if(next_index == 3.) {
 next_colour = u_colours[3];
 } else if(next_index == 4.) {
 next_colour = u_colours[4];
 }
 if(index != next_index) {
 colour = mix(colour, next_colour, intermix);
 }

 return colour;
 }

 vec3 render(vec2 uv, vec2 mouse, inout vec2 refraction, in bool highlight) {
 vec3 colour = vec3(0.5);
 // Voronoi
 vec2 nearest_point = vec2(0., 0.);
 vec2 s_nearest_point = vec2(0., 0.);
 float s_nearest_distance = 0.;
 float nearest_distance = 0.;
 vec3 c = voronoi(uv, nearest_point, s_nearest_point, s_nearest_distance, nearest_distance, highlight, mouse);

 // colour
 colour = getColour(nearest_point, s_nearest_point, 10.);

 // Facets
 // colour -= c.x * 0.9;
 if(highlight) {
 float r_point = abs(1. - s_nearest_distance);
 colour += r_point * r_point * r_point * r_point * r_point;
 // border += r_point * r_point;
 }

 // borders
 vec3 border = vec3(0.2);
 colour = mix( border, colour, smoothstep( 0.001, 0.01, c.x ) );
 colour += mix( vec3(0.07), vec3(0.), smoothstep( 0.001, 0.015, c.x - 0.08 ) );

 // refraction layer
 refraction = nearest_point;

 return colour;
 }

 void main() {
 vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy);

 vec2 o_uv = uv / 5.;
 o_uv += u_time / 5000.;

 if(u_resolution.y < u_resolution.x) {
 uv /= u_resolution.y;
 } else {
 uv /= u_resolution.x;
 }

 // uv.x *= u_resolution.x/u_resolution.y;
 vec3 colour = vec3(0.5);
 vec3 next_colour = vec3(0.1);
 vec2 mouse = (u_mouse / u_resolution) - 0.5;
 mouse.y *= -1.;

 // Scale
 uv *= 2.;

 uv.x -= (u_time / 10.);
 uv = rotate2d(u_time / 500.) * uv;
 // uv.x += cos(u_time / 1000.) * 600.;
 // uv.y += sin(u_time / 2000.) * 200.;

 // render
 vec2 topPassRefraction = vec2(0.);
 vec3 topPass = render(uv * 3. * multiplier, mouse, topPassRefraction, true);

 for (int i=octaves; i > 1; i--) {
 vec2 passRefraction = vec2(0.);
 vec2 subuv = uv;

 subuv += topPassRefraction;

 float med = float(i + 1);
 subuv *= med;
 // uv += med;
 subuv.x += (u_time / 10.);

 colour += render(subuv, mouse, passRefraction, false);
 colour /= 2.;
 }

 colour *= topPass * 3.;
 colour /= 2.;

 // o_uv = floor(o_uv * 2.);

 float multi = 10. * (2.5 - length(mouse.x) * 2.);
 float noise = (-0.5 + random2d(o_uv + 10.)) / multi;
 colour += noise;

 gl_FragColor = vec4(colour * colour * 3.,1.0);
 }
</script>


<div id="container"></div>
<div id="im">
<div class="still"></div>
<div class="alive">
<div class="zeros">
<h2>Rules/OOC</h2>
<br>

o1. PM friendly 99.99% of the time.<br>
o2. IC =/= OOC. Please keep that in mind.<br>
o3. Majin oc. And a time patroller.<br>
o4. Real life takes precedence over rp.<br>
o5. Hokasu is part of a team and pair.<br>
o6. This code? DO NOT TOUCH IT!<br
o7. Long Term > Short Term. Both are loved though.<br>
o8. Do not go stuffing my character's face.<br>
o9. Do not start with a post.<br>
1o. Skype and discord for friends only.<br>
12. If you want to roleplay, please hit me up. I almost always want to but am not sure who to approach. <br>



</div></div>
</div>
<div id="if">
<div class="my"></div>
<div class="life">
<div class="is">
<a href="#i" class="data">001</a>
<a href="#am" class="data">002</a>
<a href="#still" class="data">003</a>
<a href="#here" class="data">004</a>
</div>
<div class="ones">
<div id="i" class="and">
<div class="zeros">

<h1>Stats</h1>

<font style=float:left><b>Name</b></font>
<font style=float:right>Hokasu</font><br>
<font style=float:left><b>Nicknames</b></font>
<font style=float:right>Hoho, Kasu, Hoka </font><br>
<font style=float:left><b>Age</b></font>
<font style=float:right>Adult appearance.</font><br>
<font style=float:left><b>Gender</b></font>
<font style=float:right>Female</font><br>
<font style=float:left><b>Race</b></font>
<font style=float:right>Majin</font><br>
<font style=float:left><b>Skintone</b></font>
<font style=float:right>Pastel Blue</font><br>
<font style=float:left><b>Eyes</b></font>
<font style=float:right>Black sclera and red pupils</font><br>
<font style=float:left><b>Orientation</b></font>
<font style=float:right>Bisexual</font><br>
<font style=float:left><b>Occupation</b></font>
<font style=float:right> Time Patroller</font><br>
<font style=float:left><b>Team</b></font>
<font style=float:right>Alpha</font><br>
<font style=float:left><b>Family</b></font>
<font style=float:right>Pokasu (little sister)</font><br>
<font style=float:left><b>Physical Health</b></font>
<font style=float:right>100%</font><br>
<font style=float:left><b>Mental Health</b></font>
<font style=float:right>100%</font><br>
<font style=float:left><b>Status</b></font>
<font style=float:right> Uninterested</font><br>
<br>

<h2>Personality</h2>
<p>Hokasu is the elder sister of the Hocus Pocus sisters. She's responsible, cold level-headed, calculating and emotionally? A rock. Despite her blobby buu body she is hard, stone cold. She isn't friendly to most and is overly protective of her little sister Pokasu. </p>

<p?She can very cocky at times, and seems to a have a rivalry with the leader of their team Son Pan. But there isn't much of an explanation to it. Maybe the constant struggle for power between them? She</p>

</div></div>
<div id="am" class="and">
<div class="zeros">


<h1>Biography</h1>


<p>Hokasu's life before time patrolling wasn't really extraordinary. There wasn't much of an origin story. Her dad just pulled her off her body and he mom did the same for her sister. In a nutshell? It was anticlimactic. </p>
<p>But as a Patroller? Well, it was rough because she was summoned by chance. A wish was made on their dragon balls and it pulled her from her sister. She was left alone in a strange alien place. Who was at fault? Why Son Pan! IT seems the lil bitch wanted help, and she got stuck with a Majin with a nasty attitude. She gave her a hard time and bitched and moaned. Butting heads with the Saiyan mutt every given chance. Always challenging her to a spar... Pan put up an offer. " If you can defeat me I'll help you find the dragon balls. and you can go home. But if I win no more griping I need your help." Hoka agreed. And proceeded to beat Pan. They collected the dragons balls over the course of several weeks, and when the time came, a wish was made. But not the one Pan promised. Instead Hokasu wished for her sister.. And thus the Hocus Pocus sister was reunited. Together with a namekian named Obo, a pair of human twins Vaneera and Koku, and sadly Pan... To form Team Alpha. The first team of the time patrollers.</p>

<p>Hokasu with her team under Pan's leadership would defeat the demon Lord Demigra and rescue Toki Toki City. They would later aid in the events and defeat of Mira and Towa rescuing Conton City in the process as well. However, Pokasu would become the puppet for Towa's abuse and villiany. The injuries she sustained left her unable to join them in the final battle that came. Vaneera would choose to stay behind with her to tend to her wounds, while the others fought. Koku would make a great sacrifice, and managed to give an opening to both Hokasu, Pan and Obo. The three managed to triumph over Mira and restore balance. At the cost of Koku's existence. He was not able to be wished back. His death was permanent. </p>

<B>WILL ADD MORE LATER</B>



</div></div>
<div id="still" class="and">
<div class="zeros">

<h1>Abilities</h1>

<b>Candy Beam-</b> While she would rather avoid such attacks Hokasu is capable of turning others into confectionaries such as candy or cakes. But she does not eat them. If she needs to teach some one a lesson she will do just that. <bR><Br>
<b>Majin Kamehameha</b><bR><Br>
<b>Evil flight Strike</b><br><Br>
<b>Body manipulation/Regneration</b><Br><Br>
<b>Healing- </b>While not as skilled as her sister Pokasu, Hoka is capable of healing injuries.<Br><Br>
<b>Innocence Bullet -</b> Hokasu fires two ki waves from her hands that swirl around before combining into an Energy Sphere that explodes unleashing a poisonous cloud. <br><Br>
<b>Innocence Cannon –</b> She shoots a stream of three energy blasts at her opponent.<bR><Br>
<b>Innocence Express –</b> She charges by running into her target using her whole body.
<bR><Br>
<b>Protective Bubble –</b> She conjures a force field bubble around herself to defend herself from aoncoming attacks.<br><Br>
<b>Fission –</b> The ability for a single being to split into two different copies of himself. She cna split herself into three forms. However they are much smaller then the original and do not maintain their form long term and must return to her. Their power is also cut as well as her own.<bR><br>
<b>Energy Mines – </b>An attack in which Hokasu sends multiple tunnels of energy that travel under ground and burst out as dozens of energy balls that fly toward the opponent. While the opponent is distracted by these balls, she prepares a much larger blast in her hand and fires it while the opponent is not looking. <bR><Br>
<b>Ice Beam</b>- A mouth blast that allows Hokasu to encase a person or target in a block of ice.<br><Br>
<b>Masenko</b>-Learned from Son Pan<br><br>
<b>Hocus Pocus spiral</b>- A drill like burst of ki that can be used on her own, similar to the special beam canon. But can also be used in combination with her sister Pokasu.





</div></div>
<div id="here" class="and">
<div class="zeros">


<h1>Friends </h1>

<h2>Allies</h2>

<img src="https://i.imgur.com/1MVN0KT.png" alt="Smiley face" width="157" height="157" align= "left"><h3><a href="https://roleplay.chat/profile.php?user=Pokasu" target="_blank">Precious Sister</a></h3><p>- This is the Precious baby sister. We do not touch the precious baby sister. You touch the precious gooey bun of pureness and you will be dead. This she swears.</p><br>
<br>

<img src="https://i.imgur.com/mzzRbPg.png" alt="Smiley face" width="157" height="157" align="right"> <h3><a href="https://roleplay.chat/profile.php?user=son%20pan" target="_blank">Leader</a></h3>
<p> Son Pan is the leader of team Alpha. Her and Pan seem to have an unsettled rivalary. <strike>While there is some hostility between them it is more of a health rivalary variety. </strike>What ever friendship was between the two has long since disolved. Hokasu has declared a literal war on Pan, for all the mistakes that happened under her leadership. Including both begn stranded in the past. That was the final straw and threatened Pan.</p><br><br><br><br><Br>


<img src="http://www.clker.com/cliparts/5/5/1/2/11949863241659704844candy_30.svg.med.png" alt="Smiley face" width="157" height="157" align= "left"> <h3><a href="https://roleplay.chat/profile.php?user= " target="_blank">Sucker</a></h3><p>- </p><br>
 <Br><br><br><br>

<img src="http://pngimg.com/uploads/christmas_candy/christmas_candy_PNG13875.png" alt="Smiley face" width="157" height="157" align="right"> <h3><a href="https://roleplay.chat/profile.php?user=x" target="_blank">Sucker</a></h3>
<p>- </p><Br><br>
<Br><br><br><br>



</div></div>
</div>
</div>
<div class="real">
Code <a href="/profile.php?user=Claudia+Papillon" target="_blank" style="letter-spacing:0px; color: #0049c7; text-decoration:none;">@ClaudiaP</a>
</div>
</div>

</div>

<div style="position: fixed; bottom: 0px; right: 210px; background-color: transparent;">
<img src="https://i.imgur.com/Sesm1h9.png" height="70%">