{"id":3048,"date":"2021-07-03T12:39:58","date_gmt":"2021-07-03T12:39:58","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3048"},"modified":"2023-02-28T03:51:40","modified_gmt":"2023-02-28T03:51:40","slug":"js-tutorial-math-random-animation","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-math-random-animation\/","title":{"rendered":"JS Tutorial – Math.random() Animation"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Math.random()<\/code>\u00a0is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it\u2019s possible for an actual 0 to be returned) and 1 (exclusive, as in, it\u2019s not possible for an actual 1 to be returned).<\/p>\n

To spawn an object and animate it, we use\u00a0Math.random<\/code>. The neon lines form spontaneous hexagons but randomization is also in its generative sparks.<\/p>\n

var w = c.width = window.innerWidth,\r\n    h = c.height = window.innerHeight,\r\n    ctx = c.getContext( '2d' ),\r\n    \r\n    opts = {\r\n      \r\n      len: 20,\r\n      count: 50,\r\n      baseTime: 10,\r\n      addedTime: 10,\r\n      dieChance: .05,\r\n      spawnChance: 1,\r\n      sparkChance: .1,\r\n      sparkDist: 10,\r\n      sparkSize: 2,\r\n      \r\n      color: 'hsl(hue,100%,light%)',\r\n      baseLight: 50,\r\n      addedLight: 10, \/\/ [50-10,50+10]\r\n      shadowToTimePropMult: 6,\r\n      baseLightInputMultiplier: .01,\r\n      addedLightInputMultiplier: .02,\r\n      \r\n      cx: w \/ 2,\r\n      cy: h \/ 2,\r\n      repaintAlpha: .04,\r\n      hueChange: .1\r\n    },\r\n    \r\n    tick = 0,\r\n    lines = [],\r\n    dieX = w \/ 2 \/ opts.len,\r\n    dieY = h \/ 2 \/ opts.len,\r\n    \r\n    baseRad = Math.PI * 2 \/ 6;\r\n    \r\nctx.fillStyle = 'black';\r\nctx.fillRect( 0, 0, w, h );\r\n\r\nfunction loop() {\r\n  \r\n  window.requestAnimationFrame( loop );\r\n  \r\n  ++tick;\r\n  \r\n  ctx.globalCompositeOperation = 'source-over';\r\n  ctx.shadowBlur = 0;\r\n  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );\r\n  ctx.fillRect( 0, 0, w, h );\r\n  ctx.globalCompositeOperation = 'lighter';\r\n  \r\n  if( lines.length < opts.count && Math.random() < opts.spawnChance )\r\n    lines.push( new Line );\r\n  \r\n  lines.map( function( line ){ line.step(); } );\r\n}\r\nfunction Line(){\r\n  \r\n  this.reset();\r\n}\r\nLine.prototype.reset = function(){\r\n  \r\n  this.x = 0;\r\n  this.y = 0;\r\n  this.addedX = 0;\r\n  this.addedY = 0;\r\n  \r\n  this.rad = 0;\r\n  \r\n  this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();\r\n  \r\n  this.color = opts.color.replace( 'hue', tick * opts.hueChange );\r\n  this.cumulativeTime = 0;\r\n  \r\n  this.beginPhase();\r\n}\r\nLine.prototype.beginPhase = function(){\r\n  \r\n  this.x += this.addedX;\r\n  this.y += this.addedY;\r\n  \r\n  this.time = 0;\r\n  this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0;\r\n  \r\n  this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 );\r\n  this.addedX = Math.cos( this.rad );\r\n  this.addedY = Math.sin( this.rad );\r\n  \r\n  if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )\r\n    this.reset();\r\n}\r\nLine.prototype.step = function(){\r\n  \r\n  ++this.time;\r\n  ++this.cumulativeTime;\r\n  \r\n  if( this.time >= this.targetTime )\r\n    this.beginPhase();\r\n  \r\n  var prop = this.time \/ this.targetTime,\r\n      wave = Math.sin( prop * Math.PI \/ 2  ),\r\n      x = this.addedX * wave,\r\n      y = this.addedY * wave;\r\n  \r\n  ctx.shadowBlur = prop * opts.shadowToTimePropMult;\r\n  ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) );\r\n  ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 );\r\n  \r\n  if( Math.random() < opts.sparkChance )\r\n    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 )\r\n}\r\nloop();\r\n\r\nwindow.addEventListener( 'resize', function(){\r\n  \r\n  w = c.width = window.innerWidth;\r\n  h = c.height = window.innerHeight;\r\n  ctx.fillStyle = 'black';\r\n  ctx.fillRect( 0, 0, w, h );\r\n  \r\n  opts.cx = w \/ 2;\r\n  opts.cy = h \/ 2;\r\n  \r\n  dieX = w \/ 2 \/ opts.len;\r\n  dieY = h \/ 2 \/ opts.len;\r\n});<\/pre>\n