Pie Chart Creation

Материал из Поле цифровой дидактики
Описание
Область знаний
Область использования (ISTE)
Возрастная категория


Поясняющее видео
Близкие рецепту понятия
Среды и средства для приготовления рецепта:

This page will describe the steps to make a simple pie chart, with instructions on drawing circles, sectioning, and mouse-over effects.

Circles in General

Mathematical Functions are important while using geometry or math in general on Scratch. This page will cover the various formulas needed in Scratch, while also going over the circle formulas.


Circle Formulas

In this section:

  • pi is the value of Pi (3.14159...)
  • r is the radius of the circle

This will calculate the area of a circle:

((pi) * ((r) * (r))) // pi * r squared

and this will calculate the circumference of a circle:

((2) * ((pi) * (r)))

Using Pi

The value of pi is not provided in a block, so some users like to approximate it by the first several digits, such as by 3.1415926535.

Example Scripts

Drawing Filled Circles

In this case, the viewer will be able to see the circle being drawn. If a smaller value is used for the turn angle, the circle will look bolder, but the drawing will take longer to finish. The drawing can be sped up by activating Turbo Mode.

point in direction (0)
go to x: (0) y: (0)
pen down
repeat ((360) / (turn angle))
move (radius) steps
go to x: (0) y: (0)
turn right (turn angle) degrees
end
pen up

In this script:

  • Radius is the radius of the circle
  • Turn angle is how many degrees to turn

Coloring Sectors

Most pie charts, like the example provided, have sectors filled with different colors. This is a modification of the basic circle script from before, which can color some sectors with various colors:

point in direction (0)
go to x: (0) y: (0)
pen down
repeat ((360) / (turn angle))
if < ((direction) mod (360)) < ((angle 1) mod (360)) > then
set pen color to (#FF0000)
else
if < ((direction) mod (360)) < ((angle 2) mod (360)) > then
set pen color to (#0000FF)
else
set pen color to (#FFFF00)
end
end
move (radius) steps
go to x: (0) y: (0)
turn right (turn angle) degrees
end
pen up

Here, angle 1 represents the direction of the edge between the red and blue sectors. and angle 2 represents the direction of the edge between the blue and yellow sectors. The colors, of course, can be changed to whatever the project maker wishes, and more colors can be used.

Mouseovers

This code makes text display and plays a sound when the mouse-pointer is hovered over a portion of the pie chart.

First create this simple script, in a sprite that is smaller than the mouse-pointer:

when flag clicked
forever
go to (mouse-pointer v)
end

That will make the sprite follow the mouse-pointer while the project is running. The following script (for the same sprite) will play the "pop" sound and announce when the mouse-pointer hovers over a section of the pie chart:

when flag clicked
forever
if <touching color [#FF0000]?> then // color of section 1
start sound (pop v)
repeat until < not <touching color [#FF0000]?> >
say [Section 1]
end
say []
end
end