だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ: Processing

p5.js ver1.5.0には文字を改行コードを使って縦書きにした際に文字が消失するバグがあるようです。






いくつか落とし穴があって、
* textAlign()の2個目のパラメータをCENTERにして改行コード入りのテキストを表示すると文字が消失する場合がある
* text()の4個目、5個目のパラメータを指定してボックス内に描画した時、その領域がrectMode()の影響を受けている(これは仕様らしい)
* バージョンが古いとセーフな場合もある(ver1.4.0など)
* フォントが読み込めないのかとも疑ったがあまり関係なさそう

というわけで、文字をセンタリングしながら縦書きにしたい場合は改行コードを使わずtextWrap()を利用するのが良さそうです。
とはいえtextWrap()を利用するとtextAlign()の指定が効かなくなるようなので位置調整は適宜やる必要があるようです。


See the Pen
text_tategaki_sample
by reona396 (@reona396)
on CodePen.


このエントリーをはてなブックマークに追加



原稿頑張ってます!
応援よろしくお願いします。
このエントリーをはてなブックマークに追加



「クリエイティブコーディングとは?」というテーマでオンライン登壇しました。
みなさまありがとうございました。

資料は下記に置いています。


このエントリーをはてなブックマークに追加




よろしくお願いします!


このエントリーをはてなブックマークに追加

最近踏んだバグのメモです。

createGraphics()を利用してこのようなimageを生成したとします。


See the Pen
pixelsTest01
by reona396 (@reona396)
on CodePen.



生成したimageに対してloadPixels()のサンプルを参考に「画像の上半分を繰り返す」ピクセル操作をしたいとします。


See the Pen
pixelsTest01
by reona396 (@reona396)
on CodePen.



この時、キャンバスサイズを小数にしていると盛大にバグるケースがあるようです。
キャンバスサイズを200.5x200.5にするとこんな感じで位置も色もバグります。グリッチっぽくてかっこいい。


See the Pen
pixelsTest02
by reona396 (@reona396)
on CodePen.



キャンバスサイズを200.9x200.0にすると位置がバグります。


See the Pen
pixelsTest03
by reona396 (@reona396)
on CodePen.



これはどうやらキャンバスサイズがというよりはcreateGraphicsのサイズが小数だとまずいようです。
createGraphics(width, height)の影響ですね。
解決方法としてはfloor()で小数点以下を切り捨てるなどして整数化するとよさそうです。


See the Pen
pixelsTest05
by reona396 (@reona396)
on CodePen.



あとは詳しく追いきれなくて再現方法は謎なんですが、pixelDensity(1)と指定することで似たようなバグが回避できました。

参考 :
このエントリーをはてなブックマークに追加

↑このページのトップヘ