CODEWITHSUNDEEP
javascriptcolorsrotation
Lance Pollard
Lance Pollard

Reputation: 79248

How to rotate hue in JavaScript

I saw here a spin function that goes from -360 to 360, which doesn't make sense to me, I would think it would go from 0-360.

I would like to extend the concept of complementary color, triad, and tetrad (which were built into another library), and generate an arbitrary n-gon equivalent of a color palette, so a pentad, hexad, heptad, etc. I tried simply doing angle * position to get the pentad, but 2 of the 5 colors were duplicate (this is because I'm going from 0-360).

Not sure how to get that working.

Upvotes: 1

Views: 1652

Answers (1)

Tatarize
Tatarize

Reputation: 10796

The reason it lets you do rotations from -360 to 360 even though a lot of those are the same thing is because they are all the values you'd conceptually use. So -20 degrees of hue makes sense so does +340 degrees of hue even though they are the same thing.

var tc = tinycolor({
  r: Math.floor(Math.random() * 0xFF),
  g: Math.floor(Math.random() * 0xFF),
  b: Math.floor(Math.random() * 0xFF)
})
colors = []
var parts = 2 + Math.floor(Math.random() * 5);
for (var i = 0; i < parts; i++) {
  tc = tc.spin(360 / parts);
  colors.push('#' + tc.toHex())
}

div = document.createElement("div");
document.body.appendChild(div);
colors.forEach(function(element) {
  var d = document.createElement("button");
  d.style.cssText = 'padding:5px; font-size:22px; width:50px; height:50px; background-color:' + element;
  div.appendChild(d);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Related Questions