@jeffreyrb03-gmail

Acknowledged. This will be fixed soon. Thanks

Introduction

 

When 2 users are using their own computers, they can collaborate on the same project remotely, using a new feature called “remote edit”. This is a fun experience that allows 2 people to write code together. When one person makes a change, such as adding a block or changing an input value, the other person sees the change right away. This is similar to how 2 people can edit the same Google Doc at the same time.

 
 

How to start a “remote edit” session

 

Here are the 4 steps for two users to start a remote edit session:

1. Owner User shares a new project. There are a few ways to share a project, such as sharing with everyone, sharing with friends only and sharing unlisted (no one can see it unless they have the project URL). The owner user then gives the project URL to the guest user, maybe through email or text message.

2. Guest User opens the project and clicks “Look inside” to open the project in the playground. The guest user selects the “Edit” menu on top, and then select “Request to edit”, then wait for the owner user to accept the request.

3. Owner User receives a request from the guest user, and clicks “Accept” button.

4. Guest User will receive the approval, and their project will automatically reload. This is to make sure the guest user starts with exactly the same project content as the owner user.

Here is a screen recording for what the 2 users would see on their computers (the left half is for the owner user and the right half is for the guest user):

 
After the 4 steps above, both users will be able to see and change the same project at the same time.

 
 

Making Changes

 

After the remote edit session has started, both users can make changes, such as adding/removing blocks, changing input values, etc. When one user is changing a block, that block will become greyed out on the other user’s screen, which indicates the remote user is making some changes. Users should try to avoid making changes to the same block at the same time, since the changes may conflict with each other, and only one change will be saved.

 
 

Limitations

 

There are some limits put in place to ensure the 2 users are always in sync:

1. No New Sprites: Currently, neither user can add new sprites once the session has started, and the “add sprite” button is hidden. Therefore, it is suggested that the owner user first creates all the sprites they need before starting the session.

2. Only Owner can save the project: Only the owner user can save the project, since that user still owns the project. The owner user should save the project whenever some important changes have been completed.

 
 

How to end a “remote edit” session

 

To end a “remote edit” session, either the owner or the guest user can click the red “End” button at the bottom.

 
 

Best Practices

 

Here are some suggestions on how to make use of this feature effectively:

1. Voice Communication: When the 2 users are not in the same room, it is better to have a voice communication channel, such as a zoom meeting or a phone call on the side. This can make it much easier for the 2 users to decide who will do what.

2. Division of Work: Although these 2 users can both make changes at the same time, they can not change exactly the same block at the same time. For example, if one user is updating the input parameters in a block, and the other user is deleting that block, then the result may be unexpected. It is recommended that the 2 users work on different blocks or stacks of blocks to avoid conflicts.

@tyller_

Please give it a try. I would love to hear your feedback. It is always a challenge to know when to give out the answer and when to hold it back, even for human teachers. Our current setting is to make the AI keep providing more hints when the user struggles. Hopefully, that will be good enough for most situations.

If you are looking for a particular 3D model that is not in our library, please reply to this topic. If you can include an example picture of it, it would be more clear what you are looking for. We will try to fulfill these requests as best as we can. Please make sure you do not submit duplicate requests by searching for it first.

Thanks
CreatiCode Support

Introduction

 

When you need to explain how a project should work, the best way is to make a screen recording of the stage. This short article will explain which tools you can use to record the screen, and also how to share the gif file to get a URL for it.

 
 

Screen Recording on Windows

 

If you are using a Windows computer, we recommend a free tool named “ScreenToGif”, which you can download here: https://www.screentogif.com/

Here is a short video explaining how to use it: https://www.yo utube.com/watch?v=ELfCBzN1Mtc

 
 

Screen Recording on Macbook

 

If you are using a Macbook, you can use a free tool called “Giphy Capture”: https://giphy.com/apps/giphycapture

Here is a short video showing how to use it: https://www.yo utube.com/watch?v=m-4cJMBGfS4

 
 

Share your gif file

 

Once your gif file is ready, you can share it this way:

1. Go to the “My Stuff” page at https://play.creaticode.com/mystuff, and make sure you are logged in.

2. Select “My Files” tab on the bottom left

3. Click the “+Share a New File” button on the top right

4. In the pop up window, click “Click to upload file”, and then select the gif file from your computer.

5. Click the green button that says “upload and share with the CC Attribution license” at the bottom.

After that, you will see the new file in the list of files, and then you can click “Copy file URL” button for that file, which will copy the URL to the clipboard, which would look like this: https://ccdn.creaticode.com/user-files/BfemEPCxatY6MMAPs/castfireball.gif

Hi all,

Sorry there was an outage on our platform earlier this morning. Sorry about the inconvenience. Now we are back online.

CreatiCode

Introduction

 

In the costumer editor, when the costume is in bitmap mode (as opposed to vector mode), you can use the magic wand tool to select an area with similar colors, then delete the designated area or fill it with a new color.

 
 

Making a Selection

 

To make a selection, you simply need to select the magic wand tool, then click on the area you would like to select. It can be of any shape, and may even contain holes in it:

 

 
Behind the scenes, it uses a “flood fill” algorithm to expand the selected area into neighboring points, so long as their colors are similar to the point you have clicked.

Note that if your computer is slow or if the costume is big, then it will take longer for this tool to determine the selected area.

 
 

Changing the Tolerance Threshold

 

When the magic wand is selected, you can specify a tolerance threshold value. Its value is between 1 and 255, and by default, it is 5. This value represents how much difference in color it would tolerate when it tries to expand the selection area:

• When the value is low, it will make sure the selected area only contains points very similar to the point you have clicked;
• As the value increases, it will include more points even if they are more different from the starting point.

As shown, when you change this value, the selected area will be updated automatically:

 

 
 

Delete or Fill the Selected Area

 

After you have made the selection, there are 2 operations you can do with those points:

• You can click the “Delete” button or press the DELETE key to delete all of those points;
• You can also pick a color from the “Fill” dropdown, then click the “Fill” button to fill the selected area with that color.

 

@jeffreyrb03-gmail

You are right. We should allow users to submit new extensions.

However, the code snippet library should be more like backpack than extension, since it will allow users to modify the code blocks after a snippet is imported. If it is an extension, then users won’t see its implementation and also won’t be able to customize it.

Introduction

In MIT Scratch, you can already manage dates using the “days since 2000” block. However, if you need a more granular control of date and time, you can use this new block:

 

This block will return the number of seconds that have passed between the given timestamp and the beginning of 2000.01.01.

 
 

Input Format

 

The input is a timestamp, which contains the date, a “T”, and then the time. The date is represented as year:month:day. The time is represented as hour:minute:second. Each field has to be 2 digits, except that the year has to be 4 digits.

The timestamp is assumed to be the local time of the computer that’s running this program. If you want to use the UTC time, which is the same across the world, then append a “Z” at the end of the timestamp, such as “2024.01.01T10:00:00Z”.

If the input is left empty, then the current time is used:

 
 

Calculating Time Difference

 

With this new block, you can easily calculate how many seconds are between 2 timestamps. You just need to run this new block for both timestamps, then calculate the difference between them:

 
 

Converting to Date

 

You can also convert the number of seconds back to a Date object. For example, the program below first gets the number of seconds for a specific timestamp, then create a date object using that result, and we get the same timestamp as our input:

 

Key Topics Covered

• Initializing 3D scenes
• Using spheres
• Updating textures
• Setting object speeds
• Highlighting objects

 
 

Introduction

In this tutorial, you will learn to create a spinning Earth:

 
 

Step 1 - Initialize An Empty Scene

First, create a new project, and load an empty scene using the “initialize 3D scene” block.

By default, it will create an empty scene with nothing but a blue background:

 
 

Step 2 - Set the Background Starfield

Next, use the “set sky” block to create a better-looking backdrop:

You should get a starfield with the Sun on the right.

 
 

Step 3 - Add a Big Sphere

Next, add a sphere with a large diameter of 10000 to the scene. Don’t worry about its color yet.

The sphere would look brighter on the side that faces the Sun.

 
 

Step 4 - Add Earth Texture

Now we need to update the sphere’s texture with the Earth. Add the “update texture” block, click the “Please select” input box, then search for “Earth” in the library window.

 
 

Step 5 - Flip the Earth Texture

You might have noticed an issue with the texture: the continents are upside-down. We need to flip the texture vertically to correct this issue. This can be done by changing the vertical repeat count from 1 to -1.

 
 

Step 6 - Make the Earth Spin

To make the Earth object spin, we can use the “set speed” block. Note that the Earth needs to be spinning from “left” to "right, so the “Z-rotation” speed needs to be negative.

Now your Earth object should be spinning slowly.

 
 

Step 7 - Highlight Around the Earth

Lastly, to make the Earth object glow in blue lights, we can create a new highlight layer, then add the sphere to that layer.

Now your Earth object should carry a blue light around it.

 

Next Steps

You can try to use a similar method to build other projects. Here are some example ideas:

• A Different Planet: You can change Earth to other planets like Mars;
• A Spinning Trophy: You can try to make a trophy object spin and shine.

@the_true_odst said in Maybe Creaticode knows the issue::

point towards mouse-pointer” is a bit buggy

We’ll look into that.

@the_true_odst

In that case, you can skip that whole process when you debug the issue since it is unrelated to the issue, right?

@attractive-milk @The_True_Odst

Thanks for the feedback. It appears to be an issue related to computer speed and network latency between the 2 of you.

We will give it more tests and try to improve the performance.

@the_true_odst

Can you pinpoint which block should trigger the “faded version” to appear? And does that block get to run or not?

You can try to use the “print to console” block at a few critical points to help you track the program flow.

Also, it is not clear why this project takes so long to load. Maybe you can make a copy of it, delete all sprites/code unrelated to the hanger, so that you can start it quickly as you debug.

@attractive-milk

How about increasing or decreasing the value with the scrolling wheel on the mouse?

@sirbots

Please try again. The issue should be resolved now.

Introduction

 
The Sun is the center of the solar system, but many people do not know that the Sun itself is traveling across space at a very fast speed (about 137 miles per second!).

In this tutorial, you will learn to build a simulation of the solar system as it moves in space. It will be a good practice on a few key techniques, such as parenting, transformer node, glow layer and trail mesh.

 

 
 

Step 1 - Create a new project

 

Log into the CreatiCode playground, and create a new project. Remove the “Sprite1”, and rename the “Empty1” sprite to “Scene”. This sprite will be used as the starting point.

 
 

Step 2 - Initialize a scene with a starfield background

 

There is no 3D scene for the space. However, we can achieve that in 2 steps:

1. Initialize an “Empty” scene first;
2. Set the sky type to one of the starfield choices.

We can also add a 3D axis temporarily as we develop the program.

 
Here is the code:

 
This is what the stage looks like.

Note that the 3D axis looks quite small for now, since when the sky type is set to the starfield, the camera is zoomed out by default. This won’t be an issue, since we will add a new camera to replace it later.

 
 

Step 3 - Send 3 messages

 

The rest of the program will take 3 steps:

1. Add the Sun
2. Add planets (Earth and Mars)
3. Make them move

We can easily sequence these events using 3 messages like this:

Make sure you use “broadcast and wait” for the first 2 messages, so these 3 steps are taken one at a time.

 
 

Step 4 - Add the Sun sprite

 

Next, add a new empty sprite, and rename it to “Sun”. In that sprite, when it receives the “add sun” message, add a yellow sphere to represent the Sun:

 
Note that we are giving it the name of “sun”, so that we can select it later.

 
 

Step 5 - Add the Follow Camera

 

Since the Sun will be moving in the scene, we will use a “follow camera” to follow the Sun:

You can adjust the distance and angle of the camera as you wish. Set its direction lock to “free” so that the user can drag the pointer to change the view angle.

 
 

Step 6 - Make the Sun glow

 

To make the Sun glow some yellow lights, we need to set its emission color to yellow (by default, it is black), and then add it to a “glow layer”.:

Now there is some glowing yellow light around the Sun:

 
 

Step 7 - Add the Sun’s trail

 

To clearly show that the Sun is moving, we will give it a “tail” using the trail mesh:

The trail has the same color, and it is added to the default glow layer as well. We will see its effect once the Sun starts to move.

 
 

Step 8 - Make the Sun start moving

 

To test what we have so far, we can make the Sun move forward when it receives the “start” message. Don’t worry about the planets for now. Add this to the Sun sprite:

Note that we need to select the “sun” object first before setting it speed. This is because the active “sprite object” in this sprite is the trail of the sun, not the sun object, as we added the trail object after adding the sun object.

After this step, the Sun will be moving when we run the project, leaving a trail behind it:

 
 

Step 9 - Add the Earth sprite

 

Now let’s work on the Earth. Add a new sprite and name it “Earth”. In this sprite, when it receives the “add planets” message, add a smaller blue sphere and move it to the right along the X axis for 200 units:

 
 

Step 10 - Make the Earth move and orbit

 

Now we arrive at the most challenging question of the project: how to make the Earth moves together with the Sun, and also orbit around it?

An immediate answer is to use parenting. If we make the sun object the parent of the earth object, then as the sun moves, the earth object will move as well. Also, if we make the sun object spin around itself, the earth object will orbit around it.

However, there is one issue with this solution: the orbit speed of the earth object is determined by the spinning speed of the sun, so if we add the Mars later, it would orbit around the sun at the same speed.

The solution is to add another intermediate object to help with the orbiting movement. Let’s call it “earthparent”. So the “sun” will be the parent of “earthparent”, and “earthparent” will be the parent of the “earth” object:

After this step, the sun will make the earthparent and the earth move with it (we will add the orbiting behavior later).

 
 

Step 11 - Add trail to earth

 

We will apply the same code as the sun to make the earth object glow and add a trail to it:

Now we can clearly see both of the sun and the earth moving:

 
 

Step 12 - Make earth orbit

 

To make the earth object orbit, we just need to rotate the “earthparent” object:

Note that they are moving along the Y axis, so the rotation should be around the Y axis as well:

 

 
 

Step 13 - Add the Mars

 

Since the code for Mars will be very similar, we will first duplicate the Earth sprite to a new sprite named “Mars”. Then we have to make a few changes:

1. Names: mars and marsparent
2. Color: blue to orange
3. Size: Mars’s diameter is about half that of Earth
4. Distance: Mars’s distance to the Sun is about 1.5 times that of Earth
5. Orbit Speed: Mars’s orbiting speed is about half of that of Earth.

With all these changes, now we have a complete simulation:

 

 
 

Enhancements

 

For some extra practice, here are some ideas to enhance this project:

1. Add other planets in the solar system: Make sure you get their size/distance/orbit speed correctly relative to the Earth.
2. Make the Sun orbit: The Sun actually doesn’t travel in a straight line. It also orbits in a very big circle path. You can illustrate this by adding a new parent object to the Sun itself.
3. Add the Moon: You can add the Moon of Earth that orbits around the Earth.
4. Toggle camera views: You can allow the user to pick which object the camera should follow. Be prepared for some seriously dizzying results!

@sirbots

We will investigate now. thanks for the heads up.

@attractive-milk

Maybe you can try these ideas?

1. Click the trash bin again to make it stop yelling
2. Make random garbage items fly out of the trash bin
3. Drag and drop garbage items into the trash bin
4. Make the trash bin move to random places on the stage
5. Add multiple clones of the garbage bin of different looks.

@attractive-milk

What device are you using? On computers it should show the up/down arrows: