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!
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.
An example code is here.
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.
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);
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.
Processing and p5.js have more many interesting blendMode().
Glow.
You can glow particles, lines, and any other objects 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.
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;
}
An advanced easing function makes moving more interesting.
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;Some (creepy) example of the recurrence formula.
for (...) {
float x1 = someFunction(x0);
x0 = x1;
}
Comments
No comments :
Post a Comment