Adding a shortcut for hue-rotate()

I like the background() function in P5.js. It accepts one or multiple parameters and is very easy to use. Setting the background color is often one of the first steps when starting a new P5.js sketch.

function setup() {
  background(200);
}

When comes to CSS Doodle, the background color is usually defined within the :doodle block, which indicates that the color is applied directly to the component element.

@grid: 1 / 400px;

:doodle {
  background: #f0f0f0;
}

I thought it would be convenient to have a short command for adding background color, to save time and make the code more concise. So I extended the @grid property to read a second / symbol.

@grid: 1 / 400px / #f0f0f0;

I was happy with this new syntax and never looked back at the old style.

Over the past year, I've gradually added several other shortcut commands for the @grid property. Some of them are visually intuitive -- at least for me.

* 45deg    // rotate
+ 2        // scale
~ 100%     // translate
∆ 1000px   // add perspective
_ 1px      // add grid gap

I chose those symbols based on their visual similarity to the action they represent. For exmaple, the * symbol looks like a spin and points toward to different directions.

Yesterday, I found that the hue-rotate() of the filter property is another frequently used function when I want to add color variation to the entire element. To simplify the task, I decided to create a new command for it.

@grid: 1 / 400px;

:doodle {
  filter: hue-rotate(30deg);
}

I explored the characters available on the keyboard and those accessible with the Alt key on my computer, which I had done multiple times before. However, none of them seemed relevant to hue rotation.

!@#$%&*¡™£¢∞§¶•ªº–≠«`œ∑´®†\¨ˆøπ“‘åß∂ƒ©˙∆˚¬…æ¸√∫˜µ≤≥÷≈

I was about to give up, then suddenly realized that the rotate property can accept additional axis values, like this:

rotate: x 10deg;
rotate: y 10deg;
rotate: z 10deg;

So why not resue the existing * command and add a custom h for hue rotation? It's unlikely that CSS will add an axis named h to the rotate property in the future, so there shouldn't be any conflicts with existing CSS keywords.

* 30deg    // rotate: 30deg;
* x 30deg  // rotate: x 30deg;
* h 30deg  // filter: hue-rotate(30deg);

This seemed a proper choice, and best of all, no new symbol to remember.

* h <degree>

Now I can quickly add hue-rotate() to the component element with the command * followed by h and a degree.

@grid: 1x36 / 400px / #f90 +2 *45deg *h @r(±90deg);
@place: center;
@size: 100%;
content: @svg-polygon(
  points: 180;
  move: 0 $(@dy/@Y*2);
  fill: @P(#f90, #00f, pink);
  a: sin((@Y/2-@abs.dy)/6.9)^1.2;
  x: a*cos(t)/(1+sin(2t)^2);
  y: x*sin(3t);
);