On this page, we will write code using physical tools like pencils, brushes, and paint as inspiration. While there are many great tools available, such as Procreate or Adobe Fresco, or you can simply ask AI to "paint like Van Gogh," I assure you that you can learn a lot and have fun by doing it yourself. By observing things and attempting to express them in code, you can develop your skills and perspective. The freedom to design your own tools can be an invaluable asset for your creativity.
このページでは、鉛筆、筆、絵の具などの物理的な道具を元にしてコードを書いていきます。ProcreateやAdobe Frescoなどの優秀なツールはたくさんありますし、単にAIに「ゴッホみたいな絵を描け」と頼むこともできるのですが、自分でやってみると楽しく、多くのことを学ぶことがでるでしょう。物事を観察し、それをコードで表現しようとすることで、スキルや物の見方を身につけることができます。自分自身でツールを自由にデザインできるとは、創造性にとって貴重な資産となるでしょう。
<aside> 💡 This article is a follow-up to the Drawing with code presentations I gave in 2022 and 2023. This article aims to provide a quick introduction to how to implement some of the techniques discussed in the talk. I won't delve into too many details, but I will include links to relevant materials and add some technical advice at the end. Also, many examples on this page use GLSL shaders. For more information on shaders, please refer to The Book of Shaders (as always).
この記事は、2022年と2023年に行ったDrawing with codeというのプレゼンテーションの補足として書いた物です。この記事では、プレゼンで扱ったいくつかのテクニックを実装する方法について、簡単に紹介します。細かな詳細には立ち入りませんが、関連資料へのリンクと最後にいくつかの技術的なアドバイスを追加しておきますので参考にしてください。また、このページの多くの例ではGLSLシェーダーを使っています。シェーダーに関する詳細は、（いつも通り）The Book of Shadersを参照してください。
</aside>
鉛筆画を模倣する
The pencil is one of the most common drawing materials. It is easy to use even for kids, and yet it is very versatile and profound, with which an artist can spend time forever. Let's begin by replicating the texture of pencil drawings. Artists often use a technique called hatching, which involves creating shading effects by drawing closely spaced parallel or crossing lines. Why don't we start with that, because while this can be quite laborious for humans, computers are good at drawing a lot of lines without getting tired.
鉛筆は最もありふれた絵を描く道具の1つです。子供でも簡単に使える一方、とても万能で奥深く、アーティストが永遠に時間を費やすことができるものでもあります。まずは鉛筆デッサンの質感を再現してみましょう。絵描きはよくハッチングという、平行または交差する線を細かく並べて陰影を作り出す技法を使います。これは人間にとっては手間のかかる仕事ですが、コンピュータなら疲れることなく、たくさんの線を疲れずに描けるので、そこから始めてみましょう。
The demo below takes a photo of a forest, selects a random pixel, converts its color to grayscale, and then draws a short diagonal line at the corresponding position in the space to the right. The line is drawn from the top right to the bottom left, just as right-handed people typically do (The opposite direction is easier for left-handed people).
下のデモは、森の写真からランダムなピクセルを選び、その色をグレースケールに変換してから、右側のスペースに対応する位置に短い斜めの線を描画します。右利きの人がよく行うように、線は右上から左下の向きで描かれます（左利きの人にとっては逆の方向のほうが簡単です）。
There is a small trick in the code to compare the colors of the original pixels at the starting point and ending point of the line. This is done to prevent drawing a line that crosses two areas with very different colors. This technique helps maintain a sharp contour for the shape in the final drawing.
小さな仕掛けとして、線の始点と終点それぞれの元のピクセルの色を比較するコードがあります。これは、線が、大きく色が異なる2つの領域を横切らないようにするためのこのテクニックで、完成した絵の輪郭を鮮明に保つために役立ちます。
https://codepen.io/kynd/pen/ZEwmBPq
We can also consider the paper, not just the drawing tool. The texture of the paper can greatly enhance the tones created by pencils. The example below adds some grainy noise (actually just random values) to the grayscale image. Although strokes are not defined, the resulting texture resembles the gentle touch of a soft pencil on rough paper.