Deformation Tests

In this example below you will see how to do a Deformation Tests with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ThisIsJohnBrown, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ThisIsJohnBrown ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Deformation Tests</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ThisIsJohnBrown/deformation-tests-MVWXGW */
canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/*Downloaded from https://www.codeseek.co/ThisIsJohnBrown/deformation-tests-MVWXGW */
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
let context = canvas.getContext("2d");

var maskCanvas = document.createElement('canvas');
// Ensure same dimensions
maskCanvas.width = canvas.width;
maskCanvas.height = canvas.height;
var maskContext = maskCanvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var distanceVariance = 0;
var centerPointVariance = 0.0;

// context.fillStyle = 'hsl(100, 40%, 20%)';
// context.fillRect(0, 0, canvas.width, canvas.height);

Math.nrand = function() {
  var x1, x2, rad, y1;
  do {
    x1 = 2 * this.random() - 1;
    x2 = 2 * this.random() - 1;
    rad = x1 * x1 + x2 * x2;
  } while (rad >= 1 || rad == 0);
  var c = this.sqrt(-2 * Math.log(rad) / rad);
  return (1 + x1 * c / Math.PI) / 2;
};

function deformPoints(pts, distVariance, centVariance) {
  var newPoints = [];
  for (var i = 0; i < pts.length; i++) {
    newPoints.push(pts[i]);
    var x1 = pts[(i + 1) % pts.length][0];
    var x2 = pts[i][0];
    var y1 = pts[(i + 1) % pts.length][1];
    var y2 = pts[i][1];
    var xCenterVar = 0.5; // + (Math.nrand() * centVariance - centVariance / 2);
    var yCenterVar = 0.5; // + (Math.nrand() * centVariance - centVariance / 2);
    var xDistVar = Math.nrand() * distVariance - distVariance / 2;
    var yDistVar = Math.nrand() * distVariance - distVariance / 2;
    var xMid = x1 + (x2 - x1) * xCenterVar + xDistVar;
    var yMid = y1 + (y2 - y1) * yCenterVar + yDistVar;
    newPoints.push([xMid, yMid]);
  }

  return newPoints;
}

function drawWatercolor(points, layers, color, stripeDistance) {
  points = deformPoints(points, 200, 0.0);
  points = deformPoints(points, 200, 0.0);
  // points = deformPoints(points, 200, 0.0);
  // points = deformPoints(points, 200, 0.0);

  for (var i = 0; i < layers; i++) {
    var newPoints = deformPoints(points, 80, 0);
    newPoints = deformPoints(newPoints, 80, 0);
    newPoints = deformPoints(newPoints, 80, 0);
    newPoints = deformPoints(newPoints, 80, 0);
    newPoints = deformPoints(newPoints, 80, 0);
    // newPoints = deformPoints(newPoints, 20, 0);

    context.fillStyle = color;
    var cutOff = 1;
    context.beginPath();
    context.moveTo(newPoints[0][0], newPoints[0][1]);

    for (var j = 1; j < newPoints.length * cutOff; j++) {
      context.lineTo(newPoints[j][0], newPoints[j][1]);
    }
    
    context.fill();

    context.save();

    if (i < layers * .5) {
      context.beginPath();
      for (var j = 0; j < 30; j++) {
        var landed = false;
        var pt;
        while (!landed){
          pt = [ Math.random() * canvas.width, Math.random() * canvas.height ]
          if (inside(pt, newPoints)) {
            landed = true;
          }
        }
        context.arc(
          pt[0],
          pt[1],
          10,
          0,
          Math.PI * 2,
          false
        );
        // context.closePath();
      }
      context.globalCompositeOperation = "destination-out";
      context.fill();

      context.globalCompositeOperation = "source-over";

      context.restore();
      
    }
    context.save();
    
    
    context.beginPath();
    for (var j = 0; j < 10; j++) {
      context.arc(Math.random() * canvas.width, Math.random() * 100 + stripeDistance, 10, 0, Math.PI * 2, false);
    }
  
    context.globalCompositeOperation = 'destination-out';
    context.fill();

    context.globalCompositeOperation = 'source-over';
    context.restore();
    
    context.beginPath();
    for (var j = 0; j < 10; j++) {
      context.arc(Math.random() * canvas.width, Math.random() * 100 + stripeDistance * 2, 10, 0, Math.PI * 2, false);
    }
  
    context.globalCompositeOperation = 'destination-out';
    context.fill();

    context.globalCompositeOperation = 'source-over';
    context.restore();
    
    
  }
}

var startingPoints = [[601, 100], [600, 600], [100, 600], [100, 101]];


// drawWatercolor([[601, 100], [100, 600], [100, 101]], 100, `hsla(180, 47%,	27%, .02)`);

for (var i = 1; i < 3; i++) {
  drawWatercolor([
    [i * 300, 0],
    [(i + 1) * 300, 0],
    [(i + 1) * 300, canvas.height],
    [i * 300, canvas.height]
  ], 100, `hsla(${180 + i * 50}, 47%,	27%, .02)`, Math.random() * 200 + 150);
}




function inside(point, vs) {
    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
};

Comments