Difference between revisions of "KTurtle/C2/Introduction-to-KTurtle/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
Title of the tutorial: Introduction-to-KTurtle
 +
 +
Author: ITfC Bangaluru
 +
 +
Key words:  KTurtle Window, Editor, Canvas, Menu Bar, Toolbar, TurtleScript, Turtle, Full speed(No highlighting and inspector), Full speed, Slow, Slower, Slowest and Step-by-Step, Abort, pause, Video tutorial.
 +
 
{|border =1
 
{|border =1
 
!Visual Cue
 
!Visual Cue
Line 25: Line 31:
 
* Menu Bar  
 
* Menu Bar  
  
*Toolbar  
+
* Toolbar  
  
 
We will also learn about,
 
We will also learn about,
  
* Moving the Turtle  
+
* Moving the '''Turtle'''
  
* Drawing lines and changing directions  
+
* Drawing '''lines and changing directions'''
  
* Draw a triangle  
+
* Draw a '''triangle'''
 
|-
 
|-
 
||'''Slide Number 3'''
 
||'''Slide Number 3'''
Line 53: Line 59:
 
It is useful for '''computer aided interactive learning'''
 
It is useful for '''computer aided interactive learning'''
  
KTurtle is  available for download at
+
'''KTurtle''' is  available for download at
  
http://edu.kde.org/kturtle/  
+
'''http://edu.kde.org/kturtle/'''
 
|-
 
|-
 
||Slide  Number 5
 
||Slide  Number 5
Line 62: Line 68:
 
||KTurtle
 
||KTurtle
  
* Makes programming '''easy and accessible .'''
+
* Makes programming '''easy''' and '''accessible .'''
  
 
* Helps teach kids '''basics of mathematics.'''  
 
* Helps teach kids '''basics of mathematics.'''  
  
*Translates commands to '''speaking language''' of the programmer  
+
* Translates commands to '''speaking language''' of the programmer  
  
*Translates commands into '''visuals.'''
+
* Translates commands into '''visuals.'''
 
|-
 
|-
 
||Slide  Number 6
 
||Slide  Number 6
Line 84: Line 90:
 
Dash home >>In the Search bar>>
 
Dash home >>In the Search bar>>
  
Type KTurtle Click on the KTurtle icon.  
+
Type KTurtle Click on the KTurtle icon.  
 
||Let's open a new '''KTurtle''' Application.  
 
||Let's open a new '''KTurtle''' Application.  
  
Click on Dash home.   
+
Click on '''Dash home'''.   
  
 
In the Search bar, type '''KTurtle.'''  
 
In the Search bar, type '''KTurtle.'''  
Line 99: Line 105:
 
||A typical KTurtle window looks like this.  
 
||A typical KTurtle window looks like this.  
  
This is the menubar.
+
This is the '''Menubar'''.
  
 
In the menu bar on the top,  
 
In the menu bar on the top,  
Line 108: Line 114:
 
|-
 
|-
 
||Tool bar
 
||Tool bar
||In the tool bar, you can reach for most of the actions used.  
+
||In the tool bar, you can reach for most of the actions used.  
 
|-
 
|-
 
||Editor
 
||Editor
Line 118: Line 124:
 
||There are several ways to enter the code in the editor.  
 
||There are several ways to enter the code in the editor.  
  
Easiest way is to use an '''example.'''
+
Easiest way is to use an example.  
  
Go to  '''File''' menu > select example
+
Go to  '''File''' menu > select '''Examples'''
  
 
Here I will select a '''flower'''
 
Here I will select a '''flower'''
Line 126: Line 132:
 
Code of the selected example opens in the editor.  
 
Code of the selected example opens in the editor.  
  
Click on Run button  from menu bar or tool bar to run the code.  
+
Click on the '''Run''' button  from '''Menu bar''' or ''' Tool bar''' to run the code.  
  
 
Another way is to directly type your own code in the editor
 
Another way is to directly type your own code in the editor
Line 132: Line 138:
 
or copy/paste some code in the editor  
 
or copy/paste some code in the editor  
  
for example:  from other KTurtle files
+
for example:  from other '''KTurtle''' files
 
|-
 
|-
 
||Show the Canvas
 
||Show the Canvas
||Canvas is on the right, where Turtle makes your drawings.  
+
||Canvas is on the right, where '''Turtle''' makes your drawings.  
  
Turtle draws accordingly to the commands it gets from the editor on the canvas  
+
'''Turtle''' draws accordingly to the commands it gets from the editor on the canvas  
 
|-
 
|-
 
||Run options.
 
||Run options.
||Run option on the tool bar starts execution of the commands in the editor.  
+
||'''Run''' option on the tool bar starts ''' execution''' of the commands in the editor.  
  
 
It presents a list of execution speeds.  
 
It presents a list of execution speeds.  
  
Full speed(No highlighting and inspector),
+
'''Full speed(No highlighting and inspector),'''
  
Full speed,  
+
'''Full speed,'''
  
slow,  
+
'''Slow,'''
  
slower,  
+
'''Slower,'''
  
slowest and  
+
'''Slowest''' and  
  
step-by-Step  
+
'''Step-by-Step'''
  
 
'''Abort''' and  '''pause''' options allow you to stop and pause the executions respectively.
 
'''Abort''' and  '''pause''' options allow you to stop and pause the executions respectively.
 
|-
 
|-
 
||
 
||
||Let's now Run this code .
+
||Let's now '''Run''' this code .
  
Turtle draws a flower on the canvas.
+
'''Turtle''' draws a '''flower''' on the canvas.
 
|-
 
|-
 
||Show position of the Turtle
 
||Show position of the Turtle
||When you open a new KTurtle application.
+
||When you open a new '''KTurtle''' application.
  
Turtle is in the middle of the canvas by default.  
+
'''Turtle''' is in the middle of the canvas by '''default.'''
  
Let's now move the Turtle.
+
Let's now move the '''Turtle.'''
  
Turtle can do three types of moves:  
+
'''Turtle''' can do three types of moves:  
  
it can move forwards. it can move backwards
+
It can move forwards. It can move backwards
  
it can turn left or right.  
+
It can turn left or right.  
  
it can also jump directly to a position on the screen.  
+
It can also jump directly to a position on the screen.  
 
|-
 
|-
 
||Zoom text
 
||Zoom text
 
||Let me zoom into the program text it may possibly be a little blurred.
 
||Let me zoom into the program text it may possibly be a little blurred.
 
|-
 
|-
||Type the code in the editor
+
||Type code in the editor
  
 
'''reset'''  
 
'''reset'''  
Line 217: Line 223:
 
||Note that the color of the code changes as we type .  
 
||Note that the color of the code changes as we type .  
  
This feature is called the '''highlighting.'''
+
This feature is called '''highlighting.'''
  
 
Different types of commands are highlighted differently,  
 
Different types of commands are highlighted differently,  
Line 231: Line 237:
 
'''forward 100''' commands Turtle to move forward by '''100 pixels.'''  
 
'''forward 100''' commands Turtle to move forward by '''100 pixels.'''  
  
'''turnright 120'''  commands Turtle to turn, '''120 degrees anti-clockwise'''.  
+
'''turnright 120'''  commands '''Turtle''' to turn, '''120 degrees anti-clockwise'''.  
  
 
Note that these two commands are repeated thrice to draw a triangle.  
 
Note that these two commands are repeated thrice to draw a triangle.  
Line 238: Line 244:
 
||Let's now execute the code.
 
||Let's now execute the code.
  
I will choose ''' Slow''' speed so that we understand what commands  are being executed.  
+
I will choose ''' Slow''' step so that we understand what commands  are being executed.  
  
 
Here the triangle is drawn.
 
Here the triangle is drawn.
Line 253: Line 259:
 
|-
 
|-
 
||'''reset'''  
 
||'''reset'''  
 +
 
'''canvassize 200,200'''  
 
'''canvassize 200,200'''  
  
Line 290: Line 297:
 
|-
 
|-
 
||Highlight reset
 
||Highlight reset
||reset command sets Turtle to its default position.
+
||'''reset''' command sets '''Turtle''' to its '''default''' position.
 
|-
 
|-
 
||Highlight canvassize 200,200
 
||Highlight canvassize 200,200
||canvassize 200,200 sets the canvas width and height to 200 pixels.
+
||'''canvassize 200,200''' sets the canvas width and height to 200 pixels.
 
|-
 
|-
 
||Highlight canvascolor 0,255,0  
 
||Highlight canvascolor 0,255,0  
||canvascolor 0,255,0  makes the canvas green.  
+
||'''canvascolor 0,255,0''' makes the canvas ''' green.'''
  
0,255,0 is a RGB Combination  where only green value is set to 255
+
'''0,255,0''' is a '''RGB''' Combination  where only the green value is set to '''255'''
and  the others are set to 0.  
+
and  the others are set to '''0'''.  
  
This makes the canvas in green color.  
+
This makes the canvas '''green''' in color.  
 
|-
 
|-
 
||Highlight pencolor 0,0,255  
 
||Highlight pencolor 0,0,255  
||pencolor 0,0,255 sets the color of  pen to blue.  
+
||'''pencolor 0,0,255''' sets the color of  pen to blue.  
  
RGB combination where blue value is set to 255.  
+
'''RGB''' combination where blue value is set to '''255.'''
 
|-
 
|-
 
||Highlight penwidth 2  
 
||Highlight penwidth 2  
||penwidth 2 sets the width of the pen to 2 pixels.  
+
||'''penwidth 2''' sets the width of the pen to 2 ''' pixels'''.  
 
|-
 
|-
 
||Highlight repeat
 
||Highlight repeat
Line 322: Line 329:
 
||Here the commands '''forward 100''' and '''turnleft 120''' are within curly brackets.
 
||Here the commands '''forward 100''' and '''turnleft 120''' are within curly brackets.
  
'''repeat''' command is followed by the number 3, because a triangle has 3 sides.
+
'''repeat''' command is followed by the number '''3''', because a triangle has 3 sides.
  
These commands are run 3 times in a loop.  
+
These commands are run 3 times in a '''loop'''.  
  
 
3 sides of the triangle are drawn.  
 
3 sides of the triangle are drawn.  
 
|-
 
|-
 
||Run the program
 
||Run the program
||Let's now  Run the code now
+
||Let's Run the code now
  
I will select slow  option for execution of the program.  
+
I will select '''slow''' option for execution of the program.  
  
The canvas color becomes green and the Turtle draws a triangle.
+
The canvas color becomes '''green''' and the''' Turtle''' draws a triangle.
 
|-
 
|-
 
||Save file
 
||Save file
 
||Let's now save the file.
 
||Let's now save the file.
  
Select File menu > Save As .
+
Select '''File''' menu > '''Save As '''
  
Save As dilog box opens.
+
'''Save As''' dialog box opens.
  
I will select Documents folder for  saving the file.  
+
I will select '''Document''' folder for  saving the file.  
  
I will type the file name as triangle and click on Save button.  
+
I will type the file name as '''Triangle''' and click on '''Save''' button.  
  
Notice that the name of the file appears in the top panel and it is saved as a dot turtle file lilke all Turtle files.
+
Notice that the name of the file appears in the '''top panel''' and it is saved as a dot turtle file like all '''Turtle''' files.
 
|-
 
|-
 
||
 
||
Line 358: Line 365:
 
||In this tutorial, we have learnt about,
 
||In this tutorial, we have learnt about,
  
KTurtle's editor, canvas, menubar and toolbar  
+
KTurtle's '''editor, canvas, menubar''' and toolbar  
  
 
* Move Turtle  
 
* Move Turtle  
  
* Draw lines and change directions  
+
* Draw '''lines and change directions '''
  
* Draw a triangle
+
* Draw a '''triangle'''
 
|-
 
|-
 
||Switch to Slide 5
 
||Switch to Slide 5
Line 372: Line 379:
 
ASSIGNMENT  
 
ASSIGNMENT  
  
As an assignment  I would like you to draw a square.  
+
As an assignment  I would like you to draw a '''square.'''
 
by using the  commands.
 
by using the  commands.
  
'''forward, backward, turnleft, turnright''' and '''repeat'''  
+
* '''forward, backward, turnleft, turnright''' and '''repeat'''  
  
Set '''background color''', '''penwidth''' and pencolor  of your choice  
+
* Set '''background color''', '''penwidth''' and '''pencolor''' of your choice  
  
Change values in the RGB combination
+
* Change values in the ''' RGB''' combination
 
|-
 
|-
 
||Slide number 11  
 
||Slide number 11  
Line 401: Line 408:
 
For more details, please write to  
 
For more details, please write to  
  
contact@spoken-tutorial.org  
+
'''contact@spoken-tutorial.org'''
 
|-
 
|-
 
||Slide number 13  
 
||Slide number 13  
Line 410: Line 417:
 
through ICT, MHRD, Government of India
 
through ICT, MHRD, Government of India
  
More information on this Mission is available at this link http://spoken-tutorial.org/NMEICT-Intro ]  
+
More information on this Mission is available at this link
 +
 
 +
'''http://spoken-tutorial.org/NMEICT-Intro ] '''
  
The script is contributed by IT for Change Bangaluru.
+
The script is contributed by '''IT for Change Bangaluru'''.
  
This is Madhuri Ganpathi from IIT Bombay signing off.  
+
This is Madhuri Ganpathi from '''IIT Bombay''' signing off.  
 
Thank you for joining.  
 
Thank you for joining.  
 
|-
 
|-

Latest revision as of 15:33, 18 December 2013

Title of the tutorial: Introduction-to-KTurtle

Author: ITfC Bangaluru

Key words: KTurtle Window, Editor, Canvas, Menu Bar, Toolbar, TurtleScript, Turtle, Full speed(No highlighting and inspector), Full speed, Slow, Slower, Slowest and Step-by-Step, Abort, pause, Video tutorial.

Visual Cue Narration
Slide Number 1

Title slide

Hello everybody.

Welcome to this tutorial on Introduction to KTurtle.

In this tutorial I will introduce you to the basics of getting started with KTurtle.

Slide number2

Learning objectives

In this tutorial, we will learn about
  • KTurtle Window
  • Editor
  • Canvas
  • Menu Bar
  • Toolbar

We will also learn about,

  • Moving the Turtle
  • Drawing lines and changing directions
  • Draw a triangle
Slide Number 3

System Requirement

To record this tutorial I am using

Ubuntu Linux OS version. 12.04.

KTurtle version. 0.8.1 beta.

Slide Number 4

What is KTurtle?

What is KTurtle?

KTurtle is a free tool to learn basic programming.

It is useful for computer aided interactive learning

KTurtle is available for download at

http://edu.kde.org/kturtle/

Slide Number 5

Utilities of KTurtle

KTurtle
  • Makes programming easy and accessible .
  • Helps teach kids basics of mathematics.
  • Translates commands to speaking language of the programmer
  • Translates commands into visuals.
Slide Number 6

Install KTurtle

* We can install KTurtle using Synaptic Package Manager .
  • for more information on Synaptic Package Manager

  • please refer to Ubuntu Linux tutorials on our website

http://spoken-tutorial.org

Switch to KTurtle Application

Dash home >>In the Search bar>>

Type KTurtle Click on the KTurtle icon.

Let's open a new KTurtle Application.

Click on Dash home.

In the Search bar, type KTurtle.

And Click on the KTurtle icon.

Switch to KTurtle Application

Move the mouse over the window

A typical KTurtle window looks like this.

This is the Menubar.

In the menu bar on the top,

You will find menu items

File, Edit, Canvas, Run, Tools, Settings and help options

Tool bar In the tool bar, you can reach for most of the actions used.
Editor Editor is on the left, where you can type the TurtleScript commands.

Most of the functions of the editor can be found in the File and Edit menus.

How to write code in the editor There are several ways to enter the code in the editor.

Easiest way is to use an example.

Go to File menu > select Examples

Here I will select a flower

Code of the selected example opens in the editor.

Click on the Run button from Menu bar or Tool bar to run the code.

Another way is to directly type your own code in the editor

or copy/paste some code in the editor

for example: from other KTurtle files

Show the Canvas Canvas is on the right, where Turtle makes your drawings.

Turtle draws accordingly to the commands it gets from the editor on the canvas

Run options. Run option on the tool bar starts execution of the commands in the editor.

It presents a list of execution speeds.

Full speed(No highlighting and inspector),

Full speed,

Slow,

Slower,

Slowest and

Step-by-Step

Abort and pause options allow you to stop and pause the executions respectively.

Let's now Run this code .

Turtle draws a flower on the canvas.

Show position of the Turtle When you open a new KTurtle application.

Turtle is in the middle of the canvas by default.

Let's now move the Turtle.

Turtle can do three types of moves:

It can move forwards. It can move backwards

It can turn left or right.

It can also jump directly to a position on the screen.

Zoom text Let me zoom into the program text it may possibly be a little blurred.
Type code in the editor

reset

forward 100

turnleft 120

forward 100

turnleft 120

forward 100

turnleft 120

Let us go through a simple example.

In your editor, type the following commands:

reset

forward 100

turnright 120

forward 100

turnright 120

forward 100

turnright 120

Highlighting Note that the color of the code changes as we type .

This feature is called highlighting.

Different types of commands are highlighted differently,

which makes it easier to read large blocks of code.

I will explain the code now.
Explanation of code reset command sets Turtle to default position.

forward 100 commands Turtle to move forward by 100 pixels.

turnright 120 commands Turtle to turn, 120 degrees anti-clockwise.

Note that these two commands are repeated thrice to draw a triangle.

Run the code Let's now execute the code.

I will choose Slow step so that we understand what commands are being executed.

Here the triangle is drawn.

“repeat” command Let's look at another example and also learn how to beautify our canvas.

Let's draw a triangle using repeat command.

I will clear the current program.

Zoom text Let me zoom into the program text to have a clear view.
reset

canvassize 200,200

canvascolor 0,255,0

pencolor 0,0,255

penwidth 2

repeat 3 {

forward 100

turnleft 120 }

Type the following commands into your editor:

reset

canvassize space 200,200

canvascolor space 0,255,0

pencolor space 0,0,255

penwidth space 2

repeat space 3 within curly braces {

forward 100

turnleft 120 }

Let me now explain the code.
Highlight reset reset command sets Turtle to its default position.
Highlight canvassize 200,200 canvassize 200,200 sets the canvas width and height to 200 pixels.
Highlight canvascolor 0,255,0 canvascolor 0,255,0 makes the canvas green.

0,255,0 is a RGB Combination where only the green value is set to 255 and the others are set to 0.

This makes the canvas green in color.

Highlight pencolor 0,0,255 pencolor 0,0,255 sets the color of pen to blue.

RGB combination where blue value is set to 255.

Highlight penwidth 2 penwidth 2 sets the width of the pen to 2 pixels.
Highlight repeat repeat command is followed by a number

and a list of commands within curly brackets.

This repeats the commands within the curly brackets the specified number of times.

Highlight forward 100 and turnleft 120

Here the commands forward 100 and turnleft 120 are within curly brackets.

repeat command is followed by the number 3, because a triangle has 3 sides.

These commands are run 3 times in a loop.

3 sides of the triangle are drawn.

Run the program Let's Run the code now

I will select slow option for execution of the program.

The canvas color becomes green and the Turtle draws a triangle.

Save file Let's now save the file.

Select File menu > Save As

Save As dialog box opens.

I will select Document folder for saving the file.

I will type the file name as Triangle and click on Save button.

Notice that the name of the file appears in the top panel and it is saved as a dot turtle file like all Turtle files.

With this we come to the end of this tutorial.

Let's summarize.

Slide Number

Summary

In this tutorial, we have learnt about,

KTurtle's editor, canvas, menubar and toolbar

  • Move Turtle
  • Draw lines and change directions
  • Draw a triangle
Switch to Slide 5

Assignment

ASSIGNMENT

As an assignment I would like you to draw a square. by using the commands.

  • forward, backward, turnleft, turnright and repeat
  • Set background color, penwidth and pencolor of your choice
  • Change values in the RGB combination
Slide number 11

Acknowledgement

Watch the video available at this URL

http://spoken-tutorial.org/What is a Spoken Tutorial

It summarises the Spoken Tutorial project

If you do not have good bandwidth, you can download and watch it

Slide Number 12 The Spoken Tutorial Project Team :

Conducts workshops using spoken tutorials

Gives certificates to those who pass an online test

For more details, please write to

contact@spoken-tutorial.org

Slide number 13 Spoken Tutorial Project is a part of the Talk to a Teacher project

It is supported by the National Mission on Education

through ICT, MHRD, Government of India

More information on this Mission is available at this link

http://spoken-tutorial.org/NMEICT-Intro ]

The script is contributed by IT for Change Bangaluru.

This is Madhuri Ganpathi from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

Chandrika, Madhurig