朝は占いじゃなくて格言を見よう！！

占いで毎日朝から順位つけられて気分下げられるの嫌じゃないですか？

朝のテレビで●●占い！今日の運勢は？今日の順位は？

勝手に順位つけられてるけど、どうなん？
占いランキングが最下位なら、その日は生きていたくなくなるし仕事もしたくならへん？外にもでたくないから仕事も学校も休みたくならへん？

大げさかもしれへんけど、朝からなぜ故に人の気持ちを下げることすんのん？

全員1位でいいやーーーん！！

人間だもの【作成した意図】

困ったときに何かに頼りたくなることはある。
ちょっと気持ちが沈んだ時とか、何かに頼りたくなった時とかある。

人間だもの。のりまき

そんな時はどうしますか？

神様に頼りたくなるから神社に行く人もいるでしょう。
私も散歩がてら天気と気分によるけども氏神様にお詣りに行く。運動もかねておさんぽ。
雨の日もあるし、毎日行くというハードルを課すとそれこそしんどくて占いに頼りたくもなるかもしれない。

占いみたいに順位つけられず、今日1日を過ごす目印があるとちょっと気持ちがラクとか、前向きになれたりとかしませんか？

1日過ごす目印

菜根譚って知ってますか？中国の格言集です。
栗山監督の本を読んだとき、栗山監督が読んでるって書いてたから買いました。ええ。ミーとハーです

ひととおり読みましたが、これはこうだ！なんて残念ながら理解はできていない。栗山監督にはなれないからオリンピックの監督もできないし金メダルももらえないしダルビッシュも大谷も呼べない。

話がそれたから元にもどそう。
菜根譚の本はページ毎に格言を書いているから、パラパラめくって止めたページの格言を読んで、ふむふむと納得している。
そして何故かその日は多分潜在的に意識している。多分いいこと。
自分の中の「今日の格言」になっている。

作成したモノ【今日の格言】

本をパラパラするのをWEB上で出来たらおもしろいかなと作ってみた。
パラパラしている本をクリックすると格言が表示される。イメージは書籍。なのでページは右開きです。

菜根譚の格言がランダムで表示される。
1日の始まりに是非！
朝は占いじゃなくて格言だよね！#protoout #p5js #javascript pic.twitter.com/wU4FwF8u3H

— のりまき (@n0rimaki_san) June 16, 2024

本をめくる動作はイマイチ納得できていないけど、概ね実現したいことは出来た！

こだわりポイント

• 右開き
  小説や教科書は右開きなので、右開きにしたかった。
• 縦書き
  菜根譚の本は縦書きだから縦書きにしたかった。
  縦書きの方向や枠に入らないとかちょっと苦戦しましたが、無事にページ枠内に納められた。
• 明朝
  ゴシックだと雰囲気がでないし、書籍に近寄せたかった。

フォントのサイズやページサイズが納得できず、ChatGTPと格闘した。

ソースコード

.js

let pages = [];
let currentPage = 0;
let numPages = 10;
let flipProgress = 0;
let flipping = true;
let pageFlippingSpeed = 0.1; // ページのめくり速度
let textDisplayed = false;
let randomSageWord;
let sageWords = [
  "人が世の中を生きてゆく時には、自分から一歩をゆずることが、よりすぐれた道である。この一歩をゆずることが、それがそのまま、次の一歩を進める根本となる。",
  "この世はけっして、けがれてもいないし、苦しみの海でもない。そうさせているのは、自分自身の心なのだ。",
  "逆境にあるときは、身の回りのものすべてが良薬となり、節操も行動も、知らぬまに磨かれていく。",
  "小人からは、むしろ憎まれたほうがよい。",
  "常に喜びの気持を",
  "最も高遠な真理というものは、最も平凡なものの中に宿っており、至難な事柄は最も平易なものの中から出てくる。",
  "人が世の中を生きてゆく時には、自分から一歩を ゆずることがよりすぐれた道である。この一歩をゆずることが、それがそのまま一歩を進める根本となるのである。",
  "人の過失をとがめる人は、心を動かすごとに、それがすべて自分を傷つける刃物となる。",
  "他人に恩恵を施す時には、その恩恵に感謝されることを求めてはいけない。他人に怨まれるようなことをしなかったならば、それがそのまま恩恵である。",
  "人目につく所で わざわいを受けないようにしたいと思ったら、まず人目につかない所で罪を犯さないように心がけるべきである。",
  "物事が失敗した後には、逆に成功するものである。だから、自分の思い通りにならない時でも、やたらに手を放ち投げ出してはいけない。",
  "他人に施した恩は忘れてもいいが、人から施された恩は忘れてはならない。",
  "古人の書物を読んでいながら、聖賢の精神にふれなかったならば、それは単なる文字の奴隷であるにすぎない。",
  "家庭にある時の戒めとして二語ある。それは『ただ思いやりが深くさえあれば、家族の心はおだやかであり、ただ倹約さえすれば費用は十分に足りる』という二語である。",
  "自分の心情の動きというものは、平穏な状態もあり、乱れる状態もある。であるから、どうして他人にだけいつも平穏な状態でいることを望めようか。",
  "他に先がけて開いた花は、散るのもまた早い。",
  "完全な名誉、立派な節操という評判は、独り占めしてはならない。そのいくらかを他人に譲り与えれば、危害を遠ざけ、身をまっとうすることができる。不名誉な行為や評価は、それをすべて他人に押しつけてはならない。そのわずかでも自分が引き受ければ、自分の才能をひけらかすことなく人徳を養うことになる。",
  "耳にはいつも聞きづらい忠言や諌言を聞き、心にはいつも受け入れがたいことがあって、それではじめて、道徳に進み、行動を正しくするための砥石となるのである。もし、言葉がすべて耳に心地よく、ことがらがすべて心に快適であれば、それは、この人生を自ら猛毒の中に埋没させてしまうようなものである。",
  "肝臓が病むと目が見えなくなり、腎臓が病むと耳が聞こえなくなる。このように、病は他人からは見えないところで始まり、やがては誰でもが見えるところに現れる。だから、人の上に立つ者は、人前で罪を受けたくないなら、先ずは人から見えないところでも罪を犯さないようにすべきである。",
  "人を教えて善をさせようとするとき、あまり高すぎてはならない。その人が、それを実行することができるかどうかの程度を考えて、実行できるようにしなければならない。",
  "人と共にして失敗した責任を分かち合うのはよいが、成功した功績は共有しようとしてはならない。共有しようとすると、仲たがいの心が生じてくる。",
  "身分不相応な幸運や正当な理由のない授かりものなどいうものは、天が人を釣り上げる甘い餌であるか、さもなければ人の世の落し穴である。",
  "多情の女は男狂いの果てに尼になり、のぼせやすい男は思いつめて仏道にはいる。かくして神聖なるべき寺院が、いつもみだらな女やよこしまな男どもの集まる巣窟となる。",
  "花は半開を看、酒は微酔に飲む、此の中に大いに佳趣あり。",
  "事無きの時は、心、昏冥し易すし。宜しく寂寂にして、照すに惺惺を以てすべし。事有るの時は、心、奔逸し易すし。宜しく惺惺にして、主とするに寂寂を以てすべし。",
  "人が世の中を生きてゆく時には、自分から一歩を ゆずることがよりすぐれた道である。この一歩をゆずることが、それがそのまま一歩を進める根本となるのである。",
  "逆境にあるときは、身の回りのものすべてが良薬となり、節操も行動も、知らぬまに磨かれていく。",
  "常に喜びの気持を",
  "耳にはいつも聞きづらい忠言や諌言を聞き、心にはいつも受け入れがたいことがあって、それではじめて、道徳に進み、行動を正しくするための砥石となるのである。",
  "肝臓が病むと目が見えなくなり、腎臓が病むと耳が聞こえなくなる。",
  "人の過失をとがめる人は、心を動かすごとに、それがすべて自分を傷つける刃物となる。",
  "物事が失敗した後には、逆に成功するものである。",
  "他人に施した恩は忘れてもいいが、人から施された恩は忘れてはならない。",
  "古人の書物を読んでいながら、聖賢の精神にふれなかったならば、それは単なる文字の奴隷であるにすぎない。",
  "家庭にある時の戒めとして二語ある。",
  "自分の心情の動きというものは、平穏な状態もあり、乱れる状態もある。",
  "他に先がけて開いた花は、散るのもまた早い。",
  "完全な名誉、立派な節操という評判は、独り占めしてはならない。",
  "耳にはいつも聞きづらい忠言や諌言を聞き、心にはいつも受け入れがたいことがあって、それではじめて、道徳に進み、行動を正しくするための砥石となるのである。",
  "肝臓が病むと目が見えなくなり、腎臓が病むと耳が聞こえなくなる。",
];

function setup() {
  createCanvas(900, 600);
  textFont('serif');
  // サンプルページを作成（ここでは#fff8dcのページを使用）
  for (let i = 0; i < numPages; i++) {
    pages.push(color('#fff8dc'));
  }
  frameRate(30); // フレームレートを設定
  randomSageWord = sageWords[floor(random(sageWords.length))];
}

function draw() {
  background(200);

  // 本のカバー
  fill(150);
  rect(50, 50, 800, 500);

  // 背表紙の線
  stroke(100);
  strokeWeight(2);
  line(450, 50, 450, 550);

  // 左ページを描画
  if (currentPage < pages.length) {
    fill(pages[currentPage]);
    noStroke();
    rect(75, 50, 350, 500);
  }

  // 右ページを描画
  if (currentPage + 1 < pages.length) {
    fill(pages[currentPage + 1]);
    noStroke();
    rect(475, 50, 350, 500);
  }

  // ページめくりアニメーション
  if (flipping) {
    flipProgress += pageFlippingSpeed;
    if (flipProgress >= 1) {
      flipProgress = 0;
      currentPage += 2;
      if (currentPage >= pages.length) {
        currentPage = 0;
      }
      randomSageWord = sageWords[floor(random(sageWords.length))]; // 新しい格言を選択
    }
  }

  // ページめくりの表現（右から左へ）
  if (currentPage + 1 < pages.length && flipping) {
    push();
    translate(425 + 350 * flipProgress, 50);
    rotate(PI / 6 * flipProgress);
    fill(pages[currentPage + 1], 150); // 半透明
    rect(0, 0, 350, 500);
    pop();
  }

  // 文字の描画
  fill(0);
  textSize(14); // フォントサイズを小さく
  textAlign(CENTER, CENTER);
  if (!flipping && textDisplayed) {
    let words = randomSageWord;
    let lines = words.split(""); // 文字を分割して縦書きに
    let xStart = 375; // 左ページの右側X座標
    let yStart = 75; // 左ページの上部Y座標
    let lineHeight = 18; // 行の高さ
    let charWidth = 18; // 文字の幅

    for (let i = 0; i < lines.length; i++) {
      let x = xStart - floor(i / 25) * charWidth; // 25文字ごとに改行
      let y = yStart + (i % 25) * lineHeight;
      text(lines[i], x, y);
    }
  }
}

function mousePressed() {
  // クリックでページめくりを停止または開始
  if (flipping) {
    flipping = false;
    textDisplayed = true;
  } else {
    flipping = true;
    textDisplayed = false;
  }
}

スマホで止まらない

ブラウザのクリックではページが止まるけど、スマホ（iPhone,Safari）で試したら止まらない。
クリックとタップは書き方が異なるらしい。

ChatGTPに何回聞いてもこのコードしか教えてくれない。
動きそうなコードやし。

.js

function mousePressed() {
  // クリックまたはタップでページめくりを停止または開始
  toggleFlipping();
}

function touchStarted() {
  // タップでページめくりを停止または開始
  toggleFlipping();
}

function toggleFlipping() {
  if (flipping) {
    flipping = false;
    textDisplayed = true;
  } else {
    flipping = true;
    textDisplayed = false;
  }
}

パソコン立ち上げて格言表示よりも、スマホで操作出来たらバリうれしいバリBUBである。
それができずに沼ったのでいったん完成とした。

今後の課題と展望

• スマホでの停止の実現
• 文字の配置を中央に寄せたい
• 文字の表示方法

魅せ方のエモさ

文字が落ちてくる。メチャクチャエモい。

坂口安吾の『堕落論』を文字を落下させながら表示して読んでみる．https://t.co/dwJT9L4xDC#p5js #creativecoding #dailycoding #generativeart pic.twitter.com/fB0TtaTMvD

— Shunsuke Takawo 🐌 (@takawo) June 2, 2024

文字を落下させて小説を読む。
文章は読みにくいけど、動きがエモすぎる。

文字が滑り落ちるから格言をジッと読むのには適していないけど、何かしら表示にもエモさが欲しいと思うので参考になりそうなのを参考にしながら実現したい。