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