Zenn
🎄

ドット絵らしさを損なわないためのp5.js ひと工夫

2022/12/17に公開
JavaScript
p5.js
pixelart
tech

なにこれ

裏ドット絵Advent Calendar 2022 の17日記事を担当しました。そのAppendix 的な記事です。int 関数が正義。

あらまし

ドット絵とp5.js を組み合わせて絵を作ったのですが、曲線が滑らかすぎて雰囲気をこわしています。

真ん中のローズ曲線がその状態

これを次のように改変しました。

ドット絵らしくしたローズ曲線

やったこと

このローズ曲線はもともとr= k*sin(a*theta/b) という極座標表示をデカルト座標に直して、その座標に正方形を置くことで描画しているだけでした。

  r= 150*sin(a*theta/b); // 極座標表示

  x = r*cos(theta)+centerx; // xy 座標に直す
  y = r*sin(theta)+centery;
  
  rect(x, y, scal, scal); // この正方形で曲線を描画

やったことはこの(x, y) 座標の値をint 関数で整数値に直すことだけです。

  intx = int(x/scal)*scal;
  inty = int(y/scal)*scal;
  
  rect(intx, inty, scal, scal); // この正方形で曲線を描画

但し、scal には最小単位（1ドットの辺の長さ）を持たせています。このscal の整数倍になるように、先にscal で割って、それを整数にした後でscal 倍する、ということをしています。等倍のドット絵(scal = 1px) にするのであれば不要なひと手間だと思います。(そんなシチュエーションではこんなことしないか。)

参考まで

お粗末さまでした。ドット絵のアニメーションは元記事の冒頭で紹介しているので、良かったら。↓↓↓

(元記事) ドット絵にp5.js は添えるだけ[裏ドット絵Advent Calendar 2022]

Discussion