今回の記事の目的
- Javaの出力処理
System.out.printlnが、3つの要素（クラス ➔ オブジェクト ➔ メソッド）をドット（.`）で経由して処理を実行する仕組みをProcessingのキャンバス上に視覚化する。
ワタタクどうも上達の研究家のワタタクです。
前回の記事（System.out.printlnはメソッド？Javaの出力呪文をマトリョーシカ構造で完全解体！）
では、ただの呪文だと思っていたあの1行が、実はドットで繋がれた美しい3重のマトリョーシカ構造（バケツリレー）であることを解体しました。
今回はLinked Logカテゴリーとして、「ドットの境界線をパカパカと突き進むたびにエネルギーが伝播し、最深部のprintlnメソッドからコンソールへ文字がガツンと打ち出される世界」をProcessingのコードで表現してみました！
文字を右から左へなぞるだけでは見えてこない、オブジェクト指向の「階層をたどる躍動感」が脳にマッピングされるコードと設計図を共有します。
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。
- ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- KITTE大阪の18メートルあるAxCROSS大型スクリーン
- 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
- UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
- 実際の展示作品と動画、音楽やSEOでの実績はポートフォリオに載せております→https://my-portfolio-blue-three-63.vercel.app/works
目次
脳内をビジュアライズするための設計思想
Javaの System.out.println("文字"); という構造をグラフィックに翻訳するため、以下の3つのギミックを仕込みました。
1. ドット（.）を突破する3ステップの光の連鎖
画面上に左から順に System（大ボックス）、out（中ボックス）、println()（小ボックス）を配置。クリックするたびに左から右へとエネルギーの電流が走り、ドットの境界線を突破していく連鎖反応をデザインしました。
2. new 不要の証明（staticな輝き）
2番目の out ボックスの周囲には、new をして実体を作らなくてもいきなりアクセスできる特性を象徴する、常時スタンバイしたネオンのオーラ（static の輝き）を配置しました。
3. 最深部から放たれる「文字の粒子（Particle）」
最後の println() メソッドに電流が到達した瞬間、ボックスの先端から画面右側のコンソール画面（黒い枠）へ向けて、黄金に輝く「文字の粒子（Particle）」が一気にビームのように射出されるエフェクトを実装しました。
Processing実装コード
実行して画面をクリックするたびに、ドットの階層が1ステップずつ進み、3回目で文字の粒子が勢いよく打ち出されます。
実行結果。
// ==========================================
// 知識を視覚化する：Javaの「マトリョーシカ出力（System.out.println）」
// ==========================================
PFont jpFont;
int step = 0; // 0:待機, 1:System選択, 2:out到達, 3:println実行（粒子発射）
float angle = 0;
int pCount = 40;
float[] px = new float[pCount];
float[] py = new float[pCount];
float[] pSpeedX = new float[pCount];
float[] pSpeedY = new float[pCount];
void setup() {
size(1200, 600);
resetParticles();
}
void resetParticles() {
for (int i = 0; i < pCount; i++) {
px[i] = 680; // printlnメソッドの位置から発射
py[i] = height / 2 + 10;
pSpeedX[i] = random(4, 12); // 右方向（コンソール）へ吹っ飛ぶ
pSpeedY[i] = random(-3, 3);
}
}
void draw() {
// 文字化け・画面更新対策
jpFont = createFont("Meiryo", 24, true);
textFont(jpFont);
background(18, 20, 28); // ダークサイバーメモリ空間
angle += 0.04;
// タイトル共通設定
textSize(24);
textAlign(CENTER, TOP);
fill(245);
text("【System.out.println の世界】\nドット(.)の階層をパカッと開け、最深部から文字の粒子を打ち出す連鎖", width / 2, 30);
// -------------------------------------------------------------
// 左〜中央：3重のマトリョーシカ構造（ドットのバケツリレー）
// -------------------------------------------------------------
rectMode(CENTER);
// ① System クラス（一番外側・青）
stroke(52, 152, 219, (step >= 1) ? 255 : 80);
strokeWeight((step == 1) ? 4 : 2);
fill(25, 35, 50, 180);
rect(180, height / 2, 200, 200, 15);
fill(52, 152, 219);
textSize(20);
textAlign(CENTER, CENTER);
text("① System\n(クラス)", 180, height / 2);
// ドット1
fill((step >= 1) ? color(155, 89, 182) : color(80));
textSize(30);
text(".", 300, height / 2);
// ② out オブジェクト（真ん中・紫・staticオーラ）
if (step >= 2) {
// staticな存在であることを示す常時発光ネオン
noFill();
for (int i = 3; i > 0; i--) {
stroke(155, 89, 182, 40 - i*10);
strokeWeight(i * 3);
rect(430, height / 2, 160 + sin(angle)*8, 160 + sin(angle)*8, 12);
}
}
stroke(155, 89, 182, (step >= 2) ? 255 : 80);
strokeWeight((step == 2) ? 4 : 2);
fill(35, 25, 45, 180);
rect(430, height / 2, 160, 160, 12);
fill(155, 89, 182);
textSize(18);
text("② out\n(staticオブジェクト)", 430, height / 2);
// ドット2
fill((step >= 2) ? color(46, 204, 113) : color(80));
textSize(30);
text(".", 530, height / 2);
// ③ println() メソッド（一番内側・緑）
stroke(46, 204, 113, (step >= 3) ? 255 : 80);
strokeWeight((step == 3) ? 4 : 2);
fill(25, 45, 35, 180);
rect(640, height / 2, 120, 120, 10);
fill(46, 204, 113);
textSize(16);
text("③ println()\n(メソッド)", 640, height / 2);
// -------------------------------------------------------------
// 右側：出力先のコンソール画面（文字の粒子が着弾する場所）
// -------------------------------------------------------------
rectMode(CORNER);
stroke(100);
strokeWeight(2);
fill(10, 12, 18);
rect(820, height / 2 - 100, 320, 200, 8);
fill(100);
textSize(12);
text("💻 CONSOLE OUTPUT", 840, height / 2 - 80);
// -------------------------------------------------------------
// ステップ3：粒子（Particle）の発射アニメーション
// -------------------------------------------------------------
if (step == 3) {
// エネルギーラインの描画
stroke(241, 196, 15, 150);
strokeWeight(3);
line(700, height / 2, 820, height / 2);
// コンソールに文字が出現
fill(241, 196, 15);
textSize(24);
textAlign(LEFT, CENTER);
text("\"文字\"", 930, height / 2 + 10);
// 飛び散るエネルギー粒子
for (int i = 0; i < pCount; i++) {
px[i] += pSpeedX[i];
py[i] += pSpeedY[i];
// コンソール画面の範囲内で粒子を受け止める
if (px[i] < 1120) {
noStroke();
fill(241, 196, 15, 180);
ellipse(px[i], py[i], 8, 8);
}
}
}
// -------------------------------------------------------------
// 下部：ドットの進捗コード表示
// -------------------------------------------------------------
rectMode(CENTER);
stroke(40, 45, 60);
fill(20, 24, 35);
rect(width / 2, height - 80, 800, 60, 8);
textAlign(CENTER, CENTER);
textSize(22);
// 各ステップに合わせてコードの色をリアルタイムに明滅させる
if (step >= 1) fill(52, 152, 219); else fill(80);
text("System", width / 2 - 180, height - 80);
if (step >= 1) fill(155, 89, 182); else fill(80);
text(".", width / 2 - 120, height - 80);
if (step >= 2) fill(155, 89, 182); else fill(80);
text("out", width / 2 - 70, height - 80);
if (step >= 2) fill(46, 204, 113); else fill(80);
text(".", width / 2 - 20, height - 80);
if (step >= 3) fill(46, 204, 113); else fill(80);
text("println", width / 2 + 40, height - 80);
if (step >= 3) fill(241, 196, 15); else fill(80);
text("(\"文字\");", width / 2 + 150, height - 80);
// 操作案内表示
fill(120);
textSize(12);
textAlign(CENTER, BOTTOM);
text("🖱️ 画面をクリック：ドットを1つずつ進めて文字を発射する (ステップ: " + step + "/3) ", width / 2, height - 10);
}
// マウスクリックでステップを進める
void mousePressed() {
step = (step + 1) % 4; // 0 -> 1 -> 2 -> 3 -> 0
if (step == 3) {
resetParticles(); // 発射のたびに粒子をリセット
}
}コード表現に落とし込んでみて気づいたこと
ただの「黒い画面に文字を出す記号」だった System.out.println を、Processingの「左から右へステップが連鎖するオブジェクトの配置」へと翻訳した瞬間、ドット（.`）が持つ「境界線を開いて中へ進む」というJavaの本質的な仕様が完璧に脳内にマッピングされました。
特に、真ん中の out ボックスを new していないのに最初から光らせる（static の表現）コードを書いているとき、「あぁ、だから System クラスからダイレクトにドットで繋げられるんだな！」と、前回のメインメソッドの知識と完全にガチッとパズルが噛み合いました。
最後のステップで、黄金の光のラインが走ってコンソールに「文字」が浮かび上がるエフェクトは、まさにプログラムがPCのハードウェア（画面）へ命令を伝播させた瞬間のようですね。
ワタタクそれでは今日もレッツワクワクコーディング。
関連記事
あわせて読みたい
System.out.printlnはメソッド？Javaの出力呪文をマトリョーシカ構造で完全解体！
今回の記事の目的 Javaの基本構造「パッケージ ➔ クラス ➔ メソッド」の上下関係を確定させる 呪文だと思っていた System.out.println の正体を完璧に理解する ドット（…
