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

@jeffreyrb03-gmail

We reviewed DeepSeek, but it does not meet our safety requirements yet. It has only implemented a minimal safety guardrail, so we can’t support it in our platform at the current stage.

Introduction

 
In the previous tutorial, we created an AI driver that can steer the car toward the center of the lane with the help of a lane marker.

In this tutorial, we will make the car stop at the stop sign at the end of the current street and then make a right turn.

 
 

Step 1 - Remix the Starting Project

 

Please open the following project and remix it into your own:

play.creaticode.com/projects/67abea71019e21d07d95ed17

 
In this project, the AI sprite already contains the logic from the previous tutorial:

 
When you click “Start”, the car will go back into the center of its lane, and stop after 5 seconds. We will use this code as our starting point.

 
 

Step 2 - Read information about the stop sign

 

The stop sign is a very important object. It not only tells us where is the end of the current street, but also requires our car to make a full stop. However, we should not deal with stop signs unless we are close to one, otherwise it will be a waste of time to constantly review all stop signs on the map.

For this purpose, our simulation environment provides the following information to the AI driver:

1. When the lane marker arrives at the stop sign, it will stop moving forward, and also turn red.
2. In the “marker info” table, the column “stop” will become 1 when the lane marker stops at the stop sign.
3. In the “marker info” table, these 3 columns will tell us the starting point of the next lane if the car needs to turn left/right or continue forward.

 
Now let’s observe these information by running the program. When you click the “Start” button, you will see the the lane marker will stop moving at the stop sign and turn red:

 
At this point, turn on the monitor of the “marker info” table, and you will see these columns on the right:

• stop: this column is 1 when the lane marker is stopped at a stop sign, and empty otherwise;
• leftxy: this is the x and y positions of the starting point of the next lane if the car needs to turn left. It is empty when there is no way to turn left or when that information is not provided.
• forwardxy: this is the x and y positions of the starting point of the next lane if the car needs to continue forward. It is empty when there is no way to continue in the same direction or when that information is not provided.
• rightxy: this is the x and y positions of the starting point of the next lane if the car needs to turn right. It is empty when there is no way to turn right or when that information is not provided.

 
As you can see, “stop” is 1, indicating the lane marker is at a stop sign. Also, the “rightxy” column is “260_2427”, which means for the car to turn right, the next lane will start at the position of (260, 2427).

We can add 2 new variables that are related to the stop sign:

• is stop: whether the lane marker is stopped at a stop sign;
• distance: distance to the lane marker;

 

 
Next, we will use this information to control the car.

 
 

Step 3 - The Driving Mode

 

To make our car stop at the stop sign, our AI will give different commands to the car than to make the car go forward. To clearly indicate what our AI driver is doing, we will use a new variable “driving mode”, which will have these values:

• It will have a value of “normal” when the car is going forward
• It will have a value of “stopsign” when we need to stop the car for a stop sign.

When the AI driver starts, it will be in the “normal” mode:

 
And we will use 2 “if” statements to organize our logic based on the driving mode:

• If the driving mode is “stop sign”, we set the brake level to stop the car
• If the driving mode is “normal,” we apply our existing logic of keeping the car in the lane center and under the 100 speed limit.

 

 
 

Step 4 - Switch to the “stopsign” driving mode

 

We are still missing an important logic: how do we switch from the “normal” mode to the “stopsign” mode?

While we are driving the car normally, we need to keep an eye on the stop sign information. If the lane marker has stopped at a stop sign, and if our car is very close to the lane marker (distance < 80), then it is time to switch to the “stopsign” mode. In code, this logic is the following:

 
Now our logic for stopping is complete. We no longer depend on the timer value, and the car automatically stops before the stop sign.

 
 

Step 5 - Switch to the “turnright” driving mode

 

After the car has stopped, we need to make the car turn right. We can introduce a new driving mode of “turnright”, so that we can put all the code for turning the car right in that mode.

We need to carefully consider when to switch to the “turnright” mode. There are 2 issues we need to handle:

• When the AI set the brake level to 100, the car may not immediately stop. Depending on its speed, it might take some time to come to a full stop.
• Even after the car has fully stopped, we should not start the right turn right away. It is better to wait some time.

To handle these issues, we can use the following logic to switch from the “stopsign” mode to the “turnright” mode. Basically, we will wait until the car’s speed is almost 0 (less than 1), and then wait another 1 second, and then switch to the “turnright” mode.

 

 
 

Step 6 - Make the car turn right

 

Now we can start to add logic to control the car in the “turnright” mode. To start simple, we can simply set a small engine force and steer the car to the right by 25 degrees:

 
Now let’s observe what happens:

 
Our AI has successfully made the car turn right. Next, we will need to think about when to exit the “turnright” mode so the car can drive normally on the new street.

 
 

Step 7 - “car dir” and “target dir”

 

One simple way to determine if the car has fully turned right is to check if its direction is aligned with the new street’s direction.

First, let’s add the “car dir” variable, which will store the direction of the car (read from the “car info” table):

 
Next, when we switch to the “turnright” mode, we can use another variable “target dir” to store the desired driving direction of the car, which is the current direction of the car plus 90 degrees (since we are turning right by 90 degrees):

 
 

Step 8 - Compare “car dir” and “target dir”

 

The last step is to keep checking if the car’s direction is aligned with the target direction, and when that happens, switch back to the “normal” driving mode.

To do that, we can first calculate the absolute difference between the car’s direction and the target direction. The “abs” operator ensures we only look at their difference, and it does not matter which value is greater.

 
Next, if the direction difference is very small, then we can switch back to the “normal” mode:

 
Note that we also check if the direction difference is greater than 355. This is because the direction value is always between -180 and 180 degrees, so if 2 directions are 179 degrees and -178 degrees, their difference is 357 degrees, but they are actually only 3 degrees apart.

In summary, here is the full logic for handling the “turnright” driving mode:

 
Now our car will keep driving happily in a large square:

 
 

Additional Challenges

 

Here are some challenges for you to improve our AI driver further:

1. Currently the car will cut into the corner of the curb. Can you improve the “turnright” mode further so the car makes a clean right turn?
2. Can you try to make the car turn into the left lane in the new road? It is the lane with the yellow line on its left, which requires a bigger turn for the car.

@011830-0a42ef84

You can click this green button on the bottom left to add the “Game” extension:

@011830-0a42ef84

It is in the “Game” extension.

@011830-0a42ef84

Currently, you can use this block to submit a new value for the current user, which will overwrite the old value if the new value is better:

Introduction

 

In the previous tutorial, you learned how to drive the car forward by setting its engine force (similar to pressing the gas pedal) and how to stop the car by setting its brake level. You have also learned how to read the car’s speed and stop accelerating if the speed is fast enough.

In this tutorial, we will look at how to steer the car by controlling its steering wheel. Specifically, we will try to steer the car towards the center of a lane, which is a very common feature in self-driving cars.

 
 

Step 1 - Remix and Starting Project

 

Please open and remix the following project:
play.creaticode.com/projects/67aa4af6ea863449f6972ab5

 
When you run it, it will make the car drive for 15 seconds at a maximum speed of 100:

 
When you run the project and click Start, the car will drive forward for 15 seconds, then stop. You can see that this car is not driving within the lane, and that’s the problem we will fix.

 
 

Step 2 - Make the car steer to the right

 

We will build up our solution step by step. First, let’s try to simply steer the car to the right to go back into the lane. To do that, we need to set the “set steering” command, and the parameter will be the angle of the steering wheel. For example, to turn the wheel 3 degrees to the right, we just need to set the parameter to 3:

 
When you click Start, the car will gradually turn to the right, which means our steering command is working:

 
Feel free to try other steering angles and observe what happens.

 
 

Step 3 - Steer the car left and then center

 

Obviously, we do not want to keep the car steering to the right forever. Once the car is back to the center of the lane, we need to steer it to the left, and then keep the car running straight.

We can still rely on a timer-based solution: we steer to the right for 3 seconds, then to the left at 3 degrees for another 3 seconds (so the total timer value will be 6), and then set the steering angle to 0:

 
When you click Start, the car will do better, but still not perfect: it will stray to the left.

 
Now, before continuing, can you try to adjust the steering commands or the timing of them so the car will stay at the center of the lane?

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

Step 4 - A working solution

 

There are many ways to fine-tune the parameters, and one simple solution is to make the car steer to the left for less than 3 seconds. For example, after steering right for 3 seconds, we can make it steer left for another 2.3 seconds (so the total timer value is 5.3):

 
Here is the result:

 

Note that although this works, it is only meant to illustrate how to steer the car back to its lane, and it is NOT a good solution in general because it relies on the timer values (3s and 5.3s) that are specific to this setup. If the car is starting from a different position or heading direction, these timer values would not steer the car into the center of the lane.

Next, let’s work out a more generic solution that works all the time.

 
 

Step 5 - Display the lane marker

 

In a real-world self-driving system, some sensors will detect the lane borders, and the AI program can make steering decisions based on that sensor information.

[image source: extremetech.com]

 
In this simulation project we are working with, a similar sensor system is available, and it will calculate a “lane marker” based on the position of the lane and the car. As the car moves, the lane marker will always stay ahead of the car at a distance of about 250 units, and it will always be placed at the center of the lane.

To view the lane marker (for testing or debugging purpose), you can make it visible by sending the “show marker” command like this:

 
Please also remove all the steering code we added earlier, so the car will go straight ahead:

 
Now you should see a small cyan sphere at the center of the lane that always stays ahead of the car:

The lane marker makes our job much easier: we just need to make sure the car is aligned with the lane marker as much as possible.

 
 

Step 6 - Read from the “marker info” table

 

To find out information about the lane marker, you can read from the “marker info” table. Turn on its monitor on the stage, and you will see its content like this:

 
The meaning of the columns are:

• name: The name of the marker. It will be “my marker” for the lane the car is currently in. In the future, you will be working with lane markers for other lanes as well.
• x and y: The position of the lane marker.
• distance: The distance between the lane marker and the car.
• angle: The angle between 2 lines: the line from the car to the lane marker and the center line of the lane.
• dir: the direction of the lane.

 
Out of all these columns, which information is the most useful to us if we need to bring the car to the center of the lane?

 
 
 
 
 
 
 
 
 
 
 
 
[thinking space …]
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Several of the columns can be used to align the car with the lane marker, but the most useful information is the “angle”: if the car is going along the center of the lane, then the angle should be 0. On the other hand, if the car is not at the center of the lane, then the angle will not be 0:

 

You can store the angle value in a new variable like this:

Next, can you add the logic to steer the car to the lane center?

 
 
 
 
 
 
 
 
 
 
 
 
[thinking space …]
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

Step 7 - Steer the car based on the lane marker’s angle

 

Here is one example solution: whenever the angle is greater than 1, we steer the car to the left, and whenever the angle is less than -1, we steer to the right. If the angle is in-between -1 and 1, we will not steer the car.

 
You will get a result like this:

 
 

Additional Challenges

 

Here are some additional challenges for you:

1. Currently, the car steers back to the lane center very slowly. Can you try to make it go back faster?

2. If there is not a lot of runway ahead, it might be necessary for the car to slow down (to a lower speed limit) while going back to the lane center. Can you implement that idea?

To test your solution:

1. Try different speed limit

2. Try different starting position for the car: Go to the “car” sprite, and change the starting x position of the car in this “move” block below. For example, you can change it to 160 or 234. See if the solution still works

@jeffreyrb03-gmail

It just moves a part of the skeleton of the body. Try this:

@jd131111

We are working on a new way for you to delete old versions of a project.

@jd131111

We have opened up the “Help” category so guests can post there without logging in.

@jd131111

Currently NodeBB does not support limiting number of lines in signatures. If any user does that, we will warn or remove that user.

@jd131111

The signature length has a limit of 255 characters.

@jd131111

Thank you. We’ll fix these issues.

Introduction

 

This is the first tutorial of a mini-series that illustrates the basic logic of controlling a self-driving car. You will be building and improving an “AI driver” that sends driving commands to a car. The project will use a 3D simulation to make the display more realistic, but you do not need to use any 3D blocks.

Note that in the real world, AI systems in self-driving cars are much more complicated, but these tutorials will show you the basic ideas: the AI driver will read real-time data about the car and the road, and continuously adjust its driving commands.

In this tutorial, we will start with a very simple task: how to start the car, make it drive steadily for a while, and then stop it.

 
 

Step 1 - Remix the Simulation Project

 

A 3D simulation project has been created for you. Please open it and remix it into your own project:

play.creaticode.com/projects/67a98f86422ba48ed8bc59f3

 
When you click the green flag, it will load a 3D city street and a yellow car:

 
As you can see, this project contains a few sprites. but all your work will be in the “AI” sprite. Feel free to review the other sprites if you are curious how the simulation is setup.

In the “AI” sprite, there are 2 event blocks:

• The “start” message is received whenever you click the “Start” button, and this is where we can add some initialization code for our AI driver.
• The “update” message is received 10 times per second after the “Start” button is clicked, and this is where we add code to send commands to the car.

 
 

Step 2 - Start the Car

 

Now, let’s make the car start and drive forward. To make that happen, we can set the car’s “engine force” to a positive value like 50, which will make the car go faster and faster. This can be done by sending a message “set engine” with a parameter value of 50:

 
Now, if you click the “Start” button, the car will start to run, and it won’t stop since we are not telling it to stop:

 
The car will fall off the map. You can click the green flag button again to reload the entire scene, or click the blue “Start” button to restart the car.

 
 

Step 3 - Stop the car after 3 seconds

 

Let’s add code to make the car run for 3 seconds, then stop. We can use the timer to keep track of time:

• When the “start” message is received, we start the timer;
• When the timer value is less than 3 seconds, we still keep its engine force at 30;
• When the timer value is at least 3 seconds, we set the car’s brake to 100% using the “set brake” message.

 

 
When you click the “Start” button, the car will run 3 seconds and then stop:

 
 

Step 4 - The “car info” table

 

So far, our AI driver has been sending commands to the car “blindly”, regardless of the state of the car or the road. A good AI system must “watch” what’s happening and adjust its commands in real time.

To find out more information about the car, we can look at the “car info” table, which is updated in real time. You can turn on the monitor for this table (in the “Variables” category):

 
You will see the table contains one row of data:

 
We don’t need all the columns yet. For now, it is good enough to watch these columns:

• Name: when there are multiple cars in the scene, each row will represent one car, and the name of “my car” means this row is about the car controlled by the AI.
• x and y: this is the x and y position of this car
• speed: this is the speed of this car

Suppose we do not want the car to run too fast. We can check the car’s speed, and stop the engine when the car is fast enough.

We can read the car’s speed from the “car info” table into a variable “car speed”:

 
When you click the blue Start button, the table and the “car speed” variable will be updated in real-time:

 
 

Step 5 - Stop the engine when the car is fast enough

 

Now our AI driver can “see” how fast the car is running, we can set the engine force to 0 when the car speed is faster than 60. Note that this will stop the car’s acceleration rather than stopping the car. The car will still be running at a constant speed since we assume there is no friction to slow down the car.

 
As shown, we are making the car stop after 5 seconds so we can observe it longer. Also, when the car’s speed is less than 60, we would keep the engine force at 50 to make it accelerate, but after the car’s speed is more than 60, we would stop the engine.

 
 

Challenges

 

In this tutorial, you learned how to read information about the car, and how to make the car accelerate or stop by sending commands to it.

Here are some additional challenges for you:

1. Make the car stop at the stop sign with a speed limit of 100: Try to make the car stop right before the stop sign, and also make sure its speed is never more than 100. You will need to find a good timer value to start stopping the car.

2. Check the position of the car: again, try to make the car stop in front of the stop sign, but instead of using a timer to determine when to stop the car, read the x and y positions of the car, and hit the brake based on that information.

3. More precise speed limit: as you might have observed, the speed limit is not very precise. For example, when we set the engine force to 0, the car’s speed may have already passed our limit of 100. You can improve it by setting the engine force to negative for a little bit until the car speed falls below the speed limit.

@jeffreyrb03-gmail @011830-0a42ef84 @SirBots

FYI a new block has been added for changing the cursor type:

@jeffreyrb03-gmail

We will put that on our list. Thank you.

@jeffreyrb03-gmail

Yes, we assume the only language XO works with is CreatiCode blocks. It is not meant to be used to generate code in other languages.

@jeffreyrb03-gmail

So let’s discuss the exact UX design. Suppose we add another color picker doprdown, you want to be able to type in a hex code for a color directly?

@sirbots @011830-0a42ef84

Thanks for reporting the issue. That’s called “hallucination”: the AI assistant imagined some block that doesn’t exist yet.

You can see it is showing up as a red block in the chat, which indicates the system can not find that block.

We will add a new block to allow you to hide or show the cursor.

@jeffreyrb03-gmail

You can paste the image as a costume, then use the color sampler tool at the bottom right to get its exact color values right?

@catty

We will need more info on exactly what is the bug, and we can fix it.

@jeffreyrb03-gmail

Thank you. We can add these to our to-do list.

For the color picker, it would be confusing to have 2 color pickers, right? The existing color picker matches well with how color is presented in Scratch. Any reason you don’t want to use it?

@jeffreyrb03-gmail

Thank you. We will put that on our list.

Thanks for the explanation, @Catty and @Tyller_

@JD131111 , that arrow button is indeed for using the breakpoint block.

You can look at this wiki page: https://www.forum.creaticode.com/topic/340/debugging-breakpoints

@sirbots

Check out this example program:

play.creaticode.com/projects/67a3c43978886c154e0b60af

Note that its code is written by our AI assistant XO, when it is given the following request:

I have 2 lists of x and y positions of targets, and I need to search among them to find which one is closest to this sprite. Use 2D distance.

For this kind of small coding questions, we strongly recommend you to ask XO to get started. All you need is to clearly describe your needs.

If you are new to working with XO, you can try to use the “TIRE” method for prompting it: https://www.forum.creaticode.com/topic/1785/ai-the-t-i-r-e-prompting-method-difficulty-3

@sirbots

You still need to do a linear search. For each of your bot, go through each target bot, calculate the distance to that target, and then keep track of which target is the closest.

@sirbots

No, your bots still need to look at the x/y lists to get the target’s position. This “id list” only serves to make sure your bots are targeting different targets.

@sirbots

Your idea sounds reasonable.

One issue you might want to consider is how to make sure your clones are shooting at different targets, since when you let each of your clone randomly select a target, 2 of them may select the same target.

One solution to this is to let the original sprite generate a random but none-repeating list, then each clone of yours can just look at this list for which target to attach, For example, if you have 5 clones and the enemy also have 5 clones, you can easily populate the list this way:

@jeffreyrb03-gmail

This issue has been fixed. Thank you.

@sirbots

Got it. We will provide a way to delete any specific version. Thanks.

@sirbots said in How to remove old version of a game without deleting every version at once?:

Takes up too much space in my project folder

can you explain what this means? A single project should show up as a single item in the My Stuff list.

Welcome to this tutorial on the ethical considerations of camera-based apps! In this guide, we will explore important questions about privacy, consent, and potential misuse of technologies like face or object recognition. These questions are essential to ask as we enjoy the cool features of camera-based apps and learn to use them responsibly.

---

Introduction

 

Camera-based apps are everywhere — from games that track your movements to social media filters that change your look. If you haven’t yet, take a look at this tutorial that shows you how to build an AI assistant that can answer questions based on what you capture on the camera.

These apps use your device’s camera to capture images and sometimes even recognize faces or objects. While these technologies are fun and useful, they also raise important ethical questions:

• Privacy: How do these apps protect your personal information?
• Consent: Do you really know what you’re agreeing to when an app uses your camera?
• Potential Misuse: How might these powerful tools be used in ways that could hurt people?

In this tutorial, we will answer these questions with real-world examples and encourage you to think critically about the technology you use every day.

---

What Are Camera-based Apps?

 

Camera-based apps are applications that use your device’s camera to capture images or video. They can do many cool things, such as:

• Face Filters: Changing your appearance with fun effects.
• Motion Games: Controlling a game character by moving your body.
• Security Systems: Unlocking your device using facial recognition.
• Object Detection: Identifying items in a photo to provide more information.

However, behind these fun features lie serious responsibilities.

---

Privacy and Camera-based Apps

 

What Is Privacy?

Privacy is your right to keep your personal information and images secure. With camera-based apps, privacy issues can arise in several ways:

• Data Collection:

  • What It Means: The app might collect images or videos of you.
  • Why It Matters: If this data isn’t stored securely, it could be accessed by others without your permission.
     

• Data Storage and Sharing:

  • What It Means: Your photos might be saved on a server or shared with third parties like advertisers.
  • Real-World Example: Imagine a game that uses your face for filters. If the images are stored without proper security, someone might hack into the system and see your photos.
     

• Location and Context:

  • What It Means: Along with your face, an app might capture details about your surroundings or belongings.
  • Real-World Example: A security app might use face recognition to unlock your phone. If this data is misused, it could reveal where you live or work.

---

Consent in Camera-based Apps

 

What Is Consent?

Consent means that you clearly agree to let an app use your camera and your images. It should be an informed decision where you understand exactly what will happen with your data.

• Clear Communication:
  • What It Means: The app should tell you why it needs to use your camera and what it will do with your images.
  • Real-World Example: Social media apps often ask for permission to access your camera. If you agree without reading the details, you might later find out that your images are being shared with advertisers.
     
• Opt-In/Opt-Out Options:
  • What It Means: You should be able to choose whether or not to let the app use your camera.
  • Real-World Example: Some apps allow you to take a photo without automatically uploading it to a server, giving you control over your privacy.
     
• Parental Consent:
  • Why It Matters: For young students, it’s important that parents or guardians are involved when an app uses sensitive features like the camera.

---

Potential Misuse of Camera-based Technology

 

How Can Camera Technology Be Misused?

Even though camera-based apps have many positive uses, they can also be misused if proper safeguards aren’t in place:

• Unauthorized Surveillance:
  • What It Means: An app might secretly record you without your knowledge.
  • Real-World Example: Some applications in the past have been found to secretly track users’ activities, violating their privacy.
     
• Facial Recognition Abuse:
  • What It Means: Technology that identifies faces can be used to track where you go or who you are, even without your permission.
  • Real-World Example: In some cases, governments or companies have used facial recognition to monitor people, raising concerns about civil liberties.
     
• Cyberbullying and Harassment:
  • What It Means: Images captured by camera apps can be shared or manipulated in harmful ways.
  • Real-World Example: Photos taken by a school app could be altered and used to embarrass someone, leading to bullying.

---

Questions

 

1. Privacy Impact:
   • How would you feel if an app you use started recording you without your permission?
2. Understanding Consent:
   • What information do you think is essential for you to know before agreeing to let an app use your camera?
3. Balancing Benefits and Risks:
   • Can you think of ways that camera-based apps help make our lives easier? How can we enjoy these benefits while still protecting our privacy?
4. Responsibility and Regulation:
   • Who should be responsible for making sure camera-based apps are used ethically—the app developers, the government, or the users themselves?

---

Best Practices for Ethical Camera-based Apps

 
To design and use camera-based apps responsibly, consider the following best practices:

• Transparency:
  • Always inform users about what data is being collected and how it will be used.
• Security:
  • Ensure that all captured images or videos are stored securely.
• User Control:
  • Give users the option to opt in or opt out of data collection easily.
• Parental Involvement:
  • For younger users, make sure that parents or guardians have a say in whether the app can use camera features.

---

Conclusion

Camera-based apps open up exciting possibilities for interactive technology, but they also come with ethical responsibilities. As you enjoy using these apps, always consider:

• How your personal data is being used.
• Whether you have given informed consent for data collection.
• The potential consequences if these technologies are misused.

By thinking about these questions and following best practices, you can help ensure that technology remains a force for good. Remember, ethical technology design is about respecting people’s rights and protecting privacy while innovating for the future.

@sirbots

Maybe you can export the latest version of the entire project as a sb3 file, and then import it into a new project?

Introduction

 

Prompting AI models like ChatGPT can be frustrating and intimidating sometimes. You may not get what you expect and don’t know what to do.

In this tutorial, we will introduce a straightforward method for prompting: the TIRE method. Hopefully, it will give you a “tire” for your journey of learning to write effective prompts.

 
 

The TIRE Prompting Method

 

Here is an overview of the TIRE method. We will walk through an example task later.

“TIRE” stands for these 4 words: Task, Instruction, Refinement, and Example.

 

1. Task

 
The task refers to what we are asking the AI model to do. It should at least contain a verb and maybe also the expected result. For example:

• write a short story about a dog
• explain this question for me
• can you give me some feedback on this essay
• calculate this equation
• help me answer this question
• I’m preparing for dinner. recommend a few recipes.

It is often confusing to the AI model if you do not specify the task. For example, if you say “my teacher gave me a B on this essay”, then the AI has to guess what’s its task, which can be “explain where it needs to be improved”, “tell me how to argue with my teacher” or “can you give me your rating on my essay”.

 

2. Instruction

 

The second key component of the prompt is your instruction, which tells the AI model how to carry out the task. You can also think of this part as your specific requirements.

Why we need instructions? For a given task, there can be millions of ways for the AI to respond to it. By giving more specific instructions, we are selecting the most desirable results.

Below are some common ways to give formatting instructions:

• Length: You can tell the AI to give a detailed or concise answer, or even specify the number of words. It will be hard for the AI to use the exact number of words, but it will be pretty close. Therefore, limiting word count is one of the most effective ways to control AI’s response length.

• Tone: You can ask the AI to use a formal or informal tone, a casual or serious tone, a plain or technical tone, etc.

• Output Format: Depending on the task, you can ask AI to respond in various formats, like “return the data as a table”, “give me a CSV file”, “use markdown format”, “give me bullet points”, “format your answer in 4 paragraphs”, etc.

• AI’s Role: You can often tell AI its role, which will greatly influence how it answers, such as “Asnwer as if you are a 5th grade teacher”, “Pretend you are a corporate lawyer”, “You are a professor”, etc.

• Your Role: You can also tell AI who you are, which is equally effective. Note that it does not have to be really who you are, but think of it as a technique to get different results from the AI. For example, you can say “I am 5-year old”, “I am retired”, “I am an expert in this topic”, etc.

 
Besides formatting, you can give many other types of instructions, which are highly dependent on the specific task. You can think of them as “Do-It-This-Way” or “Don’t-Do-It-That-Way” rules. Below are some examples:

• write a story about a dog. The dog must be 2 years old, has no home, enjoys eating fish and playing with rocks. I don’t like sad stories.
• summarize this article. focus on the key problem the author is addressing, and skip the discussion on the solution.
• help me solve this math problem. don’t just tell me the answer. I want to walk through it myself. Just give me some hints on the first step.

 

3. Refinement

 

After you have the task and instruction, you can start trying to use it and review the response you get. If the response is perfect, then you can stop here.

However, most of the time, you may find some issues in the response. When that happens, many people will simply think, “This AI is not smart enough,” or “This is the best I can get, so I will accept it.”

Such thoughts will leave a lot on the table. Instead, this is the time to refine your task description or instruction and keep trying until you get a high-quality answer. You should have confidence that the AI model is like a gold mine, and if you keep digging, you will discover real gold (the perfect prompt).

 

4. Example

 

Most of the time, you only need the task and the instruction, and keep refining it. However, there are times when you don’t know how to describe your requirements in words.

When this happens, you can try to provide some examples in your prompt, since AI models are very good at mimicking examples.

For example, suppose you are asking the AI to write a multiple-choice question, but you don’t know how to describe the format of the response you need. This would be a good time to provide an example for the format like this:

Give me a multiple-choice question for 6th-grade history. Use this format:

QUESTION
(The quiz question)

CHOICES
A) ...
B) ...
C) ...
D) ...

ANSWER
C

This example will make sure the AI responds in the exact format you like, which is especially useful if you plan to parse the AI response in code.

 
 

A Detailed Example - Writing a “How-To” Guide

 

Now let’s walk through a detailed example to illustrate how to apply the TIRE method. Suppose our task is to create a simple tool: the user can specify a goal, such as “how to become great at coding” or “how to make more friends”, and we will use AI to generate a “how-to” guide.

 
 

Step 1 - Describe the Task

 

Based on our TIRE method, we will start with the task. Since we will allow the user to input any goal, we need to dynamically compose the task like this:

Write a how-to guide for the following goal:
(insert user input here)

 
 

Step 2 - First Set of Instructions

 

Although it is tempting to just try with the task itself, we recommend that you form a habit of always giving some instructions along with the task description. In this case, suppose our target users are middle-school students, we might want to add a few instructions like this:

Write a how-to guide for the following goal:
(insert user input here)

Instructions:
1. You are talking to a middle-school student.
2. Be concise and humorous. Use no more than 200 words.
3. Reject any inappropriate topic

 
Notice that a header of “Instructions:” is added to tell the AI model where the instructions are clearly.

 
 

Step 3 - Try it out and evaluate the result

 

Now we have both the task and some initial instructions, let’s use a simple project to test it out:

play.creaticode.com/projects/679f826a69f04bc3c7cc081e

Open this project, and click “See Inside”, and you will find it only has 3 blocks:

 
To use it, we just need to add our prompt in the LLM block, and then click the green flag to run it. The response will be printed out in the console panel below. For example, suppose we use “how to become great at coding” as the user goal, then our prompt will look like this:

 
When you run it a few times, you might get a response like one of these:

 
 

Step 4 - First Refinement of the Instructions

 

The response above is pretty good, but we should not just stop here. Instead, we should try to identify any issues in the response, and then refine our prompt accordingly.

For example, one issue is that the AI model tends to number the bullet points from 1 to 5. This may be misleading since the bullet points are not done in a sequential order. Also, 5 points may be too many and hard to follow through in practice. To fix these issues, we can update the prompt by adding an additional instruction:

 
This time, you should get a response that reflects changes in our instructions pretty well:

 
 

Step 5 - Second Refinement of the Instructions

 

Now let’s review the response above, and see if we can improve it more. One idea is to list 3 “Do’s” and 3 “Don’ts”. This contrast often makes it easier for the user. We can refine the prompt into this:

 

Here is an example output:

 
 

Step 6 - Add an Example

 

Lastly, to precisely control the output format, we can give the AI an example format like this:

Write a how-to guide for the following goal:
how to become great at coding

Instructions:
1. You are talking to a middle-school student.
2. Be concise and humorous. Use no more than 200 words.
3. Reject any inappropriate topic
4. Give me 3 Do's and 3 Don'ts as bullet points

use this format:

3 Do's:
* Do this ... (in 10 words)
* Do this ... (in 10 words)
* Do this ... (in 10 words)

3 Don'ts
* Don't do this ... (in 10 words)
* Don't do this ... (in 10 words)
* Don't do this ... (in 10 words)

 
Here is what you will likely get, which matches our example format pretty well:

 
 

Practice

 

You have now learned the basics of the TIRE prompting method. It is very easy to understand, but it will take a lot of practice to master, especially with the continued refinement of the instructions.

For more practice, here are some tasks. Please try to compose the best prompt using the TIRE method.

• Ask AI to write an engaging introduction to the city/state/country you live in to attract foreign visitors.

• Ask AI to write a short science fiction that is engaging to read.

• Ask AI to explain a hard concept that you are learning

@011830-0a42ef84

Can you try it and let us know if there is any problem? You can also try to get help from our AI assistant.

@011830-0a42ef84

Sure. To make the avatar rotate, since it already has physics body, you need to use this block at the bottom:

@011830-0a42ef84

We have found the issue. Will post a fix soon. Thank you.

@011830-0a42ef84

To make an object rotate, there are 2 separate methods, but you can not mix them:

Method 1: operate on the mesh directly, such as using the “set speed” block

Method 2: delegate the control to the 3D physics engine, then set the rotation speed on the physics body.

In your case, you are using the physics engine, so the “set speed” block won’t work.

In general, it is much easier to operate on the mesh object yourself instead of using the physics engine, since you have much more control. You only need to use the physics engine when you need very realistic physics simulations.

@jd131111

We looked into the issue. It seems the issue only occurs when you click the green flag block, but it works fine when you click the green flag button. This is because when you click the green flag button, additional clean up code will run so the sprite starts with a clean state. When you click the green flag block, the sprite’s state will not reset properly.

Also, for the Maze sprite, it should not run the “behave as” block when the green flag is clicked, because the physics engine may not have been initialized by the Ball sprite. A safer way is for the Ball sprite to initialize the physics engine, then broadcast a message to trigger the Maze to run the “behave as” block.

@JD131111

Can you please share the project? We can’t seem to recreate the “crash” when clicking on this block multiple times. thank you

@jd131111

Thank you. We will look into it.

@jd131111

Which block is the “dynamic object block” you are referring to?

@sirbots

Thanks for sharing. It will be an interesting challenge to remix your game and add smarter logic for the clones based on enemy clone positions. Let’s see if there are any volunteers…

Introduction

 

This is a very simple tutorial that shows how to use the ChatGPT block to create a virtual character that can answer user questions.

 
 

Step 1 - A New Project

 

Sign in to the CreatiCode playground, and create a new project. You can name the project as “Ask me anything”.

 
 

Step 2 - Add Sprite and Backdrop (Optional)

 

You can pick any sprite and backdrop for this project. For example, a professor sprite over a library backdrop. Drag the sprite to the left to leave more space for the speech bubble:

 
 

Step 3 - Ask and Wait

 

When the green flag is clicked, the sprite should ask the user to input a question. We can use the “ask and wait” block like this:

 
It should look like this when you click the green flag button:

 
 

Step 4 - Get ChatGPT’s answer to this question

 

After the user input a question and press the ENTER key, the user’s input will be stored in the “answer” block. Note that it is called “answer”, but in this case, its content is actually the question from the user.

We will then send this question to ChatGPT and wait for its response:

 
Explanation of the parameters:

• Request: the “answer” block is sent to ChatGPT as the request.
• Result: the response from ChatGPT will be stored in the “result” variable.
• Mode: the “waiting” mode means we will not run any block below this block until the full response from ChatGPT has been received and stored in the result variable.
• Length: We are setting a maximum length of 500, which means if ChatGPT’s response is too long, it will be cut off. Note that this is 500 tokens, so approximately 375 English words, since tokens can be a part of a word.
• Temperature: We are using a high temperature of 1, which makes ChatGPT more creative.
• Session: We are starting a new chat session, so there is no conversation history.

 
 

Step 5 - Say the Response

 

After the response from ChatGPT is stored in the result variable, we simply need to make the sprite say it with a speech bubble like this:

 
This is the final result:

 
 

Additional Challenges

 

Here are some additional challenges for you to try:

• Continue the Conversation: Currently, ChatGPT does not “remember” previous questions and answers. You can change it by adding a new stack of code: whenever the sprite is clicked, ask the user to input a question, but when you send it to ChatGPT, use the “continue” session type.

• Shorter Answers: Try to make the sprite give very short and concise answers each time. For a hint, changing the token limit won’t help, and you need to modify the request that is sent to ChatGPT.