aidesign

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

aidesign

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

記事一覧

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

概要『その後の変幻自在な広告』のひな型を発表します。広報活動において早朝、夕方、曜日の違いに応じた挨拶や季節に添う会話を表示するにはプログラミングにより解決でき…

300
aidesign
4か月前
1

回転しつつ同一方向を保つ動画

全体画像が回転しているのに画像の一部を静止状態に保つ方法があります。車において停止中なのに車のホイールが回り続けて見えるスピナーホイール、逆に走行中なのにホイー…

100
aidesign
4か月前
1

あみだくじの作り方を模索する

このたび、4~14人グループのくじ順を決める電子版あみだくじを作りました。当選者、役員を選出、掃除当番を決める、順番を無作為に決めるときなどにくじ引きを用いること…

100
aidesign
7か月前

ルーチンワーク

ちょっと前、ラグビーのワールドカップ大会でルーチンワークが大きな話題になったことがあります。 パソコンが市民に普及したとき、立ち上げるという言葉が使われました。…

aidesign
7か月前

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

連環の順を含む四字熟語かぞえ歌には子守歌風、昔話・民話風、猥雑な歌など様々です。ここでは数字に関連した数え歌を絡めて取り上げダブル連番入り四字熟語にスポットライ…

aidesign
8か月前

万華鏡2023

以前、電子万華鏡を発表しました。今回は万華鏡の機能に限定したシンプル版です。デザインはp5.jsがバリエーションを演じてくれますが、キーとマウス入力により手を加える…

aidesign
8か月前

縁取り文字の使用例

書体(フォント)共通した表情をもつ文字の集まりのことを「書体」と呼んでいます。フォントはデジタル化した書体を指します。文字の書体は明朝体とゴシック体が双璧と言…

aidesign
9か月前

あみだくじを作る

作品の概要 乱数とくじ乱数とはある範囲の数値から任意に取り出した数値です。プログラミング言語には種(seed)と呼ばれる値を基にして乱数を取り出す関数が用意されて…

100
aidesign
9か月前
2

電子万華鏡を作る

自由研究の一環夏休みの宿題の参考用として『電子万華鏡』を作ってみました。万華鏡とは3枚や6枚の鏡を組み合わせ筒状にしてその中に何種類もの色紙を細かに裁断して入れ…

aidesign
9か月前
2

画像を象(かたど)る

画像を扱う HTML(css, JavaScript)で画像を扱うとき、画像の形態(png, gif, jpeg, BMPなど)と大きさを指定します。画像には円形、楕円形、長方形、ひし形などがあっても…

aidesign
9か月前
1

梅雨も明け暑中お見舞い

時代に添った電子ハガキによる挨拶複数の人に同様のお知らせをするにはメールやLINEが便利です。通信環境を整えられない人々を差別することは良くないことですが運営には…

100
aidesign
9か月前
4

俳句アニメーション

サイン風俳句アニメ五七五からなる俳句に遅延処理を施してサイン風描写に仕立て上げてました。皇室の歌会始では末尾を朗々と伸ばして吟じています。その雰囲気が少しでも…

100
aidesign
10か月前
1

目を引くメッセージ

作品の概要ヘッダー画像に示したように左側に動くメッセージを代表する静止画像を表示し、右側に動くメッセージである松尾芭蕉の俳句を描画します。17文字の俳句はテキスト…

100
aidesign
10か月前
1

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

作品の概要HTMLプログラムで毛筆の筆記体による『暑中見舞い挨拶状』の動画を3例作成しました。コードを入手して自前の住所、ロゴ、花押、署名印に作りなおすことができま…

100
aidesign
10か月前
1

自由研究《電子絵日記》

作品の概要 夏休みの研究課題として電子絵日記の作り方を考えてみました。一般に、絵日記には日付と天候は必須であり、次いで絵と本文が続きます。体験したこと、出かけた…

200
aidesign
10か月前
1

新装開店の贈り物

このたび、知人がスナックを開業した記念のお祝いにセールス用の動画を進呈することを想定し作品を制作しました。連絡先や店の周辺情報はお知らせにあるホームページのURL…

300
aidesign
10か月前
2
人の目を惹く動く広告を作る

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

概要『その後の変幻自在な広告』のひな型を発表します。広報活動において早朝、夕方、曜日の違いに応じた挨拶や季節に添う会話を表示するにはプログラミングにより解決できることがあります。また、日常からかけ離れた幾何学模様を描画に使うと人目が奪われることがあります。このような動くキャッチコピーをHTML言語にてプログラミングした商品を作ってみました。

社名、電話番号、ホームページURLアドレス、ロゴマーク

もっとみる
回転しつつ同一方向を保つ動画

回転しつつ同一方向を保つ動画

全体画像が回転しているのに画像の一部を静止状態に保つ方法があります。車において停止中なのに車のホイールが回り続けて見えるスピナーホイール、逆に走行中なのにホイールが停まって見えるフローターホイールが市販されています。車検に抵触するかどうかは当方ではわかりません。

ここでは車から離れて画像をアニメーションして広告で目を惹く方法をまとめています。そのなかで公転中に自転させ同一方向を保つ動作について解

もっとみる
あみだくじの作り方を模索する

あみだくじの作り方を模索する

このたび、4~14人グループのくじ順を決める電子版あみだくじを作りました。当選者、役員を選出、掃除当番を決める、順番を無作為に決めるときなどにくじ引きを用いることがあります。このあみだくじはただひとりの当選者を決めるだけでなく順番決めに利用できることが特長です。

概要プロ野球のドラフト会議などでは先ず、くじを引く順番をくじで決めます。その順番で本番のくじを引いているようです。くじを何番目に引くか

もっとみる
ルーチンワーク

ルーチンワーク

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

その日のはじめにする決まり事ルーチンワークとは上記のような意味があります。パソ

もっとみる
数字入り四字熟語とかぞえ歌

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

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

もっとみる
万華鏡2023

万華鏡2023

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

上記の枠をクリックするとKaleidoScope2023.ht

もっとみる
縁取り文字の使用例

縁取り文字の使用例


書体(フォント)共通した表情をもつ文字の集まりのことを「書体」と呼んでいます。フォントはデジタル化した書体を指します。文字の書体は明朝体とゴシック体が双璧と言えるでしょう。その他、教科書体、行書体、イタリック体などがあります。また外枠を線で描く縁取り文字があります。

HTMLのCSSで書面を表現するとき、有料・無料の縁取りフォント体を用いる他にtext-shadowにより自前の縁取り文字を表示

もっとみる
あみだくじを作る

あみだくじを作る


作品の概要

乱数とくじ乱数とはある範囲の数値から任意に取り出した数値です。プログラミング言語には種(seed)と呼ばれる値を基にして乱数を取り出す関数が用意されています。種として経過時間など同じ値が現れないものを使って無作為な数値を作るために採用されます。

くじはおおぜいの参加者から一人の役割担当者を選ぶときなどに利用されます。後にくじ引き将軍と呼ばれた足利幕府六代将軍足利義教(あしかがよし

もっとみる
電子万華鏡を作る

電子万華鏡を作る


自由研究の一環夏休みの宿題の参考用として『電子万華鏡』を作ってみました。万華鏡とは3枚や6枚の鏡を組み合わせ筒状にしてその中に何種類もの色紙を細かに裁断して入れ、かき混ぜたり回転させて幻想的な幾何学模様を作って楽しむゲームです。それをHTMLプログラミングにより電子的に作成したものが電子万華鏡です。

万華鏡のライブラリーを用意p5.jsはプログラマでない人たち(アーティスト、教育者、初心者)が

もっとみる
画像を象(かたど)る

画像を象(かたど)る


画像を扱う
HTML(css, JavaScript)で画像を扱うとき、画像の形態(png, gif, jpeg, BMPなど)と大きさを指定します。画像には円形、楕円形、長方形、ひし形などがあっても原則、長方形で管理されます。

画像を切り抜く長方形の画像は見慣れています。一方、円、楕円、ハート形に切り抜いて表示するとインパクトのある表現になります。切り抜くにはborder(要素の境界)と重ね

もっとみる
梅雨も明け暑中お見舞い

梅雨も明け暑中お見舞い


時代に添った電子ハガキによる挨拶複数の人に同様のお知らせをするにはメールやLINEが便利です。通信環境を整えられない人々を差別することは良くないことですが運営には人手や予算などに限界があります。過去にこだわっていると取り残されることになり、切り替え時期には誰もが悩むことです。

電子ハガキに挑戦今回の作品は手書き風の動くメッセージに、紙媒体ながら間接的に動画を読めるようにQRコードを織り込んだ電

もっとみる
俳句アニメーション

俳句アニメーション


サイン風俳句アニメ五七五からなる俳句に遅延処理を施してサイン風描写に仕立て上げてました。皇室の歌会始では末尾を朗々と伸ばして吟じています。その雰囲気が少しでも表現できたら嬉しいです。

描写の仕組みは前回、図で説明したように貼り紙を少しずつ剥がしたりずらして、うやうやしく表示する方法です。今回、貼り紙をちょっとずつ剥がす処理を残してあります。楽屋裏から芝居を覗くような感じです。

貼り紙の糊の跡

もっとみる
目を引くメッセージ

目を引くメッセージ

作品の概要ヘッダー画像に示したように左側に動くメッセージを代表する静止画像を表示し、右側に動くメッセージである松尾芭蕉の俳句を描画します。17文字の俳句はテキストデータながらその上に被せたフィルターにより手書き風アニメーション効果を生み出しています。

扱いやすくしたアニメーション

先日、動くメッセージとして『暑中お見舞い』を投稿しました。毛筆による筆記体文面に遅延処理を施してネオンサイン風描画

もっとみる
令和五年の暑中見舞い状の作り方

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


作品の概要HTMLプログラムで毛筆の筆記体による『暑中見舞い挨拶状』の動画を3例作成しました。コードを入手して自前の住所、ロゴ、花押、署名印に作りなおすことができます。頑張ればBGMを付けることも可能でしょう。

暑中見舞いのはがきに印刷し郵送してネット時代を逆手にとるのも良し、Youtubeなどの公開サーバーにアップしてURLアドレスをメールやLINEにてお知らせするのもいいでしょう。最高の推

もっとみる
自由研究《電子絵日記》

自由研究《電子絵日記》

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

もっとみる
新装開店の贈り物

新装開店の贈り物

このたび、知人がスナックを開業した記念のお祝いにセールス用の動画を進呈することを想定し作品を制作しました。連絡先や店の周辺情報はお知らせにあるホームページのURLアドレスからたどっていただくことにして、店の概要をネット時代にふさわしく動画風に仕立て上げています。

作品の概要本作品はSVG(Scalable Vector Graphics)を採用してきめ細かな幾何学模様を表現しています。三葉曲線は

もっとみる