Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    AI - Journey of a Waterdrop (Difficulty: 1)

    Tutorials
    1
    1
    6583
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      Introduction

       
      With the AI image generation tools in the CreatiCode playground, it is much easier now to create stories using customized costumes and backdrops. In this tutorial, you will learn how to build a simple animation about the life of a waterdrop:

      wa.gif

       
       

      Step 1 - Create a new project

       

      Go to the CreatiCode playground, and create a new project. Name it “Journey of a waterdrop”, and remove the existing sprites.

       
       

      Step 2 - Add the waterdrop sprite

       

      Click the AI button for searching or generating sprite images:

      wa.gif

       
      In the library window that pops up, input a short description of how you want the waterdrop to look like, such as “a waterdrop character facing the viewer, cartoon style”. Then click the “generate” button to generate a new sprite image like this:

      alt text

       
      Feel free to regenerate the image, or improve your description. When you are happy with the image, select it so it is added to your project.

      Note that if you want the waterdrop to look perfect, you might need to remove the shadow under it. You can use the eraser tool in the costume editor for that:

      0a3cff48-7ba1-44f1-ad9c-ee82ff9e9f3f-image.png

       
       

      Step 3 - Generate an ocean backdrop

       

      The first backdrop will be an ocean. You can open the AI tool for searching or generating the backdrops, then generate a new backdrop with a description like this: surface of a large ocean, cartoon style. You will get a backdrop like this:

      alt text

       
      If you are happy with it, select it to add it as a backdrop of the stage. You can also change its name to “Ocean” to keep it simple:

       
       

      Step 4 - Add code to show the ocean backdrop

       

      Now switch to the waterdrop sprite, and add the following code, which will show the ocean backdrop when the user clicks the green flag button:

      5586bdea-71c0-48ee-bee6-396a8af9c174-image.png

       
       

      Step 5 - Say a sentence

       

      Next, we will make the waterdrop sprite explain this scene by saying a sentence like this: I’m a waterdrop in a big ocean.

      We can use the new “say” block with colorful text and background:

      3a0f6176-4417-434c-b96c-2d5cf2698008-image.png

       
      Now, this is what we get when we click the green flag button:

      wa.gif

       
       

      Step 6 - Add a cloud backdrop

       

      For the next scene, we will show some clouds. Generate a new backdrop using a description like this: a few clouds in the sky, cartoon style. The backdrop will look like this:

      alt text

       
      Select this new backdrop, and rename it to “Cloud”.

       
       

      Step 7 - Add code to show the cloud

       

      Now we can add more code to show and explain the second backdrop, with a description like this: When it is warn, I rise into the clouds.

      1598e5ff-53ec-4598-aa27-eb3102025fea-image.png

       
      Now we get this when we run the project:

      w.gif

       
       

      Step 8 - Add “Rain” and “River” backdrops

       

      Next, try to generate 2 more backdrops using these descriptions:

      • some light rain over a lake, cartoon style
      • a river flows into the ocean, cartoon style

      Remember to rename these backdrops as “Rain” and “River”.

       
       

      Step 9 - Add code to show and explain “Rain” and “River”

       

      Similar to earlier steps, we can make the waterdrop explain these 2 scenes like this:

      dac10525-c565-4e21-8ede-2a1c97b36340-image.png

       
      That completes this program, with 4 backdrops in total.

       
       

      Creative Ideas

       

      This tutorial shows you a simple way to utilize the new AI image generation tools to create new stories and illustrations. Please try to create a similar program. Here are some suggestions:

      • Story of a tree: show a tree over backdrops of a sunny day, a cloudy day, a rainy day and a snowy day, explain how the weather affects the tree.

      • Tour of the Solar System: show a spaceship over a few backdrops of planets, such as Earth, Mars, Saturn, etc. Explains what’s unique about each planet.

      • Voyage of Magellan: show a ship sprite over a few backdrops of key locations that Magellan visited, such as a port in Spain, then a tropical Island in Guam, and the philippine shoreline.

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post