Water Typing

Subyek: Water Typing Mon Mar 26, 2012 3:52 pm

Kali ini saya akan memberikan source code dari Water Typing

Quote :: <!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>./black-c0de.org</title>
<style type="text/css">
body { background-color: #000000; margin: 0px; overflow: hidden; }
#info { position: absolute; top: 0px; width: 100%; color: #00a0c0; padding: 5px; font-family:Monospace; font-size:13px; text-align:center; }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">Ketik beberapa teks dan tekan <b>"Enter"</b>. Gunakan <b>"Backspace"</b> atau <b>"Del"</b> untuk menghapus. <a style="color: #FFFFFF;" href="http://www.black-c0de.org/">Klik</a> untuk membuat gelombang.<p><a title="Cyber4rt r00t" style="color: #FFFFFF;" href="http://www.black-c0de.org/">r00t@1773:~# startx</a></div>

<script type="text/javascript">

var QUALITY_X = 6, QUALITY_Y = 3,
WIDTH = Math.floor(window.innerWidth / QUALITY_X), HEIGHT = Math.floor(window.innerHeight / QUALITY_Y), SIZE = WIDTH * HEIGHT,
HEIGHT_HALF = Math.floor(HEIGHT / 2),
TEXT_OFFSETY = Math.floor((HEIGHT - 64) / 2),

context, image, data,
buffer1, buffer2, tempbuffer,

canvasHeightMap, contextHeightMap, imageHeightMap, dataHeightMap,
canvasText, contextText, imageText, dataText,

input, text,

isUserInteracting, pointers;

init();
setInterval(loop, 1000 / 60);

function init() {

var container, canvas;

container = document.getElementById('container');

// kotak input

input = document.createElement("input");
input.type = "text";
input.value = "cyber4rt";
input.style.position = "absolute";
input.style.top = "10px";
input.style.left = "10px";
input.style.opacity = "0";
container.appendChild(input);
input.focus();

// ukuran tinggi (air)

canvasHeightMap = document.createElement("canvas");
canvasHeightMap.width = WIDTH;
canvasHeightMap.height = HEIGHT;

contextHeightMap = canvasHeightMap.getContext("2d");
imageHeightMap = contextHeightMap.getImageData(0, 0, WIDTH, HEIGHT);
dataHeightMap = imageHeightMap.data

buffer1 = [];
buffer2 = [];

for (var i = 0; i < SIZE; i ++) {

buffer1[i] = 128;
buffer2[i] = 128;
}

// teks

canvasText = document.createElement("canvas");
canvasText.width = WIDTH;
canvasText.height = 128;

contextText = canvasText.getContext("2d");
contextText.font = "50px Helvetica";
contextText.fillStyle = "rgb(255, 0, 0)";
contextText.textAlign = "center";

// hasil

canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
container.appendChild(canvas);

context = canvas.getContext ("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0, WIDTH, HEIGHT);

image = context.getImageData(0, 0, WIDTH, HEIGHT);
data = image.data;

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener('touchend', onDocumentTouchEnd, false);

document.addEventListener('keypress', onDocumentKeyPress, false);

}

// fungsi klik

function onDocumentMouseDown(event) {

event.preventDefault();

isUserInteracting = true;

input.focus();

pointers = [[event.clientX / QUALITY_X, event.clientY / QUALITY_Y]];

}

function onDocumentMouseMove(event) {

pointers = [[event.clientX / QUALITY_X, event.clientY / QUALITY_Y]];

}

function onDocumentMouseUp(event) {

isUserInteracting = false;

}

function onDocumentMouseOut(event) {

isUserInteracting = false;

}

function onDocumentTouchStart(event) {

isUserInteracting = true;

event.preventDefault();

pointers = [];

for (var i = 0; i < event.touches.length; i++) {

pointers.push([event.touches[i].pageX / QUALITY_X, event.touches[i].pageY / QUALITY_Y]);

}

}

function onDocumentTouchMove(event) {

event.preventDefault();

pointers = [];

for (var i = 0; i < event.touches.length; i++) {

pointers.push([event.touches[i].pageX / QUALITY_X, event.touches[i].pageY / QUALITY_Y]);

}

}

function onDocumentTouchEnd(event) {

event.preventDefault();

isUserInteracting = false;

}

function onDocumentKeyPress(event) {

switch(event.keyCode) {

case 13:
input.value = "";
break;
}

}

// cr00t

function emit(x, y) {

buffer1[Math.floor(x) + (Math.floor(y + 40) * WIDTH)] = 256;

}

function writeText(string) {

text = string;

contextText.clearRect(0, 0, WIDTH, 128);
contextText.fillText(string, WIDTH / 2, 63);

imageText = contextText.getImageData(0, 0, WIDTH, 128);
dataText = imageText.data;

}

function processText() {

for(y = 0; y < 128; y++) {

for(x = 0; x < WIDTH; x++) {

if (dataText[(x + y * WIDTH) * 4] > 0) {

emit(x, y + TEXT_OFFSETY);

}

}

}

}

function loop() {

var x, y, yz, pixel, index, indices;

if (isUserInteracting) {

for (var i = 0; i < pointers.length; i++) {

emit(pointers[i][0], pointers[i][1]);

}

}

// air

var pixel, iMax = (WIDTH * HEIGHT) - WIDTH;

for (var i = WIDTH; i < iMax; i++) {

pixel = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i];
buffer2[i] = pixel -= (pixel - 128) >> 4;

dataHeightMap[i * 4] = pixel > 255 ? 255 : pixel < 0 ? 0 : pixel;

}

tempbuffer = buffer1;
buffer1 = buffer2;
buffer2 = tempbuffer;

// teks

if (text != input.value) {

writeText(input.value);

}

processText();

// perspektif

indices = [];

for(x = 0; x < WIDTH; x++) {

levels = []; pixels = [];

for(y = 0; y < HEIGHT; y++) {

index = indices[y] = (x + y * WIDTH) * 4;
pixels[y] = dataHeightMap[index];
levels[y - (dataHeightMap[index] * HEIGHT >> 10) ] = y;

}

for(y = 0, yz = -1; y < HEIGHT; y++) {

pixels[y] = levels[y] > yz ? pixel = pixels[yz = levels[y]] : pixel;

index = indices[y];
data[index + 1] = pixel - 64 + (y >> 2);
data[index + 2] = pixel - 32 + (y >> 2);

}
}

context.putImageData(image, 0, 0);

}

</script>
</body>
</html>

Silahkan di Copas,....atow di modifikasi sesuai keinginan dan kebutuhannya

Water Typing 271371

Subyek: Re: Water Typing Tue Mar 27, 2012 8:18 am

weew..manteb ini kk Water Typing 3529815765

ijin copas kk

Subyek: Re: Water Typing Tue Mar 27, 2012 2:12 pm

mantab.. ijin kopas kk :minta:

Subyek: Re: Water Typing Tue Mar 27, 2012 2:41 pm

gan, gw masih newby,, mau tanya cara pakai nya gi mana gan..??? Water Typing 3529815765

Subyek: Re: Water Typing Tue Mar 27, 2012 5:07 pm

ardyansyah wrote:: gan, gw masih newby,, mau tanya cara pakai nya gi mana gan..???

copy, save as html kk Water Typing 3529815765

Subyek: Re: Water Typing Tue Mar 27, 2012 7:39 pm

ardyansyah wrote:: gan, gw masih newby,, mau tanya cara pakai nya gi mana gan..???

copas ke notepad, save dengan ekstensi .html

keren :jempol