diff --git a/docs/static/tutorials/what-color.png b/docs/static/tutorials/what-color.png new file mode 100644 index 00000000..9377a814 Binary files /dev/null and b/docs/static/tutorials/what-color.png differ diff --git a/docs/static/tutorials/what-color/color-detector.gif b/docs/static/tutorials/what-color/color-detector.gif new file mode 100644 index 00000000..0926e167 Binary files /dev/null and b/docs/static/tutorials/what-color/color-detector.gif differ diff --git a/docs/tutorials.md b/docs/tutorials.md index 134778da..db637216 100644 --- a/docs/tutorials.md +++ b/docs/tutorials.md @@ -48,5 +48,11 @@ Step by step guides to coding your @boardname@. "cardType": "tutorial", "url":"/tutorials/touch-sensor-values", "imageUrl":"/static/tutorials/touch-sensor-values.png" +}, { + "name": "What Color?", + "description": "Use the Color sensor to detect different colors.", + "cardType": "tutorial", + "url":"/tutorials/what-color", + "imageUrl":"/static/tutorials/what-color.png" }] ``` \ No newline at end of file diff --git a/docs/tutorials/what-color.md b/docs/tutorials/what-color.md new file mode 100644 index 00000000..9e4618e1 --- /dev/null +++ b/docs/tutorials/what-color.md @@ -0,0 +1,134 @@ +# What Color is it? + +## Introduction @fullscreen + +Use the Color sensor to detect different colors. + +![Simulator view with color sensor](/static/tutorials/what-color/color-detector.gif) + +## Step 1 + +Open the ``||brick:Brick||`` Toolbox drawer. From the **Screen** section, drag out a ``||brick:show string||`` block onto the Workspace, and drop it into the ``||loops:on start||`` block. + +```blocks +brick.showString("Hello world", 1) +``` + +## Step 2 + +In the ``||brick:show string||`` block, type the text ``"What color?"`` replacing ``"Hello World"``. + +```blocks +brick.showString("What color?", 1) +``` + +## Step 3 + +Open the ``||sensors:Sensors||`` Toolbox drawer. Drag out **3** ``||sensors:on color sensor detected||`` blocks onto the Workspace (you can place these anywhere). + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Blue, function () { + +}) +sensors.color3.onColorDetected(ColorSensorColor.Blue, function () { + +}) +sensors.color3.onColorDetected(ColorSensorColor.Blue, function () { + +}) +``` + +## Step 4 + +In the ``||sensors:on color sensor detected||`` blocks, use the second drop-down menu to select Red, Green, and Yellow colors. + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Red, function () { + +}) +sensors.color3.onColorDetected(ColorSensorColor.Green, function () { + +}) +sensors.color3.onColorDetected(ColorSensorColor.Yellow, function () { + +}) +brick.showString("What color?", 1) +``` + +## Step 5 + +Open the ``||brick:Brick||`` Toolbox drawer. From the **Buttons** section, drag out a **3** ``||brick:set status light||`` blocks onto the Workspace, and drop one of them each into the ``||sensors:on color detected||`` blocks. + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Red, function () { + brick.setStatusLight(StatusLight.Orange) +}) +sensors.color3.onColorDetected(ColorSensorColor.Green, function () { + brick.setStatusLight(StatusLight.Orange) +}) +sensors.color3.onColorDetected(ColorSensorColor.Yellow, function () { + brick.setStatusLight(StatusLight.Orange) +}) +brick.showString("What color?", 1) +``` + +## Step 6 + +In the ``||brick:set status light||`` blocks, use the drop-down menu to change the lights to Red, Green, and Orange corresponding to the different colors detected. There is no Yellow status light, so we’ll use Orange instead. + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Red, function () { + brick.setStatusLight(StatusLight.Red) +}) +sensors.color3.onColorDetected(ColorSensorColor.Green, function () { + brick.setStatusLight(StatusLight.Green) +}) +sensors.color3.onColorDetected(ColorSensorColor.Yellow, function () { + brick.setStatusLight(StatusLight.Orange) +}) +brick.showString("What color?", 1) +``` + +## Step 7 + +Open the ``||music:Music||`` Toolbox drawer. Drag out **3** ``||music:play sound effect||`` blocks onto the Workspace, and drop one of them each into the ``||sensors:on color detected||`` blocks after the ``||brick:set status light||`` block. + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Red, function () { + brick.setStatusLight(StatusLight.Red) + music.playSoundEffect(sounds.animalsCatPurr) +}) +sensors.color3.onColorDetected(ColorSensorColor.Green, function () { + brick.setStatusLight(StatusLight.Green) + music.playSoundEffect(sounds.animalsCatPurr) +}) +sensors.color3.onColorDetected(ColorSensorColor.Yellow, function () { + brick.setStatusLight(StatusLight.Orange) + music.playSoundEffect(sounds.animalsCatPurr) +}) +brick.showString("What color?", 1) +``` + +## Step 8 + +In the ``||music::play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. + +```blocks +sensors.color3.onColorDetected(ColorSensorColor.Red, function () { + brick.setStatusLight(StatusLight.Red) + music.playSoundEffect(sounds.colorsRed) +}) +sensors.color3.onColorDetected(ColorSensorColor.Green, function () { + brick.setStatusLight(StatusLight.Green) + music.playSoundEffect(sounds.colorsGreen) +}) +sensors.color3.onColorDetected(ColorSensorColor.Yellow, function () { + brick.setStatusLight(StatusLight.Orange) + music.playSoundEffect(sounds.colorsYellow) +}) +brick.showString("What color?", 1) +``` + +## Step 9 + +Now, let’s download our program to the brick. Plug your @boardname@ into the computer with the USB cable, and click the blue **Download** button in the bottom left of your screen. Follow the directions to save your program to the brick. Attach a Color Sensor to Port 3 of your brick. Test your program by flashing Red, Green and Yellow colored paper or use LEGO bricks in front of the Color Sensor.