Tips & Tricks

I'll show you some examples of my creative coding tips by exploring the technical categories of my works.

Colors.

I usually use HSB color mode, not RGB. HSB has more flexibility than RGB and easy to control hue, saturation and brightness, I think.
You can increment hue value to create color gradation easily in HSB mode. And the Color wheel is cyclic in 360 (as degrees), so you don't have trouble with the color gap.

Hue % 360 : smooth gradation guaranteed!

Ouroboros loop made with Processing code.

I used vertex() with incrementing hue value to draw this Ouroboros body.
An example code is here.

How to determine the color scheme?

One of the answers, you can use the color scheme generator web services. And if you use API, you can get a nice color scheme automatically.

This example code use colormind API to get a color scheme.

Archimedes's spiral with the colors that get automatically.

Blend colors.

Using alpha.

It's easy to use an alpha value in HSB color mode to blend colors.
For example, half transparent. fill(120.0, 40.0, 80.0, 50.0);

Using blend mode.

blendMode() function on processing and p5.js provides interesting effects.

These examples are using blendMode(DIFFERENCE). This example creates a reverse color image.

And this example creates an image like a drawing with blue ink.

An image like a drawing with blue ink made with Processing.

Processing and p5.js have more many interesting blendMode().

Processing reference : blendMode()
p5.js reference : blendMode()

Glow.

You can glow particles, lines, and any other objects with blendMode(SCREEN).

It makes lines glow with blendMode(SCREEN).

For example p5.js code.

    blendMode(SCREEN);
    noFill();
    for (let i = 0; i < 100; i++) {
        strokeWeight(i);
        stroke(200, 80, 30 - i * 0.3, 100);
        ellipse(0, 0, 300, 300);
    }

Of course, you can use belndMode(ADD), but it easily blows out highlights. So it's a little hard to handle than blendMode(SCREEN), I think.

Moving.

Random walking.

Random walking is easy to implement and fun to play. And you can develop it further and further not only moving but also representation.

This article contains many advanced examples of random walking in Processing and p5.js.

The Joy of Random Walking.

With noise.

Moving something with Perlin noise, sometimes it looks like a creature.

This example uses Perlin noise as the direction of the tentacle.

Easing.

Acceleration and deceleration feature will attract one's interest.

An example of easeInOutCubic code in Processing.

/**
* easeInOutCubic easing function.
* @param t 0.0 - 1.0 : linear value.
* @return float 0.0 - 1.0 : eased value.
*/
private float easeInOutCubic(float t) {
t *= 2.0;
if (t < 1.0) {
return pow(t, 3) / 2.0;
}
t -= 2.0;
return (pow(t, 3) + 2.0) / 2.0;
}

The easing implemented animation work.