mmacedo/gradient.html

## gradient.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Alignment</title>
  <meta name="author" content="Michel Pavan Macedo">

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
  <link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
  <style>
    body {
      max-width: 900px;
      margin: 0 auto;
      background-color: #222;
      padding-bottom: 200px;
    }

    body, a {
      color: #ddd;
      font-family: 'PT Serif', Georgia, 'Helvetica Neue', Arial, sans-serif;
    }
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.js"></script>
  <script type="text/processing" data-processing-target="alignment">
    size(600, 600);
    color left  = color(172, 32, 0);
    color right = color(0, 32, 172);
    setGradient(0, height, width, 0, left, right);

    void setGradient(int x_1, int y_1, int x_2, int y_2, color c1, color c2) {
      // calculate differences between color components
      float deltaR = red(c2)-red(c1);
      float deltaG = green(c2)-green(c1);
      float deltaB = blue(c2)-blue(c1);

      x_inc = x_2 >= x_1 ? 1 : -1;
      y_inc = y_2 >= y_1 ? 1 : -1;

      w = Math.abs(x_2 - x_1);
      h = Math.abs(y_2 - y_1);
      diagonal = Math.sqrt(w*w + h*h);
      line_slope = h/w * x_inc * y_inc;
      perpendicular_slope = -w/h * x_inc * y_inc;

      // column
      for (int i=0; i<=w; i++){
        x_3 = x_1 + i * x_inc;
        // row
        for (int j=0; j<=h; j++){
          y_3 = y_1 + j * y_inc;
          x_4 = (line_slope*x_1 - perpendicular_slope*x_3 + y_3 - y_1) / (line_slope - perpendicular_slope);
          y_4 = line_slope*x_4 - line_slope*x_1 + y_1;
          distance = Math.sqrt(Math.pow(x_4-x_1, 2) + Math.pow(y_4-y_1, 2));

          color c = color(
            (red(c1)+distance*(deltaR/diagonal)),
            (green(c1)+distance*(deltaG/diagonal)),
            (blue(c1)+distance*(deltaB/diagonal))
            );
          set(x_3, y_3, c);
        }
      }
    }
  </script>
</head>
<body>
  <h1>Alignment</h1>
  <canvas id="alignment"></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Alignment</title>
	<meta name="author" content="Michel Pavan Macedo">

	<!-- http://t.co/dKP3o1e -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
	<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
	<style>
	body {
	max-width: 900px;
	margin: 0 auto;
	background-color: #222;
	padding-bottom: 200px;
	}

	body, a {
	color: #ddd;
	font-family: 'PT Serif', Georgia, 'Helvetica Neue', Arial, sans-serif;
	}
	a { text-decoration: none; }
	a:hover { text-decoration: underline; }
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.js"></script>
	<script type="text/processing" data-processing-target="alignment">
	size(600, 600);
	color left = color(172, 32, 0);
	color right = color(0, 32, 172);
	setGradient(0, height, width, 0, left, right);

	void setGradient(int x_1, int y_1, int x_2, int y_2, color c1, color c2) {
	// calculate differences between color components
	float deltaR = red(c2)-red(c1);
	float deltaG = green(c2)-green(c1);
	float deltaB = blue(c2)-blue(c1);

	x_inc = x_2 >= x_1 ? 1 : -1;
	y_inc = y_2 >= y_1 ? 1 : -1;

	w = Math.abs(x_2 - x_1);
	h = Math.abs(y_2 - y_1);
	diagonal = Math.sqrt(ww + hh);
	line_slope = h/w * x_inc * y_inc;
	perpendicular_slope = -w/h * x_inc * y_inc;

	// column
	for (int i=0; i<=w; i++){
	x_3 = x_1 + i * x_inc;
	// row
	for (int j=0; j<=h; j++){
	y_3 = y_1 + j * y_inc;
	x_4 = (line_slopex_1 - perpendicular_slopex_3 + y_3 - y_1) / (line_slope - perpendicular_slope);
	y_4 = line_slopex_4 - line_slopex_1 + y_1;
	distance = Math.sqrt(Math.pow(x_4-x_1, 2) + Math.pow(y_4-y_1, 2));

	color c = color(
	(red(c1)+distance*(deltaR/diagonal)),
	(green(c1)+distance*(deltaG/diagonal)),
	(blue(c1)+distance*(deltaB/diagonal))
	);
	set(x_3, y_3, c);
	}
	}
	}
	</script>
	</head>
	<body>
	<h1>Alignment</h1>
	<canvas id="alignment"></canvas>
	</body>
	</html>