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.

            
              	  <h2>Mix pigment primaries</h2>
  <div id="instructions">
    <p>Mixing these hues will produce a variety of secondary and tertiary colors, tints, tones, and shades. Please experiment by overlapping the blocks and adjusting the transparency sliders to produce desired results. Try to match a certain color, or challenge yourself to create 20 different versions of one hue.</p>
  </div>
<div id="container" class="ui-widget rel">
<canvas id="myCanvas" width="600" height="250" resize="true"> </canvas>

  <div id="sliders" class="rel">
    <div class="slrow">
      <div id="cSlider"></div>
      <input type="text" id="cVal" readonly>
    </div>
    <div class="slrow">
      <div id="mSlider"></div>
      <input type="text" id="mVal" readonly>
    </div>
    <div class="slrow">
      <div id="ySlider"></div>
      <input type="text" id="yVal" readonly>
    </div>
    <div class="slrow">
      <div id="kSlider"></div>
      <input type="text" id="kVal" readonly>
    </div>
  </div>
<!--   
<div id="slider"></div>
<p>Why won't my slider show up??? Because you need to use the jQuery UI CSS!</p>
 -->
</div>

  
            
          
!
            
              canvas[resize] {
    width: 100%;
    height: 300px;
} /* solution from http://stackoverflow.com/questions/28896260/paper-js-wont-resize-the-canvas-correctly */

#myCanvas {
  background: white;
  border: 2px dotted silver;
}

body {
  background: white;
  color: #333;
  vertical-align: bottom;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 0.85em;
}
/* 
div {
  box-sizing: border-box;
 }
*/
/* box-sizing reset, from https://css-tricks.com/box-sizing/ */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

p {
  line-height: 1.5;
}

#container {}

.rel {
  position: relative;
}

#instructions {}

#sliders {
  margin-bottom: 2em;
}
/*
#slider { margin: 10px; position: fixed; top: 400px; left: 100px; width: 300px;}	
*/
.slrow {
  display: flex;
  align-items: center;
}

#cSlider,
#mSlider,
#ySlider,
#kSlider {
  width: 280px;
  margin: 15px 0;
  height: 12px;
}

#cVal,
#mVal,
#yVal,
#kVal {
  width: 3em;
  text-align: right;
  border: none;
}

#cSlider .ui-slider-range {
  background: cyan;
}

#cSlider .ui-slider-handle {
  border-color: cyan;
}

#mSlider .ui-slider-range {
  background: magenta;
}

#mSlider .ui-slider-handle {
  border-color: magenta;
}

#ySlider .ui-slider-range {
  background: yellow;
}

#ySlider .ui-slider-handle {
  border-color: yellow;
}

#kSlider .ui-slider-range {
  background: black;
}

#kSlider .ui-slider-handle {
  border-color: black;
}
            
          
!
            
              paper.install(window);
paper.setup('myCanvas');

var colors = ["cyan", "magenta", "yellow", "black"];
var swatches = new Array;
var sliders = new Array;
var values = new Array;

function createSwatches() {
  
  var x = 10, y = 10;
  var xoff = 30, yoff = 30;
  var size = new Size(160, 160);

  for (var i = 0; i < colors.length; i++) {
    var p = new Point(x, y);
    var swatch = createSwatch(p, size, colors[i]);
    swatches[i] = swatch;
    x += xoff;
    y += yoff;
  }
}

function createSwatch(start, size, color) {
  var rect = new Path.Rectangle(start, size);
  rect.fillColor = new Color(color);
  rect.blendMode = "multiply";
  rect.opacity = 0.7;
  rect.onMouseDrag = function(event) {
    // move swatch, preventing it from being dragged outside the canvas
    var xt = rect.position.x + event.delta.x;
    var yt = rect.position.y + event.delta.y;
    var b = paper.view.bounds;
    if (xt < b.left) xt = b.left;
    if (xt > b.right) xt = b.right;
    if (yt < b.top) yt = b.top;
    if (yt > b.bottom) yt = b.bottom;
    rect.position.x = xt;
    rect.position.y = yt;
  }
  return rect;
}

function setupSliders () {
  
  sliders[0] = $("#cSlider");
  sliders[1] = $("#mSlider");
  sliders[2] = $("#ySlider");
  sliders[3] = $("#kSlider");
   
  values[0] = $("#cVal");
  values[1] = $("#mVal");
  values[2] = $("#yVal");
  values[3] = $("#kVal");
  
  for (var i = 0; i < colors.length; i++) {
    var trans = (i) * 255 * 0.2;
    sliders[i].slider({
      orientation: "horizontal",
      range: "min",
      min: 0,
      max: 255,
      value: 255 - trans,
      slide: updateSwatches,
      change: updateSwatches      
    })
  }
 }
/* 
function testDraw () {
  
    // Just used this initially for testing
    var circle = new Path.Circle(new Point(200, 100), 80);
    circle.fillColor = "orange";
    circle.blendMode = 'multiply';
    circle.opacity = 0.8;
    
    var r = new Path.Rectangle(new Point(240, 120), new Size(90,120));
    r.fillColor = "rebeccaPurple";
    r.strokeColor = "green";
    r.strokeWidth = "5";
    r.blendMode = 'multiply';
    r.opacity = 0.8;

}
 */
function updateSwatches () {
  
  for (var i = 0; i < colors.length; i++) {
    swatches[i].opacity = calcOpacity  (sliders[i]);
    values[i].val (Math.round  (swatches[i].opacity * 100) );
  }
  paper.view.draw();
  
}

function calcOpacity (s) {
  return s.slider("option","value") / (s.slider("option","max"));
}

$(function() {
  
  createSwatches();
  setupSliders();
  updateSwatches();
  
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console