iT邦幫忙

3

p5.js 入門筆記 001

p5 js

可用於網頁上做互動特效的開發創作

線上開發平台:https://www.openprocessing.org/

基本函式

  • fill()填入顏色
  • stroke() 線條顏色
  • draw() 裡面是要畫的東西
  • mouseIsPressed判斷是否按下滑鼠
// 只在程式開始時執行一次
function setup() {
	createCanvas(windowWidth, windowHeight);// 畫布大小
	background(100); //初始背景顏色,一個數字代表灰階,0為黑,255為白
}
//在開始之後持續執行的函式
function draw() {
	background(100,25); //當背景參數為兩個,第二個為透明度(The alpha range by default is also 0 to 255,0全透明255不透明)
	strokeWeight(3);// 邊框寬 Number: the weight (in pixels) of the stroke
	stroke(255, 204, 20);// 邊框顏色
	if (mouseIsPressed){// 內建變數是否有按滑鼠
		fill(255,mouseX, mouseY);
		rect(mouseX, mouseY, mouseX, 20);// mouseX,mouseY滑鼠x軸y軸位置![](https://i.imgur.com/AFFAs3x.jpg)

		line(0,0,mouseX,mouseY); //畫兩點間線段 line(x1, y1, x2, y2)
	} else {
		fill(0,mouseY,mouseX); //物件填色
		ellipse(mouseX, mouseY, 20, 20);
	}
	// print(frameCount)// 目前畫面已累積的禎數
}

原本是圓形 按下之後是 長方形

Demo

Cheatsheet

1. setup 與 draw 有什麼不一樣,個別執行的時機跟作用是什麼?

setup為程式開始時執行一次
draw為程式開始後持續一直執行

2. 要如何改變視窗的大小呢?

createCanvas(寬,高)
https://p5js.org/reference/#/p5/createCanvas

3. background() 裡面可以使用哪些參數,試著從文件中找找看

https://p5js.org/reference/#/p5/background

4. 希望有按下滑鼠的時候,才根據滑鼠的位置改變顏色要怎麼做到呢?

使用mouseIsPressed判斷滑鼠是否有點擊,
再使用內建變數mouseX, mouseY抓滑鼠x軸與y軸
rect(mouseX, mouseY, 圖形寬, 圖形高);

5. 如果我想要改變先前軌跡變淡的速度,要怎麼做呢?

在draw裡面增加背景透明度,每次都蓋上一層透明背景
background(gray, [a])

https://www.openprocessing.org/sketch/649468


//1.建立 點擊的物件
 // 撰寫建構式,以滿足下方的輸出要求
class Dot {

  constructor(x, y, color) {
    this.x = x; //x y 是位置座標
    this.y = y;
    this.color = color;
    this.size = random(10, 50);// 10~50 size大小

 
    this.xoff = random(0, 100);// 0~100 x偏離位置
    this.yoff = random(0, 100);
  }
// 如何畫出來 撰寫方法,以滿足下方的輸出要求
  draw() {
    if (this.size > 0) {

      fill(this.color); //* fill()填入顏色
      ellipse(this.x, this.y, this.size); //
      this.x += (noise(this.xoff) * 2 - 1) * 3;
      this.y -= (noise(this.yoff) * 2 - 1) * 3;
      this.size -= 0.1;
      this.yoff += 0.01;
    } else {
      dots.splice(dots.indexOf(this), 1);//就是刪了一個了
    }
  }
}

let dots = [];
let colors = ["#393E47", "#00ADB6", "#FFF4E1", "#F8B501", "#FC3C3D"];
let bg = "#393E47";

let autox = 0;
let autodir = 1;
const autospeed = 5;

let isOver = false;


function setup() {
  let c = createCanvas(windowWidth, windowHeight - 40);
  c.mouseOver(() => isOver = true);
  c.mouseOut(() => isOver = false);
  noStroke();
  background(bg);
}

function draw() {
  if (mouseIsPressed && isOver) {
    dots.push(new Dot(mouseX, mouseY, colors[int(random(colors.length))]));
  }
  
	dots.push(new Dot(autox, height, colors[int(random(colors.length))]));

	if (autodir == 1) {
		if (autox < width) autox += autospeed;
		else autodir = -1;
	} else {
		if (autox > 0) autox -= autospeed;
		else autodir = 1;
	}
  for (let i = 0; i < 5; i++) {
    for (let dd of dots) {
      dd.draw();
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight - 40);
  background(bg)
}

尚未有邦友留言

立即登入留言