paperjs - How to generate random grey colors in javascript - Stack Overflow

admin管理员组

文章数量:1297071

I have a function and would like to generate only grey colors. How can I do this with the code below? I'm pretty new to javascript! I'd appreciate any help. I'm using Paper.js

 function onMouseDown(event) {
        path = new Path();
        path.fillColor = {
            hue: Math.random() * 360,
            //saturation: 0,
            //brightness: 0.5
        };

        path.add(event.point);
    }

I have a function and would like to generate only grey colors. How can I do this with the code below? I'm pretty new to javascript! I'd appreciate any help. I'm using Paper.js

 function onMouseDown(event) {
        path = new Path();
        path.fillColor = {
            hue: Math.random() * 360,
            //saturation: 0,
            //brightness: 0.5
        };

        path.add(event.point);
    }

• javascript
• paperjs

Share Improve this question Follow edited Oct 24, 2017 at 8:49 Moob 16.2k11 gold badge4040 silver badges5252 bronze badges asked Oct 23, 2017 at 16:03 nattienatznattienatz 13711 gold badge22 silver badges88 bronze badges 2

• 1 It looks like you're using a library of some sort. I don't recognise it. Could be Paper.js? Perhaps it's your own. Can you let us know what it is please? If it's Paper.js you can feed it a hex colour rather than the HSL separates in your example. See: paperjs/reference/color – Moob Commented Oct 23, 2017 at 20:11
• @Moob I'm indeed using paper.js! Thank you for your response. I should have clarified that in my question. – nattienatz Commented Oct 23, 2017 at 23:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Since grey colours have equal RGB ponents you can generate a hex in the range 0 - ff and use it for each of the R,G,B parts:

function randomGreyHex() {
  var v = (Math.random()*(256)|0).toString(16);//bitwise OR. Gives value in the range 0-255 which is then converted to base 16 (hex).
  return "#" + v + v + v;
}

/* demo usage: */
var div = document.querySelector("div");
div.addEventListener("click", function() {
  var grey = randomGreyHex();
  this.style.backgroundColor = grey;
  this.innerHTML = grey;
});

div {
  height: 100px;
  border: 1px solid red;
  text-shadow: 0 0 10px white;
}

<div id="div">click me</div>

You can use the randomColor library.

To generate a random grey colour it would be:

randomColor({hue: 'monochrome', count: 1});

This, however, would include black too. You can use the luminosity key set to "light" to only get real grey colours.

randomColor({hue: 'monochrome',luminosity: 'light', count: 1});

A small demo, emulating the coloured balls we find on the GitHub repo:

var colours = randomColor({
  hue: 'monochrome',
  count: 5,
  luminosity: 'light'
});

var myDiv = document.getElementById('squares');

colours.forEach(function(colour) {
  myDiv.innerHTML += `<span class="circle" style="color:${colour}"></span>`
});

.circle:before {
  content: ' \25CF';
  font-size: 100px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>


<div id="squares">

</div>

Since the example you provide accepts HSB colours you can simply generate a random brightness value. The saturation should be 0 (fully desaturated) and the hue can also be 0 as it is redundant.

The Brightness value should be a number between 0 an 1. Since you want grey specifically you may want to get a value back that's neither too dark or too light. We can make a little method to return a random number between two values.

function getRandomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

So in you code you would use it like this:

function onMouseDown(event) {
    path = new Path();
    path.fillColor = {
        hue: 0, 
        saturation: 0,
        brightness: getRandomInRange(0.2, 0.8)
    };

    path.add(event.point);
}

Update

Paper.js has a Color constructor specifically for greyscale that would also be appropriate to use here. It takes a number from 0 - 1 (where 0 is black) so the getRandomInRange will work equally well here:

path.fillColor = new Color(getRandomInRange(0.2, 0.8)); //a random grey

本文标签： paperjsHow to generate random grey colors in javascriptStack Overflow