見出し画像

#100_Web_challenge 4:p5.jsでパーリンノイズを描く

どうもこんにちは、フォトグラファーの花村(@nnammg)です。Web的スキル、磨いてます。

今回はJavaScript(p5.js)でCreative Codingするお話。


今回のネタ

・p5.jsでパーリンノイズを描く
・webpackを学ぶ

もともとはICS MEDIAさんのこちらの記事を参考にしたもので

素のJSで書かれていたものを題材に▼p5.jsで動かしました。

今回のコードは過去分をコピペするだけですが、ひと捻り加えます。

「p5.jsをCDNで読み込むのではなくバンドルしちめぇ!」の精神でwebpackの練習をすることにしました。昨今のフロントエンド開発のスタンダードのようですし、なんかすごいらしいじゃないですか!(雑)


Let's try webpack!!

これまたICS MEDIAさんの記事を参考にさせていただきました。

まずyarn initしてpackage.jsonを作り、"scripts"などを記述。

$ mkdir XXXXX
$ cd XXXXX

$ yarn init

次に必要なモジュールをインストール。

$ yarn add --dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/polyfill prettier html-webpack-plugin

$ yarn add p5

src-dirを作り、index.html(のテンプレート)とエントリポイントとなるindex.jsを生成。dist-dirにビルドされるよう以下を参考にwebpack.config.jsを設定。

p5.jsまでバンドルするとやや大きいJSができあがるため、ビルド時にWarningが出ます。▼を参考にWarningをスルーする設定に。気になっちゃうから。

できあがったwebpack.config.jsはこんな感じ。ここまででもいい勉強になりました。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 mode: 'production',
 entry: `./src/js/index.js`,
 output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'main.js'
 },
 devServer: {
   contentBase: 'dist',
   open: true
 },
 plugins: [
   new HtmlWebpackPlugin({
     template: './src/html/index.html'
   })
 ],
 performance: {
   hints: false
 }
}

こういう仕組みを作っている人たちって一体何者なんでしょうか(笑)すごいなぁすごいなぁと思うわけで。

あとはWebで調べながらES6的にコードを修正して理解!


成果

ソースコード


今回のなるほど!

最初、/src/html/index.html(テンプレート)は以下のようにしていました。 

<body>
  <canvas></canvas> ← background: black(css)
</body>

しかし、ビルドして出力された/dist/index.htmlは 

<body>
  <canvas></canvas> ← background: black(css)
  <canvas></canvas> ← ビルド時に付加されるp5.jsのcanvas
</body>

となっていて、最初のcanvasが優先されるようで、真っ黒の画面(background: black)しか表示されませんでした。解決方法はテンプレートの<canvas></canvas>を消すこと。

この現象っておそらくそういうものなのでしょう。もしかしたら、canvasはPhotoshopのレイヤーのように重ねることができるかもしれませんね。

使い方次第では面白いことができそう。


100 Web challenge、100個まであと96個!



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

みなさんからサポートいただいものは、撮影のための移動費や美味しいご飯を食べるために使います。好循環です。

ありがとうございま〜す!
1
Software Engineer & Photographer/Web開発をしながら、撮られ慣れてない方の笑顔、素敵な空気感をそぉっとすくい撮ってます。横浜育ち38年、脱サラ信州移住2年半を経て、2018年春から関西在住。翌年秋から夫婦生活スタート。

こちらでもピックアップされています

#100_Web_challenge
#100_Web_challenge
  • 8本

元アセンブラエンジニアのフォトグラファーが「エンジニアもやっぱ好きだ」と気づき、ふたたびスキルを磨いていくお話。今興味あるWebフロントエンド、バックエンドをテーマとし、何かしら100個を作っていく軌跡。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。