其實為什麼P5這麼多人喜愛

閱讀性真的很高，舉例來講好了

一個基本的設定

首先你先設定 setup 跟 draw

function setup() {
	//設定的動作 可以想像執行的時候要開始跑的區塊
	createCanvas(1000, 1000);
	 background(244, 248, 252);
  // frameRate(10);
	fill(0);
}

function draw() {
	// 依照這邊的設定 每次你的event會讓整段在跑一次
  background(255,20)
	rect(mouseX,mouseY,50,50)
}

Storke - 可以讓你的形狀的邊邊寬密度調整

FrameCount - 可以計算每一次被渲染的次數

MouseX ,MouseY 大多數元件pos 可以透過這個方式去移動

windowWidth,widthHeight 可以設定畫布的大小

這些參數設定就可以想一下 他是多少 你可以用print() 請顯示你要的console.log

background- 背景顏色設定

我們可以利用這些參數 可以去跟形狀一起做一些顏色的切換

function setup() {
  //slow down the frameRate to make it more visible
	createCanvas(1000, 1000);  // 開一個畫布
	 background(244, 248, 252); // 設定背景色
  // frameRate(10);
}

function draw() {
 background(100,20) // 畫布背景色再畫一次
	fill(mouseX,mouseY,frameCount)// 填滿色彩 
	rect(mouseX,mouseY,50,50) // 製造一個方塊
  // print(pmouseX + ' -> ' + mouseX);
}

接下來設定一些event 設定 假設滑鼠想要按下去呈現另外一個狀態 這邊就設定一個if else的判定

function setup() {
  //slow down the frameRate to make it more visible
	createCanvas(1000,1000)
	background(0,0,0)
}

function draw() {
  background(100,10);
	fill(mouseX, mouseY,frameCount);
	if(mouseIsPressed){
		fill(0)
		rect(mouseX,mouseY,100,100);
	}else{
		
	ellipse(mouseX,mouseY,100,100)
	}
  // print(pmouseX + ' -> ' + mouseX);
}

你就可以做出一個類似這樣滑鼠移動就會有不同方框連著你的箭頭走了

這如果是一個javascript 的話我們大概要畫到天荒地老了吧？

大家快試試看吧～

參考網址

https://openprocessing.org/sketch/869432