Skip to content
Advertisements

JavaScript Animation 1

https://codepen.io/guldus/pen/PvaWdr

CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript</title>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link rel="stylesheet" href="main.css"> 
    <!-- P5.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
  </head>
<body>
  <div id="windowCanvas"></div>
<!-- JAVASCRIPT CODES -->
<script>

  var phase, speed, maxCircleSize, numRows, numCols, numStrands, colorA, colorB;
  
  function setup(){
    ctx = createCanvas(500, 500);
    ctx.parent("windowCanvas");
    phase = 0;
    speed = 0.03;
    maxCircleSize = 20;
    numRows = 10;
    numCols = 16;
    numStrands = 3;

    colorA = color(253, 174, 120);
    colorB = color(226, 120, 150);
  };

  function draw(){
    background("#001f3f");
    noStroke();
    phase = frameCount * speed;
    
    for( var strand = 0; strand < numStrands; strand += 2 ){
      var strandPhase = phase + map(strand, 0, numStrands, 0, TWO_PI);

      for(var col=0; col<numCols; col+=1){
        var colOffset = map(col, 0, numCols, 0, TWO_PI);
        var x = map(col, 0, numCols, 50, width - 50);

        for(var row = 0; row < numRows; row += 2) {
          var y = height/2 + row * 10 + sin(strandPhase + colOffset) * 50;
          var sizeOffset = (cos(strandPhase - (row / numRows) + colOffset) + 1) * 0.5;
          var circleSize = sizeOffset * maxCircleSize;

          fill(lerpColor(colorA, colorB, row / numRows));
          ellipse(x, y, circleSize, circleSize);
        }
      }
    }

  }


</script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: