Pintori 3

// This sketch requires you to add Rune.Noise to your HTML page:

// https://github.com/runemadsen/rune.noise.js

​

var r = new Rune({

  container: "#canvas",

  width: 800,

  height: 800

});

​

// Create colors

// -------------------------------------

​

var colors = [

  [ new Rune.Color('hsv', 0, 100, 30), new Rune.Color('hsv', 0, 92, 61), new Rune.Color('hsv', 0, 96, 85) ],  // reds

  [ new Rune.Color('hsv', 86, 84, 20), new Rune.Color('hsv', 86, 79, 38), new Rune.Color('hsv', 86, 61, 64) ], // greens

  [ new Rune.Color('hsv', 205, 28, 48), new Rune.Color('hsv', 205, 18, 59), new Rune.Color('hsv', 205, 13, 82) ], // blues

  [ new Rune.Color('hsv', 43, 94, 59), new Rune.Color('hsv', 43, 91, 89), new Rune.Color('hsv', 43, 83, 99) ], // yellows

];

​

// Find random points for the gray line

// -------------------------------------

​

var noise = new Rune.Noise();

var linePoints = [];

var lineDirections = [];

​

var x = -300;

var y = 0;

​

while(x < 1000) {

​

  // increment x with a random amount

  x += Rune.random(60, 150);

​

  // use noise to find a y value from 500 to 600.

  y = 500 + (noise.get(x / 150) * 100);

​

  // push this point into the array

  linePoints.push(new Rune.Vector(x, y));

​

  // find a direction for this point

  var rad = Rune.radians(Rune.random(-100, -80));

  lineDirections.push(new Rune.Vector(Math.cos(rad), Math.sin(rad)));

}

​

// Draw shapes based on those points

// -------------------------------------

​

// loop through each point but the last one

for(var i = 0; i < linePoints.length - 1; i++)

{

  // first find a random height for this rectangle

  var ranHeight = Rune.random(150, 350);

​

  // then find all the points we need for this rectangle

  var bottomLeft     = linePoints[i];

  var leftDirection  = lineDirections[i];

  var bottomRight    = linePoints[i + 1];

  var rightDirection = lineDirections[i + 1];

​

  // and calculcate the top points from this

  var topLeft = leftDirection.multiply(ranHeight).add(bottomLeft);

  var topRight = rightDirection.multiply(ranHeight).add(bottomRight);

​

  // now we want to find the centroid of the four points.

  var poly = r.polygon(0, 0, false)

    .lineTo(bottomLeft.x, bottomLeft.y)

    .lineTo(topLeft.x, topLeft.y)

    .lineTo(topRight.x, topRight.y)

    .lineTo(bottomRight.x, bottomRight.y);

​

  var centroid = poly.centroid();

​

  // get a random set of colors. We could do this with weighted random

  // based on the number of times the colors appear in the original.

  var colorset = colors[Math.floor(Rune.random(colors.length))];

​

  // now draw the triangles to make the real rectangles

  r.triangle(bottomLeft.x, bottomLeft.y, topLeft.x, topLeft.y, centroid.x, centroid.y)

    .fill(colorset[0])

    .stroke(false);

​

  r.triangle(topLeft.x, topLeft.y, topRight.x, topRight.y, centroid.x, centroid.y)

    .fill(colorset[1])

    .stroke(false);

​

  r.triangle(bottomRight.x, bottomRight.y, topRight.x, topRight.y, centroid.x, centroid.y)

    .fill(colorset[2])

    .stroke(false);

​

  // aaaand the line

  r.line(bottomLeft.x, bottomLeft.y, bottomRight.x, bottomRight.y)

    .strokeWidth(2)

    .stroke(0, 0, 0.5);

}

​

r.draw();

​