A Pen by Jonah

undefined

Forked from Jonah's Pen KwzRqx.

Thumbnail
This awesome code was written by jgmakes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jgmakes ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jonah</title>
  
  
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jgmakes/a-pen-by-jonah-bNpmVO */
body {
  background: #333;
  margin: 0;
  padding: 0;
}

canvas {
  position: relative;
  z-index: 100;
}

/*Downloaded from https://www.codeseek.co/jgmakes/a-pen-by-jonah-bNpmVO */
var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    imageObj = new Image(),
    maxSize = 130,
    maxXOffset = 40,
    yOffset = maxXOffset,
    offset = maxXOffset,
    pattern;

imageObj.onload = function() {
  pattern = context.createPattern(imageObj, 'repeat');
  draw();
};

imageObj.src = 'https://i.imgur.com/Lr2VOM1.png';

var count = 0;
var dir = 1;

var draw = function(){
  
  /*if (count++ % 30 == 0){
    dir = -dir;
  }
  maxSize = Math.max( maxSize + dir * 10, 30 );*/
  var size = maxSize * (Math.sin(count+=0.2) + 1 );
  
  var midX = canvas.width/2;
  var midY = canvas.height/2;
  var halfMax = size / 2;
  
  context.clearRect ( 0 , 0 , canvas.width, canvas.height );
    
  var pt1 = { x: midX + Math.random() * size - halfMax,
            y: midY + Math.random() * size - halfMax};
  var pt2 = { x: midX + Math.random() * size - halfMax,
            y: midY + Math.random() * size - halfMax};
  var pt3 = { x: midX + Math.random() * size - halfMax,
            y: midY + Math.random() * size - halfMax};

  //black
  context.beginPath();
  context.moveTo( pt1.x + offset, pt1.y + yOffset);
  context.lineTo( pt2.x + offset, pt2.y + yOffset );
  context.lineTo( pt3.x + offset, pt3.y + yOffset);  
  context.closePath();
  context.fillStyle = "#000";
  context.fill(); 
  
  context.beginPath();
  context.moveTo( pt1.x + offset, pt1.y + yOffset );
  context.lineTo( pt2.x + offset, pt2.y + yOffset );
  context.lineTo( pt3.x + offset, pt3.y + yOffset );
  context.closePath();
  context.fillStyle = pattern;
  context.fill();
  
  //  cyan
  context.beginPath();
  context.moveTo( pt1.x, pt1.y );
  context.lineTo( pt2.x, pt2.y );
  context.lineTo( pt3.x, pt3.y);  
  context.closePath();
  context.fillStyle = "rgba(255,100,200,1)";
  context.fill();
  
  
  //  yellow
  context.beginPath();
  context.moveTo( pt1.x - offset, pt1.y - yOffset );
  context.lineTo( pt2.x - offset, pt2.y - yOffset );
  context.lineTo( pt3.x - offset, pt3.y - yOffset);  
  context.closePath();
  context.fillStyle = "rgba(255,255,100,1)";
  context.fill();

  
}

onResize = function(){
  canvas.width = $(window).width();
  canvas.height = $(window).height();
  draw();
}
$(window).resize(onResize);
onResize();

setInterval(draw, 50);

$("html").mousemove(function(e){
    var midX = canvas.width/2;
    var dist = e.pageX - midX;
    offset = - maxXOffset * (dist / midX)
})

Comments