Water Typing - Menulis Diatas Air

liveasianbusiness.blogspot.com - water typing cara menulis di atas air dengan bantuan script water typing. Mungkin bagi semua orang menulis di atas air itu adalah hal yang mustahil, namun dengan adanya script water typing ini kita bisa berimajinasi seolah kita sedang menulis di atas air :D.

Silahkan anda mencoba nya , cukup dengan mengetikan kata di keyboard anda maka hasil kata yang anda ketik nantinya akan muncul di layar link WATER TYPING ini.



Bagi anda yang ingin membuat artikel seperti ini di blog/web anda , saya memberi kan code untuk membuat water typing ini.

Code;

<!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>DANI PROJECT - WATER TYPING</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.daniproject.co.de/water-typing.php">Klik</a> untuk membuat gelombang.</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 = "DANI";
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>

Nah copy code di atas lalu upload ke hosting anda dan jreeeengggg selesai :D.

No comments:

Post a Comment