aidesign

さまざまなプログラミング言語を扱ってきました。最近はHTML(JavScript, C…

aidesign

さまざまなプログラミング言語を扱ってきました。最近はHTML(JavScript, Css)に注目しています。プログラム開発・教育に関心を持っています。

最近の記事

人の目を惹く動く広告を作る

概要『その後の変幻自在な広告』のひな型を発表します。広報活動において早朝、夕方、曜日の違いに応じた挨拶や季節に添う会話を表示するにはプログラミングにより解決できることがあります。また、日常からかけ離れた幾何学模様を描画に使うと人目が奪われることがあります。このような動くキャッチコピーをHTML言語にてプログラミングした商品を作ってみました。 社名、電話番号、ホームページURLアドレス、ロゴマークなどは仮のものです。実在のものに変更する方法を載せています。HTMLの初歩知識と

有料
300
    • 回転しつつ同一方向を保つ動画

      全体画像が回転しているのに画像の一部を静止状態に保つ方法があります。車において停止中なのに車のホイールが回り続けて見えるスピナーホイール、逆に走行中なのにホイールが停まって見えるフローターホイールが市販されています。車検に抵触するかどうかは当方ではわかりません。 ここでは車から離れて画像をアニメーションして広告で目を惹く方法をまとめています。そのなかで公転中に自転させ同一方向を保つ動作について解析しています。 Result動作の概要 動作を動画で説明します。図に示したよう

      有料
      100
      • あみだくじの作り方を模索する

        このたび、4~14人グループのくじ順を決める電子版あみだくじを作りました。当選者、役員を選出、掃除当番を決める、順番を無作為に決めるときなどにくじ引きを用いることがあります。このあみだくじはただひとりの当選者を決めるだけでなく順番決めに利用できることが特長です。 概要プロ野球のドラフト会議などでは先ず、くじを引く順番をくじで決めます。その順番で本番のくじを引いているようです。くじを何番目に引くかは当たりくじを引く確率には関係ないですが、人情的には始めの方で引きたくなります。

        有料
        100
        • ルーチンワーク

          ちょっと前、ラグビーのワールドカップ大会でルーチンワークが大きな話題になったことがあります。 パソコンが市民に普及したとき、立ち上げるという言葉が使われました。パソコンは一日の利用を終えるとシャットダウンして翌日の朝に立ち上げて使っていました。スマホの時代になるとシャットダウンと立ち上げは日付ごとではなくなりました。 その日のはじめにする決まり事ルーチンワークとは上記のような意味があります。パソコンでその日の始まりにしたいことを挙げてみます。 ①立ち上がる直前にスピーカー

        人の目を惹く動く広告を作る

          数字入り四字熟語とかぞえ歌

          連環の順を含む四字熟語かぞえ歌には子守歌風、昔話・民話風、猥雑な歌など様々です。ここでは数字に関連した数え歌を絡めて取り上げダブル連番入り四字熟語にスポットライトを当てることにします。数字は一から順に繰り上がり十で元に戻ります。四字熟語は一石二鳥から始まり十年一日で終わります。二は二人三脚にしましたが二束三文もあります。六七や八九はなかなか見つからずネット上を参照しました。情報提供者に感謝申し上げます。 四字熟語はそれだけで意味を持つものに限られ字面(じづら)がそろうだけの

          数字入り四字熟語とかぞえ歌

          万華鏡2023

          以前、電子万華鏡を発表しました。今回は万華鏡の機能に限定したシンプル版です。デザインはp5.jsがバリエーションを演じてくれますが、キーとマウス入力により手を加えることができます。 下記タイトルと画像設定の方法において詳しくは不明ですがリンクアドレスへの画面遷移は期待通りに動作します。どなたかこの辺りをご存じでしたらお教えください。 上記の枠をクリックするとKaleidoScope2023.htmlにリンクし鮮やかな万華鏡が乱舞します。画面が変わって最下行の音声再生ボタンを

          万華鏡2023

          縁取り文字の使用例

          書体(フォント)共通した表情をもつ文字の集まりのことを「書体」と呼んでいます。フォントはデジタル化した書体を指します。文字の書体は明朝体とゴシック体が双璧と言えるでしょう。その他、教科書体、行書体、イタリック体などがあります。また外枠を線で描く縁取り文字があります。 HTMLのCSSで書面を表現するとき、有料・無料の縁取りフォント体を用いる他にtext-shadowにより自前の縁取り文字を表示することができます。text-shadowは文字に影を付ける使い方が標準ですが、

          縁取り文字の使用例

          あみだくじを作る

          作品の概要 乱数とくじ乱数とはある範囲の数値から任意に取り出した数値です。プログラミング言語には種(seed)と呼ばれる値を基にして乱数を取り出す関数が用意されています。種として経過時間など同じ値が現れないものを使って無作為な数値を作るために採用されます。 くじはおおぜいの参加者から一人の役割担当者を選ぶときなどに利用されます。後にくじ引き将軍と呼ばれた足利幕府六代将軍足利義教(あしかがよしのり)はくじ引きによって選ばれました。くじ引きは古来から参加者を選ぶ手段に使われ

          有料
          100

          あみだくじを作る

          電子万華鏡を作る

          自由研究の一環夏休みの宿題の参考用として『電子万華鏡』を作ってみました。万華鏡とは3枚や6枚の鏡を組み合わせ筒状にしてその中に何種類もの色紙を細かに裁断して入れ、かき混ぜたり回転させて幻想的な幾何学模様を作って楽しむゲームです。それをHTMLプログラミングにより電子的に作成したものが電子万華鏡です。 万華鏡のライブラリーを用意p5.jsはプログラマでない人たち(アーティスト、教育者、初心者)がJavaScriptを簡単に利用できるようにするためにLauren McCart

          電子万華鏡を作る

          画像を象(かたど)る

          画像を扱う HTML(css, JavaScript)で画像を扱うとき、画像の形態(png, gif, jpeg, BMPなど)と大きさを指定します。画像には円形、楕円形、長方形、ひし形などがあっても原則、長方形で管理されます。 画像を切り抜く長方形の画像は見慣れています。一方、円、楕円、ハート形に切り抜いて表示するとインパクトのある表現になります。切り抜くにはborder(要素の境界)と重ね書きの2方法があります。borderを使う方法は簡便であるが複雑な切り抜きは不向

          画像を象(かたど)る

          梅雨も明け暑中お見舞い

          時代に添った電子ハガキによる挨拶複数の人に同様のお知らせをするにはメールやLINEが便利です。通信環境を整えられない人々を差別することは良くないことですが運営には人手や予算などに限界があります。過去にこだわっていると取り残されることになり、切り替え時期には誰もが悩むことです。 電子ハガキに挑戦今回の作品は手書き風の動くメッセージに、紙媒体ながら間接的に動画を読めるようにQRコードを織り込んだ電子ハガキです。これまで挨拶状は同一文面で印刷され配布されました。ひとことを手書き

          有料
          100

          梅雨も明け暑中お見舞い

          俳句アニメーション

          サイン風俳句アニメ五七五からなる俳句に遅延処理を施してサイン風描写に仕立て上げてました。皇室の歌会始では末尾を朗々と伸ばして吟じています。その雰囲気が少しでも表現できたら嬉しいです。 描写の仕組みは前回、図で説明したように貼り紙を少しずつ剥がしたりずらして、うやうやしく表示する方法です。今回、貼り紙をちょっとずつ剥がす処理を残してあります。楽屋裏から芝居を覗くような感じです。 貼り紙の糊の跡を消す方法 俳句3行と作者の下、左側にある縦棒を削除して完成品にしてください。コ

          有料
          100

          俳句アニメーション

          目を引くメッセージ

          作品の概要ヘッダー画像に示したように左側に動くメッセージを代表する静止画像を表示し、右側に動くメッセージである松尾芭蕉の俳句を描画します。17文字の俳句はテキストデータながらその上に被せたフィルターにより手書き風アニメーション効果を生み出しています。 扱いやすくしたアニメーション 先日、動くメッセージとして『暑中お見舞い』を投稿しました。毛筆による筆記体文面に遅延処理を施してネオンサイン風描画を実現しました。大リーグ野球選手が透明ボードにかっこよくサインするかのようです。

          有料
          100

          目を引くメッセージ

          令和五年の暑中見舞い状の作り方

          作品の概要HTMLプログラムで毛筆の筆記体による『暑中見舞い挨拶状』の動画を3例作成しました。コードを入手して自前の住所、ロゴ、花押、署名印に作りなおすことができます。頑張ればBGMを付けることも可能でしょう。 暑中見舞いのはがきに印刷し郵送してネット時代を逆手にとるのも良し、Youtubeなどの公開サーバーにアップしてURLアドレスをメールやLINEにてお知らせするのもいいでしょう。最高の推しはそのアドレスをQRコードに変換して画像として送り、タップするだけで動画にたど

          有料
          100

          令和五年の暑中見舞い状の作り方

          自由研究《電子絵日記》

          作品の概要 夏休みの研究課題として電子絵日記の作り方を考えてみました。一般に、絵日記には日付と天候は必須であり、次いで絵と本文が続きます。体験したこと、出かけた場所、乗り物などを絵にします。本文には同伴者のことを書くことが多いようです。ここでは電子媒体を採用した日記らしく動画、静止画、バックグラウンドミュージック(BGM)を入れることを試みますが、敷居を低くして静止画をもじったテキストの絵文字からスタートします。    絵文字とは絵文字はテキストの範疇に属し、携帯電話の発展

          有料
          200

          自由研究《電子絵日記》

          新装開店の贈り物

          このたび、知人がスナックを開業した記念のお祝いにセールス用の動画を進呈することを想定し作品を制作しました。連絡先や店の周辺情報はお知らせにあるホームページのURLアドレスからたどっていただくことにして、店の概要をネット時代にふさわしく動画風に仕立て上げています。 作品の概要本作品はSVG(Scalable Vector Graphics)を採用してきめ細かな幾何学模様を表現しています。三葉曲線は正葉曲線の一つで葉が3枚からなるバラ曲線とも称されることがあります。 曲線は三

          有料
          300

          新装開店の贈り物