Migrate docs from the other repo
This commit is contained in:
Michal Moskal
39
docs/reference/images/create-image.md
Normal file
39
docs/reference/images/create-image.md
Normal file
@ -0,0 +1,39 @@
|
||||
# Create Image
|
||||
|
||||
Create an [Image](/microbit/reference/image/image) to show on the [LED screen](/microbit/device/screen).
|
||||
|
||||
```sig
|
||||
images.createImage(`
|
||||
. . # . .
|
||||
. # # # .
|
||||
# # # # #
|
||||
. # # # .
|
||||
. . # . .
|
||||
`)
|
||||
```
|
||||
|
||||
### Example: rock, paper, scissors
|
||||
|
||||
The following example shows one of three images (rock, paper, or scissors) when you shake the micro:bit:
|
||||
|
||||
```
|
||||
input.onGesture(Gesture.Shake, () => {
|
||||
let rockpaper = images.createImage(`
|
||||
. . . . . # # # # # . . . . #
|
||||
. # # # . # . . . # # # . # .
|
||||
. # # # . # . . . # . # # . .
|
||||
. # # # . # . . . # # # . # .
|
||||
. . . . . # # # # # . . . . #
|
||||
`)
|
||||
rockpaper.showFrame(Math.random(3))
|
||||
})
|
||||
```
|
||||
|
||||
### Lessons
|
||||
|
||||
[rock paper scissors](/microbit/lessons/rock-paper-scissors), [digital pet](/microbit/lessons/digital-pet), [offset-image](/microbit/lessons/offset-image)
|
||||
|
||||
### See also
|
||||
|
||||
[show animation](/microbit/reference/basic/show-animation), [image](/microbit/reference/image/image), [show image](/microbit/reference/image/show-image), [scroll image](/microbit/reference/image/scroll-image)
|
||||
|
||||
56
docs/reference/images/image.md
Normal file
56
docs/reference/images/image.md
Normal file
@ -0,0 +1,56 @@
|
||||
# Image
|
||||
|
||||
An image for the micro:bit screen. #docs #image #screen #LED
|
||||
|
||||
### @parent blocks/language
|
||||
|
||||
An *Image* is a matrix of pixels to show on the [LED screen](/microbit/device/screen)
|
||||
|
||||
### Block Editor: Show LEDs
|
||||
|
||||
To display an image using the [Block Editor](/microbit/blocks/editor):
|
||||
|
||||
* click `Basic` , `Show LEDs`, and tap on the LEDs`
|
||||
* when you're done, return to your code
|
||||
|
||||
|
||||
|
||||
You should see code similar to this:
|
||||
|
||||
### Creating an image
|
||||
|
||||
To create an image that you can later modify, see the [create image](/microbit/reference/images/create-image) function.
|
||||
|
||||
### Block editor: create and show images
|
||||
|
||||
To create images using the [Block editor](/microbit/blocks/editor):
|
||||
|
||||
1. Click the **Images** category on the left.
|
||||
|
||||
2. Drag and drop the **show image** block into your code.
|
||||
|
||||
3. Drag and drop the **create image** or **create big image** block onto the **show image** block so that they connect.
|
||||
|
||||
4. Make an image on the **create image** block by clicking on the squares.
|
||||
|
||||
You should see code similar to this:
|
||||
|
||||
|
||||
|
||||
### Image functions
|
||||
|
||||
* [create image](/microbit/reference/images/create-image): create an image from a series of on/off LED states
|
||||
* [clear](/microbit/reference/basic/clear-screen): turn off all the pixels in an image
|
||||
* [pixel](/microbit/reference/images/pixel): get the state of a pixel in an image
|
||||
* [show-leds](/microbit/reference/basic/show-leds): show a single-frame image on the LED screen
|
||||
* [show image](/microbit/reference/images/show-image): show an image on the screen
|
||||
* [scroll image](/microbit/reference/images/scroll-image): scroll an image on the screen
|
||||
|
||||
### Lessons
|
||||
|
||||
* [smiley](/microbit/lessons/smiley)
|
||||
|
||||
### See also
|
||||
|
||||
[Show LEDs](/microbit/reference/basic/show-leds), [create image](/microbit/reference/images/create-image), [show image](/microbit/reference/images/show-image), [LED screen](/microbit/device/screen)
|
||||
|
||||
51
docs/reference/images/pixel.md
Normal file
51
docs/reference/images/pixel.md
Normal file
@ -0,0 +1,51 @@
|
||||
# Pixel
|
||||
|
||||
The pixel function. #pixel #image #docs
|
||||
|
||||
Get the state of a pixel in an [Image](/microbit/reference/image/image).
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function pixel(_this: micro_bit.Image, x: number, y: number) : boolean
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* x - [Number](/microbit/reference/types/number); the *x coordinate* or horizontal position of a pixel in an [image](/microbit/reference/image/image)
|
||||
* y - [Number](/microbit/reference/types/number); the *y coordinate* or vertical position of a pixel in an [image](/microbit/reference/image/image)
|
||||
|
||||
### x, y coordinates?
|
||||
|
||||
To figure out the ``x``, ``y`` coordinates, see [LED screen](/microbit/device/screen).
|
||||
|
||||
### Returns
|
||||
|
||||
* [Boolean](/microbit/reference/types/boolean) - `true` for on and `false` for off
|
||||
|
||||
### Example
|
||||
|
||||
This example gets the state of pixel `0, 0` in the `img` variable:
|
||||
|
||||
### ~hide
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
. . # . . . . . . .
|
||||
. # . # . . . # . .
|
||||
. . # . . . . . . .
|
||||
. # . # . . . # . .
|
||||
. . # . . . . . . .
|
||||
`)
|
||||
```
|
||||
|
||||
### ~
|
||||
|
||||
```
|
||||
let state = img.pixel(0, 0)
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[set pixel](/microbit/reference/images/set-pixel), [show image](/microbit/reference/images/show-image), [image](/microbit/reference/image/image), [create image](/microbit/reference/images/create-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
41
docs/reference/images/plot-frame.md
Normal file
41
docs/reference/images/plot-frame.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Plot Frame
|
||||
|
||||
The plot frame function. #plotframe #docs #image #screen #LED
|
||||
|
||||
Display an [Image](/microbit/reference/image/image) on the BBC micro:bit's [LED screen](/microbit/device/screen)
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function plotFrame(_this: micro_bit.Image, index: number)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* index - [Number](/microbit/reference/types/number); which frame of the image to display
|
||||
|
||||
### Difference from `plot image`
|
||||
|
||||
The `plot frame` function takes the index of the frame (if there are two frames, then the possible indices are 0 and 1), whereas `plot image` accepts an offset (if there are two frames, the offset would range between 0 and 9).
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
# . . . # # . . . #
|
||||
. # . # . . # # # .
|
||||
. . # . . . # # # .
|
||||
. # . # . . # # # .
|
||||
# . . . # # . . . #
|
||||
`)
|
||||
img.plotFrame(1)
|
||||
```
|
||||
|
||||
### Lessons
|
||||
|
||||
[smiley](/microbit/lessons/smiley), [flashing heart](/microbit/lessons/flashing-heart), [magic logo](/microbit/lessons/magic-logo)
|
||||
|
||||
### See also
|
||||
|
||||
[create image](/microbit/reference/images/create-image), [show animation](/microbit/reference/basic/show-animation), [image](/microbit/reference/image/image), [show image](/microbit/reference/images/show-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
41
docs/reference/images/plot-image.md
Normal file
41
docs/reference/images/plot-image.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Plot Image
|
||||
|
||||
The plot image function. #plotimage #docs #image #screen #LED
|
||||
|
||||
Display an [Image](/microbit/reference/image/image) on the BBC micro:bit's [LED screen](/microbit/device/screen)
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function plotImage(_this: micro_bit.Image, xOffset: number)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* x offset - [Number](/microbit/reference/types/number); the horizontal starting point of an image; use 0 for the first frame of the image, 5 for the second frame of the image, 10 for the third frame and so on.
|
||||
|
||||
### Difference from `show image`
|
||||
|
||||
The `show image` function has a built in delay of 400ms after display of the image, whereas `plot image` has no built-in delay.
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
# . . . # # . . . #
|
||||
. # . # . . # # # .
|
||||
. . # . . . # # # .
|
||||
. # . # . . # # # .
|
||||
# . . . # # . . . #
|
||||
`)
|
||||
img.plotImage(0)
|
||||
```
|
||||
|
||||
### Lessons
|
||||
|
||||
[smiley](/microbit/lessons/smiley), [flashing heart](/microbit/lessons/flashing-heart), [magic logo](/microbit/lessons/magic-logo)
|
||||
|
||||
### See also
|
||||
|
||||
[create image](/microbit/reference/images/create-image), [show animation](/microbit/reference/basic/show-animation), [image](/microbit/reference/image/image), [show image](/microbit/reference/images/show-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
73
docs/reference/images/scroll-image.md
Normal file
73
docs/reference/images/scroll-image.md
Normal file
@ -0,0 +1,73 @@
|
||||
# Scroll Image
|
||||
|
||||
The scroll image function. #scrollimage #image #docs
|
||||
|
||||
Scrolls the frames within an [Image](/microbit/reference/image/image) on the [LED screen](/microbit/device/screen).
|
||||
|
||||
### Block Editor
|
||||
|
||||
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function scrollImage(_this: micro_bit.Image, xOffsetPerStep: number, interval: number)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* x offset per step : [Number](/microbit/reference/types/number) - the number of columns to scroll at a time (horizontal offset). Use a positive number to scroll an image to the right and a negative number to scroll left. To jump from one image frame to the next, use an offset of 5 or -5.
|
||||
* interval (ms) : [Number](/microbit/reference/types/number) - the time (in milliseconds) before scrolling by `x offset per step`; the larger the number, the slower the scroll.
|
||||
|
||||
### ~hide
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
. . # . . . # # # . . # # # .
|
||||
. . # . . . . . # . . . . # .
|
||||
. . # . . . . # . . . # # # .
|
||||
. . # . . . # . . . . . . # .
|
||||
. . # . . . # # # . . # # # .
|
||||
`)
|
||||
```
|
||||
|
||||
### ~
|
||||
|
||||
To scroll an image 1 column at a time to the right:
|
||||
|
||||
```
|
||||
img.scrollImage(1, 1000)
|
||||
```
|
||||
|
||||
To scroll an image 5 columns at a time (skip from frame to frame):
|
||||
|
||||
```
|
||||
img.scrollImage(5, 1000)
|
||||
```
|
||||
|
||||
To scroll an image 1 column at a time to the left:
|
||||
|
||||
```
|
||||
img.scrollImage(-1, 500)
|
||||
```
|
||||
|
||||
### Example: scroll through frames
|
||||
|
||||
This example creates an image with 3 frames, then scrolls through the 3 frames:
|
||||
|
||||
```
|
||||
img = images.createImage(`
|
||||
. . # . . . # # # . . # # # .
|
||||
. . # . . . . . # . . . . # .
|
||||
. . # . . . . # . . . # # # .
|
||||
. . # . . . # . . . . . . # .
|
||||
. . # . . . # # # . . # # # .
|
||||
`)
|
||||
img.showImage(0)
|
||||
img.scrollImage(5, 1000)
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[show image](/microbit/reference/images/show-image), [image](/microbit/reference/image/image), [create image](/microbit/reference/images/create-image), [show animation](/microbit/reference/basic/show-animation)
|
||||
|
||||
42
docs/reference/images/set-pixel.md
Normal file
42
docs/reference/images/set-pixel.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Set Pixel
|
||||
|
||||
The set pixel function. #set pixel #image #docs
|
||||
|
||||
Set the on/off state of pixel in an [Image](/microbit/reference/image/image).
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function setPixel(_this: micro_bit.Image, x: number, y: number, value: boolean)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* x - [Number](/microbit/reference/types/number); the *x coordinate* or horizontal position of a pixel in an [image](/microbit/reference/image/image)
|
||||
* x - [Number](/microbit/reference/types/number); the *y coordinate* or vertical position of a pixel in an [image](/microbit/reference/image/image)
|
||||
* value -[Boolean](/microbit/reference/types/boolean); the on/off state of a pixel; `true` for on, `false` for off
|
||||
|
||||
### x, y coordinates?
|
||||
|
||||
To figure out the ``x``, ``y`` coordinates, see [LED screen](/microbit/device/screen).
|
||||
|
||||
### Example
|
||||
|
||||
The following example creates an image and stores it in the `img` variable. The `set pixel` function sets the centre pixel off, before `img` is shown using `show image`.
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
. . # . .
|
||||
. # . # .
|
||||
. . # . .
|
||||
. # . # .
|
||||
. . # . .
|
||||
`)
|
||||
img.setPixel(2, 2, false)
|
||||
img.showImage(0)
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[pixel](/microbit/reference/images/pixel), [show image](/microbit/reference/images/show-image), [image](/microbit/reference/image/image), [create image](/microbit/reference/images/create-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
41
docs/reference/images/show-frame.md
Normal file
41
docs/reference/images/show-frame.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Show Frame
|
||||
|
||||
The show frame function. #showframe #docs #image #screen #LED
|
||||
|
||||
Display an [Image](/microbit/reference/image/image) on the BBC micro:bit's [LED screen](/microbit/device/screen)
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function showFrame(img: micro_bit.Image, frame: number)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* index - [Number](/microbit/reference/types/number); which frame of the image to display
|
||||
|
||||
### Difference from `plot frame`
|
||||
|
||||
The `show frame` function is the same as [plot frame](/microbit/reference/image/plot-frame), but contains a built-in delay after the LED screen has been updated (whereas `plot frame` has no built-in delay)
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
# . . . # # . . . #
|
||||
. # . # . . # # # .
|
||||
. . # . . . # # # .
|
||||
. # . # . . # # # .
|
||||
# . . . # # . . . #
|
||||
`)
|
||||
img.showFrame(1)
|
||||
```
|
||||
|
||||
### Lessons
|
||||
|
||||
[smiley](/microbit/lessons/smiley), [flashing heart](/microbit/lessons/flashing-heart), [magic logo](/microbit/lessons/magic-logo)
|
||||
|
||||
### See also
|
||||
|
||||
[create image](/microbit/reference/images/create-image), [show animation](/microbit/reference/basic/show-animation), [image](/microbit/reference/image/image), [show image](/microbit/reference/images/show-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
61
docs/reference/images/show-image.md
Normal file
61
docs/reference/images/show-image.md
Normal file
@ -0,0 +1,61 @@
|
||||
# Show Image
|
||||
|
||||
The show image function. #showimage #docs #image #screen #LED
|
||||
|
||||
Show an [Image](/microbit/reference/image/image) on the [LED screen](/microbit/device/screen), followed by a 400ms pause.
|
||||
|
||||
### Block Editor
|
||||
|
||||
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function showImage(_this: micro_bit.Image, xOffset: number)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* x offset - [Number](/microbit/reference/types/number); the horizontal starting point of an image; use 0 for the first frame of the image, 5 for the second frame of the image, 10 for the third frame and so on.
|
||||
|
||||
### Create image and show image
|
||||
|
||||
Use the [image editor](/microbit/reference/image/image) to create images using the [create image](/microbit/reference/image/create-image) function, and then use `show image` like this:
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
. . # . .
|
||||
. # . # .
|
||||
. . # . .
|
||||
. # . # .
|
||||
. . # . .
|
||||
`)
|
||||
img.showImage(0)
|
||||
```
|
||||
|
||||
### Example: display numbers 1-5
|
||||
|
||||
The following example creates an image with 5 frames and then uses a [for loop](/microbit/reference/loops/for) to show each frame on the screen:
|
||||
|
||||
```
|
||||
let img2 = images.createImage(`
|
||||
. . # . . . # # # # . # # # . . . . # . . # # # .
|
||||
. # # . . . . . . # . . . # . . . # # . . # . . .
|
||||
. . # . . . . . # . . . # . . . # # # # . # # # .
|
||||
. . # . . . . # . . . . . # . . . . # . . . . # .
|
||||
. . # . . . # # # # . # # # . . . . # . . # # # .
|
||||
`)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
img2.showImage(i * 5)
|
||||
basic.pause(1000)
|
||||
}
|
||||
```
|
||||
|
||||
### Lessons
|
||||
|
||||
[rock paper scissors](/microbit/lessons/rock-paper-scissors), [digital pet](/microbit/lessons/digital-pet), [offset-image](/microbit/lessons/offset-image)
|
||||
|
||||
### See also
|
||||
|
||||
[show animation](/microbit/reference/basic/show-animation), [image](/microbit/reference/image/image), [create image](/microbit/reference/images/create-image), [scroll image](/microbit/reference/images/scroll-image)
|
||||
|
||||
62
docs/reference/images/width.md
Normal file
62
docs/reference/images/width.md
Normal file
@ -0,0 +1,62 @@
|
||||
# Width
|
||||
|
||||
The width function. #width #image #docs
|
||||
|
||||
Get the width of an [Image](/microbit/reference/image/image) in columns.
|
||||
|
||||
### KindScript
|
||||
|
||||
```
|
||||
export function width(_this: micro_bit.Image) : number
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
* none
|
||||
|
||||
### Returns
|
||||
|
||||
* [Number](/microbit/reference/types/number) - the number of columns in a image. This function returns 5 if the image has 1 frame, 10 for 2 frames, 15 for 3 frames and so on. Divide the number of columns by 5 to find out how many frames an image has (see example below).
|
||||
|
||||
The following example gets the width of `img` and stores it in the `w` variable:
|
||||
|
||||
### ~hide
|
||||
|
||||
```
|
||||
let img = images.createImage(`
|
||||
. . # . . . . . . .
|
||||
. # . # . . . # . .
|
||||
. . # . . . . . . .
|
||||
. # . # . . . # . .
|
||||
. . # . . . . . . .
|
||||
`)
|
||||
```
|
||||
|
||||
### ~
|
||||
|
||||
```
|
||||
let w = img.width()
|
||||
```
|
||||
|
||||
### Example: show each frame
|
||||
|
||||
The following example uses the `width` function with a [for](/microbit/reference/loops/for) loop to show each image frame on the screen:
|
||||
|
||||
```
|
||||
let img2 = images.createImage(`
|
||||
. . # . . . # # # # . # # # .
|
||||
. # # . . . . . . # . . . # .
|
||||
. . # . . . . . # . . . # . .
|
||||
. . # . . . . # . . . . . # .
|
||||
. . # . . . # # # # . # # # .
|
||||
`)
|
||||
for (let i = 0; i < img2.width() / 5; i++) {
|
||||
img2.showImage(i * 5)
|
||||
basic.pause(1000)
|
||||
}
|
||||
```
|
||||
|
||||
### See also
|
||||
|
||||
[show image](/microbit/reference/images/show-image), [image](/microbit/reference/image/image), [create image](/microbit/reference/images/create-image), [scroll image](/microbit/reference/images/scroll-image), [show animation](/microbit/reference/basic/show-animation)
|
||||
|
||||
Reference in New Issue
Block a user