rybitten
Version:
A color space conversion library for transforming between RGB and RYB colors.
66 lines (59 loc) • 2.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>p5.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script src="../dist/p5.rybitten.umd.js"></script>
</head>
<body>
<script>
// No need to call rybitten.extendP5(p5) anymore!
// The library auto-extends p5 following addon guidelines
function setup() {
createCanvas(800, 800);
colorMode(rybitten.RYBHSL);
noStroke();
}
function draw() {
const stripes = 36;
const barWidth = width / stripes;
const rowHeight = height / 3;
// First row: Standard p5 HSL rainbow
colorMode(HSL, 360, 100, 100);
for (let i = 0; i < stripes; i++) {
const hue = (i / stripes) * 360;
fill(hue, 100, 50);
rect(i * barWidth, 0, barWidth, rowHeight);
}
// Second row: Default RYB HSL rainbow
colorMode(rybitten.RYBHSL);
for (let i = 0; i < stripes; i++) {
const hue = (i / stripes) * 360;
fill(hue, 100, 50);
rect(i * barWidth, rowHeight, barWidth, rowHeight);
}
// Third row: Custom cube RYB HSL rainbow
colorMode(
rybitten.rybhsl([
[233 / 255, 199 / 255, 173 / 255],
[214 / 255, 76 / 255, 127 / 255],
[238 / 255, 204 / 255, 124 / 255],
[230 / 255, 174 / 255, 115 / 255],
[86 / 255, 141 / 255, 146 / 255],
[118 / 255, 83 / 255, 97 / 255],
[196 / 255, 192 / 255, 118 / 255],
[60 / 255, 52 / 255, 40 / 255],
]),
);
for (let i = 0; i < stripes; i++) {
const hue = (i / stripes) * 360;
fill(hue, 100, 50);
rect(i * barWidth, rowHeight * 2, barWidth, rowHeight);
}
noLoop();
}
</script>
</body>
</html>