@jeffreyrb03-gmail

Acknowledged. This will be fixed soon. Thanks

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

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

Hi all,

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

CreatiCode

@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

 

You learned about Single-Point Particle Emitter, which generates particles from a single point in the 3D space.

In this article, we will discuss “shape-based” emitters, which generate particles from within a 3D shape like a box. They allow us to produce very different visual effects.

 
 

Box Emitters

 

The box emitter is simply a transparent 3D box, and it can generate new particles from any random point inside this box. We can not see this box since it is transparent, but we can indirectly see its shape by where the particles are generated.

To use the box emitter, we need 2 steps:

• Select the “Box” shape when creating the emitter
• Configure the size of the box by its minimum and maximum X/Y/Z positions

Here is a simple example:

 
This program creates a box emitter that is 400 units in each dimension. For example, in the X dimension, the minimum is -200 and the maximum is 200, so the x position of new particles can be any random value between -200 and 200. When you run this program, you can see the particles are all confined within this box-shaped region:

 
 

Sphere Emitters

 

The shape of the emitter can also be a sphere. When we configure the sphere shape, we can set its size using the “radius” parameter.

There is also a “range” parameter (between 0 and 1), which controls the range of possible values along the radius. You can think of “range” as “thickness”:

• When “range” is 0, the particles will only be generated on the surface of the sphere, and not inside it.
• When “range” is 1, the particles can be generated at any random point on the surface or inside the sphere.
• When “range” is between 0 and 1, the particles will not be generated near the center of the sphere, but can be generated on the surface or near the surface.

Here is an example program with a range of 0:

 
As shown, particles are only appearing on the surface of the sphere:

 
 

Hemisphere Emitters

 

Hemisphere emitters generate particles from a half-sphere shape. You can specify its radius and range the same way as the sphere emitters.

One thing special about hemisphere emitters is that we can rotate the half sphere to different directions. As shown below, when we rotate it around X-axis for 90 degrees, the new particles are all generated at the bottom half of the sphere:

 
 

Cylinder Emitters

 

The emitter can also take a cylinder shape. We can control the radius of the circle, and also the height of the cylinder.

The “range” parameter also works for cylinders. You can think of it as controling the “thickness” of the cylinder’s skin. For example, when radius 0.5, the thickness of the cylinder skin is half of the radius:

 
The cylinder shape also supports an additional parameter of “direction randomness”. This only matters when we set the particles to not face the camera all the time, and we will see the particles facing different random directions when we set “direction randomness” to 100:

 
Lastly, we can rotate the cylinder emitter as well. For example, we can make it “lie down”:

 
 

Cone Emitters

 

For the cone-shaped emitter, we can console these parameters:

• Radius: The radius of the bottom circle of the cone
• Angle: The opening angle of the cone. Note that the angle and the radius would imply the height of the cone, so we won’t need another “height” parameter.
• Radius Range: This range value applies along the radius direction. When it is 0, the particles will only be generated on the surface of the cone. When it is 1, the particles may come out from anywhere inside the cone or on its surface.
• Height Range: This range value applies along the height of the cone. When it is 0, the particles will only emerge from the bottom of the cone, and when it is 1, the entire height can generate particles.

We can rotate cone emitters as well.

@tyller_

We are working on fixing the cloud blocks. Should be within next few days. Sorry about that.

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:

@luna

Well, we are a small team, and we have many more urgent tasks on the list.

 

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.

@jeffreyrb03-gmail said in Feature Suggestions: Integration of Scratch Addons:

adding Weather blocks at least would be good so you could make like an AI powered weather project

FYI you should already be able to create this project today by fetching the weather data from weather.com:

You will need to do some text parsing to extract the weather data for today from the result.

Introduction

 

One of the most useful applications of AI (large language models like ChatGPT) is to analyze and process PDF files. For example, we might need help summarizing a file or understanding its content.

In this tutorial, you will build a relatively simple tool, which allows the user to load any PDF file from the computer, and chat with the AI (LLM model) about the content of that file.

 
 

Step 1 - Start a New Project

 

In the CreatiCode playground, create a new project named “Chat about a PDF file”. Delete the sprite with the dog, as we will only write code in the Empty1 sprite.

 
 

Step 2 - Add a Backdrop

 

To make our project look nice, we can generate a backdrop image using the AI tool. For example, if we use the prompt “a light-colored background with a book, 2D illustration”, we will get a simple image like this:

 
 

Step 3 - Add a Button for Loading the PDF File

 

The user will always start by loading a new PDF file, which will be attached to the user’s chat with the AI. We will provide a button for loading the file from the computer like this:

 
The button will look like this:

 
 

Step 4 - Attach the PDF File to Chat

 

When the user clicks the button, we will run the reporter block “attach files to chat”. It will open a new dialog window for the user to select a PDF file from the computer. The return value of this reporter block will be the file name, and we will store that information in a new variable called “pdf name”:

 
This is how it works:

 
As an example, we will be using the chapter 1 of a free book “US History” from OpenStax. Since that book is too big, we have extracted the first chapter of it into a standalone PDF file. You can download it for testing your program, or you can prepare any other PDF file. Make sure it is not too big, since it will take longer to process a big file.

 
 

Step 5 - Add a Chat Window with the First Message

 

Next, we will add a chat window to the stage. We will also let the user know we have received the file by adding a chat message first. Note that this message is fixed, and we have not started using the AI yet.

 
The result looks like this:

 
 

Step 6 - Add User Message to Chat Window

 

When the user inputs a message and then presses the ENTER key or clicks the SEND button, we will first append that message to the chat window as the user. Note that the “value of chat1” block contains the input from the user.

 
 

Step 7 - Send User Message to AI

 

Next, we will send the user’s message to the AI:

 
We will use the “LLM” block instead of the ChatGPT block, since only the LLM block can read the files attached to the chat. Some notes on the parameters:

• The “small” model is faster, so for most use cases it is good enough;
• The request is simply the user’s input;
• The AI’s response will be stored in the “result” variable;
• We will be waiting for the response to come back before running the next block below;
• The response will be cut off if it is longer than 1000 tokens;
• The AI will use a temperature of 1 for maximum creativity;
• The session type is “continue”: When the first time this block is used after the green flag button is clicked, it will be treated as “new chat”, and all past chat messages and file attachments will be removed; after the chat session has already started, we will continue the same chat, so the AI can “see” previous messages and files.

 
 

Step 8 - Add AI’s Response to Chat

 

Lastly, when we receive the response from AI, we will append it to the chat window as well:

 
Here is the final demo of the project.

 
Note that it might take some time for the PDF to be uploaded to the AI server before it can generate a response, so it may take longer than usual. You can clearly see that the response of the AI is based on the content of the file.

 
 

Additional Challenges

 

Here are some additional challenges for you:

• Display a message like “Please wait while I upload the PDF file …” in the chat window while waiting for the AI’s response, so the user would wait patiently.

• The “attach files to chat” block is actually very powerful. You can attach multiple files so long as their total size is less than 10MB. Besides PDF files, it can also accept Text, Image, CSV, MP3, and WAVE files. Can you try to build another tool to make use of this capability?

@mod-squadacademy-1bc96c56

We do plan to support custom extensions as well. Our platform is also based on the Scratch open-source repos, so in theory, there should be no major issue.

It looks like the original Scratch Addons only work on MIT Scratch, and it has about 170 addons. To use them you have to install the officla chrome extension.

Then turbowarp has adopted about 75 of these so that you can run them on the turbowarp editor.

Any top addons you would like to be supported? If the turbowarp subset is good enough, we might do something similar to turbowarp.

@mod-squadacademy-1bc96c56

We will do some research on how to support Scratch addons. Thank you for the suggestion.

@mod-squadacademy-1bc96c56

You can email your account’s email to info@creaticode.com, so we will delete it for you.

@011830-0a42ef84

Currently there is no code to directly do this. You probably need to calculate their distances and find which one is “too close”

@011830-0a42ef84

The issue might be that the current code is highly “inefficient”. It is repeatedly erasing the bar and redrawing it, even if the health has not changed. Usually, you only need to redraw it when the health has changed.

@011830-0a42ef84

The draw oval block can only draw full circles, not partial ones.

Why you can’t use sprites?

If you can’t use sprites, can you use the Pen blocks to draw the circle segment by segment?

Introduction

 
After the previous tutorial, our AI driver can automatically control the car to stay in lane, limit its speed, stop at the stop sign, and turn right at a crossing.

In this tutorial, we will extend it further so that it can follow a list of driving directions to turn left/right or go straight.

 
 

Step 1 - Remix the Starting Project

 

Please remix the following project:

play.creaticode.com/projects/67ad8b0919667583370d2d81

 
Note that the AI sprite contains the same logic from the previous tutorial, but the blocks have been divided into a few custom blocks to make them more readable:

 
 

Step 2 - The “driving directions” list

 

For a self-driving car in the real world, it will typically receive a destination from the passenger first, and it will calculate a driving direction based on that.

We won’t get into how to calculate the driving direction in this tutorial. Instead, we will assume the directions have already been calculated, and we will represent them using a list named “driving directions”.

Each item in this list will be a letter, which represents the direction at each crossroad:

• L: turn left at the next crossroad;
• R: turn right at the next crossroad;
• S: go straight at the next crossroad;

For example, suppose the driving directions list contains these 3 letters:

 
That means the car is expected to turn left at the next crossroad, go straight at the crossroad after that, turn right at the third crossroad, and then stop there.

 
 

Step 3 - Read the next direction

 

To keep our AI code simpler, we would only focus on the first direction from the list. After it is completed, we move on to the next direction on the list.

We can use a new variable “next direction index”, which represents the index number of the next direction we have to follow. We will need to initialize this variable to 1 at the start:

 
We will use another new variable “next direction” to represent the actual direction. We will initialize it at the start as well, and we will update it after this direction has been fulfilled:

 
 

Step 4 - Check for the lane on the left

 

In the “normal” driving mode, we need to prepare for the next turn. For example, suppose the next direction is “L” for a left turn. If there are 2 lanes and our car is on the right lane, we need to switch to the left lane first, since we can not make a left turn from the right lane.

To find out if there is another lane to our car’s left, we can use the “marker info” table, and look for the marker named “left marker”. If it exists, that means there is another lane to the left going in the same direction.

Let’s define a new custom block named “update marker”, and run it at the beginning of the normal mode handler:

 
In that block’s definition, whenever the next direction is “L”, we will get the index of the “left marker” from the “marker info” table:

 
 

Step 5 - Temporarily change the lane marker

 

Suppose we have found another lane to our left, how do we ask the car to switch to that lane? The solution is very simple: we just need to aim at the lane marker from that lane, until the car enters that lane. After that, assuming there is no other lane on the left, our car will resume the old logic of following the lane marker in this new lane it has just entered.

In code, we check if the index of the “left marker” is greater than 0, and if so, we would temporarily set the “marker angle” to be the angle relative to the marker in the left lane, not the current lane:

 
That is all we need to make the car switch to the left lane. You can see that the “left marker index” is 2 when there is another lane on the left, and it changes to -1 right after the car enters the new lane. After that, the car reverts back to the normal mode of aligning to the lane marker in the lane.

 
 

Step 6 - A new driving mode of “turnleft”

 

To make the car turn left, we need a new mode of “turnleft”, similar to the “turnright” mode.

Currently, when the AI is in “stopsign” mode, it always switch to the “turnright” mode after the car has fully stopped. We need to change that to determine which mode to use based on the next direction. The new “target dir” will also be different when the car needs to turn left: it will be the current direction of the car minus 90 degrees rather than plus 90 degrees.

 
 

Step 7 - Handle the “turnleft” mode

 

We will define a new custom block to handle the logic of turning left at a crossroad, similar to the “handle turn right” block.

 
To make the car turn left, we can reuse the same code for turning right, but change the engine force and steering angle. Can you give it a try?
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
[please try it yourself before looking at the next step…]

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
 

Step 8 - The logic for turning left

 

You should see that turning left involves a larger turn with a longer radius. There are many ways to set the engine force and the steering angle, and one example solution is the following, where the engine force is 10 and the steering angle is -9.5:

 
This is what we will get now:

 
 

Step 9 - Move on to the next driving direction

 

After the turn is completed, when we switch back to the “normal” mode, we should also update the “next direction” to the next item in the list:

 
Note that this needs to be done in both the “handle turn left” and “handle turn right” blocks

 
 

Additional Challenges

 

At this point, our AI can drive the car to switch to the left lane and also follow the driving directions to turn left or right. There are a few missing pieces, so please use them as practice:

1. Handle “go straight”: If the driving direction is “S”, the car should go straight across the crossroad. Please add logic to handle this case. For a hint, you can use the car’s distance from the starting point of the lane ahead (the “forwardxy” column of the lane marker) as a threshold: if the car is close enough to this point, you can switch back to normal mode.

2. Switch to the right lane: when the next direction is “R”, and our car is still on the left lane out of 2 lanes, it should switch to the right lane.

3. Stop at the end: when all the driving directions on the list have been fulfilled, the “next direction” becomes empty, then the car should switch to the right lane if it is not in that lane and then stop.

You can test your AI with a list of directions like this: L, S, R, R, S, R, R, S