javascriptを学びながらアニメーションやグラフィカルな画像を作成できるフリーの「P5.js」を紹介します。
資料をご覧ください。 → p5_jsその1
p.1 ①https://p5js.org/ にアクセスします。英語か日本語いずか使い易い方を選択ください。サイドバーにある Examplesクリックすると、種々の画像を見ることができます。実行してみてください。マウスの動きに応じて図形が変化していくパターンの画像もあります。画像の下には、javascriptのコードが記載されているので、参考にされるとよいと思います。
p.2 ②Editorをクリックして編集画面に移動します。既にコードが書かれており、③Runボタンを押して実行すると、灰色の四角が表示されます。画面は、コード入力画面、実行結果を表示するレビュー画面、エラーや警告メッセージを表示するコンソール画面があります。
p.3 左が円を描くコードです。右は、マウスを動かすと、それに応じて円が動きます。「fill（R、G、B、透明度）」は、色と透明度を指定して図形を塗りつぶします。「(mouseX、mouseY）」という座標を指定すると、マウスのカーソル位置に図形を描きます。