SVGでできる簡単なサンプルアニメーションを書きます。今回は、サークルのアニメーションです。参考サイトで紹介しているSVGのサンプルを、jQueryからJavaScriptに書き換えました。 サークルのアニメーション コード デモ 参考サイト サークルのアニメーショ…

単純な形のものでしたら、タグを使ってSVGデータを作ることができます。しかし、複雑な形状のものになると手書きのコードで作るのは現実的ではありません。そこで、ベクターデータを編集できるソフトを使い、SVGの素材を作る方法を見ていきます。 Illustrato…

ブラウザにSVGを表示・読み込む方法について書きます。何パターンかあるので、その時に合う方法を選べると良いです。 SVGタグ IMGタグ CSSのbackground-imageプロパティ objectタグ まとめ 参考サイト SVGタグ HTML内にSVGタグを挿入する方法です。 <svg version="1.1" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <g> <circle cx="150" cy="75" r="10"/> </circle></g></svg>

SVGでできる簡単なサンプルアニメーションを書きます。今回は、円のアニメーションです。さらに柔軟な表現ができるように、JavaScriptと絡めていきます。SVGとJavaScriptで、表現の幅が広がることを感じられたら幸いです。 円のアニメーションのサンプル コ…

本書は、識学という考え方に出会い、数々の企業の業績アップに貢献した著者が、結果を出したいプレーヤーに向けて仕事の型となる数値化のノウハウを紹介しています。今作は、プレーヤー向けの内容です。 本の紹介 学んだこと 数字に対する拒否反応を無くす …

他のサイトと同様、当ブログでもHTMLの入門記事を書いています。しかし、網羅的に書いているわけではありません。そのような解説サイトは他にいくらでもあります。詳細な説明はそちらに譲ります。当ブログでは、知っておきたい基礎知識やつまずきそうなとこ…

ウェブサイトを作りたいとなったら、始めにHTMLを勉強すると思います。そして、勉強の過程でCSSとJavaScriptの存在を知ると思います。今回は、ウェブサイトを作るときに関係するHTML、CSS、JavaScriptの役割について書きます。 HTMLの役割:文書の構造化 CSS…

影の指定方法について書きます。影を作るには、照明が必要です。あと、影を落としたい物体と影を受ける物体に影の設定をします。影の設定をすること自体は難しくないと思います。 影の設定 レンダラの影を有効化:shadowMap 光源の影を有効化:castShadow 影を…

Javaでグラフィックスをやりたかったので、Swingを勉強しました。グラフィックスをやるのにクラスをインポートするのですが、実は今までよく分からないまま使っていました。これではいけないと思い、この機会にクラスライブラリとパッケージについて調べまし…