This page provides information on how to start coding embroidery designs.

If you want to create your own embroidery designs this is a perfect way to start.

Follow the chapters step by step to learn all the basics of how to program own designs.

Between the chapters there are two challenges to solve with enough helping information to manage it on your own. 

You can do it! 


If you have not done so yet, download the Embroidery Designer from the Playstore.

GooglePlay.png

0. NEW PROJECT

 

At first you have to create a new empty project. This is done by tapping at the plus button Plus sign.png in the bottom right corner.

After entering a name and creating an empty project, you must choose the portrait format.

Empty Project and Name of Project.jpg     Orientation.jpg

 

1. OBJECTS

 

Basically, every continues line of a design is an object.

For each object you can select a new color of thread, however this is done during the embroidery process.

2020_09_02_090151.png

Here you can see an apple. You always should divide your design into geometric patterns. Each half of the apple is just a part of a geometric form, a circle. The stalk is just a triangle.

In this example there would be 2 objects. One for the apple and one for the stalk.

Puzzle.PNG When starting to program a new part of your design you create a new object.

en_step_1 (1).png   en_step_2.png  step_3.png   en_step_3.png

These colorful circles represent the needle.

Information:

Before and after every object the embroidery machine sews up automatically.
To get more information about sewing up, read the sew up section.

2. LINE

 

In the script of your object en_step_2 (1).png you are now able to add bricks.

You can find those bricks by tapping onto the plus sign plus_sign_blue.png in the bottom left corner.

Puzzle.PNG Search for the given bricks below to create your first line. Stick to the color of the bricks, all bricks are sorted by colour. Tap onto the brick you need to add it to your skript.

runningstitch.png
 

move100steps.png

 

Hint:

You can adapt this number of steps by tapping onto it. Play around with different numbers to change the length of the line.

In the embroidery designer the length is given in steps, therefor it is good to know that 5 steps are 1mm in original size.

Puzzle.PNG Choose different stitch types to see how they look like.

runningstitch.png

triplestitch.png

zigzagstitch.png

 

Attention:

Make sure to set the length of the running or triple stitch to a value between 5 and 10. The zigzag stitch should have a width between 5 and maximum 40. A width of 10 are approximately 2mm in reality.

By tapping onto the play button image-20200908092612-1.png in the bottom right corner, you can see what you have programmed so far.

 

3. TURN RIGHT/LEFT

 

To tell the embroidery machine in which direction it should stitch, there are additionally bricks to turn right respectively left.

turnleft.png   turnright.png

Puzzle.PNG Now try to program a square. Think about how a square is built of lines and rotations by 90 degrees. Choose a line of 100 steps for the beginning

Square.png 

Hint:

If you do not know how to solve this take a short look at the solutions.

When you are ready, try to change the size of the square.

Hint:

Change the length of each line by adapting the steps of the move_steps.png brick.

4. COUNTING LOOPS

 

As you now already know how to program a square, you can see how many bricks it would take to program your chosen design. Luckily there is a possibility to simplify your code.

Those simplifiers are called counting loops.

Loop.png

End of loop.png

 

Note, that if you search for the repeat __ times brick the end of loop brick is added automatically.

Every brick you set between those two orange bricks is now repeated ___ times.

Puzzle.PNG Now try to simplify the code for your square by adding these bricks and deleting those you don’t need anymore.

Hint:

If you do not know how to solve this take a short look at the solutions.

 

5. POINT IN DIRECTION

 

As you may have noticed so far, the object always stitches to the right at first. As you have already learned, you can turn right and left with these two bricks.

turnleft.png   turnright.png

These turns are relative changes, which means the direction after the brick depends on the direction before you set the brick.

Additionally, there is a brick to set the direction absolutely.

pointindirection_degrees.png

Here you can see where which degree values point at:

Directions_1.0.png

Puzzle.PNG Now try to set the pointindirection_degrees.png before your Loop.png brick and change the degrees of the brick to 45°.

You have guessed right? Well, yes, now the object starts to stitch the first line in direction 45 degrees.

Now the square should look like this.

Square.png 

Hint:

If you do not know how to solve this take a short look at the solutions.

6. PLACE AT

 

To set the position you want to start stitching at there is the placeat.png brick.

The embroidery designer has a coordinate system with origin in the middle of your screen.

Koordinatensystem.png

To place the object, you can use the coordinate system but there is another possibility too.

By shortly tapping onto the brick (everywhere but not directly onto the figures) you can place the object visually.

Make sure to stop the stitch using this brick image-20200908100405-1.png  before placing the object at a new position.

Otherwise the machine will stitch to this position automatically, which is what we DO NOT want most of the time.

Information:

Additionally, take a look at the sew up chapter to make your stitched design durable.

CHALLENGE A - BUILD A HOUSE

 

Puzzle.PNG With your knowledge from the chapters 0 to 6 you should try now to program this design.

2020_09_02_093303.png

Hint:

For this design you only have to turn left or right by 90 degrees.

Make sure to
 

  • Create 3 new objects for each part of the house one (every part has another color)
  • Only use those bricks, which got explained in the chapters 0 to 6.
  • Try to use loops (chapter 4) to code efficiently 

 If you already know how to solve this, that's fine. Try it on your own. 

If you aren't sure how to start here is a little cheat sheet:

There are 3 objects. One for the house itself, one for the roof and one for the door.

The house:

As you can see, the house itself is just a square. Look at the chapter 3), if you don't know how to program this. Choose a line of 200 steps.

The roof:

If you look closely, the roof is simply half of a square. Just like your did before, program a square and then set the repetitions of the line to 2 instead of 4.
Additionally you have to set it to the right position placeat.png and point to 45 degrees pointindirection_degrees.png at first.
The door:

The door is something new, which we have not coded yet. Nevertheless it is not difficult. Just repeat the pattern...

move some steps - turn 90 degrees - move some more steps - turn 90 degrees 

...two times.
Clearly, you have to set the door to the right position too placeat.png.

If you have got no idea how to solve this there are three possibilities:
 

  • Take another look at the sheets 0 to 6. There you can find every information you need to program this design.
  • Take a look at the little cheat sheet. It provides information how to solve this challenge.
  • Ask somebody who already made it, for example your teacher or classmates.

If you have still got no idea what you should do, take a short look at the solutions of the challenge, but mark that there are many ways to solve this and this is just one of them.

You did it? Well, congratulations! If you are up to go further with programming embroidery designs we are very happy you like it!

Otherwise, if this challenge is enough for you, follow this link to get your certificate https://code.org/api/hour/finish

7. CIRCLES

 

One of the most often needed geometrical figures is a circle.

As the stitching machine is only able to make lines, we have to approach a circle by coding a regular polygon. This sounds more complicated than it is.

To code a circle, we repeat the pattern

move10steps.png

turnleft.png

 

or

move10steps.png

turnright.png

so that we code a polygon out of little lines.

For a full circle we have to repeat for example 20 times: move 10 steps and turn 360/20 degrees.

Here is how this would look like:

circleCode.png

Consideration: 

As 360 degree would be a whole rotation, we also make a whole rotation if we turn 20 times a 20th part of a whole rotation.

Puzzle.PNG Now try to code a bigger circle. Make sure NOT to change the value of the image-20200908104903-1.png  brick.

Hint:

To vary the size of the circle we vary the value 20 at both positions. 

repeat_marked.png  turn_marked.png

 

8. ARCS

 

To code arcs, you have to understand that every arc is just a part of a circle.

Arcs.PNG

So, the code for an arc looks nearly the same as the code for a circle, you just vary the repetitions.

If you want a semicircle you just repeat the move/turn pattern half as many times.

Here is how this would look like:

image-20200908105552-1.png

Consideration: 

If you repeat a 20th part of 360 (a whole rotation) just 10 times you get a semicircle.

Puzzle.PNG Now try to code a quarter circle.

Have you guessed right? Yeah, surely you must repeat the code 5 times, as 5 is a quarter of 20.

In truth during programming you play with these two values, turn_marked.png and image-20200908105803-3.png , all the time.

If you want narrow arches you choose a smaller value here turn_marked.png  

and the other way around if you want a wide arch you choose a bigger value. Those numbers vary between 8 and 360.

To lengthen your arch, you vary the repetitionsimage-20200908105803-3.png

Consideration:

Keep in mind that half of the repetitions (compared to the whole circle) are of course a half circle.
Never repeat more than a whole circle!

9. BROADCASTS

 

With the help of broadcasts, you can write code once and use it several times.

For example, to program this paw you code one of the little circles once and then just set it 4 times to a different position.

paw.png

Use this brick when_you_receive.png for the code you want to use several times. Write the code right below this brick.

To call the code use this brick broadcast_and_wait.png . Make sure to really choose the "Broadcast AND WAIT" brick!

By tapping onto the arrow at the rigth side you can name your broadcast.

To understand better how this works here is the example for the paw:

paw_code_3.png

Code for the small circlesCode for the big circle
paw_code_1.pngpaw_code_2.png

You see that when the scene starts the needle is placed first, then one small circle is called. After that we set the needle to a new position and call the small circle again and so on. The small circle is coded once and used several times.

10. SEWING UP

 

To make your embroidery design durable you have to sew up every time you change position without stitching there.

Mark, that before and after every object the embroidery machine sews up automatically. So you just have to code the sewing up if you change position within an object.

If you want to change the position within an object, call the broadcast “sew up” before and after changing position.

Therefor you have to code the broadcast first.

The broadcast should look like this:

en_step_1.png

Information: 

It is important to sew up because otherwise the thread would unravel.

 

Hint:

It is easy to circumvent this additional code cleverly by creating a new object for every part of your design which is not connected.

This is how the code of the paw changes, if you make it durable:

You see that before and after every time the position within the object is changed, we sew up.

paw_with_sew_up.png

 

CHALLENGE B - ICE CREAM

 

Puzzle.PNG With your knowledge from the chapters 0 to 10 you should try now to program this design.

iceCream.png

Make sure to
 

  • Create 2 new objects, one for the icecream cone and one for the ice cream balls.
  • Only use those bricks, which got explained in the chapters 0 to 10.
  • Try to use loops (chapter 4) as well as broadcasts (chapter 9) to code efficiently
  • Sew up every time you change position within an object (chapter 10).

If you already know how to solve this, that's fine. Try it on your own. 

If you aren't sure how to start here is a little cheat sheet:

There are 2 objects, one for the icecream cone and one for the ice cream balls.

Cone:

Start at the left corner. Move some steps to code the first line. Now you have to turn right and move some steps again. If you do not know which value to choose for the degrees try it out! Go on like this to complete the cone. 

Balls:

For the balls it is clever to use broadcasting (chapter 9). Code a broadcast, which you call small circle for example. The broadcast should include the code for a small circle (chapter 7). Don't forget to stop the stitch at the end. After the brick "when scene starts" alternately set the position and call the broadcast. To make your design durable, sew up before and after every change of position (chapter 10).

If you have got no idea how to solve this there are three possibilities:
 

  • Take another look at the sheets 0 to 10. There you can find every information you need to program this design.
  • Ask somebody who already made it, for example your teacher or classmates.

If you have still got no idea what you should to, take a short look at the solutions of the challenge, but mark that there are many ways to solve this and this is just one of them.

You did it? Well, congratulations! If you are up to go further with programming embroidery designs we are very happy you like it!

Otherwise, if this challenges were enough for you, follow this link to get your certificate https://code.org/api/hour/finish

11. HOW TO - MY OWN DESIGN

 

To create your own design, you have to draw a draft first. Draw your final draft onto one of the design templates (download). Make sure to choose the template you need, dependent on the size of your embroidery hoop.

After drawing your template, think of the geometrical parts, your design is built of. Those could be lines, circles, arcs, polygons, …

Mark the different parts on your final draft so that you can look them up while programming.

Time to start programming!

At first, you have to program a frame so that your design won’t be too big for your embroidery machine.

Create a new object. The object you choose should be something round like a circle. You can find some objects in the media library.

Now program this code in the script of this object.

Look up the size of your embroidery hoop and choose the correct template.

Code for 10 x 10 cm embroidery hoop

Code for 20 x 20 cm embroidery hoop

 
template_frame_code_10x10.pngtemplate_frame_code_20x20.png

Hint: 

Make sure to watch out for the minus signs in the code. Otherwise it won’t work.

Information:

This hoop won't be stitched, it is just to orientate oneself while programming.

Now to start your design, create a new project and start with creating the first object for one part of your design.

A pattern, which helps when programming your design:

arrowSmall.PNGplaceat.pngPlace the needle at some point you want to startarrowBig.PNG
arrowSmall.PNGpointindirection_degrees.pngPoint in the direction you want to stitch first
arrowMedium.PNG

runningstitch.png

triplestitch.png

zigzagstitch.png

Choose a stitch and start it.
arrowSmall.PNG Then move some steps or make a circle or arc, that depends on your pattern.
 stopstitch.png

You reached the end of the part?

Stop the stitch.

  • If you are at the end of this object, then create a new object for the next part.
  • If you want to continue embroidering at another position within this object, sew up first, then move to a new position and sew up again before starting another stitch and continue programming.
 Follow the pattern until you finished your design. 

You finished a design? Yeah, that's great. It would be wonderful, if you could upload your project to our Catrobat Community!

Sharing your project helps us collecting more and more great designs.

Everybody should be able to admire or even download and stitch your design!


How does uploading work?
 

  • Open your project and tap onto the 3 points in the upper right corner.
  • Choose "upload" and create an account, if you have not done so yet.
  • Then choose a name, a description and the categories it belongs to.

And that's it!


As you got so far we are very happy to see you like programming designs just like us!

Follow this link to get your certificate for the Hour of Code https://code.org/api/hour/finish.

SOLUTIONS

 


Solution Square without loop

Square_without_loop.png


Solution Square with loop

square_code.png


Solution Square with loop and direction 45°

square_turn_code.png


Solution Challenge A - Build a house

There are three objects:

house_code_1.png

The code in the script of each object could look like this:

house_code_2.png

 

house_code_3.pnghouse_code_4.png
house_code_5.pnghouse_code_6.pnghouse_code_7.png

Solution Challenge B - Ice Cream

There are two objects:

ice_cream_code_1.png

The code in the script of each object could look like this:

ice_cream_code_2.pngice_cream_code_3.png
ice_cream_code_4.pngice_cream_code_5.png