# Between the Pages, an OctoStudio Side Quest

**URL:** <https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599>\
**Category:** OctoStudio 🐙\
**Created:** [January 14, 2025, 3:55pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599 "2025-01-14T15:55:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ada](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/ada/32/1517_2.png) [@ada](https://heyplix.mit.edu/u/ada)\
**Post date:** [January 14, 2025, 3:55pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/1 "2025-01-14T15:55:52Z")

</div>

**Sneak between the pages of a story and give characters a sidequest!**

Do the characters in your favorite story ever take a break to nap, eat a yummy snack, or use the bathroom? What other things do you do in your everyday life that’s missing from the story?

**Share:**

- Screenshots of your project
- Describe the side quest
- Optionally, upload the project file. Here’s how: [How to share your OctoStudio project on the forum!](https://heyplix.mit.edu/t/how-to-share-your-octostudio-project-on-the-forum/1436)

**Reflect:**

- What kind of example did you make? [Types of Example Projects: Modeling Internal Process](https://heyplix.mit.edu/t/types-of-example-projects-modeling-internal-process/1598)

---

<div class="post-metadata">

**Author:** ![ada](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/ada/32/1517_2.png) [@ada](https://heyplix.mit.edu/u/ada)\
**Post date:** [January 14, 2025, 4:06pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/2 "2025-01-14T16:06:32Z")

</div>

Here’s my very hungry caterpillar in (Madeline’s) Paris!

I love the beautiful art of Eric Carle’s very hungry caterpillar, and I also love croissants!

This is a low-floor example, where I used very few blocks to have the caterpillar go to the croissant. It eats the croissant, glows and gets bigger.  
It’s also a proof-of-concept example to demonstrate how to take a photo and include it in an OctoStudio project.

The background is from the book Madeleine by Ludwig Bemelmans, set in Paris, where delicious croissants are not hard to find!

 ![IMG_B673AD7BADA0-1](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/6/68cddac777f7d388915bb83fe113206072bc58b5.jpeg)

[HungryParisCaterpillar.octostudio](https://heyplix.mit.edu/uploads/short-url/fUKokqscLPwZppV5HyiCLRQmRbZ.octostudio) (883.6 KB)

---

<div class="post-metadata">

**Author:** ![daphne\_r](https://avatars.discourse-cdn.com/v4/letter/d/e274bd/32.png) [@daphne\_r](https://heyplix.mit.edu/u/daphne_r)\
**Post date:** [January 14, 2025, 5:07pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/3 "2025-01-14T17:07:02Z")

</div>

Here’s my example with one of the crayons from _The Day the Crayons Quit_ and a little mouse character who go skiing together! This is a personal and proof of concept example with some minor errors and a demonstration of basic mechanics from OctoStudio. It was inspired by my ski trip this past weekend and the artwork from some picture books we looked at today! The mouse moves and speaks, and when it reaches the crayon they begin to move as you tilt your screen.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/6/683f68dfbc6f768a6d0798c02de945921b4ac38f.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/3/32b0bc3e646e0d8090a559d9a02d80aa119336cf.jpeg)

[Skiing with characters!.octostudio](https://heyplix.mit.edu/uploads/short-url/zVvcNeaGc8JNni9iWTcOhrXPGGd.octostudio) (651.2 KB)

---

<div class="post-metadata">

**Author:** ![jessicazheng](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/jessicazheng/32/2561_2.png) [@jessicazheng](https://heyplix.mit.edu/u/jessicazheng)\
**Post date:** [January 15, 2025, 10:20pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/4 "2025-01-15T22:20:38Z")

</div>

I choose the book _If You Give a Mouse a Cookie_.

My example is a low-floor example, since I used very few code blocks. It’s also an incomplete example—there is room to clean up the coding blocks, make it more complicated, or fix some of the graphics/text.

I used the photo feature in the app. I also took some creative liberty from the plot to try the switching backgrounds code snippet!

 ![IMG_7946](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/2/2ab463799d484f46f1a06ddf36bec209062684f6.jpeg)

 ![IMG_7948](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/0/0c10dadbd3d05be318910152295065f760894784.jpeg)

[Cookie.octostudio](https://heyplix.mit.edu/uploads/short-url/lPUMq4lU9ObQFs8hLMxUGicsNf3.octostudio) (778.3 KB)

---

<div class="post-metadata">

**Author:** ![kane](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/kane/32/2435_2.png) [@kane](https://heyplix.mit.edu/u/kane)\
**Post date:** [January 16, 2025, 7:13pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/5 "2025-01-16T19:13:56Z")

</div>

I give you, Cheesehead Turtle! If you want to see the version with sound, I [put it on YouTube](https://youtu.be/yfVhJNhOpMQ).

![cheesehead turtle gif](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/9/935cbf7c3c284ea4a0f9f105d97e43b197fd9c24.gif)

---

<div class="post-metadata">

**Author:** ![mshirley](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@mshirley](https://heyplix.mit.edu/u/mshirley)\
**Post date:** [January 16, 2025, 8:50pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/6 "2025-01-16T20:50:32Z")

</div>

I chose _The Cool Bean_. If you haven’t read it, it’s about a bean who feels awkward because his old friends are cool, and he doesn’t think he fits in. Throughout the story, he has various mishaps, but the cool beans always come to his aid. I wanted to continue the story by showing him helping someone else, just as he was helped. I attempted to create a scenario where a potato character looks like it has fallen, and the Cool Bean helps it up.

I have played in Scratch before so I had a little bit of knowledge going into the project, so I would say this example would be a little hard if a kiddo has never played in coding. I had 3 sprite to program. I had fun working out the issues as I tried to get my potato to look like he was getting up.

 ![image1](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/0/09401cce1c83a3da71d875f6da17af1e27ccb024.jpeg)  
 ![image0](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/0/0acd22b7f888c9e22d51e4a04a375527a9128ba8.jpeg)

---

<div class="post-metadata">

**Author:** ![ada](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/ada/32/1517_2.png) [@ada](https://heyplix.mit.edu/u/ada)\
**Post date:** [January 16, 2025, 10:26pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/7 "2025-01-16T22:26:18Z")

</div>

Cute and cheesy! Those eyes are so expressive 👀

---

<div class="post-metadata">

**Author:** ![ada](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/ada/32/1517_2.png) [@ada](https://heyplix.mit.edu/u/ada)\
**Post date:** [January 16, 2025, 10:30pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/8 "2025-01-16T22:30:24Z")

</div>

I really like the paying it forward idea! Like what did the character learn, and how can they help others in similar ways?

Doing this for characters in a story can sometimes feel much safer, playful, and supportive for people having trouble expressing things they’re struggling with.

---

<div class="post-metadata">

**Author:** ![jessicazheng](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/jessicazheng/32/2561_2.png) [@jessicazheng](https://heyplix.mit.edu/u/jessicazheng)\
**Post date:** [January 17, 2025, 12:29pm UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/9 "2025-01-17T12:29:27Z")

</div>

Thought I’d follow up post-workshop to say I loved seeing everyone’s creation! In particular, I loved the idea someone mentioned about combining the plots of two stories creatively.

During the breakout sessions, I tried giving the mouse a friend to share the cookie with -  
 ![mousecookie](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/f/f42587c80f98f433bcbd4a9229cea44897fb5246.gif)

---

<div class="post-metadata">

**Author:** ![TheArtistLibrarian](https://yyz2.discourse-cdn.com/flex036/user_avatar/heyplix.mit.edu/theartistlibrarian/32/2438_2.png) [@TheArtistLibrarian](https://heyplix.mit.edu/u/TheArtistLibrarian)\
**Post date:** [January 29, 2025, 12:57am UTC](https://heyplix.mit.edu/t/between-the-pages-an-octostudio-side-quest/1599/10 "2025-01-29T00:57:17Z")

</div>

My first experience with OctoStudio! Never used a coding app (just had some basic HTML coding experience in a library science course before). This version was much more fun!  
Elephant and Piggie finally got to go for a drive. My first problem to solve was trying to figure out how to do two actions “simultaneously” --as you can see from the screenshot, I got around that by having one action activate when the “play” button is started and then the other action activates when I tap the screen. 🙂

![Elephant and Piggie](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/1/188f4d4a524424fcc79be6fef83e38d9cb7d2e19.gif)

 ![Screenshot_20250116_083429_OctoStudio](https://canada1.discourse-cdn.com/flex036/uploads/mit2/original/2X/4/4d0b9c38a34fb224492e7c1ea8ddc23072b8e9ca.jpeg)
