Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. Tutorials
  4. 2D Physics - Water Simulator (Difficulty: 3)

2D Physics - Water Simulator (Difficulty: 3)

Scheduled Pinned Locked Moved Tutorials
1 Posts 1 Posters 2.5k Views
  • 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.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

    Introduction

    In this tutorial, you will use the 2D physics engine to build an interesting animation: simulating water in a bucket.

    bu5.gif

     
     

    Step 1 - Initialize the 2D Physics World

    Please create a new project on the CreatiCode platform, and delete the dog sprite. In the empty sprite, add the following blocks to initialize a 2D physics world.

    03204fc3-b334-4ad1-a7d2-c4e2cca7326d-image.png

     
    The physics world is not visible to us, and it is managed by the 2D physics engine. We can not use any other blocks in the “2D Physics” category without this step.

    In this program, we are setting a gravity in the Y direction for -100. Since the number is negative, it means objects will be pulled down along the Y direction.

     
     

    Step 2 - Add a Ball Costume

    We will use small balls to represent water drops. Please switch to the costume tab and add the “Ball-b” costume:

    ebd799f5-284c-4665-ace0-8dbd8a319901-image.png

     
    Please also make the sprite smaller by setting its size to 30%:

    88dd569e-db3b-47e0-a623-026825e0b974-image.png

     
     

    Step 3 - Make the Ball Follow the Mouse

    Next, let’s make the ball move to right above our mouse pointer’s position whenever we press down the mouse. We can use a forever loop that checks if the mouse button is down repeatedly, and whenever that’s true, we move the ball sprite to the mouse’s X position and 10 plus the mouse’s Y position. We are adding 10 to the Y position to make sure the ball does not go right under the mouse pointer, which would switch it to the “dragging” mode.

    6051943d-a046-4689-ac92-d623945b8f8a-image.png

     
    The ball should follow your mouse whenever you press down and drag the mouse button:

    d1.gif

     
     

    Step 4 - Create Clones

    We will use many clones of the ball sprite to represent small water drops. We can keep creating new clones after moving the ball:

    da5017b1-7caf-49f2-92e6-610ea5ae0e16-image.png

     
    Now we are “drawing” a trail with the clones of the ball:

    d3.gif

     
     

    Step 5 - Add Physics Bodies to Each Clone

    Now we are going to hand over these clones to the physics engine, which will help us make the balls behave like real balls. Whenever a new clone is created, we will use the “behave as” block to convert the clone to a circle-shape object:

    060e0c3a-866e-4141-9672-4a93e986d4ef-image.png

     
    Now our clones become “alive”: the physics engine will make them fall due to gravity, and also collide with each other.

    d4.gif

     
     

    Step 6 - Hide the Original Sprite

    Since we only use clones of this ball sprite to represent water drops, the original sprite is left on the stage at a fixed position:

    a42708ad-a12f-4f80-b18a-55c267746d69-image.png

    We can hide the original sprite using the “hide” block, and then “show” the clones after they are created:

    a73edb8d-22a4-4372-99bd-0ea376c2d1d6-image.png

     
     

    Step 7 - Draw the Bucket Sprite

    Next, let’s create a bucket to hold these “water drops”. Create a new empty sprite named “Bucket”, and draw a bucket using 3 boxes like this:

    bu.gif

     
    Note that at the end you need to select all boxes, and shift their center to the center of the canvas.

     
     

    Step 8 - Send a Message to Create the Bucket

    To start the program in the bucket sprite, we should send a message from the “Empty1” sprite. This makes sure we create the bucket AFTER the physics world has been initialized.

    In the “Empty1” sprite, broadcast the “add bucket” message:

    aa8b319b-f017-435a-9db6-3a661caf211e-image.png

     
    Then in the “Bucket” sprite, receive the message:

    29a9e4b5-ae3b-44cf-b809-c2fc32ff6552-image.png

     
     

    Step 9 - Move the Bucket to the Center

    In the Bucket sprite, let’s first reset the position and direction of this sprite:

    d7e25616-57c1-4909-a327-d462db4959e1-image.png

     
     

    Step 10 - Add a Physics Body to the Bucket

    Next, we’ll tell the physics engine how we want the bucket to behave in the physics simulation. The bucket is a “concave” shape, since its top edge curves into itself. Therefore, we need to use a compound shape to represent it:

    badf62db-ca34-4147-8bbe-65a03952e4fc-image.png

     
    We will set the bucket to be a “movable” object. This is because we don’t need the bucket to fall due to gravity, so it does not need to be “dynamic”. But we do want to rotate it ourselves, so it should not be “fixed” either.

    Since we set the “debug” parameter to “Yes”, we can see the actual shape created by the physics engine, which is composed of 3 red boxes. This is exactly what we need, so we can set the “debug” parameter back to “No” to hide these red boxes.

    8c500417-5c98-4a49-8aa7-c97586c5bad9-image.png

     
    At this point, our bucket should be able to hold some “water” now:

    bu1.gif

     
     

    Step 12 - Make the Bucket Rotate

    Lastly, to make the animation more interesting, let’s make the bucket rotate around itself.

    33bcac4a-781a-4595-ab6f-1866d1843dab-image.png

     
    Here is the final result:

    bu5.gif

     
     

    Creative Ideas

    Please try to create some new animations based on what you learned in this tutorial. Here are some ideas for you to try out:

    • Colored Balls: You can add multiple ball costumes with different colors, and switch the ball’s costume before creating new clones.

    • Different Bucket Shapes: You can draw some different shapes for the bucket.

    • Make the Bucket Sway Left and Right: Currently the bucket only rotates one way. You can try to make it “sway” side to side, so it does not lose the water drops.

    • Update Physics Properties: Try to change the gravity in the physics world and the friction/restitution of the objects. Observe and explain the differences they make.

    1 Reply Last reply
    0
    • CreatiCodeI CreatiCode pinned this topic on

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode