Labkom99.com - 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



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:



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

Komentar