cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
  <meta charset="utf-8">
  <title>Empty project</title>
  <script type="text/javascript" src="https://assets.runemadsen.com/rune.browser.js"></script>
  <script type="text/javascript" src="https://assets.runemadsen.com/rune.noise.js"></script>
  
  

</head>
<body>
  <div id="canvas"></div>
  
</body>
</html>

            
          
!
            
               body {
      background-color: #fff;
    }
    #canvas svg {
      background-color: #fff;
      /*box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.06),inset -1px -1px 1px 0 rgba(0, 0, 0, 0.02);
      border: 1px solid #E2E2E2;
      border-bottom-color: #CECECE;*/
    }
            
          
!
            
              /*
https://printingcode.runemadsen.com/examples/randomization/noisedetail/
Via 
https://printingcode.runemadsen.com/examples/
*/
  
// This sketch requires you to add Rune.Noise to your HTML page:
// https://github.com/runemadsen/rune.noise.js

// 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, 85, 22), new Rune.Color('hsv', 0, 80, 77, 0.8) ],  // reds
  [ new Rune.Color('hsv', 85, 84, 20), new Rune.Color('hsv', 85, 79, 38, 0.8) ], // greens
  [ new Rune.Color('hsv', 205, 28, 48), new Rune.Color('hsv', 205, 18, 59, 0.8) ], // blues
  [ new Rune.Color('hsv', 43, 94, 59), new Rune.Color('hsv', 43, 91, 89, 0.8) ], // yellows
];

// Find random points for the gray line
// -------------------------------------

var noise = new Rune.Noise();
var linePoints = [];

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));
}

// 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 bottomRight = linePoints[i + 1];

  // and calculcate the top points from this
  var topLeft = bottomLeft.sub(new Rune.Vector(0, ranHeight));
  var topRight = bottomRight.sub(new Rune.Vector(0, ranHeight));

  // 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, topRight.x, topRight.y)
    .fill(colorset[0])
    .stroke(false);

  r.triangle(topLeft.x, topLeft.y, topRight.x, topRight.y, bottomRight.x, bottomRight.y)
    .fill(colorset[1])
    .stroke(false);

  // aaaand the line
  r.line(bottomLeft.x, bottomLeft.y, bottomRight.x, bottomRight.y)
    .strokeWidth(2)
    .stroke(0, 0, 0.5);
}

r.draw();

            
          
!
999px
Loading ..................

Console