🎬 Make your own cartoon world with Codex: research, a style, a walk and a skill · สร้างโลกการ์ตูนของคุณเองด้วย Codex: การค้นคว้า สไตล์ การเดิน และสกิล · 用 Codex 做出你自己的卡通世界：研究、风格、走路和技能

0 Why code draws shapes, not oil paint · ทำไมโค้ดวาดรูปทรงได้ แต่วาดภาพสีน้ำมันไม่ได้ · 为什么代码会画形状，却画不了油画

shapes.py

"""shapes.py - a picture made from a few numbers: a string of Lanna lanterns.

    python3 shapes.py

It writes lanterns.svg, which any web browser opens. Each lantern is a circle,
and a circle needs only three numbers: where its middle is (x and y) and how
big it is. That is why code draws shapes well. A photo of the same size needs
three numbers for every pixel, and no short list of shapes can make it.
"""
WIDE = 1040
TALL = 260


def lantern(x, y):
    # a string down from the rope, a red paper ball, a tassel under it
    return ('<line x1="' + str(x) + '" y1="40" x2="' + str(x) + '" y2="' + str(y) + '" '
            'stroke="#1b1b1b" stroke-width="4"/>'
            '<circle cx="' + str(x) + '" cy="' + str(y + 40) + '" r="40" '
            'fill="#c0392b" stroke="#1b1b1b" stroke-width="5"/>'
            '<line x1="' + str(x) + '" y1="' + str(y + 80) + '" x2="' + str(x) + '" '
            'y2="' + str(y + 120) + '" stroke="#d4a017" stroke-width="8"/>')


def main():
    xs = [100 + 140 * n for n in range(7)]       # seven lanterns along the rope
    ys = [60 + 30 * (n % 2) for n in range(7)]   # high, low, high, low ...
    shapes = [lantern(x, y) for x, y in zip(xs, ys)]
    rope = '<line x1="0" y1="40" x2="' + str(WIDE) + '" y2="40" stroke="#1b1b1b" stroke-width="6"/>'
    svg = ('<svg xmlns="http://www.w3.org/2000/svg" width="' + str(WIDE) + '" height="'
           + str(TALL) + '" style="background:#f4f1ea">' + rope + "".join(shapes) + "</svg>")
    with open("lanterns.svg", "w") as file:
        file.write(svg)

    print("lanterns.svg:", len(shapes), "lanterns, from", len(xs) + len(ys), "numbers we chose")
    print("A photo this size:", WIDE, "x", TALL, "pixels x 3 =", WIDE * TALL * 3, "numbers")


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 shapes.py

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

lanterns.svg: 7 lanterns, from 14 numbers we chose
A photo this size: 1040 x 260 pixels x 3 = 811200 numbers

# Quiz 1: what will this print?
xs = [10, 20, 30]
ys = [5, 6]
print([x + y for x, y in zip(xs, ys)])

[15, 26]

1 A repository on GitHub · รีโพซิทอรีบน GitHub · GitHub 上的一个仓库

not run by us: in the Terminal, with your own GitHub nameเราไม่ได้รันเอง: ใน Terminal โดยใส่ชื่อ GitHub ของคุณเอง我们没有运行过：在终端里，换上你自己的 GitHub 名字

cd ~
git clone https://github.com/YOUR-NAME/mycartoon.git
cd mycartoon
mkdir research refs

.gitignore

research/sample.webm
research/stills/
refs/
*.mp4
*.jpg

AGENTS.md

# mycartoon

A cartoon framework in JavaScript. Every picture is drawn by code, by the
rules in STYLE.md.

- Read STYLE.md before you draw anything. Each rule there has a number: keep it.
- world.js holds the drawing functions. Each film is one page beside it, like
  walk.html: it loads world.js and has LENGTH, draw(t) and the switch rendering.
  draw(t) draws second t from nothing, every time.
- refs/ holds other people's repositories, to learn their method from. Read
  them; never copy their drawings into world.js, and never change them.
- research/stills/ holds pictures of the sample video. They are for looking
  at only: never trace them, and never commit them.
- After every change, look at the pictures:
  python3 refs/lannamation/kit/stills.py walk.html look.jpg 0 0.25 0.5 0.75
- A refactor must leave every picture the same. Take stills before and after,
  then: python3 same.py before.jpg after.jpg

2 A sample video, and stills from it · วิดีโอตัวอย่าง และภาพนิ่งจากมัน · 一段样片，和从中截出的静帧

take_stills.py

"""take_stills.py - take still pictures out of a video, a few seconds apart.

    python3 take_stills.py research/sample.webm 460 30

The three words after the file name are the video, how many seconds long it
is, and how many seconds apart the pictures are. Codex cannot watch a video,
but it can look at pictures, so this file turns the video into pictures.
ffmpeg does the cutting (brew install ffmpeg). Without ffmpeg, this file only
prints the commands it would run.
"""
import pathlib
import shutil
import subprocess
import sys


def seconds_to_take(length, gap):
    # every gap-th second, from 0 to the end: 0, 30, 60, ...
    return [second for second in range(0, length, gap)]


def picture_name(second):
    # 7 becomes still_007.png, so the pictures sort in order
    return "still_" + str(second).zfill(3) + ".png"


def ffmpeg_command(video, second, picture):
    # -ss: go to this second; -frames:v 1: keep one picture
    return ["ffmpeg", "-loglevel", "error", "-y", "-ss", str(second),
            "-i", video, "-frames:v", "1", picture]


def main():
    video = sys.argv[1]
    length = int(sys.argv[2])
    gap = int(sys.argv[3])
    folder = pathlib.Path("research/stills")
    folder.mkdir(parents=True, exist_ok=True)

    seconds = seconds_to_take(length, gap)
    pictures = [str(folder / picture_name(second)) for second in seconds]
    print(len(pictures), "pictures, one every", gap, "seconds")

    have_ffmpeg = shutil.which("ffmpeg") is not None
    for second, picture in zip(seconds, pictures):
        command = ffmpeg_command(video, second, picture)
        if have_ffmpeg:
            subprocess.run(command, check=True)
            print("saved", picture)
        else:
            print(" ".join(command))
    if not have_ffmpeg:
        print("No ffmpeg here, so nothing was saved: these are the commands.")


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 take_stills.py research/sample.webm 460 30

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

16 pictures, one every 30 seconds
saved research/stills/still_000.png
saved research/stills/still_030.png
saved research/stills/still_060.png
saved research/stills/still_090.png
saved research/stills/still_120.png
saved research/stills/still_150.png
saved research/stills/still_180.png
saved research/stills/still_210.png
saved research/stills/still_240.png
saved research/stills/still_270.png
saved research/stills/still_300.png
saved research/stills/still_330.png
saved research/stills/still_360.png
saved research/stills/still_390.png
saved research/stills/still_420.png
saved research/stills/still_450.png

research/notes.md

# Research notes

## The sample video

- Steamboat Willie (1928), by Walt Disney and Ub Iwerks. Public domain.
- From Wikimedia Commons:
  https://commons.wikimedia.org/wiki/File:Steamboat_Willie_(1928)_by_Walt_Disney.webm
- I saved the 480p copy (42 MB, 7 minutes 40 seconds) as research/sample.webm.
- 16 stills, one every 30 seconds: python3 take_stills.py research/sample.webm 460 30

## Why this one

- It is made of shapes: circles, ovals and thick lines, in black, white and
  grey. Code draws that kind of picture well.
- Its characters walk and bounce a lot, so there is a walk to learn from.

## What I looked at

- still_270 and still_330: how big the head is beside the body, how the arms
  bend, how big the shoes are.
- still_210: a character running, legs far apart and bent like hoses.

## What I will not do

- Copy a character. Mickey Mouse is still a trademark of Disney, and my world
  has characters of its own.

# Quiz 3: what will this print?
seconds = [second for second in range(0, 100, 30)]
print(seconds)

[0, 30, 60, 90]

3 Rules, not copies: STYLE.md · กฎ ไม่ใช่การลอก: STYLE.md · 要规则，不要照抄：STYLE.md

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex -i research/stills/still_060.png,research/stills/still_270.png,research/stills/still_330.png "These are stills from my sample video, Steamboat Willie (1928), which is in the public domain. Do not describe or copy any character. Look only at HOW things are drawn, and write STYLE.md: a heading for each of colours, outline, head, body, arms, hands, legs and feet, and under each, two or three rules with numbers I can check in a picture, such as how wide the head is beside the height, or how thick a line is. My characters will be my own, so no rule may name a character from the film."

STYLE.md

# STYLE.md - the rules of my cartoon world

Learned from one sample video: Steamboat Willie (1928), in the public domain,
16 stills, one every 30 seconds. These are rules, not copies: no character,
drawing or line of the film is in this repository. The characters of my
world are my own.

## Colours

- Three flat colours and nothing in between: ink #1b1b1b, chalk #f4f1ea and
  stone #9a968c, on paper #d9d4c7.
- No gradients, and no shading inside a shape.

## Outline

- Every chalk shape has an ink outline 6 pixels thick. Ink shapes have none.

## Head

- A circle. Its width is 0.38 of the character's height.

## Body

- An ink oval, with chalk shorts at the bottom and two ink buttons on them.
  The head is nearly twice as wide as the body.

## Arms

- A rubber hose: one curved ink line 16 pixels thick, with no elbow. From the
  shoulder to the hand is 0.3 of the height.

## Hands

- A chalk glove: a circle 40 pixels across, with an outline.

## Legs

- A hose 22 pixels thick, with no knee. From the hip to the foot is 0.32 of
  the height.

## Feet

- Big ink shoes: ovals 68 pixels long, pointing the way the character faces.

rules_left.py

"""rules_left.py - which parts of a character have no rule in STYLE.md yet?

    python3 rules_left.py STYLE.md

A style is a list of rules, each about one part: the head, the arms, the walk.
This file reads your STYLE.md and tells you which parts it never names, so you
know what to look at next in your sample video.
"""
import sys

PARTS = {"head", "eyes", "mouth", "body", "arms", "hands",
         "legs", "feet", "walk", "colours", "outline"}


def words_in(path):
    text = open(path).read().lower()
    for mark in ".,:;()-*#`":
        text = text.replace(mark, " ")
    return set(text.split())


def main():
    words = words_in(sys.argv[1])
    named = PARTS & words      # in both sets: the parts that have a rule
    left = PARTS - words       # in PARTS but not in the file: no rule yet
    print("Rules for:", ", ".join(sorted(named)))
    print("No rule yet:", ", ".join(sorted(left)) or "none")


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 rules_left.py STYLE.md

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

Rules for: arms, body, colours, feet, hands, head, legs, outline
No rule yet: eyes, mouth, walk

# Quiz 4: what will this print?
PARTS = {"head", "arms", "legs"}
words = {"the", "head", "is", "round", "and", "the", "legs", "bend"}
print(sorted(PARTS - words))

['arms']

4 Repositories to learn method from · รีโพซิทอรีที่ใช้เรียนวิธีทำงาน · 用来学方法的仓库

in the Terminal, in your repository (we ran the first clone, on 25 October)ใน Terminal ในรีโพซิทอรีของคุณ (เรารันการโคลนแรกเมื่อ 25 ตุลาคม)在终端里，在你的仓库中（第一条克隆我们在 10 月 25 日运行过）

cd refs
git clone --depth 1 https://github.com/ddtraveller/lannamation
git clone --depth 1 https://github.com/rough-stuff/rough
git clone --depth 1 https://github.com/metafizzy/zdog
cd ..

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex "Read refs/lannamation/README.md and refs/lannamation/docs/STYLE.md, then the README of refs/rough and of refs/zdog. Do not copy any code or drawing into my files. Write METHOD.md: for each of the three, in plain words, how the code is split into files and functions, how one picture is drawn, and how its author checks the result. End with the five habits my framework should take from them, each with the file you learned it from."

5 REA: how a living scene works · REA: ฉากมีชีวิตทำงานอย่างไร · REA：活的场景是怎样运作的

in the Terminal: we ran the two REA commands on Windows on 25 October, with Chrome 155; the first line is the Mac's way to start that Chromeใน Terminal: เรารันคำสั่ง REA สองคำสั่งบน Windows เมื่อ 25 ตุลาคม กับ Chrome 155 บรรทัดแรกคือวิธีเปิด Chrome ตัวนั้นบนแมค在终端里：两条 REA 命令我们 10 月 25 日在 Windows 上用 Chrome 155 运行过；第一行是在 Mac 上启动那个 Chrome 的写法

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --remote-debugging-port=9222 --user-data-dir=/tmp/rea-chrome https://krueng.ai/living_scenes.html &
npx -y rea-agents@6.3.0 list-browser-targets http://127.0.0.1:9222
npx -y rea-agents@6.3.0 observe-web-execution http://127.0.0.1:9222 TARGET-ID --observation-ms 5000 --format json > living.json

hot.py

"""hot.py - which functions did a page run most? It reads REA's report.

    python3 hot.py living.json

REA's observe-web-execution watches a page for a few seconds and counts how
many times each of its functions ran. The report is long: this file prints
the 12 functions that ran most, the file each one is in, and which of the
page's files REA has counts for. For the others REA does not say whether
they ran.
"""
import json
import sys


def main():
    report = json.load(open(sys.argv[1]))["normalized_result"]
    files = {}
    for source in report["sources"]:
        # REA names each script by a number; keep the end of its address
        files[source["script_id"]] = (source["url"] or "the page").split("/")[-1]

    counts = []
    for script in report["coverage"]["scripts"]:
        for function in script["functions"]:
            name = function["name"] or "(no name)"
            count = function["ranges"][0]["count"]
            counts.append((count, name, files[script["script_id"]]))
    counts.sort(reverse=True)            # the biggest count first

    seconds = report["window"]["requested_ms"] / 1000
    print("In", seconds, "seconds REA counted", len(counts), "functions. The busiest:")
    for count, name, file in counts[:12]:
        print(" ", count, "times", name, "in", file)
    counted = {file for count, name, file in counts if count > 0}
    print("REA has counts for", len(counted), "of the", len(set(files.values())),
          "files:", ", ".join(sorted(counted)))


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 hot.py living.json

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

In 5.0 seconds REA counted 85 functions. The busiest:
  1092 times checkName in oldcartoon.js
  572 times startled in living_scenes.html
  468 times (no name) in living_scenes.html
  422 times kindOf in living_scenes.html
  407 times (no name) in living_scenes.html
  407 times (no name) in living_scenes.html
  407 times (no name) in living_scenes.html
  390 times along in oldcartoon.js
  342 times where in motion.js
  162 times lengthsOf in motion.js
  104 times drawByZ in oldcartoon.js
  93 times (no name) in oldcartoon.js
REA has counts for 4 of the 19 files: backdrops.js, living_scenes.html, motion.js, oldcartoon.js

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex "REA watched https://krueng.ai/living_scenes.html for 5 seconds, and python3 hot.py living.json prints its busiest functions. Find startled, kindOf and frame in refs/lannamation/scenes/living_scenes.html, and along and where in refs/lannamation/kit/motion.js. Add to METHOD.md, in plain words: how the page decides what each creature does next, how it moves it, and how I could do the same for my characters. Change nothing in refs/."

# Quiz 6: what will this print?
ran = {"draw", "frame", "leg"}
mine = {"leg", "arm"}
print(ran & mine)

{'leg'}

6 The first figure · ตัวละครตัวแรก · 第一个角色

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex "Read AGENTS.md, STYLE.md and METHOD.md. Write world.js with two functions: paper(pen, t) draws the background, the ground at y 900 and a sun of circles and lines; kid(pen, x, y, t, look) draws one child of my world by every rule in STYLE.md, with the feet at x, y, and when look.walk is true the legs and arms swing. Then write walk.html: a 1920 by 1080 canvas that loads world.js and has var LENGTH = 6, var rendering = false and draw(t), as the pages in refs/lannamation/kit do, so that refs/lannamation/kit/stills.py and render.py work on it. In draw(t) the kid walks from x 300 to the right. Then run python3 refs/lannamation/kit/stills.py walk.html first.jpg 0 0.25 0.5 0.75 and look at first.jpg."

the check Codex ran, and you can run againการตรวจที่ Codex รัน และคุณรันซ้ำได้Codex 运行的检查，你也可以再运行一次

python3 refs/lannamation/kit/stills.py walk.html first.jpg 0 0.25 0.5 0.75

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

first.jpg: 4 frames at seconds 0, 0.25, 0.5, 0.75

// world.js - the drawing functions of my cartoon world.
// The style is in STYLE.md: round heads, arms and legs like rubber hoses,
// big shoes, and only three colours. A page loads this file, then calls
// paper() and kid() inside its draw(t).

var INK = "#1b1b1b";      // outlines, shoes, hair
var CHALK = "#f4f1ea";    // faces, hands, shorts
var STONE = "#9a968c";    // the one grey: shadows and far things
var PAPER = "#d9d4c7";    // the background
var LINE = 6;             // every outline is this thick
var STEP = 0.5;           // seconds for one step

// The background: paper, the ground line, and a sun made of circles and lines.
function paper(pen, t) {
  pen.fillStyle = PAPER;
  pen.fillRect(0, 0, 1920, 1080);
  pen.fillStyle = STONE;
  pen.fillRect(0, 900, 1920, 180);
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.moveTo(0, 900);
  pen.lineTo(1920, 900);
  pen.stroke();
  // the sun turns slowly: 12 rays around one circle
  for (var i = 0; i < 12; i++) {
    var a = i * Math.PI / 6 + t * 0.3;
    pen.beginPath();
    pen.moveTo(1600 + 80 * Math.cos(a), 200 + 80 * Math.sin(a));
    pen.lineTo(1600 + 120 * Math.cos(a), 200 + 120 * Math.sin(a));
    pen.stroke();
  }
  pen.fillStyle = CHALK;
  pen.beginPath();
  pen.arc(1600, 200, 64, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
}

// One kid. x, y is the point between the feet, on the ground. look.walk: true
// while walking. look.size: 1 is 360 pixels tall.
function kid(pen, x, y, t, look) {
  var s = look.size || 1;
  var swing = look.walk ? 28 * Math.sin(Math.PI * t / STEP) : 0;   // degrees
  var bob = look.walk ? 8 * Math.abs(Math.cos(Math.PI * t / STEP)) : 0;
  var a = swing * Math.PI / 180;
  pen.save();
  pen.translate(x, y);
  pen.scale(s, s);
  pen.lineCap = "round";
  pen.lineJoin = "round";

  // the far leg: a hose from the hip to the foot, bent a little
  var hipY = -120 - bob;
  var fx = 120 * Math.sin(-a), fy = hipY + 120 * Math.cos(-a);
  pen.strokeStyle = INK;
  pen.lineWidth = 22;
  pen.beginPath();
  pen.moveTo(-12, hipY);
  pen.quadraticCurveTo(-12 + fx / 2 + 14, hipY + (fy - hipY) / 2, -12 + fx, fy);
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.ellipse(-12 + fx + 14, fy - 4, 34, 15, 0, 0, 2 * Math.PI);
  pen.fill();

  // the near leg: the same, swinging the other way
  fx = 120 * Math.sin(a);
  fy = hipY + 120 * Math.cos(a);
  pen.strokeStyle = INK;
  pen.lineWidth = 22;
  pen.beginPath();
  pen.moveTo(12, hipY);
  pen.quadraticCurveTo(12 + fx / 2 + 14, hipY + (fy - hipY) / 2, 12 + fx, fy);
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.ellipse(12 + fx + 14, fy - 4, 34, 15, 0, 0, 2 * Math.PI);
  pen.fill();

  // the body: a black oval, white shorts with two buttons
  pen.fillStyle = INK;
  pen.beginPath();
  pen.ellipse(0, -175 - bob, 48, 64, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.fillStyle = CHALK;
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.ellipse(0, -138 - bob, 50, 30, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.arc(-18, -142 - bob, 6, 0, 2 * Math.PI);
  pen.arc(18, -142 - bob, 6, 0, 2 * Math.PI);
  pen.fill();

  // the far arm swings against the near leg, the near arm against the far leg
  var shY = -205 - bob;
  var hx = 95 * Math.sin(a), hy = shY + 95 * Math.cos(a);
  pen.strokeStyle = INK;
  pen.lineWidth = 16;
  pen.beginPath();
  pen.moveTo(-34, shY);
  pen.quadraticCurveTo(-34 + hx / 2 - 18, shY + (hy - shY) / 2, -34 + hx, hy);
  pen.stroke();
  pen.fillStyle = CHALK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.arc(-34 + hx, hy, 17, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();

  hx = 95 * Math.sin(-a);
  hy = shY + 95 * Math.cos(-a);
  pen.strokeStyle = INK;
  pen.lineWidth = 16;
  pen.beginPath();
  pen.moveTo(34, shY);
  pen.quadraticCurveTo(34 + hx / 2 - 18, shY + (hy - shY) / 2, 34 + hx, hy);
  pen.stroke();
  pen.fillStyle = CHALK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.arc(34 + hx, hy, 17, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();

  // the head: a white circle, a black cap of hair, two tall eyes, a smile
  var headY = -282 - bob;
  pen.fillStyle = CHALK;
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.arc(0, headY, 62, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.arc(0, headY, 62, Math.PI * 1.05, Math.PI * 1.95);
  pen.closePath();
  pen.fill();
  pen.beginPath();
  pen.ellipse(8, headY + 2, 7, 15, 0, 0, 2 * Math.PI);
  pen.ellipse(34, headY + 2, 7, 15, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.beginPath();
  pen.arc(22, headY + 18, 20, 0.15 * Math.PI, 0.85 * Math.PI);
  pen.stroke();
  pen.restore();
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>walk - a kid walks across</title>
<style>
  html, body { margin: 0; background: #222; }
  canvas { display: block; width: 100vw; height: 100vh; object-fit: contain; }
</style>
</head>
<body>
<canvas id="stage" width="1920" height="1080"></canvas>
<script src="world.js"></script>
<script>
// draw(t) paints the picture for second t, from nothing, every time.
var LENGTH = 6;                          // seconds; render.py reads this
var stage = document.getElementById("stage");
var pen = stage.getContext("2d");

function draw(t) {
  paper(pen, t);
  var x = 300 + 225 * t;                 // 225 pixels a second: walk.py
  kid(pen, x, 900, t, {walk: true});
}

// In a browser the film plays by the clock. render.py sets "rendering"
// and then asks for each frame itself.
var rendering = false;
function play(now) {
  if (!rendering) { draw((now / 1000) % LENGTH); }
  requestAnimationFrame(play);
}
requestAnimationFrame(play);
</script>
</body>
</html>

7 A walk · การเดิน · 走路

walk.py

"""walk.py - the numbers behind a walk.

    python3 walk.py

A leg swings like a swing in a playground: forward, back, forward. The sine
function, math.sin here and Math.sin in JavaScript, makes exactly that shape.
This file prints how far a leg swings at nine moments of one stride, works
out how fast the body must move so the feet do not slide, and draws the nine
moments side by side in walk.svg.
"""
import math

STEP = 0.5       # seconds for one step
SWING = 28       # the farthest a leg swings, in degrees
LEG = 120        # pixels from the hip to the foot


def leg_angle(t):
    # the swing at second t: 0, then up to 28, back to 0, down to -28 ...
    return SWING * math.sin(math.pi * t / STEP)


def foot_x(angle):
    # how far in front of the hip the foot is, in pixels
    return LEG * math.sin(math.radians(angle))


def leg_line(hip_x, angle, colour):
    x = hip_x + foot_x(angle)
    y = 30 + LEG * math.cos(math.radians(angle))
    return ('<line x1="' + str(hip_x) + '" y1="30" x2="' + str(round(x)) + '" y2="'
            + str(round(y)) + '" stroke="' + colour + '" stroke-width="12" stroke-linecap="round"/>')


def main():
    moments = [n * STEP / 4 for n in range(9)]    # 0, 0.125, ... 1.0 seconds
    angles = [leg_angle(t) for t in moments]
    for t, angle in zip(moments, angles):
        print(t, "s: near leg", round(angle), "degrees, far leg", round(-angle))

    # in one step a foot goes from behind the hip to in front of it
    stride = foot_x(SWING) - foot_x(-SWING)
    print("One step moves a foot", round(stride), "pixels, so walk at",
          round(stride / STEP), "pixels a second")

    hips = [70 + 120 * n for n in range(9)]
    near = [leg_line(x, angle, "#1b1b1b") for x, angle in zip(hips, angles)]
    far = [leg_line(x, -angle, "#9a968c") for x, angle in zip(hips, angles)]
    svg = ('<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="180" '
           'style="background:#f4f1ea">' + "".join(far + near) + "</svg>")
    with open("walk.svg", "w") as file:
        file.write(svg)
    print("walk.svg:", len(near + far), "legs at", len(moments), "moments")


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 walk.py

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

0.0 s: near leg 0 degrees, far leg 0
0.125 s: near leg 20 degrees, far leg -20
0.25 s: near leg 28 degrees, far leg -28
0.375 s: near leg 20 degrees, far leg -20
0.5 s: near leg 0 degrees, far leg 0
0.625 s: near leg -20 degrees, far leg 20
0.75 s: near leg -28 degrees, far leg 28
0.875 s: near leg -20 degrees, far leg 20
1.0 s: near leg 0 degrees, far leg 0
One step moves a foot 113 pixels, so walk at 225 pixels a second
walk.svg: 18 legs at 9 moments

add to STYLE.mdเพิ่มลงใน STYLE.md加进 STYLE.md

## Walk

- One step takes 0.5 seconds. The legs swing 28 degrees each way. The arms
  swing 1.8 times as far, each arm against the leg on its side.
- The body rises 8 pixels when the legs pass each other.
- Walk at 225 pixels a second (walk.py works it out), or the feet slide.

python3 rules_left.py STYLE.md

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

Rules for: arms, body, colours, feet, hands, head, legs, outline, walk
No rule yet: eyes, mouth

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex "Read STYLE.md again: it has a new Walk section. Change kid() in world.js so that the walk follows it: a step every 0.5 seconds, the legs swinging 28 degrees each way, the arms 1.8 times as far and each against the leg on its side, the far arm drawn behind the body and the near arm in front, and the body 8 pixels up when the legs pass. Fix these too: the hands sit on the shorts, the arms hardly swing, and the head is too small (make it nearly twice as wide as the body). In walk.html the kid walks at 225 pixels a second. Then run python3 refs/lannamation/kit/stills.py walk.html walked.jpg 0 0.25 0.5 0.75 and check each still against STYLE.md."

python3 refs/lannamation/kit/stills.py walk.html walked.jpg 0 0.25 0.5 0.75

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

walked.jpg: 4 frames at seconds 0, 0.25, 0.5, 0.75

# Quiz 8: what will this print?
def speed(stride, step):
    return stride / step

print(speed(113, 0.5))

226.0

8 Refactor now and then · รีแฟกเตอร์เป็นครั้งคราว · 时不时重构一下

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

codex "Refactor world.js. This is a tidy-up, not a new feature: no picture may change. First run python3 refs/lannamation/kit/stills.py walk.html before.jpg 0 0.25 0.5 0.75 1.5 3. Then find code that is written more than once, such as the four hoses of the arms and legs, and give each job one small function with a clear name: hose(), shoe(), glove(), leg(), arm(), body() and head(). Keep every number, and the order in which things are drawn. Keep paper(pen, t) and kid(pen, x, y, t, look) as they are called now, so that walk.html does not change. When you are done, run the same stills.py command into after.jpg, then python3 same.py before.jpg after.jpg. If it does not say 0 changed, undo the part that changed a picture. Then tell me each function you made, and what it replaced."

same.py

"""same.py - did a change to the code change the pictures?

    python3 same.py before.jpg after.jpg

Take stills before you refactor and after, with the same seconds, then give
both files to this one. A refactor only tidies the code, so every number in
the picture should be the same. Needs Pillow (python3 -m pip install pillow).
"""
import sys

from PIL import Image


def numbers(path):
    # a picture is three numbers for each pixel: red, green and blue
    picture = Image.open(path).convert("RGB")
    return picture.tobytes()


def main():
    before = numbers(sys.argv[1])
    after = numbers(sys.argv[2])
    if len(before) != len(after):
        print("The pictures are not the same size.")
        return
    changed = [i for i in range(len(before)) if before[i] != after[i]]
    share = 100 * len(changed) / len(before)
    print(len(before), "numbers,", len(changed), "changed:", round(share, 2), "%")
    if changed:
        print("Not the same: look at both pictures before you keep the change.")
    else:
        print("The same: the change did not move a single pixel.")


if __name__ == "__main__":
    main()

in the Terminal, in your repository: the stills before the refactor, the stills after it, and the checkใน Terminal ในรีโพซิทอรีของคุณ: ภาพนิ่งก่อนรีแฟกเตอร์ ภาพนิ่งหลังรีแฟกเตอร์ และการตรวจ在终端里，在你的仓库中：重构前的静帧、重构后的静帧，以及检查

python3 refs/lannamation/kit/stills.py walk.html before.jpg 0 0.25 0.5 0.75 1.5 3
python3 refs/lannamation/kit/stills.py walk.html after.jpg 0 0.25 0.5 0.75 1.5 3
python3 same.py before.jpg after.jpg

what they printedสิ่งที่มันพิมพ์ออกมา它们打印的内容

before.jpg: 6 frames at seconds 0, 0.25, 0.5, 0.75, 1.5, 3

after.jpg: 6 frames at seconds 0, 0.25, 0.5, 0.75, 1.5, 3

9331200 numbers, 0 changed: 0.0 %
The same: the change did not move a single pixel.

python3 same.py first.jpg walked.jpg

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

6220800 numbers, 120168 changed: 1.93 %
Not the same: look at both pictures before you keep the change.

// world.js - the drawing functions of my cartoon world.
// The style is in STYLE.md: round heads, arms and legs like rubber hoses,
// big shoes, and only three colours. A page loads this file, then calls
// paper() and kid() inside its draw(t).

var INK = "#1b1b1b";      // outlines, shoes, hair
var CHALK = "#f4f1ea";    // faces, hands, shorts
var STONE = "#9a968c";    // the one grey: shadows and far things
var PAPER = "#d9d4c7";    // the background
var LINE = 6;             // every outline is this thick
var STEP = 0.5;           // seconds for one step

// The background: paper, the ground line, and a sun made of circles and lines.
function paper(pen, t) {
  pen.fillStyle = PAPER;
  pen.fillRect(0, 0, 1920, 1080);
  pen.fillStyle = STONE;
  pen.fillRect(0, 900, 1920, 180);
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.moveTo(0, 900);
  pen.lineTo(1920, 900);
  pen.stroke();
  // the sun turns slowly: 12 rays around one circle
  for (var i = 0; i < 12; i++) {
    var a = i * Math.PI / 6 + t * 0.3;
    pen.beginPath();
    pen.moveTo(1600 + 80 * Math.cos(a), 200 + 80 * Math.sin(a));
    pen.lineTo(1600 + 120 * Math.cos(a), 200 + 120 * Math.sin(a));
    pen.stroke();
  }
  pen.fillStyle = CHALK;
  pen.beginPath();
  pen.arc(1600, 200, 64, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
}

// A rubber hose: a thick black line from x1, y1 that goes dx across and dy
// down, bent sideways by bend pixels in the middle.
function hose(pen, x1, y1, dx, dy, bend, width) {
  var x2 = x1 + dx, y2 = y1 + dy;
  pen.strokeStyle = INK;
  pen.lineWidth = width;
  pen.beginPath();
  pen.moveTo(x1, y1);
  pen.quadraticCurveTo(x1 + dx / 2 + bend, y1 + (y2 - y1) / 2, x2, y2);
  pen.stroke();
}

// A big black shoe, pointing forward from the end of a leg at x, y.
function shoe(pen, x, y) {
  pen.fillStyle = INK;
  pen.beginPath();
  pen.ellipse(x + 14, y - 4, 34, 15, 0, 0, 2 * Math.PI);
  pen.fill();
}

// A round white glove at the end of an arm.
function glove(pen, x, y) {
  pen.fillStyle = CHALK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.arc(x, y, 20, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
}

// A leg from the hip at x, y, swung forward by angle (radians).
function leg(pen, x, y, angle) {
  var dx = 120 * Math.sin(angle), dy = 120 * Math.cos(angle);
  hose(pen, x, y, dx, dy, 14, 22);
  shoe(pen, x + dx, y + dy);
}

// An arm from the shoulder at x, y, swung forward by angle, bent by bend.
function arm(pen, x, y, angle, bend) {
  var dx = 115 * Math.sin(angle), dy = 115 * Math.cos(angle);
  hose(pen, x, y, dx, dy, bend, 16);
  glove(pen, x + dx, y + dy);
}

// The body: a black oval, white shorts with two buttons. bob: how far the
// body is up in its step.
function body(pen, bob) {
  pen.fillStyle = INK;
  pen.beginPath();
  pen.ellipse(0, -175 - bob, 38, 64, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.fillStyle = CHALK;
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.ellipse(0, -138 - bob, 42, 30, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.arc(4, -142 - bob, 6, 0, 2 * Math.PI);
  pen.arc(24, -142 - bob, 6, 0, 2 * Math.PI);
  pen.fill();
}

// The head: a white circle nearly twice as wide as the body, a black cap of
// hair, two tall eyes, a smile. y is the middle of the head.
function head(pen, y) {
  pen.fillStyle = CHALK;
  pen.strokeStyle = INK;
  pen.lineWidth = LINE;
  pen.beginPath();
  pen.arc(0, y, 72, 0, 2 * Math.PI);
  pen.fill();
  pen.stroke();
  pen.fillStyle = INK;
  pen.beginPath();
  pen.arc(0, y, 72, Math.PI * 1.05, Math.PI * 1.95);
  pen.closePath();
  pen.fill();
  pen.beginPath();
  pen.ellipse(8, y + 2, 7, 15, 0, 0, 2 * Math.PI);
  pen.ellipse(34, y + 2, 7, 15, 0, 0, 2 * Math.PI);
  pen.fill();
  pen.beginPath();
  pen.arc(22, y + 18, 20, 0.15 * Math.PI, 0.85 * Math.PI);
  pen.stroke();
}

// One kid, seen from the side, facing right. x, y is the point between the
// feet, on the ground. look.walk: true while walking. look.size: 1 is about
// 380 pixels tall.
function kid(pen, x, y, t, look) {
  var s = look.size || 1;
  var swing = look.walk ? 28 * Math.sin(Math.PI * t / STEP) : 0;   // degrees
  var bob = look.walk ? 8 * Math.abs(Math.cos(Math.PI * t / STEP)) : 0;
  var a = swing * Math.PI / 180;     // the legs swing this far
  var b = a * 1.8;                   // the arms swing 1.8 times as far
  var hipY = -120 - bob;
  var shY = -205 - bob;
  pen.save();
  pen.translate(x, y);
  pen.scale(s, s);
  pen.lineCap = "round";
  pen.lineJoin = "round";
  // from the back to the front: each arm swings against the leg on its side
  arm(pen, -8, shY, b, -26);
  leg(pen, -12, hipY, -a);
  leg(pen, 12, hipY, a);
  body(pen, bob);
  arm(pen, 8, shY, -b, 26);
  head(pen, -300 - bob);
  pen.restore();
}

# Quiz 9: what will this print?
before = [1, 2, 3, 4]
after = [1, 9, 3, 0]
changed = [i for i in range(len(before)) if before[i] != after[i]]
print(changed)

[1, 3]

9 Your skill: SKILL.md · สกิลของคุณ: SKILL.md · 你的技能：SKILL.md

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

mkdir -p .agents/skills/mycartoon
codex "Write .agents/skills/mycartoon/SKILL.md, a skill for making films with this repository. Its front matter has name: mycartoon and a description that says when to use it, and when not to (photos and paintings). The body says: read STYLE.md first; the loop (write a page beside world.js like walk.html, look at stills with refs/lannamation/kit/stills.py, fix, render with refs/lannamation/kit/render.py); the functions a film calls, and what each is for; and what never to do. Keep it short."

---
name: mycartoon
description: Make a short cartoon in this repository's rubber-hose style with world.js. Write a draw(t) page, look at stills, fix, render to mp4. Use when asked for a cartoon, a scene or a new character in this style. Not for photos or paintings.
---

# A cartoon in my style

Read STYLE.md first. Every rule there has a number: keep it.

## The loop

1. Write the film as a page beside world.js. Copy walk.html: keep LENGTH,
   draw(t) and the switch rendering. In draw(t), call paper(pen, t) first,
   then draw the characters, the far ones first.
2. Look at it: python3 refs/lannamation/kit/stills.py NAME.html look.jpg 0 1 2 3
   Open look.jpg and compare it with STYLE.md. Fix what breaks a rule.
3. Make the video: python3 refs/lannamation/kit/render.py NAME.html NAME.mp4

## The functions

- paper(pen, t): the background, the ground at y 900 and the sun.
- kid(pen, x, y, t, look): one kid, feet at x, y. look.walk makes the kid
  walk; walk at 225 pixels a second. look.size: 1 is about 380 pixels tall.

## Never

- Copy a character, a drawing or a line from research/stills or refs/.

skill_check.py

"""skill_check.py - does your skill tell Codex about every function you wrote?

    python3 skill_check.py world.js .agents/skills/mycartoon/SKILL.md

Codex knows your framework only from what it reads. A function that SKILL.md
never names is one Codex may not find, and then it writes the same thing a
second time. This file lists the functions in world.js that the skill names
and the ones it leaves out.
"""
import sys


def functions_in(path):
    # every line that starts with "function name(" names one function
    lines = open(path).read().splitlines()
    return {line.split()[1].split("(")[0] for line in lines if line.startswith("function ")}


def main():
    functions = functions_in(sys.argv[1])
    skill = open(sys.argv[2]).read()
    named = {name for name in functions if name + "(" in skill}
    missing = functions - named
    print(len(functions), "functions in", sys.argv[1] + ";", len(named), "named in the skill")
    print("Not in the skill:", ", ".join(sorted(missing)) or "none")


if __name__ == "__main__":
    main()

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 skill_check.py world.js .agents/skills/mycartoon/SKILL.md

what it printed, for the first SKILL.mdสิ่งที่มันพิมพ์ออกมา สำหรับ SKILL.md ตัวแรก它打印的内容（第一个 SKILL.md）

9 functions in world.js; 2 named in the skill
Not in the skill: arm, body, glove, head, hose, leg, shoe

.agents/skills/mycartoon/SKILL.md

---
name: mycartoon
description: Make a short cartoon in this repository's rubber-hose style with world.js. Write a draw(t) page, look at stills, fix, render to mp4. Use when asked for a cartoon, a scene or a new character in this style. Not for photos or paintings.
---

# A cartoon in my style

Read STYLE.md first. Every rule there has a number: keep it.

## The loop

1. Write the film as a page beside world.js. Copy walk.html: keep LENGTH,
   draw(t) and the switch rendering. In draw(t), call paper(pen, t) first,
   then draw the characters, the far ones first.
2. Look at it: python3 refs/lannamation/kit/stills.py NAME.html look.jpg 0 1 2 3
   Open look.jpg and compare it with STYLE.md. Fix what breaks a rule.
3. Make the video: python3 refs/lannamation/kit/render.py NAME.html NAME.mp4

## The functions

- paper(pen, t): the background, the ground at y 900 and the sun.
- kid(pen, x, y, t, look): one kid, feet at x, y. look.walk makes the kid
  walk; walk at 225 pixels a second. look.size: 1 is about 380 pixels tall.

## Building blocks, for a new character

Build a new character from these, so it keeps the style:

- hose(pen, x1, y1, dx, dy, bend, width): an arm or a leg with no joint.
- leg(pen, x, y, angle) and arm(pen, x, y, angle, bend): a hose with a shoe
  or a glove at the end.
- shoe(pen, x, y), glove(pen, x, y), body(pen, bob), head(pen, y).

## Never

- Copy a character, a drawing or a line from research/stills or refs/.

what skill_check.py printed thenสิ่งที่ skill_check.py พิมพ์ออกมาหลังจากนั้น之后 skill_check.py 打印的内容

9 functions in world.js; 9 named in the skill
Not in the skill: none

# Quiz 10: what will this print?
functions = {"kid", "hose", "paper"}
skill = "Call paper( first, then kid( for each kid."
named = {name for name in functions if name + "(" in skill}
print(sorted(functions - named))

['hose']

10 A film from a prompt · หนังจากพรอมต์ · 用一段提示词做影片

not run by us: type this in a Codex chat in ~/mycartoonเราไม่ได้รันเอง: พิมพ์สิ่งนี้ในแชต Codex ที่ ~/mycartoon我们没有运行过：在 ~/mycartoon 的 Codex 对话里输入这一段

$mycartoon Make a 10-second film: two kids walk in from the left, a big one and a small one behind. At second 5 they stop, and the big one waves at the sun. Show me stills of seconds 1, 5 and 8 before you render, then render it to wave.mp4.

python3 refs/lannamation/kit/render.py walk.html walk.mp4

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

looked over the film in 0 seconds: 0 blinked out, 0 popped
walk.mp4: 180 frames, 6.0 seconds of video
rendered in 19 seconds

not run by us: in the Terminal, in your repositoryเราไม่ได้รันเอง: ใน Terminal ในรีโพซิทอรีของคุณ我们没有运行过：在终端里，在你的仓库中

git add .
git commit -m "my cartoon world: a style, a walk and a skill"
git push

in the Terminal, in your repositoryใน Terminal ในรีโพซิทอรีของคุณ在终端里，在你的仓库中

python3 refs/lannamation/maker/cartoon_maker_assets/film.py skill codex

what it printedสิ่งที่มันพิมพ์ออกมา它打印的内容

wrote ~/.agents/skills/lanna-cartoon/SKILL.md
the agent needs this file beside it too: ~/mycartoon/refs/lannamation/maker/cartoon_maker_assets/film.py
start codex again, then ask it for a cartoon