元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

Processingにおけるベクトルの減法

The Nature of Code(PDF版)からPVectorについて取り上げます。その中でもベクトルの減法について書きます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 ベクトルの減法 ベクトルの減法の例 …

Processingにおけるベクトルの加法

The Nature of Code(PDF版)からPVectorについて取り上げます。その中でもベクトルの加法について書きます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 ベクトルの加法 ベクトルの加法の例 …

PVectorと弾むボールのプログラム

The Nature of Code(PDF版)からPVectorについて取り上げます。PVectorは、Processingで用意されているクラスです。Processingと絡めてJavaのクラスについて軽く勉強します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProc…

グレースケールで乱数を比較する

これまでにグラフや2次元ノイズで乱数を見てきました。今回は、グレースケールで乱数を比較します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 一様にランダムなグレースケール 正規分布で…

2次元ノイズ

The Nature of Code(PDF版)から2次元ノイズについて取り上げます。乱数を2次元に割り当てて、画像を作ります。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 パーリンノイズ ランダムノイズ …

パーリンノイズとパーリンノイズウォーク

The Nature of Code(PDF版)からパーリンノイズについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、パーリンノイズの基本とパーリンノイズを使ったランダムウォークを…

正規分布(ガウス分布)

The Nature of Code(PDF版)から正規分布(ガウス分布)について取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、正規分布を可視化して散らばり具合を確認します。 正規分布(…

ランダムウォークの確率の操作

The Nature of Code(PDF版)からランダムウォークについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、ランダムウォークの確率を操作します。 ランダムウォークの確率…

ランダムウォークの確率

The Nature of Code(PDF版)からランダムウォークについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、ランダムウォークで利用した確率について書きます。 ランダムウ…

9方向に移動するランダムウォーク(random walk)

The Nature of Code(PDF版)からランダムウォークについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、9方向に移動するランダムウォークについて書きます。 9方向に移…

2022年の反省と2023年の目標

年末ということで、今年の勉強について反省します。今年1年を振り返り、来年の勉強に活かしたいです。来年勉強したいことも併せて挙げます。 2022年に勉強したこと 反省 2023年の目標 2022年に勉強したこと YAML mustache p5.js SVG Processing Three.js jQu…

ランダムウォーク(random walk)

The Nature of Code(PDF版)からランダムウォークについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。Processingのデフォルトのプログラミング言語は、Javaです。Javaの勉強も…

高校数学の学び直しその2

高校数学の学び直しの続報です。 以前の記事で、ベクトルと三角比、三角関数あたりを勉強し直したことを書きました。そこからさらに勉強を進めたので、そのことについて書きます。 そもそも数学を学び直すきっかけは、Processingで必要になったからです。 高…

【Three.js】Three.jsの記事まとめ

当ブログで紹介したThree.jsの記事を一覧にまとめました。Three.jsは、ブラウザ上で3DCGを描画するJavaScriptのライブラリです。5Gが主流になったら需要が高まるかもしれません。 Vue.jsの記事まとめ 今後の取り組み 参考サイト Vue.jsの記事まとめ 【Three.…

【2022年の読書】2022年に読んだ本の紹介

2022年に読んだ本をご紹介します。ブログで紹介していない本も載せておきます。オススメするわけではありません。個人的なメモとして残しておきます。ブログの記事にしたものは、記事へのリンクを載せています。 2022年に読んだ本 ビジネス・経済 人文・思想…

【より良いコードとは】「リーダブルコード」の感想

本書は、読みやすいコード=理解しやすいコードという考えで書かれています。そのため、理解しやすいコードを書く方法について4部にわたり取り上げています。 本の紹介 学んだこと 表面上の改善 ループとロジックの単純化 コードの再構成 感想 本の紹介 読み…

高校数学の学び直し

高校数学の学び直しをしています。 何故、高校数学の学び直しをしているのかや数学とプログラミングについて書いています。端的に言うと、Processingでプログラミングするのに数学が必要になったので、高校数学の学び直しをしているというお話です。 高校数…

Sass(SCSS)の学習メモ

Sassの勉強をしました。その内容をメモとして残します。Sassの入門的な内容について書きます。 ネスト 変数 mixin mixinに引数を渡す & 四則演算 CSSのcalc関数 import ネスト <div class="header"> <div class="log"></div> <div class="tagline"></div> <div class="menu"> <ul> <li><a href="">メニュー1</a></li> <li><a href="">メニュー2</a></li> <li><a href="">メニュー3</a></li></ul></div></div>

LinuxにProcessingをインストールする

LinuxにProcessingをインストールしました。その時に行ったことを備忘録として残します。ちなみに、Linux mint 21にProcessingをインストールしました。個人的には、新たな学びがあったので良かったです。 Processingのダウンロード ファイルの展開 インスト…

【JavaScript】モジュールのimport/export(3)

今回は、モジュールのインポートとエクスポートの特殊な書き方について見ていきます。具体的には、*(アスタリスク)を使った記述と再エクスポート、副作用のあるインポートの3つについてです。 事前準備 *でまとめてインポートする 再エクスポート 名前付きエ…

【JavaScript】モジュールのimport/export(2)

モジュールのインポートとエクスポートについて書きます。その中でもデフォルトインポート(default import)とデフォルトエクスポート(default export)の記述について書きます。 事前準備 モジュールのimport/export 変数のdefault import/default export 関…

【JavaScript】モジュールのimport/export(1)

モジュールのインポートとエクスポートについて書きます。その中でも名前付きインポート(named import)/名前付きエクスポート(named export)とエイリアスについて書きます。 事前準備 モジュールのimport/export named import/named export 複数の変数をimpo…

ブログ開設2年目の振り返り

今年の9月でブログ開設2年になります。少し遅くなりましたが振り返ります。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログを数値で振り返る 課題・後回しにしていること 今後について ブログを数値で振り返る 当ブログの数値を簡単にでは…

【JavaScript】モジュールの書き方

JavaScriptのモジュールは、ES2015で追加された仕組みです。今回は、モジュールの基本の書き方について勉強したことを書きます。クライアント側のJavaScriptでもモジュールが使えるようになり、便利になりました。 モジュールと名前空間 モジュールなしのJav…

Node.jsとVS CodeでHTML・CSSの開発環境を作る

Node.jsとVS CodeでHTML・CSSの開発環境を作ってみました。タスクランナーのGulpを使わずに、npm scriptsでPugとSassの変換処理を自動化してみました。また、ファイルに変更があったら自動でブラウザを更新するようにしました。 やりたいことは4つで、1.Pug…

LinuxにVisual Studio Codeをインストールする

LinuxにVisual Studio Codeをインストールしました。その時に行ったことを備忘録として残します。ちなみに、Linux mint 21にVisual Studio Codeをインストールしました。 Visual Studio Codeのインストール Visual Studio Codeの起動 参考サイト Visual Stud…

LinuxにNode.jsをインストールする

LinuxにNode.jsをインストールしました。その時に行ったことを備忘録として残します。コマンドの詳しい使い方については、取り上げていません。ちなみに、Linux mint 21にNode.jsをインストールしました。 Node.jsを始める nvmのインストール Node.jsのイン…

Linux Mintのインストール

Linuxを試したくて、Linux Mintをインストールしました。その際、参考にしたサイトをご紹介します。 Linuxのインストール 必要なもの 初期設定 今後の意気込み 参考サイト Linuxのインストール 下記の動画を参考にLinux Mint 21をインストールしました。 【L…

テキストエディタの遍歴と使い分け

最近、新しくテキストエディタを入れました。そこで、これまでのテキストエディタの遍歴と今後の使い分けについて書きます。 私のテキストエディタ遍歴 メモ帳 Emacs,vim TeraPad Atom Visual Studio Code テキストエディタの使い分け 余談 私のテキストエデ…

AtomにLiveServerを追加してコーディングを効率化する

今回は、LiveServerについて書きます。色々と調べていたらLiveServerというものに出会いました。ウェブサイトを制作する方にとって便利な機能なので導入してみると良いです。 コーディングの流れ LiveServerの追加 所感 参考サイト コーディングの流れ 編集 …