Tips & Tricks

Can I 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!

I used vertex() with incrementing hue value to draw this Ouroboros body.

 

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.

 

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 the 'Processing' and the 'p5.js' provides interesting effects.

These examples are using 'blendMode(DIFFERENCE)'.

The 'Processing' and the '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)'.

For example the '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.

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

 

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 the '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.

Reference. Easing Cheat Sheet for jQuery, CSS, SCSS

 

Step easing.

An advanced easing function makes moving more interesting.

The two step easing function.

Step easing examples are below.

 

Interesting calculation.

Strange attractor.

The chaotic behavior of Strange Attractors are so interesting theme of creative coding.

 

Recurence formula.

Like a Strange Attractor, the recurrence formula may cause chaotic behavior too.

float x0 = someValue;
for (...) {
  float x1 = someFunction(x0);
  x0 = x1;
}

 

Polar cordinate.

A polar coordinate is useful to draw something round. And you will find it is fun to transform the linear coordinate into the polar coordinate.