<aside> 💌 本週我們將在 p5.js 的基礎上講解在實際網頁中有哪些方式可以使用 canvas，並針對一些網頁案例範例來說明目前產業的趨勢。

</aside>

1️⃣ p5.js Instance Mode

<aside> ✅ 使用 p5.js 的 instance mode（實體模式）可以讓你更有效地管理程式碼，特別是在多個 p5.js 程式共存的情況下。這種模式允許你在一個程式中創建多個獨立的 p5 實例，避免了全域變數和函數的衝突。這樣可以更容易地組織和維護程式碼，每個實例都有自己獨立的作用範圍，使得程式的撰寫更加清晰和可靠。透過實體模式，你可以在同一個網頁中運行多個 p5.js 程式，而彼此之間不會相互干擾。

</aside>

p5 instance mode

<aside> 🌸 p5 實體模式（instance mode）可能會增加程式碼的複雜度和閱讀難度，尤其對於初學者而言。這是因為對於人們熟悉的 p5.js 全域模式來說，實體模式使用了不同的組織方式和語法。

然而，p5 實體模式的主要目的是解決多個 p5.js 程式之間的命名衝突和全域變數的問題。它可以讓多個 p5 程式在同一頁面上獨立運行，避免了全域變數和函數的衝突。這對於大型專案或需要多個 p5 程式的情況下很有幫助。

雖然實體模式可能增加了程式碼的複雜度，但它提供了更好的結構和管理多個 p5 實例的能力。對於簡單的專案或初學者而言，全域模式可能更容易上手和理解。

</aside>

let sketch = function(p) {
  // 在 p 中使用 p5 函數和變數
  p.setup = function() {
    p.createCanvas(400, 400);
    p.background(220);
  };

  p.draw = function() {
    p.fill(255, 0, 0);
    p.ellipse(p.random(p.width), p.random(p.height), 20, 20);
  };
};

new p5(sketch, id);

📕 練習：用 Instance mode 製作兩個以上的獨立畫布

製作好幾個 p5 + d3 畫布

p5.js Web Editor

2️⃣ 全螢幕的好玩畫布！

<aside> ✅ canvas 或 svg 最常的使用方式就是全螢幕當作互動畫布來使用。接下來的練習我們會使用 CSS 來將我們的畫布延展成 Responsive 的全螢幕的方式。

</aside>

pointer-events: none;

#sketch-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
}

利用 Jquery 來判斷是否 hover 在 <a> tag 上

$("a").on("mouseenter", handleMouseOver).on("mouseleave", handleMouseOut);

function handleMouseOver() {
  $("body").addClass("hover");
}

function handleMouseOut() {
  $("body").removeClass("hover");
}