NoC Project A: Generative & Interactive Ink-wash
Generative & interactive Ink-wash Experience
P5js link: p5.js Web Editor | Generative Ink-wash (p5js.org)
Idea: enjoy the collision between modern and the odd
Before we get to the topic, please first see these two photos.
In this photo, the major element is the modern convenience store in the 21st century. However, we can feel that a blur filter on the photo makes it have a quite dream-like effect. This photo is taken with the Minolta xd camera which is a film camera from 40 years ago with a lens from 60 years ago. When modern scenes have encountered old technologies, I can always feel the enjoyable contract between each other.
This photo is on the opposite side. This photo is of an old Shanghai mailbox from the last century. However, it is taken by one of the state-of-the-art cameras that has an extremely high resolution and details.
As for the Ink-wash paintings, it already has thousands of years of history. However, the coding can be treated as the product of contemporary invention. The collision between the old and the new is the main reason why I doing the project.
Also, since I have a strong interest in Chinese traditional calligraphy and aesthetic history, I choose the topic of doing a digital duplication of Chinese traditional ink-wash painting work.
To be more specific on the project itself, the project is mainly from the perspective of the Chinese traditional ink-wash painting aesthetics but perform digitally. I want to make this project able to reproduce the beauty of the ink-wash paintings and make everyone able to enjoy the painting procedure.
Before coding: Design
To be honest, I’m not that good at painting. To make the project embed the most simple ink-wash painting aesthetics, I chose a human-made ink-wash painting as my visual reference.
From this picture, we can see four main elements. The first element is the key component of the ink-wash aesthetics which is the mountains in the background. The mountains are covered by the light fog, giving the audience a sense of soft silence. It also has a significant brushwork on the mountain’s edge, which becomes the most challenging part of reproduction. After asking Professor Moon, he introduces the particle strategy to me. Which uses small random-size particles to simulate the ink and the brushwork.
Besides the mountain, is the lake (or river). The lake is quite hard to reproduce on the flowing action. When the water is still, it becomes almost invisible which is quite hard to make the audience realize its existence. To solve the above problems, I came up with an amazing idea which is when the weather is rainy, the raindrops can easily interact with the water and we can use ripples to make the water flow.
They are the willow leaves. The willow leaves are another challenge that I’ve encountered on this project. I decided to use a spring and ball structure to code the willow due to its hanging features. But how to make the willow leaves bend on a perfect curve is the thing that we need to consider. Professor Moon gave me the answer which is we can add a force on the top balls. This does not need a great effort and can perfectly achieve the effect.
The last element is the boat. The boat can be treated as one of the “点睛之笔” (the element that makes the project shinning) in this project. The boat can bring an active and life-like element to the whole frame. The action I’ve assigned to the boat is that it will flow up and down on the lake and create satisfying ripples.
Coding 01: Mountain but detailed particles
Since this project is hugely object-oriented, it’s a better option for me to divide the coding process into different object parts. And the first one is the mountain.
The brushwork comes first.
As I’ve mentioned above, I use ink particles to form this effect therefore the first action is creating an InkParticle object:
class InkParticle {
constructor(x, y, r = 10) {
this.pos = createVector(x, y);
this.rad = r;
//
this.acc = createVector(0, 0);
this.vel = createVector(0, 0);
this.r = 51;
this.g = 58;
this.b = 69;
//
this.lifespan = (height / 1.5 - y) / 150; // 100%
this.lifeReduction = random(0.006, 0.018);
this.isDone = false;
this.trans = 255 * this.lifespan;
//
return this;
}
To initialize the class, I first need to initialize it with several variables. I assign the position, particle size(radius), acceleration, velocity, color, lifespan, status(isDone), and transparency to it. To make the particles can perform like the liquid, I make the new particles generate on the right side of the past one while the old particles will flow down to simulate the effect of ink.
From the final effect, we can see that it is quite realistic.
Coding 02: Rain and the Lake
As for the rain part, I mostly follow the previous attempt on my Mini-project 2. If you are interested in the coding procedure please take a look at that blog 😉
When comes to the lake, it’s hard to represent water without simulating the flow effect, I directly utilize the transparency of the background to make the place of the ripple have a deeper color to draw the boundaries of the lake. This can also make the lake generative and make the user a deeper sense of interaction.
For the codes:
pg = createGraphics(windowWidth, windowHeight); //pg for ripple in lakes, semi-transparent background
...
display() {
if (this.isDone) {
//Ripple
pg.push();
pg.noStroke();
pg.fill(245, ((height * 2 - this.doneY) * 255) / height);
pg.translate(this.pos.x, this.pos.y);
pg.scale(this.scale / 2);
pg.ellipse(
0,
0,
(this.pos.y - this.doneY) * 0.5,
(this.pos.y - this.doneY) * 0.15
);
pg.pop();
Coding 03: Willow makes the Frame Agility
The willow effect is both easy and hard to achieve. To say it’s easy is because I’ve already familiar with the ball-spring architecture when making the previous mini-project. Say it’s hard because we have to simulate the perfect curve of the branch.
To make the willow curve, I directly add the force on the balls which is the connection part between each spring.
balls0[0].firm(-25, 40); balls0[1].applyForce(createVector(1, -0.7)); balls0[2].applyForce(createVector(0.5, 0)); balls0[3].applyForce(createVector(0.2, 0)); balls0[4].applyForce(createVector(0.2, 0)); balls0[5].applyForce(createVector(0.2, -1));
With this force, the willow can have a perfect curve:
Coding 04: Boat, the Diamond of the Ring
Without the boat, the project fairly meets the requirement and applies a lot of force. However, the whole frame is quite empty and has a large empty space. The boat can perfectly balance the whole frame and make it has a balanced aesthetics.
To be more specific on the boat itself, I didn’t use objects but directly calculate and apply force on them.
function boat() {
if (frameCount % round((2 - abs(boatSpd)) * 20) == 0) {
d = new Drop(boatX + 110, height * 0.65 + 80, [0, 0]);
d.isDone = true;
d.scale = 0.93;
// d.doneY = height * 0.65;
drops.push(d);
}
push();
translate(boatX, height * 0.65 + cos(noiseIndex * 100) * 5);
scale(0.06);
rotate((noise(noiseIndex) - 0.5) * ui.rainAmount);
image(fishboat, -100, -50);
pop();
if (boatX <= width * 0.33) {
boatAcc = noise(noiseIndex) - 0.3;
} else {
boatAcc = noise(noiseIndex) - 0.5;
}
boatSpd += boatAcc / 300;
if (addWind) {
boatSpd += mouseVel.x / 1000;
}
boatSpd += randomWind.x / 300;
boatSpd -= boatSpd / 100;
ui.boatSpeed = boatSpd * 10;
boatX += boatSpd;
}
after applying these codes, the boat is able to follow the mouse and accelerate on the lake.
Reflection: We All Have the Ability to Reproduce the Nature
In the project, I make the users able to control the ink which is the mountain in the background. The users are able to control the size, speed, the height of the particles and can make a splash effect if they wish. They can also clear the canvas and remake their own ink-wash paintings. In addition, the user can also control the willow and the boat to adjust them into a proper position. The user can also take a screenshot of the painting with a single button.
The reason why I making this system is that I am not that good at painting. However, I yearn for creating a good-looking painting on my own. So I decided to use coding and make me and the people who have the same will as I gain the ability to create a painting on their own.
After making this project, I think I partly achieve my will. I see my users can create a unique ink-wash style painting on their own. They are using the painting as their slides background or the wallpapers of their computer. This makes me satisfied and genuinely feel honored for my project.
Also, this is telling us the fact that one of the most powerful systems and the most valuable treasure that we all own is nature itself.
