luis^m
Published © CC BY-NC-SA

Paint with pixels

Build a 8x8 LED Neo-pixel device, and explore pixel art with block coding system, in the process explore math, code, electronics and design.

IntermediateProtip4 hours934
Paint with pixels

Things used in this project

Hardware components

Seeed Studio XIAO SAMD21 (Pre-Soldered) - Seeeduino XIAO
Seeed Studio XIAO SAMD21 (Pre-Soldered) - Seeeduino XIAO
×1
RGB LED Pixel Matrix, NeoPixel NeoMatrix
RGB LED Pixel Matrix, NeoPixel NeoMatrix
×1
Grove Shield for Seeeduino XIAO - with embedded battery management chip
Seeed Studio Grove Shield for Seeeduino XIAO - with embedded battery management chip
Optional, but highly recommended for more projects
×1

Software apps and online services

MicroBlocks
MicroBlocks

Story

Read more

Schematics

XIAO Board and Neopixel Matrix

XIAO Board, Grove Shield and Matrix schematics

Code

Microblocks Pixel Drawing Library

Scratch
This library was made for an 8x8 neopixel matrix, the number
of letters represent the number of neopixels and the
letter represents the color of that neopixel.
The available colors are:
r = red, g= green, b= blue, y= yellow, m= magenta,
c= cyan, w=white, p= pink, a= gray, o= orange,
n=brown, e=beige
module pixel_drawing 'cat;Output'
author 'luis^m'
version 1 0 
depends NeoPixel Strings 
description 'This library is for an 8x8 neopixel matrix, the number 
of letters represent the number of neopixels and the 
letter represents the color of that neopixel.
The available colors are:
r = red, g= green, b= blue, y= yellow, m= magenta, 
c= cyan, w=white, p= pink, a= gray, o= orange, 
n=brown, e=beige'

  spec ' ' 'pixel_drawing' 'pixel_drawing _' 'str' 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx'
  spec ' ' 'pixel_drawing2 on_pin' 'pixel_drawing _ on pin _' 'str num' 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx' 10

to pixel_drawing foo {
  if ((size foo) < 1) {clearNeoPixels}
  local 'var' (withoutWhiteSpace 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx')
  foo = ('[data:join]' (lowercase (withoutWhiteSpace foo)) var)
  for i 64 {
    if ((at i foo) == 'r') {
      setNeoPixelColor i (colorFromRGB 100 0 0)
    } ((at i foo) == 'b') {
      setNeoPixelColor i (colorFromRGB 0 0 100)
    } ((at i foo) == 'g') {
      setNeoPixelColor i (colorFromRGB 0 100 0)
    } ((at i foo) == 'y') {
      setNeoPixelColor i (colorFromRGB 100 100 0)
    } ((at i foo) == 'm') {
      setNeoPixelColor i (colorFromRGB 100 0 100)
    } ((at i foo) == 'c') {
      setNeoPixelColor i (colorFromRGB 0 100 100)
    } ((at i foo) == 'w') {
      setNeoPixelColor i (colorFromRGB 100 100 100)
    } ((at i foo) == 'p') {
      setNeoPixelColor i (colorFromRGB (255 / 2) (192 / 2) (203 / 2))
    } ((at i foo) == 'a') {
      setNeoPixelColor i (colorFromRGB (105 / 2) (105 / 2) (105 / 2))
    } ((at i foo) == 'o') {
      setNeoPixelColor i (colorFromRGB (255 / 2) (165 / 2) (0 / 2))
    } ((at i foo) == 'n') {
      setNeoPixelColor i (colorFromRGB (160 / 2) (82 / 2) (45 / 2))
    } ((at i foo) == 'e') {
      setNeoPixelColor i (colorFromRGB (222 / 2) (184 / 2) (135 / 2))
    } else {
      setNeoPixelColor i (colorSwatch 0 0 0 255)
    }
  }
}

to 'pixel_drawing2 on_pin' foo bar {
  neoPixelAttach 64 bar
  pixel_drawing foo
}

Juan Carlos Bodoque Microblocks Code

Scratch
A drawing example of use of the Pixel Drawing library for MicroBlocks
module main
author unknown
version 1 0 
description ''

script 142 123 {
'pixel_drawing2 on_pin' 'xrrxrrxx
xrrxrrxx
xrrxrrxx
xrrrrrxx
xrrwrwrx
xrrrrrro
xrrrrrrr
xrrrrrrx' 10
}


module NeoPixel Output
author MicroBlocks
version 1 14 
description 'Control NeoPixel (WS2812) RGB LED strips and rings.
'
variables _np_pixels _np_pin _np_haswhite 

  spec ' ' 'neoPixelAttach' 'attach _ LED NeoPixel strip to pin _ : has white _' 'num auto bool' 10 '' false
  spec ' ' 'setNeoPixelColors10' 'set NeoPixels _ _ _ _ _ _ _ _ _ _' 'color color color color color color color color color color'
  spec ' ' 'setNeoPixelColors25' 'set NeoPixels #BR# _ _ _ _ _ #BR# _ _ _ _ _ #BR# _ _ _ _ _ #BR# _ _ _ _ _ #BR# _ _ _ _ _' 'color color color color color color color color color color color color color color color color color color color color color color color color color'
  spec ' ' 'clearNeoPixels' 'clear NeoPixels'
  spec ' ' 'neoPixelSetAllToColor' 'set all NeoPixels color _' 'color'
  spec ' ' 'setNeoPixelColor' 'set NeoPixel _ color _' 'num color' 1
  space
  spec 'r' 'neoPixel_colorSwatch' '_' 'color'
  spec 'r' 'colorFromRGB' 'color r _ g _ b _ (0-255)' 'num num num' 0 100 100
  spec 'r' 'randomColor' 'random color'
  space
  spec ' ' 'rotateNeoPixelsBy' 'rotate NeoPixels by _' 'auto' 1
  space
  spec ' ' 'NeoPixel_brighten' 'brighten NeoPixel _ by _' 'num num' 1 10
  spec ' ' 'NeoPixel_brighten_all' 'brighten all NeoPixels by _' 'num' 10
  spec ' ' 'NeoPixel_shift_color' 'shift NeoPixel _ color by _' 'num num' 1 10
  spec ' ' 'NeoPixel_shift_all_colors' 'shift all NeoPixel colors by _' 'num' 10
  space
  spec ' ' '_NeoPixel_ensureInitialized' '_NeoPixel_ensureInitialized'
  spec ' ' '_NeoPixel_increaseRGB' '_NeoPixel_increaseRGB of _ by _' 'num num' 1 10
  spec ' ' '_NeoPixel_rotate' '_NeoPixel_rotate_left _' 'bool' true
  spec ' ' '_NeoPixel_update' '_NeoPixel_update'
  spec ' ' '_NeoPixel_shift_hue' '_NeoPixel_shift_hue of _ by _' 'auto auto' '10' '10'

to NeoPixel_brighten i delta {
  '_NeoPixel_increaseRGB' i delta
  '_NeoPixel_update'
}

to NeoPixel_brighten_all delta {
  for i (size _np_pixels) {
    '_NeoPixel_increaseRGB' i delta
  }
  '_NeoPixel_update'
}

to NeoPixel_shift_all_colors delta {
  for i (size _np_pixels) {
    '_NeoPixel_shift_hue' i delta
  }
  '_NeoPixel_update'
}

to NeoPixel_shift_color i delta {
  '_NeoPixel_shift_hue' i delta
  '_NeoPixel_update'
}

to '_NeoPixel_ensureInitialized' {
  if (_np_pixels == 0) {if (or ((boardType) == 'M5Atom-Matrix') (or ((boardType) == 'Mbits') ((boardType) == 'micro:STEAMakers'))) {
    neoPixelAttach 25 '' false
  } ((boardType) == 'D1-Mini') {
    comment 'D1 mini kit'
    neoPixelAttach 7 15 false
  } ((boardType) == 'FOXBIT') {
    neoPixelAttach 35 '' false
  } ((boardType) == 'CodingBox') {
    neoPixelAttach 35 '' false
  } else {
    neoPixelAttach 10 '' false
  }}
}

to '_NeoPixel_increaseRGB' i delta {
  if (or (i < 1) (i > (size _np_pixels))) {return}
  local 'rgb' (at i _np_pixels)
  if (rgb != 0) {
    local 'h' ('[misc:hue]' rgb)
    local 's' ('[misc:saturation]' rgb)
    local 'v' (('[misc:brightness]' rgb) + delta)
    v = (maximum 20 (minimum v 100))
    atPut i _np_pixels ('[misc:hsvColor]' h s v)
  }
}

to '_NeoPixel_rotate' left {
  '_NeoPixel_ensureInitialized'
  local 'length' (size _np_pixels)
  if left {
    local 'first' (at 1 _np_pixels)
    for i (length - 1) {
      atPut i _np_pixels (at (i + 1) _np_pixels)
    }
    atPut length _np_pixels first
  } else {
    local 'last' (at length _np_pixels)
    for i (length - 1) {
      atPut ((length - i) + 1) _np_pixels (at (length - i) _np_pixels)
    }
    atPut 1 _np_pixels last
  }
}

to '_NeoPixel_shift_hue' i delta {
  if (or (i < 1) (i > (size _np_pixels))) {return}
  local 'rgb' (at i _np_pixels)
  if (rgb != 0) {
    local 'h' ((('[misc:hue]' rgb) + delta) % 360)
    local 's' ('[misc:saturation]' rgb)
    local 'v' ('[misc:brightness]' rgb)
    atPut i _np_pixels ('[misc:hsvColor]' h s v)
  }
}

to '_NeoPixel_update' {
  comment 'NeoPixel pin and hasWhite may have been changed by another library.'
  '[display:neoPixelSetPin]' _np_pin _np_hasWhite
  '[display:neoPixelSend]' _np_pixels
  waitMicros 300
}

to clearNeoPixels {
  '_NeoPixel_ensureInitialized'
  atPut 'all' _np_pixels 0
  '_NeoPixel_update'
}

to colorFromRGB r g b {
  r = (maximum 0 (minimum r 255))
  g = (maximum 0 (minimum g 255))
  b = (maximum 0 (minimum b 255))
  return (((r << 16) | (g << 8)) | b)
}

to neoPixelAttach number pinNumber optionalHasWhite {
  _np_pin = pinNumber
  _np_hasWhite = false
  if ((pushArgCount) > 2) {
    _np_hasWhite = optionalHasWhite
  }
  if (or (_np_pixels == 0) (number != (size _np_pixels))) {
    _np_pixels = (newList number)
  }
  atPut 'all' _np_pixels 0
  '[display:neoPixelSetPin]' _np_pin _np_hasWhite
}

to neoPixelSetAllToColor color {
  '_NeoPixel_ensureInitialized'
  atPut 'all' _np_pixels color
  '_NeoPixel_update'
}

to neoPixel_colorSwatch color {
  return color
}

to randomColor {
  local 'n1' (random 100 200)
  local 'n2' (random 0 100)
  if (1 == (random 1 3)) {
    return ((n1 << 16) | (n2 << 8))
  } (1 == (random 1 2)) {
    return ((n2 << 16) | n1)
  } else {
    return ((n1 << 8) | n2)
  }
}

to rotateNeoPixelsBy n {
  '_NeoPixel_ensureInitialized'
  local 'rotateLeft' (n < 0)
  if (or ((boardType) == 'CircuitPlayground') ((boardType) == 'CircuitPlayground Bluefruit')) {
    rotateLeft = (n > 0)
  }
  repeat (absoluteValue n) {
    '_NeoPixel_rotate' rotateLeft
  }
  '_NeoPixel_update'
}

to setNeoPixelColor i color {
  '_NeoPixel_ensureInitialized'
  if (and (1 <= i) (i <= (size _np_pixels))) {
    atPut i _np_pixels color
    '_NeoPixel_update'
  }
}

to setNeoPixelColors10 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 {
  '_NeoPixel_ensureInitialized'
  if ((size _np_pixels) >= 1) {
    atPut 1 _np_pixels c1
  }
  if ((size _np_pixels) >= 2) {
    atPut 2 _np_pixels c2
  }
  if ((size _np_pixels) >= 3) {
    atPut 3 _np_pixels c3
  }
  if ((size _np_pixels) >= 4) {
    atPut 4 _np_pixels c4
  }
  if ((size _np_pixels) >= 5) {
    atPut 5 _np_pixels c5
  }
  if ((size _np_pixels) >= 6) {
    atPut 6 _np_pixels c6
  }
  if ((size _np_pixels) >= 7) {
    atPut 7 _np_pixels c7
  }
  if ((size _np_pixels) >= 8) {
    atPut 8 _np_pixels c8
  }
  if ((size _np_pixels) >= 9) {
    atPut 9 _np_pixels c9
  }
  if ((size _np_pixels) >= 10) {
    atPut 10 _np_pixels c10
  }
  '_NeoPixel_update'
}

to setNeoPixelColors25 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 c20 c21 c22 c23 c24 c25 {
  '_NeoPixel_ensureInitialized'
  if ((size _np_pixels) >= 1) {
    atPut 1 _np_pixels c1
  }
  if ((size _np_pixels) >= 2) {
    atPut 2 _np_pixels c2
  }
  if ((size _np_pixels) >= 3) {
    atPut 3 _np_pixels c3
  }
  if ((size _np_pixels) >= 4) {
    atPut 4 _np_pixels c4
  }
  if ((size _np_pixels) >= 5) {
    atPut 5 _np_pixels c5
  }
  if ((size _np_pixels) >= 6) {
    atPut 6 _np_pixels c6
  }
  if ((size _np_pixels) >= 7) {
    atPut 7 _np_pixels c7
  }
  if ((size _np_pixels) >= 8) {
    atPut 8 _np_pixels c8
  }
  if ((size _np_pixels) >= 9) {
    atPut 9 _np_pixels c9
  }
  if ((size _np_pixels) >= 10) {
    atPut 10 _np_pixels c10
  }
  if ((size _np_pixels) >= 11) {
    atPut 11 _np_pixels c11
  }
  if ((size _np_pixels) >= 12) {
    atPut 12 _np_pixels c12
  }
  if ((size _np_pixels) >= 13) {
    atPut 13 _np_pixels c13
  }
  if ((size _np_pixels) >= 14) {
    atPut 14 _np_pixels c14
  }
  if ((size _np_pixels) >= 15) {
    atPut 15 _np_pixels c15
  }
  if ((size _np_pixels) >= 16) {
    atPut 16 _np_pixels c16
  }
  if ((size _np_pixels) >= 17) {
    atPut 17 _np_pixels c17
  }
  if ((size _np_pixels) >= 18) {
    atPut 18 _np_pixels c18
  }
  if ((size _np_pixels) >= 19) {
    atPut 19 _np_pixels c19
  }
  if ((size _np_pixels) >= 20) {
    atPut 20 _np_pixels c20
  }
  if ((size _np_pixels) >= 21) {
    atPut 21 _np_pixels c21
  }
  if ((size _np_pixels) >= 22) {
    atPut 22 _np_pixels c22
  }
  if ((size _np_pixels) >= 23) {
    atPut 23 _np_pixels c23
  }
  if ((size _np_pixels) >= 24) {
    atPut 24 _np_pixels c24
  }
  if ((size _np_pixels) >= 25) {
    atPut 25 _np_pixels c25
  }
  '_NeoPixel_update'
}


module Strings Data
author MicroBlocks
version 1 5 
description 'String operations.'

  spec 'r' 'isDigit' '_ is a digit' 'str' '5'
  spec 'r' 'isLowercase' '_ is lowercase' 'str' 'A'
  spec 'r' 'isUppercase' '_ is uppercase' 'str' 'E'
  space
  spec 'r' 'beginsWith' '_ begins with _' 'str str' 'prefix' 'pre'
  spec 'r' 'endsWith' '_ ends with _' 'str str' 'suffix' 'fix'
  spec 'r' 'contains' '_ contains _' 'str str' 'smiles' 'mile'
  space
  spec 'r' 'lowercase' 'lowercase _' 'str' 'THIS is a String! :)'
  spec 'r' 'uppercase' 'uppercase _' 'str' 'Hello, world!'
  spec 'r' 'withoutWhiteSpace' '_ without white space' 'str' '1, 2,	3,
4'
  space
  spec 'r' 'joinWith' 'join string list _ separator _' 'auto str' ' ' ' '
  spec 'r' 'stringToUnicodes' 'unicodes _' 'auto' 'aString'
  spec 'r' 'unicodesToString' 'string from unicodes _' 'auto' 'aList'
  space
  spec 'r' 'num2str' 'num2str _' 'auto' 42
  spec 'r' 'str2num' 'str2num _' 'str' '123'

to beginsWith string substring {
  return (('[data:find]' substring string) == 1)
}

to contains string substring {
  return (('[data:find]' substring string) > 0)
}

to endsWith string substring {
  return (('[data:find]' substring string) > ((size string) - (size substring)))
}

to isDigit char {
  local 'unicode' ('[data:unicodeAt]' 1 char)
  return (and (unicode >= 48) (unicode <= 57))
}

to isLowercase char {
  local 'unicode' ('[data:unicodeAt]' 1 char)
  return (and (unicode >= 97) (unicode <= 122))
}

to isUppercase char {
  local 'unicode' ('[data:unicodeAt]' 1 char)
  return (and (unicode >= 65) (unicode <= 90))
}

to joinWith stringList separator {
  if (not (isType stringList 'list')) {return ('[data:join]' '' stringList)}
  if (or ((pushArgCount) == 1) (separator == '')) {return ('[data:joinStrings]' stringList)}
  local 'result' (newList (2 * (size stringList)))
  '[data:delete]' 'all' result
  for s stringList {
    '[data:addLast]' s result
    '[data:addLast]' separator result
  }
  '[data:delete]' 'last' result
  return ('[data:joinStrings]' result)
}

to lowercase string {
  local 'new string' ''
  for i (size string) {
    if (isUppercase (at i string)) {
      'new string' = ('[data:join]' (v 'new string') ('[data:unicodeString]' (('[data:unicodeAt]' i string) + 32)))
    } else {
      'new string' = ('[data:join]' (v 'new string') (at i string))
    }
  }
  return (v 'new string')
}

to num2str n {
  return ('[data:join]' '' n)
}

to str2num s {
  return (0 + s)
}

to stringToUnicodes s {
  local 'result' (newList (size s))
  for i (size s) {
    atPut i result ('[data:unicodeAt]' i s)
  }
  return result
}

to unicodesToString aList {
  return ('[data:unicodeString]' aList)
}

to uppercase string {
  local 'new string' ''
  for i (size string) {
    if (isLowercase (at i string)) {
      'new string' = ('[data:join]' (v 'new string') ('[data:unicodeString]' (('[data:unicodeAt]' i string) - 32)))
    } else {
      'new string' = ('[data:join]' (v 'new string') (at i string))
    }
  }
  return (v 'new string')
}

to withoutWhiteSpace aString {
  local 'result' (newList (size aString))
  '[data:delete]' 'all' result
  for i (size aString) {
    local 'ch' ('[data:unicodeAt]' i aString)
    if (ch > 32) {
      '[data:addLast]' ch result
    }
  }
  return ('[data:unicodeString]' result)
}


module pixel_drawing Output
author 'luis^m'
version 1 0 
depends NeoPixel Strings 
description 'This library is for an 8x8 neopixel matrix, the number 
of letters represent the number of neopixels and the 
letter represents the color of that neopixel.
The available colors are:
r = red, g= green, b= blue, y= yellow, m= magenta, 
c= cyan, w=white, p= pink, a= gray, o= orange, 
n=brown, e=beige'

  spec ' ' 'pixel_drawing' 'pixel_drawing _' 'str' 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx'
  spec ' ' 'pixel_drawing2 on_pin' 'pixel_drawing _ on pin _' 'str num' 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx' 10

to pixel_drawing foo {
  if ((size foo) < 1) {clearNeoPixels}
  local 'var' (withoutWhiteSpace 'xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx')
  foo = ('[data:join]' (lowercase (withoutWhiteSpace foo)) var)
  for i 64 {
    if ((at i foo) == 'r') {
      setNeoPixelColor i (colorFromRGB 100 0 0)
    } ((at i foo) == 'b') {
      setNeoPixelColor i (colorFromRGB 0 0 100)
    } ((at i foo) == 'g') {
      setNeoPixelColor i (colorFromRGB 0 100 0)
    } ((at i foo) == 'y') {
      setNeoPixelColor i (colorFromRGB 100 100 0)
    } ((at i foo) == 'm') {
      setNeoPixelColor i (colorFromRGB 100 0 100)
    } ((at i foo) == 'c') {
      setNeoPixelColor i (colorFromRGB 0 100 100)
    } ((at i foo) == 'w') {
      setNeoPixelColor i (colorFromRGB 100 100 100)
    } ((at i foo) == 'p') {
      setNeoPixelColor i (colorFromRGB (255 / 2) (192 / 2) (203 / 2))
    } ((at i foo) == 'a') {
      setNeoPixelColor i (colorFromRGB (105 / 2) (105 / 2) (105 / 2))
    } ((at i foo) == 'o') {
      setNeoPixelColor i (colorFromRGB (255 / 2) (165 / 2) (0 / 2))
    } ((at i foo) == 'n') {
      setNeoPixelColor i (colorFromRGB (160 / 2) (82 / 2) (45 / 2))
    } ((at i foo) == 'e') {
      setNeoPixelColor i (colorFromRGB (222 / 2) (184 / 2) (135 / 2))
    } else {
      setNeoPixelColor i (colorSwatch 0 0 0 255)
    }
  }
}

to 'pixel_drawing2 on_pin' foo bar {
  neoPixelAttach 64 bar
  pixel_drawing foo
}

Credits

luis^m
3 projects • 8 followers
Investigador y diseñador educativo en Fab Lab Yucatán

Comments

Related channels and tags
  • Art
  • Art
  • MicroBlocks
  • Seeed Studio