【ギャラリー】FizzBuzzを図形描画して可視化してみた

FizzBuzz問題と戯れる雨の休日。たまにはこんな日も…。

ふと思い至って、FizzBuzz問題を使って図形を描いて遊んでみました。

今回の記事では、試しに描いてみたら面白かったものをいくつか紹介します。図形描画の具体的なやり方やコードの解説はしていませんが、ギャラリーとして楽しんでいっていただけたらと思います。

FizzBuzz問題とは
図形を描くことができるのでは？
ギャラリー
おわりに

FizzBuzz問題とは

はじめにFizzBuzz問題について触れておきます。これは、プログラミング学習における有名な問題のひとつですね。

ja.wikipedia.org

こんな問題を、Javascript（Google Apps Scriptでも可）でやってみましょう。

【問題】
数字を1から順に100までログ出力しましょう。ただし、

・数字が3の倍数のときには数字の代わりに「Fizz」
・数字が5の倍数のときには数字の代わりに「Buzz」
・数字が3の倍数かつ5の倍数のときには数字の代わりに「FizzBuzz」

となるようにしてください。

いろいろなコードを書くことができますが、たとえば素直にfor文とif文で書いてみると、このようになります。

javascript

function fizzBuzz() {

  const n = 100;
  
  for (i = 1; i <= n; i++) {
    if (i % 3 == 0 && i % 5 == 0) {
      console.log('FizzBuzz');
    } else if (i % 3 == 0) {
      console.log('Fizz');
    } else if (i % 5 == 0) {
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }
  
}

この関数を実行すると、以下のようにログ出力されます。

1, 2, 'Fizz', 4, 'Buzz', 'Fizz', 7, 8, 'Fizz', 'Buzz',  11, 'Fizz', 13, 14, 'FizzBuzz', 16, 17, 'Fizz', 19, 'Buzz', ... (省略)..., 98, 'Fizz', 'Buzz'

数字遊びみたいな感じですが、制御構文を理解していないとプログラムを書くことができないので、プログラミング入門者がステップアップするための重要な課題となります。

図形を描くことができるのでは？

このFizzBuzz問題、色々な解答を探すのも面白いです。普段使わない構文やメソッドを使ってみたり、短く書くことに挑戦してみたり（調べるとワンライナーの解答もでてきます）。

ただこれ、前々から「ただログ出力するだけじゃなくて、なんか図形を描けたら面白いのでは？」と思っていました。

考え方としてはこんな感じです。

パラメータが1から順番に大きくなるのに対応して、長方形や円などの図形を位置を変化させながら描く
パラメータが「3の倍数」「5の倍数」「3かつ5の倍数」の時に、図形の色や大きさを変化させる

調べながらいくつかやってみたら、結構おもしろいことになったので紹介します。

ちなみに実行環境は、p5.jsという、電子アート用のプログラミングをJavascriptを使ってできるライブラリを利用して描いています。

p5js.org

こちらのエディタで、Web上でコードを書いて実行することが可能なのでとても簡単です。

editor.p5js.org