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.
Judul: Water Typing - Menulis Diatas Air
Rating: 100% based on 84843 ratings. 5 user reviews.
Ditulis Oleh Sabo Tase™
Rating: 100% based on 84843 ratings. 5 user reviews.
Ditulis Oleh Sabo Tase™
Terima Kasih Anda sudah membaca artikel "Water Typing - Menulis Diatas Air" yang di terbitkan pada hari Jumat, 23 Maret 2012 jam 07.47 dan diulas oleh Sabo Tase™. Anda berhak menyebarluaskan artikel Water Typing - Menulis Diatas Air ini, tetapi mohon sertakan link sumber dari blog ini. Semoga saja dengan adanya artikel tentang Water Typing - Menulis Diatas Air yang ada di Blog Bisnis Online JoMeluMelu ini bisa berguna bagi Anda khususnya Saya pribadi.
Label: Source Code
Tidak ada komentar:
Posting Komentar