Mod: Coding Challenge #83: Chrome Extension with p5.js Sketch

p5.jsを使って以前Chrome拡張を作ることをやってみた．

takawo.hatenablog.com

が，開くWebサイトによって実行されなかったりすることもあって原因がわからなかった．

今回の内容では，p5.jsを使ってChrome拡張を作るというまんまな内容で，普段書いているグローバルモードではなく，インスタンスモードで書くやり方を説明していて，書き方は回りくどい感じもするけど，安定して動作するようになった．

関係ないが，体調を崩してしまって，日課のプログラミングができていなかった．間が空いてしまうと途端に感覚が鈍る．これまで習慣化がうまくいっていたこともあって，プログラミングの感覚を鈍らせなかったことで，日課を進めることを負担と感じなかったんだなと認識した．タイピングが進まない，こんな辛い思いをするくらいなら毎日書くほうが楽だ．

コード

• manifest.json

{
  "manifest_version" : 2,
  "name" : "extension works with p5.js",
  "version" : "0.1",
  "content_scripts" : [{
    "matches" : [
      "<all_urls>"
    ],
    "js" : ["js/p5.min.js","js/p5.dom.min.js","js/sketch.js"]
  }]
}

• sketch.js

var s = function(sketch){

  // console.log("hello");

  sketch.setup = function(){
    // console.log("setup");
    let c = sketch.createCanvas(sketch.windowWidth,sketch.windowHeight);
    c.position(0,0);
    c.style('pointer-events','none');
    c.style('z-index','9999');
    sketch.clear();
    sketch.colorMode(sketch.HSB,360,100,100);
    //sketch.background(0,0,100);
  }

  sketch.draw = function(){
    // console.log("draw");
    sketch.fill(sketch.random(360),80,100);
    sketch.noStroke();
    sketch.ellipse(sketch.random(sketch.windowWidth),sketch.random(sketch.windowHeight),sketch.random(50),sketch.random(50));
  }
}

let myp5 = new p5(s);

リファレンス