モノクロタイム

I'm from the future!

【パリピのための電子工作】レインボーに光る電球ソーダを作る

こんにちは,れいじです.非パリピです.

電球ソーダの容器を手に入れたので魔改造して遊びました.

電球ソーダとは

womagazine.jp

韓国発祥のオシャレドリンクです.日本の専門店といえばピカピカソーダが有名どころ.

最近は縁日の定番となりつつありますね.

その影響か,この電球ソーダの容器がAmazonやYahooショッピングなどで販売されています.

本家と縁日用の電球ソーダの違いは

本家:そもそものジュースがカラフル.電球のソケット部分にLEDや電球型のストラップがついている.

縁日用:ソケット部分には何もつけないことが多い(ジュースを入れてすぐに提供できるようにするため).ボトルの底がへこんでいて,赤・青・緑のLEDがくっついた基盤がある.ボタンをぽちっと押せば光る仕様.

主にこんなかんじ.

あんまり光り方がエモくない問題

赤・青・緑のLEDを配置している以上,混色が難しいのでなんだかチープな印象を受けます.

なのでNeoPixel RingとArduino Gemmaを使用して,エモい電球ソーダボトルを作ります.

用意するもの

Arduino Gemma

Adafruit Gemma - Miniature Wearable Arduino-like Electronic Platform

Adafruit Gemma - Miniature Wearable Arduino-like Electronic Platform

・NeoPixel Ring(12個つき)

Adafruit 12 RGB LED Neopixel Ring [並行輸入品]

Adafruit 12 RGB LED Neopixel Ring [並行輸入品]

・リチウムポリマー電池

配線

f:id:yomoyamareiji:20170222154709p:plain

プログラム

Gemmaがシリアルポートに現れてくれないときはTrinketのドライバをAdafruit公式サイトから落としてきてインストールし,

・ボード:Arduono Gemma(ATTiny85 @8MHz) ・書き込み装置:USBTinyISP

にした状態で,メニューバーのスケッチ > 書き込み装置を使って書き込む を選択すればOKです.

f:id:yomoyamareiji:20180808191938p:plain

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
  #include <avr/power.h>
#endif

#define PIN 0

// Parameter 1 = number of pixels in strip
// Parameter 2 = Arduino pin number (most are valid)
// Parameter 3 = pixel type flags, add together as needed:
//   NEO_KHZ800  800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
//   NEO_KHZ400  400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
//   NEO_GRB     Pixels are wired for GRB bitstream (most NeoPixel products)
//   NEO_RGB     Pixels are wired for RGB bitstream (v1 FLORA pixels, not v2)
//   NEO_RGBW    Pixels are wired for RGBW bitstream (NeoPixel RGBW products)
Adafruit_NeoPixel strip = Adafruit_NeoPixel(60, PIN, NEO_GRB + NEO_KHZ800);

// IMPORTANT: To reduce NeoPixel burnout risk, add 1000 uF capacitor across
// pixel power leads, add 300 - 500 Ohm resistor on first pixel's data input
// and minimize distance between Arduino and first pixel.  Avoid connecting
// on a live circuit...if you must, connect GND first.

void setup() {
  // This is for Trinket 5V 16MHz, you can remove these three lines if you are not using a Trinket
  #if defined (__AVR_ATtiny85__)
    if (F_CPU == 16000000) clock_prescale_set(clock_div_1);
  #endif
  // End of trinket special code


  strip.begin();
  strip.show(); // Initialize all pixels to 'off'
}

void loop() {
  // Some example procedures showing how to display to the pixels:
  colorWipe(strip.Color(255, 0, 0), 50); // Red
  colorWipe(strip.Color(0, 255, 0), 50); // Green
  colorWipe(strip.Color(0, 0, 255), 50); // Blue
//colorWipe(strip.Color(0, 0, 0, 255), 50); // White RGBW
  // Send a theater pixel chase in...
  theaterChase(strip.Color(127, 127, 127), 50); // White
  theaterChase(strip.Color(127, 0, 0), 50); // Red
  theaterChase(strip.Color(0, 0, 127), 50); // Blue

  rainbow(20);
  rainbowCycle(20);
  theaterChaseRainbow(50);
}

// Fill the dots one after the other with a color
void colorWipe(uint32_t c, uint8_t wait) {
  for(uint16_t i=0; i<strip.numPixels(); i++) {
    strip.setPixelColor(i, c);
    strip.show();
    delay(wait);
  }
}

void rainbow(uint8_t wait) {
  uint16_t i, j;

  for(j=0; j<256; j++) {
    for(i=0; i<strip.numPixels(); i++) {
      strip.setPixelColor(i, Wheel((i+j) & 255));
    }
    strip.show();
    delay(wait);
  }
}

// Slightly different, this makes the rainbow equally distributed throughout
void rainbowCycle(uint8_t wait) {
  uint16_t i, j;

  for(j=0; j<256*5; j++) { // 5 cycles of all colors on wheel
    for(i=0; i< strip.numPixels(); i++) {
      strip.setPixelColor(i, Wheel(((i * 256 / strip.numPixels()) + j) & 255));
    }
    strip.show();
    delay(wait);
  }
}

//Theatre-style crawling lights.
void theaterChase(uint32_t c, uint8_t wait) {
  for (int j=0; j<10; j++) {  //do 10 cycles of chasing
    for (int q=0; q < 3; q++) {
      for (uint16_t i=0; i < strip.numPixels(); i=i+3) {
        strip.setPixelColor(i+q, c);    //turn every third pixel on
      }
      strip.show();

      delay(wait);

      for (uint16_t i=0; i < strip.numPixels(); i=i+3) {
        strip.setPixelColor(i+q, 0);        //turn every third pixel off
      }
    }
  }
}

//Theatre-style crawling lights with rainbow effect
void theaterChaseRainbow(uint8_t wait) {
  for (int j=0; j < 256; j++) {     // cycle all 256 colors in the wheel
    for (int q=0; q < 3; q++) {
      for (uint16_t i=0; i < strip.numPixels(); i=i+3) {
        strip.setPixelColor(i+q, Wheel( (i+j) % 255));    //turn every third pixel on
      }
      strip.show();

      delay(wait);

      for (uint16_t i=0; i < strip.numPixels(); i=i+3) {
        strip.setPixelColor(i+q, 0);        //turn every third pixel off
      }
    }
  }
}

// Input a value 0 to 255 to get a color value.
// The colours are a transition r - g - b - back to r.
uint32_t Wheel(byte WheelPos) {
  WheelPos = 255 - WheelPos;
  if(WheelPos < 85) {
    return strip.Color(255 - WheelPos * 3, 0, WheelPos * 3);
  }
  if(WheelPos < 170) {
    WheelPos -= 85;
    return strip.Color(0, WheelPos * 3, 255 - WheelPos * 3);
  }
  WheelPos -= 170;
  return strip.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}

もちろんモバイルバッテリーを使って給電することも可能なのですが,リチウムポリマー電池を使うとよりコンパクトにまとまるのでおすすめです.

こうなります.めっちゃインスタ映えする.

レインボーに光るとめっちゃエモい

みんなも電球ソーダのボトルを買って,中にストロングゼロジュース入れてインスタ映えしよう!

最近は電球ソーダよりも哺乳瓶ソーダが流行ってるとかで,さすがにそこまではついていけないなあと思っている非パリピでした.

RaspberryPi ZeroをAPIサーバにして遊んでみる

こんにちは,れいじです.

RaspberryPi Zeroを買ったまま持て余していたので,APIサーバにして遊んでみました.

※ちなみにデコってます.かわいい

セットアップする

ラズパイゼロのセットアップに関してはインターネットに山のように情報があるので割愛します. あ,ラズパイゼロ買うならスターターキット買ったほうが絶対楽です.すでにケーブルなりSDカードなり持て余している方は別ですが,私みたいな初心者勢はスターターキット買ったほうがいいです.必要なコネクタとか全部揃ってるし.

Raspberry Pi Zero W Starter Kit

Raspberry Pi Zero W Starter Kit

今回はラズパイ上でNode.js+Expressを動かし,REST APIを作ります.使用するOSはRaspbian.

nodeのアップデートをする

使用するパッケージの都合上,すでにインストールされているnodeよりもバージョンをあげる必要があります. ここではnodeのバージョン管理ツールnを使用してみます.

# nのインストール
$ npm install -g n

# stable版にアップグレード
$ n stable
$ node -v  
10.4.1 # 2018/06/20時点

#yarnのインストール
$ npm install -g yarn

これで実行環境の準備は完了です.

RESTAPIを作る

プロジェクトを用意しています.README.mdに沿って準備すればだれでも使えるはず. 3時間くらいで作ったコードなのでものすごい雑です.多分近いうちに座標とかをリクエストパラメータとして受け付けられるようにします.

github.com

※ YORPのappIDについては公式ドキュメントをどうぞ

Yahoo!デベロッパーネットワークヘルプ - アプリケーションIDとは

あ,nodeやexpressに関してはこの辺りをどうぞ.

qiita.com

ラズパイでgit cloneしてyarnするだけで必要なライブラリが入ってくれます.便利.

appIdを.envで環境変数に登録して,yarn startします.このときラズパイ上で動作確認するときはhttp://localhost/weather/getWeatherにGetメソッドでリクエストを投げると今後1時間の降水予測が返ってきます.

<?xml version="1.0" encoding="UTF-8"?>
<YDF xmlns="http://olp.yahooapis.jp/ydf/1.0" firstResultPosition="1" totalResultsAvailable="1" totalResultsReturned="1">
    <ResultInfo>
        <Count>1</Count>
        <Total>1</Total>
        <Start>1</Start>
        <Status>200</Status>
        <Latency>0.002441</Latency>
        <Description></Description>
        <Copyright>(C) Yahoo Japan Corporation.</Copyright>
    </ResultInfo>
    <Feature>
        <Id>201806192350_0_35.663613</Id>
        <Name>地点(0,35.663613)の2018年06月19日 23時50分から60分間の天気情報</Name>
        <Geometry>
            <Type>point</Type>
            <Coordinates>0,35.663613</Coordinates>
        </Geometry>
        <Property>
                    <WeatherAreaCode >
            <WeatherList>
                <Weather>
                    <Type>observation</Type>
                    <Date>201806192350</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200000</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200010</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200020</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200030</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200040</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200050</Date>
                    <Rainfall >
                </Weather>
            </WeatherList>
        </Property>
    </Feature>
</YDF>

さらにラズパイがネットワークに繋がっていれば,IPアドレスを使用してのアクセスも可能です.

f:id:yomoyamareiji:20180620003116p:plain

この次はvvvvからラズパイにアクセスをして,インタラクティブなお天気デジタルサイネージを作ってみようかなーと思っています.

vvvvからHTTPGETを投げるのはめちゃくちゃ簡単なので,APIサーバを自作できれば色々な団体(企業)が公開しているデータを使用してリアルタイムなメディアアートを作ることができますね. ではでは~

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

128x64 OLEDをArduino UNO(互換機)で動かす

こんにちは,れいじです.

こちら真似してArduino UNO 互換機でOLEDを動かしてみました.

サンプルコード実行や環境設定については以下を参照してください.

ArduinoでOLEDディスプレイを試す

用意したもの

  • ジャンパワイヤ オス‐オス

  • Arduino UNO互換機(KeyStudio製.安い・安定して使える・配色がエモい)

  • OLED小型ディスプレイ

  • ブレッドボード

配線

やむを得ずGroveのモニタを絵に使用していますが, * GND * VCC * SDA * SCL 以上4つの入力ピンがあるOLEDなら同じように配線できます.

f:id:yomoyamareiji:20180605004554p:plain

KeyStudioのArduino互換機の基盤にはSDA・SCLがなく,代わりにA4/A5ピンが同じ役割を果たします.これは通常のArduinoUNOでも同じです.

動作確認

無事動いているようです.このOLEDは秋月電子さんで600円弱で購入しましたが,かなり使い勝手がいいですね.

今回はサンプルコードしか実行していないので,好きな文字列やデータを表示できるようにしてみたいです.

ではでは~

【vvvv】vvvvでJoyConを入力機器として扱ってみる(接続編)

こんにちは,れいじです.

vvvvは外部入力機器を簡単に扱うことができます.例えばDualShock4.これはPS4のコントローラですが,PS4だけでなくPCゲームのコントローラとしても優秀です.

DualShock4の場合

DualShock4に関しては既にサンプルパッチが出ていてタッチパッドのタッチ入力以外のすべての入力を取得してBangや座標データとして変換・使用することができます.

これに関してはvvvv講座にも動画が上がっており,解説がされています.


【vvvv講座】PS4のコントローラを使う~Contribution探検~

Dualshock4はUSBケーブルを用いた有線接続・Bluetoothを使用した無線接続に対応しています.

JoyConの場合

じゃあJoyConはどうなのさ.

JoyConはNintendoSwitchのコントローラで,本体から外して使うことができます.JoyConは本体とくっついている状態のとき,本体とくっついている部分の端子を用いて有線接続をします.外して使うときはBluetoothを使用して本体と通信を行います.

vvvvにはBluetoothで繋ぐことのできる機器と連携するためのHIDノードというものが存在します.

HID (Devices) | vvvv

このHIDノードはDualShock4を接続するためにも使用されていて,DualShock4と同様にJoyConをHIDデバイスとして認識させてやればその入力を取得することが可能ということになります.

ただしJoyConはPCで扱うためにひと手間必要です.詳しい手順は以下のリンクから.

hyperts.net

要約すると,

  • PCとJoyConをペアリングする

  • vJoy driverというJoyConの設定用ソフトウェアをダウンロードする

  • mfosse\JoyCon-DriverというJoyCon用ドライバを入手する

下2つをやらなくてもPC上で動作確認はできるんですが,ジョイスティックの傾きが正常に取得できなかったりJoyCon内側のランプの点滅が止まらなかったりします.あと下2つをやらないとvvvvで値の取得ができませんでした.

静止画で申し訳ないのですが,取得できた記念のツイート.

わりと通信内容が不明で,飛んできた通信内容(バイナリ)の必要そうなところ,不必要そうなところを勘で切り出してます.ただJoyConの解析はかなり進んでいて通信内容も分かってきたので,微調整すればモノにできそうな気がしています.これ↓読むのかなりつらいけど…

github.com

とりあえず,vvvvでもJoyConが使えそうな兆しがあるということで報告でした.

Switch持ってなくても,JoyCon単体でも買えます.興味ある方はぜひ.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

↓こいつがあれば有線接続もできるんじゃないだろうか…

Joy-Con充電グリップ

Joy-Con充電グリップ