p5.jsでは、DOMに要素を追加することができます。例えば、スライダー、ボタン、セレクトボックス、チェックボックス、ラジオボタンなどを作り、配置することができます。それらを操作して、図形の値を変更することができます。なお、この記事はドットインス…

三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 sic(),co…

乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールと…

キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールとい…

マウスの座標を取得して、インタラクティブなものを作ります。マウスの状態によって処理を変更したり、クリックされたときの処理の書き方を見ていきます。マウスの座標を取得できると動きのあるものが作れるようになるので、楽しくなると思います。なお、こ…

図形の変形について書きます。図形のパラメータを変更するのではなく、座標空間を変更して変形させます。移動、回転、拡大、縮小などが使えるようになると表現の幅が広がります。おまけで回転するアニメーションのサンプルコードを書きました。なお、この記…

テキストの描画について書きます。いくつか設定できるものがあります。テキストは、fill()とstroke()で文字の色と境界線の色を指定できます。それぞれの設定の詳細については、p5.jsのリファレンスで確認してください。なお、この記事はドットインストールと…

図形の塗りと線の設定について書きます。まず、初期値を確認します。その後、塗りと線の設定をします。また、設定を無効化できることを確認します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 塗りと線…

ellipse()で楕円、line()で直線を描画します。パラメータの数はいくつなのか、パラメータにはどんな値を指定するのかを確認します。おまけで円のアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サ…

定義済み変数を利用して図形を描きます。rectMode()は、長方形のパラメータの解釈の方法を変更して、描画する位置を変更する関数です。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 定義済み変数のwidth…

色の指定方法は複数あるので、それぞれ見ていきます。色はグレースケール、RGB、HSBで指定します。色の指定と合わせて、不透明度も指定できます。他にCSSの記法でも指定できます。その時に応じた指定の仕方を使えると良いです。なお、この記事はドットインス…

今回は、四角形をアニメーションさせてみます。draw()に再描画の内容を記述するので、その書き方をご紹介します。また、background()を記述する位置を変えるとどのような変化があるのかを見ていきます。 四角形をアニメーションさせる background()の記述位…

この記事では、「p5.jsの基本的な書き方」と「描画できる図形の種類」について書いています。まず、p5.jsの書き方を知り、基本形に慣れていきます。その上で図形を描きます。それから徐々にコードを変更して、色々と試していくことをおススメします。なお、…

JavaScriptでビジュアルコーディングをします。そのため、p5.jsを使います。p5.jsは、ProcessingをJavaScriptに移植したものです。今回は、その導入記事です。簡単なサンプルコードも書いていきます。 下準備 Get Started まとめ 下準備 p5.jsをダウンロード…

何かを理解するには、まず全体像を把握します。それから、一つ一つについて知っていくと理解しやすいです。私自身そうでしたが、JavaScriptを勉強すると決めたはいいものの、勉強内容が膨大で、何をどこまで勉強したらいいのか全く分かりませんでした。そこ…

クリエイティブコーディングとは、「アート+コンピュータサイエンスでデジタルアートを表現するプログラミング」のことです。今回、クリエイティブコーディングの始め方を調べてまとめました。それぞれの違いを理解して、自分に合ったものを選んで始めていた…

これからJavaScriptを始める方に向けて、JavaScriptで何ができるのかをご紹介します。JavaScriptは、クライアントとサーバの両方で使えます。そのため、クライアントとサーバについて簡単に触れます。 JavaScriptでできること クライアントとサーバ クライア…

私は、いくつかプログラミング言語を勉強しました。その中で初めてプログラミングを勉強する方に1つすすめるとしたら、JavaScriptをおススメします。その理由を経験談と共にご紹介します。 初めてのプログラミング JavaScriptをおススメする理由 理由1：手軽…

新しいPCにCドライブしかなかったので、パーティション分割しました。初めて行ったのですが、意外と簡単にできました。忘れないうちにその方法を書き残します。念のため、データをバックアップしてから作業してください。作業は自己責任でお願いします。Wind…

GitとGitHubの導入時にやることについてまとめました。新PCに移行したので、GitとGitHubの設定をし直しました。最初の一度だけやる作業は、忘れがちなので書き残します。最低限これだけやっておけば始められるということを書きました。詳細については各自で…

新しいPCでローカル開発環境を用意し、Gitを使えるように設定したのですが、git cloneでエラーが出ました。そのときに対応したことを書き残します。色々調べた挙句、仮想マシンの再起動で解決したというお話です。 前提 エラーの内容 エラー内容でネット検索…

プログラミングの勉強を始めようとしている方に向けて書きます。私は、プログラミング学習で何度も挫折しています。それでも諦めずに何度も挑戦しているのは、単純にプログラミングができるようになりたいという理由からです。 まず、プログラミングの勉強は…

スマホを買い替えるときに色々なスマホを比較しますが、その時に思ったことがあります。それは、いわゆるハイスペックスマホは自分には向いていないということです。まず、高価格であるということがあります。また、スマホの用途と性能を考えたときに、ハイ…

スマホを買い替えたので、その時に行ったことをメモします。パソコンの買い替え時よりもやることが少ないので気が楽ですが、アプリのアカウントをしっかり引き継がないとデータがなくなってしまうので注意が必要です。買い替えの一番の理由は、バッテリーの…

PCを買い換えたので、その時に行ったことをメモします。私は、PC買い替え時のデータ移行や各種設定のし直しなどが、億劫だと感じています。やることが多いという印象が強く、面倒だと思っています。 今回は、事前にネットでやることを調べて把握していたので…

デジタルマーケティングの本を読んだので、要点と感想を書きます。ブログ運営の参考になればと思いながら読みました。 本の要約 学んだこと マーケティングは温故知新 メディアを使い分けて集客する ブランディングでファンになってもらう コンバージョンを…

overflowプロパティの基本的な使い方について書きます。overflowプロパティは、要素の内容が表示領域に収まらない場合に、はみ出した部分をどのように表示するのかを指定するプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕…

CSSの「コメントの役割」と「コードの視認性」について書きます。まず、コメントの役割を再確認します。その上で、コメントをデザイン化してコードを読みやすくしていくことを考えます。 コメントの役割 CSSコードの視認性 コメントのデザイン化 CSSが煩雑に…

box-shadowプロパティの基本的な使い方について書きます。box-shadowプロパティは、要素に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 box-shadowプロパティの基本情報 サンプルコード 表示例 使用例 まと…

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 text-shadowプロパティの基本情報 サンプルコード 表示…