Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

Labkom99.com Belajar HTML5 Dan Canvas Membuat Efek Background Lampu Neon. Background lampu neon adalah efek latar belakang mirip sarang lebah dengan lampu neon punuh warna. Efek background dan lampu ini di buat menggunakan canvas HTML5. Background lampu neon warna dibuat dengan kanvas dan HTM5. Gerakan partikelnya membentuk sarang lebah heksagonal dan warnanya terus berubah-ubah menghasilkan kombinasi yang sangat keren.

Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

 

Read More

Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :


Perhatian 

Dalam membuat Efek Background Lampu Neon hanya menggunakan Canvas dan HTML5. Efek ini dibuat dengan sangat sederhana, hanya dengan sedikit tag-tag HTML yang digunakan. Bagi anda yang belum begitu paham tentang HTML bisa di pelajari di Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup LanguageStruktur dasar HTML 


Metode / Langkah

Untuk Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas di butuhan tag Canvas seperti pada di bawah ini:

<div class="labkom99-content">
<canvas id="c"></canvas>
</div>

Kode tersebut untuk menentukan Canvas yang digunakan. Kemudian membuat CSS untuk menentukan posisi efek animasi pada background canvas yang akan di buat 

canvas {
position: absolute;
top: 0;
left: 0;
}

Kemudian membuat Kode js untuk mengimplementasikan background lampu neon warna sarang lebah. Dan kodenya adalah sebagai berikut:

Membuat Efek Animasi Dengan HTML Dan CSS3 

var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),

opts = {

len: 20,
count: 50,
baseTime: 10,
addedTime: 10,
dieChance: .05,
spawnChance: 1,
sparkChance: .1,
sparkDist: 10,
sparkSize: 2,

color: 'hsl(hue,100%,light%)',
baseLight: 50,
addedLight: 10, // [50-10,50+10]
shadowToTimePropMult: 6,
baseLightInputMultiplier: .01,
addedLightInputMultiplier: .02,

cx: w / 2,
cy: h / 2,
repaintAlpha: .04,
hueChange: .1
},

tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,

baseRad = Math.PI * 2 / 6;

ctx.fillStyle = 'black';
ctx.fillRect( 0, 0, w, h );

function loop() {

window.requestAnimationFrame( loop );

++tick;

ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
ctx.fillRect( 0, 0, w, h );
ctx.globalCompositeOperation = 'lighter';

if( lines.length < opts.count && Math.random() < opts.spawnChance )
lines.push( new Line );

lines.map( function( line ){ line.step(); } );
}
function Line(){

this.reset();
}
Line.prototype.reset = function(){

this.x = 0;
this.y = 0;
this.addedX = 0;
this.addedY = 0;

this.rad = 0;

this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();

this.color = opts.color.replace( 'hue', tick * opts.hueChange );
this.cumulativeTime = 0;

this.beginPhase();
}
Line.prototype.beginPhase = function(){

this.x += this.addedX;
this.y += this.addedY;

this.time = 0;
this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0;

this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 );
this.addedX = Math.cos( this.rad );
this.addedY = Math.sin( this.rad );

if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )
this.reset();
}
Line.prototype.step = function(){

++this.time;
++this.cumulativeTime;

if( this.time >= this.targetTime )
this.beginPhase();

var prop = this.time / this.targetTime,
wave = Math.sin( prop * Math.PI / 2 ),
x = this.addedX * wave,
y = this.addedY * wave;

ctx.shadowBlur = prop * opts.shadowToTimePropMult;
ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) );
ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 );

if( Math.random() < opts.sparkChance )
ctx.fillRect( opts.cx + ( this.x + x ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.cy + ( this.y + y ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize )
}
loop();

window.addEventListener( 'resize', function(){

w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
ctx.fillStyle = 'black';
ctx.fillRect( 0, 0, w, h );

opts.cx = w / 2;
opts.cy = h / 2;

dieX = w / 2 / opts.len;
dieY = h / 2 / opts.len;
});

Untuk kode di js diatas kode lengkapya namun dalam mengimplementasikannya cukup menggunakan script berikut dalam penulisan HTMnya. 

Dan untuk kode lengkapnya Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas silahkan diunduh dibawah ini

DOWNLOAD

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *