Toon
Code
Classic flat cartoons, written as code. Faces keep their feeling. The camera cuts like a film.
Pause
Restart
Speed
0.5
1
1.5
2
Names
0.0s
Script
Guide
Checks
Ctrl/⌘ Enter runs
// Share the Rain // A mood stays on the face until you change it. // say() does not use up time — it plays over whatever comes next. // Every character in a scene must end on the same second. Pad with wait(). const s1 = story.scene("Maple Street", { background: "street", weather: "rain" }); s1.camera.wide({ at: 0 }); s1.camera.follow("Meera", { at: 1.2, zoom: 1.42 }); s1.camera.closeup("Meera", { at: 7.1, zoom: 2.5 }); const meera = s1.add("Meera", { ...CHARACTERS.meera, x: 150 }); const rohan = s1.add("Rohan", { ...CHARACTERS.rohan, x: 800, facing: -1 }); meera.emotion("sad").wait(0.45).walkTo(500, 4.15).say("He's late again.", 1.8).wait(2).emotion("worried").wait(2.4); rohan.emotion("bored").hold("phone").wait(6.3).drop().emotion("determined").wait(2.7); const s2 = story.scene("There you are", { background: "street", weather: "rain" }); s2.camera.follow("Rohan", { at: 0, zoom: 1.38 }); s2.camera.two("Meera", "Rohan", { at: 1.5, zoom: 1.52 }); s2.camera.closeup("Meera", { at: 3.15, zoom: 2.5 }); s2.camera.two("Meera", "Rohan", { at: 5, zoom: 1.48 }); const meera2 = s2.add("Meera", { ...CHARACTERS.meera, x: 560, facing: -1 }); const rohan2 = s2.add("Rohan", { ...CHARACTERS.rohan, x: 170 }); meera2.emotion("sad").wait(1.45).emotion("shocked").wait(0.7).emotion("soft").wait(0.95).say("You came.", 1.5).wait(1.55).emotion("happy").wait(3.35); rohan2.emotion("determined").runTo(460, 1.45).hold("umbrella").emotion("soft").say("You are soaked.", 1.55).wait(1.7).emotion("happy").wait(4.85); const s3 = story.scene("One umbrella", { background: "street", weather: "drizzle" }); s3.camera.two("Meera", "Rohan", { at: 0, zoom: 1.58 }); s3.camera.closeup("Meera", { at: 2.05, zoom: 2.5 }); s3.camera.two("Meera", "Rohan", { at: 3.55, zoom: 1.55 }); s3.camera.closeup("Rohan", { at: 4.15, zoom: 2.45 }); s3.camera.two("Meera", "Rohan", { at: 5.8, zoom: 1.5 }); const meera3 = s3.add("Meera", { ...CHARACTERS.meera, x: 400 }); const rohan3 = s3.add("Rohan", { ...CHARACTERS.rohan, x: 545, facing: -1 }); meera3.emotion("shy").wait(0.8).walkTo(475, 1.2).emotion("happy").say("There's room.", 1.5).wait(1.6).emotion("laugh").wait(1.8).emotion("happy").wait(3.1); rohan3.hold("umbrella").emotion("soft").wait(3.6).emotion("laugh").wait(0.4).say("I told you.", 1.5).wait(1.6).emotion("wink").wait(1).emotion("happy").wait(1.9); const s4 = story.scene("Homeward", { background: "park", weather: "drizzle" }); s4.camera.two("Meera", "Rohan", { at: 0, zoom: 1.28 }); s4.camera.wide({ at: 6.15 }); const meera4 = s4.add("Meera", { ...CHARACTERS.meera, x: 230 }); const rohan4 = s4.add("Rohan", { ...CHARACTERS.rohan, x: 320 }); meera4.emotion("happy").walkTo(400, 2.3).say("Tomorrow, you first.", 1.8).walkTo(500, 2.4).wait(3.3); rohan4.hold("umbrella").emotion("happy").walkTo(480, 2.3).walkTo(590, 2.4).wait(1.3).emotion("wink").wait(0.95).emotion("soft").wait(1.05);
Run this code
Rain film
Sparring