たかはしのんき

以前(いぜん)はパソコンを作(つく)る会社(かいしゃ)に勤(つと)め、今(いま)は貸(…

たかはしのんき

以前(いぜん)はパソコンを作(つく)る会社(かいしゃ)に勤(つと)め、今(いま)は貸(か)しアパートの会社(かいしゃ)を経営(けいえい)中(ちゅう)。還暦(かんれき)を過(す)ぎ、残(のこ)りの人生(じんせい)は若(わか)い人(ひと)たちのために使(つか)おうと思(おも)います。

最近の記事

12星座(せいざ)

昨年の5月から12星座の SVG を作り始め、3月で全て完成しました。 いずれも SVG を扱うライブラリ SVG.js(おうし座のみ)または Snap.svg を利用した JavaScript プログラムにより星を SVG として出力しています。以下のそれぞれの絵を実行結果のページへのリンクしています。 リンク先の「生成されたコード」に SVG のコードが表示されています。「生成されたコード」の例としていて座のコードを以下に示します。 <svg id="Zodiac"

    • 引用符(いんようふ)

      ここ最近、毎月星座のプログラムを書いています。今月はさそり座です。 Snap.svg というライブラリでさそりの SVG に赤経、赤緯の線や星などを付け加えています。 完成した SVG のコードを絵の下に表示しているのですが、Scorpius と ♏ の表示部分が、 <text x="506" y="272" fill="#ffffff" style="font-family: 'Curlz MT'; font-size: 32px;">Scorpius</text><

      • polygon(ポリゴン)で卵(たまご)

        SVG の polygon 要素を使って卵の絵を描きました。polygon とは多角形のことです。 この大きさだと卵に見えますが、実際は64角形です。polygon のコードは以下の通りです。 <polygon points="235.0,200.0 235.4,204.5 236.6,209.1 238.7,213.8 241.5,218.6 245.0,223.4 249.3,228.1 254.3,232.6 259.9,237.0 266.1,241.1 272.

        • GIMP(ギンプ)でSVG(エスブイジー)

          『GIMPパーフェクトガイド』という本を購入しました。GIMPでベクトル画像を編集しSVGとして保存できることが、この本を読んで分かりました。 今日はGIMPを使ってSVGを作ってみたいと思います。 GIMPとは GIMPはラスター画像を編集する無料ソフトウェアです。ラスター画像だけでなく、パスを作成することができます。 直線をつなげる パスツールで画面上を連続してクリックすると直線をつなげていくことができます。 パスを閉じるには[Ctrl]キーを押しながら始点をク

          角丸三角(かどまるさんかく)

          今月も星座の絵をSVGで作りました。今月はしし座です。 いつものように Small Basic から持ってきた SVG を Illustrator でちょこっと直しました。今回直したのは目と鼻ですが、鼻について解説します。 元々三角形だった鼻を右側のレイヤーで選択し、左側のツールで「ダイレクト選択」を選ぶと、三角形のそれぞれの角にちいさな円が現れます。この円をドラッグすると角丸三角形に変更することができます。 ただし SVG として保存するとパスになってしまうのでその後

          角丸三角(かどまるさんかく)

          Illustrator(イラレ)で表示(ひょうじ)できないSVG(エスブイジー)

          Adobe Illustrator は SVG ファイルを読み込んで編集し SVG ファイルとして出力することができます。 ところが、私の作った Shapes という Small Basic のプログラムで出力した SVG ファイル(以下のリスト)を Illustrator に読み込んでも表示されません。 <svg width="598" height="428"> <defs> <g id="g1"> <ellipse cx="123" cy="134

          Illustrator(イラレ)で表示(ひょうじ)できないSVG(エスブイジー)

          Illustrator(イラレ)のシェイプ形成(けいせい)

          今回作成したのはふたご座の絵です。 この絵はもともとは Small Basic のプログラムとして作成したものです。 この絵を Shapes というツールを使って SVG に変換し、Adobe Illustrator で描き直しました。 Illustrator に「シェイプ形成」というツールがあり、ふたごの髪の毛はこのツールを使って楕円をつなぎました。 このプログラムに関する詳細はブログ「JavaScript (59) Snap.svgライブラリを使用」をご覧ください

          Illustrator(イラレ)のシェイプ形成(けいせい)

          星座(せいざ)の絵(え)

          星座の絵をSVGで描いてみました。 以前作成した Small Basic のプログラムを JavaScript に置き換えたものです。 詳しい内容についてはブログ「JavaScript (58) おうし座」をご覧ください。

          星座(せいざ)の絵(え)

          魚(さかな)を変(か)えてみた

          水族館の魚を変えてみることにしました。 上の絵は娘が小学校の頃、イベントの魚釣り用に使ったものです。 この中の魚の骨をSVGにしてみました。SVGはちょっと長いですがこんな感じです。 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="988"

          魚(さかな)を変(か)えてみた

          水族館(すいぞくかん)

          水族館のアニメーションを SVG で作ってみました。 JavaScript のプログラムで三角関数(cos)を使って魚の幅を縮小させています。 /** * moveFish function * @since 0.1 */const moveFish = function() { for (i = 0; i < max; i++) { a[i] += da[i]; if (a[i] > 2 * Math.PI) {

          水族館(すいぞくかん)

          「の」の字(じ)を描(か)いてみた

          SVGでひらがなの「の」を表現してみました。 前回のロケットの形と同様、path 要素を使っています。 SVG.js で生成した「の」の字のコードは以下のようになりました。M は移動 (move)、L は直線 (line)、A は円弧 (arc)を表しています。 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sv

          「の」の字(じ)を描(か)いてみた

          path(パス)要素(ようそ)使(つか)ってみた

          前回のロケットをいろいろ改良してみました。改良点は以下の通りです。 ロケット頭部を円弧に変更しました。 ロケットの高さを変更できるようにしました。 ロケットを左に90°回転するようにしました。 横方向への移動を加えました。 // <path d="M22,96 // A595,204 0 0 1 92,0 // A595,204 0 0 1 162,96 // V239 // H22 // V96

          path(パス)要素(ようそ)使(つか)ってみた

          ロケットの打(う)ち上(あ)げ

          JavaScript のプログラムから SVG の画像を動かす準備が整ったので、今回は、いよいよアニメーションを実現します。 2015年に書いた SVG のコードではロケットを動かすために、下記の要領で SVG の animate 要素を使いました。 <use x="208" y="154" xlink:href="#g2"> <animate attributeName="y" begin="0s" dur="3s" from="154" to="78" />

          ロケットの打(う)ち上(あ)げ

          Notion AI(ノーションエーアイ)使(つか)ってみた

          Notion というサイトがあります。ノートやちょっとしたデータベースの作成などが簡単にできるので、私はCMS(コンテンツ管理システム)の一種かなと考えています。 その Notion に AI機能が搭載されたとのことなので、さっそく使ってみました。 結果はこちらです。 Notion AI に作ってもらった記事の内容を載せてみます。次回以降、これを参考にしながら SVG のアニメーションに取り組んでみたいと思います。 アニメーションの作成方法 このドキュメントはNot

          Notion AI(ノーションエーアイ)使(つか)ってみた

          図形(ずけい)のグループ化(か)

          今回は SVG の図形要素をグループ化して配置してみました。 星空とロケットをそれぞれグループとして定義し、use 要素で配置しました。 実行結果は以下のようなイメージです。 星はこんな風に作っています。星の位置を x と y に乱数で決め、stars というグループに追加しています。 for (i = 0; i < max; i++) { var x = Math.floor(Math.random() * xmax + size / 2);

          図形(ずけい)のグループ化(か)

          ライブラリで生成(せいせい)したSVGの表示(ひょうじ)

          SVG.js という JavaScript ライブラリで生成した SVG のコードを表示できるようにしました。 HTML の div 要素に生成した svg 要素をテキストとして取り出し、表示するようにしました。表示は pre 要素に取り出したテキストを追加しました。pre 要素には SyntaxHighlighter で行番号や色を付けるようにしています。 生成された SVG のコードをここにも貼っておきます。 <svg xmlns="http://www.w3.or

          ライブラリで生成(せいせい)したSVGの表示(ひょうじ)