p5.js基本[一] T型高斯分佈的小星星

房東家的貓發表於2020-11-20
JS

樣例

  <script src="./p5/p5.js"></script>
<script>
  function setup() {
      // 只寫一次你想做的事
    createCanvas(400, 400);
  }

  function draw() {
      // 寫下你要重複的內容
      //  每秒約60次速度重複
    background(220);
    ellipse(50,50,80,80);
  }
</script>
  • createCanvas(width,height) 建立canvas
  • ellipse(x,y,cx的直徑,cy的直徑) 橢圓
  • background()
    • 一個引數: 0-255 0表示純黑色 255白色
    • 三個引數 rgb
  • circle(x,y,直徑) 圓
通過檢視原始碼可知
x,y,w,[h],[tl],[tr],[br],[bl]
[] 是可選引數分別是 高,左上圓角,右上,右下,下左
三個引數是圓
react(20,20,width,height)四個引數是長方形或者正方形
react(20,20,width,height,border-radius)五個引數是有圓角的長方形或者正方形
兩個圓角就是對角(50,10)  就是上左,下右 50, 上右,下左 10
三個圓角就是(50,30,5)  上左50,上右30, 下右,下左5

  • line(起點x,起點y,終點x,終點y) 直線

  • square(x,y,邊長) 正方形

  • triangle(x1,y1,x2,y2,x3,y3 ) 三角形

  • quad( x1, y1, x2,y2,x3,y3,x4,y4 ) 四邊形

  • fill()

    • 一個引數是亮點(0-255)

    • 一個引數 SVG/CSS

      fill('red')    
fill('#fae')  
fill('#222222')
fill('rgb(0,255,0)')
fill('rgba(0,255,0, 0.25)')
fill('rgb(100%,0%,10%)')
fill('rgba(100%,0%,100%,0.5)')
// p5 color
fill(color(0, 0, 255));

    • 三個引數RGB

    • 三個引數HSB

       * colorMode(HSB);
 * fill(255, 204, 100);

  • stroke()

    • 一個引數亮點(0-255),三個RGB

  • strokeWeight(number)

  • noStroke()

  • noFill()

demo

 function setup() {
      createCanvas(600, 200);
    }

    function draw() {
        background(220);

        fill(230, 128, 255);    // 青色
        circle(100, 100, 80);

        stroke(255, 128, 0);
        circle(200, 100, 80);

        fill(200)
        strokeWeight(10);
        circle(300, 100, 80);

        noFill();
        strokeWeight(5);
        stroke(123);         
        circle(400, 100, 80);
    }

結論: 設定填充後,如果沒有再次設定這個屬性,將一直保持這個設定

noLoop() 功能

setup設定了一個noLoop() ,只執行一次

如果我們把draw() 函式,裡面執行一個noLoop() 就只執行一次

變數的書寫

 let dia = 60; 

    function setup() {
      createCanvas(400, 200);
      background(220);
      noLoop();
    }

    function draw() {
      fill(128, 128, 0);
      noStroke();

      circle(100, 100, dia); 
      circle(200, 100, dia);
      circle(300, 100, dia);
    }

應該寫在函式的外面

列印函式

print()或者console.log()

編寫一個動畫

    let dia = 0;

    function setup() {
      createCanvas(400, 200);
      strokeWeight(2);
    }

    function draw() {
      if(dia>400){
        noLoop()
      }
      background(220);
      circle(dia,100,50)
      dia+=0.5;
    }

滑鼠事件

按下的按鈕mouseIsPressed 返回boolean

按下按鈕型別mouseButton 返回滑鼠左鍵,滑鼠右鍵,滑鼠中間滾輪'left','right','center'

大寫表示直接可以拿到的全域性變數LEFT,RIGHT,CENTER

當前指標座標(mouseX,mouseY)

demo

   function setup() {
      createCanvas(500, 500);
      background(220);
      stroke(220);  // 設定邊框顏色
    }

    function draw() {
      if (mouseIsPressed) {  // 滑鼠按下
        if (mouseButton == LEFT) {  // 按下滑鼠左鍵
          fill(256, 128, 0);
          circle(mouseX, mouseY, 20);  // 拿到座標畫圓
        } else if (mouseButton == RIGHT) {  // 拿到滑鼠右鍵,畫正方形
          fill(0, 128, 256);
          square(mouseX - 10, mouseY - 10, 20);
        }
      }
    }

左鍵畫圓,右鍵畫框

按鍵輸入

先滑鼠按下,在使用鍵key 拿到對應的字串

if (mouseIsPressed) {  // 滑鼠按下
        console.log(key);
}

隨機數

random(min,max)

就是min,max返回隨機

傳入一個引數

random([1, 2, 3])
//1,2,3隨機
random(10) // 0-10

不過你使用Math.random也是可以只是他封裝啦

point(x,y)

其實可以設定z,用於 webGL

在空間設定一個點

設定stroke() 改變顏色

設定strokeWeight() 改變大小

constranin

將一個值限制一定範圍

  • 引數一 要約束的數
  • 引數二 最低限度
  • 引數三 最大值
  • 引數四 受限的數量

abs

就是Math.abs()限制絕對值

abs(-3)  // 3

randomGaussian

均值,標準差,作為引數的高斯或正態分佈[高斯分佈的隨機數]

randomGaussian（Mean，StandardDeviation）
沒有引數就是均值 0, 標準差為 1
一個引數就是均值, 標準差1

高斯模糊的隨機實驗

  1. 我們設定一個(width 400,height 500)的矩形

    隨機放置的點需要在X軸上放置在300px和700px之間，在Y軸上放置在200px和800px之間

function setup() {
  createCanvas(1000, 1000);
  background(10);
}
function draw() {
  stroke(245);
  var xloc = random(300, 700);
  var yloc = random(200, 800);
  point(xloc, yloc);
}

步驟二,我想怎麼在梯形做出這個效果

對於Y軸,我們可以設定跟之前相同200,800之間

對於x軸,就有點棘手,拿出小學學的斜率的公式y=kx+b 我們可以知道b=200,那麼我們可以先算左邊兩個點,去掉b的距離就是(0,600),(100,0)那麼公式可知

左邊的斜率可以算出-6 右邊的則為6

帶入方程裡可以得到x0=(y-200)/6

所以直接帶入裡面 x的左邊的範圍座標就是x1=300-x0 右邊就是x2=700+x0

  function setup() {
    createCanvas(1000, 1000);
    background(10);
  }
  function draw() {
    stroke(245);
    var yloc = random(200, 800);
    var shift = (yloc - 200) /6;
    var xloc = random(300 - shift, 700 + shift);
    point(xloc, yloc);
  }

我們發現上面的不好看,那麼如果編寫出特定的均值和方差的高斯正態分佈隨機數

設定 基於均值200,方差180包含的隨機數是

a = 180;
b = 200;
y = a*randomGaussian() + b;

記得要限制這個隨機數的範圍,由於y軸的限制範圍為200-800

constrain(yloc, 200, 800);

完整程式碼為

 //方差,平均數, 儘量讓粒子釋出在頂部
    let sd = 180;
    let mean = 200;
    function setup() {
      createCanvas(1000, 1000);
      background(16,23,33);
    }
    function draw() {
      let yloc = randomGaussian();
      //  對於方差儘量使用正數,這樣它的分佈會盡量在頂部,所以使用絕對值
      yloc = abs(yloc * sd) + mean;
      // 限制範圍
      yloc = constrain(yloc, 200, 800);
      let shift = (yloc - 200) /6;
      let xloc = random(300 - shift, 700 + shift);
      stroke(220)
      point(xloc, yloc);
      // 讓它看上去更加夢幻點
      fill(107,202,226,15)
      noStroke();
     let d=random(6,11);
      ellipse(xloc,yloc,d,d)
    }

相關文章