<noframes id="ffjxp">

    <th id="ffjxp"></th>

    <big id="ffjxp"></big>
      <pre id="ffjxp"></pre>
        <var id="ffjxp"><font id="ffjxp"></font></var>

        成都web前端培訓
        成都達內金融街中心

        成都web培訓:思索p5.js的最佳實踐

        • 時間:2020-12-22 12:05
        • 發布:成都達內
        • 來源:成都達內

        p5.js是一個JavaScript 庫,用于為藝術家、設計師提供更容易上手的創意編程。

        它有著完整的一套基于 Canvas 的作畫功能,并且你可以把整個瀏覽器都當成你的“畫布”——利用 p5.dom.js 可以很方便地與其他 HTML 元素進行交互;利用 p5.sound.js 可以很簡單的對聲音進行分析與處理。

        官網推薦用法

        在官網的例子中,推薦使用script標簽引入的方法:

        html

        head

        !-- ...... --

        script src="path/to/your/p5.js" /script

        /head

        body

        script

        function setup() {

        createCanvas(300, 500);

        }

        function draw() {}

        /script

        /body

        /html

        這樣是讓所有的變量、函數都暴露在全局之下,所以我們可以直接使用 setup, draw 函數進行操作。

        但這對于新手來說,這樣的做法存在一個致命問題:沒有代碼提示。并且也不符合我們現代 Web 開發的習慣——模塊化。

        在動畫復雜的情況下,代碼會越來越多、越來越邋遢,直到成為一座“屎山”!!!

        所以這讓我不由得思考起了 p5.js 的最佳實踐究竟該如何。

        關于最佳實踐的思考

        p5.js 擁有多個生命周期函數:

        用于預加載數據的 preload 函數;

        在最開始執行,并且只執行一次的 setup 函數;

        一秒執行大概 20 多次的 draw 函數;

        鼠標左鍵點擊時觸發的 mousePressed 函數;

        ……

        p5 畫圖的根本其實就是在不同生命周期里對數據進行操作,然后將數據具體轉化為圖像。

        所以按照 MVC 的思想:view = render(data),我們應該拒絕在這些鉤子函數中「直接」操作數據——將動畫抽象成為獨立的 Service(服務),操作數據交給 Service 自己的方法,我們只需要在 draw 函數中對 Service 內的數據進行繪制即可。

        這樣講可能大家還不太明白,那么 talk is cheap, show me the code 吧!

        運用 OOP 與 SOA 解耦項目

        接下來我們通過一個例子看看如何對項目進行解耦。

        要求:了解面向對象的編程。

        目標:制作一個漫天繁星。

        step1 創建 Star 類

        第一步我們需要一個 Star 類。

        class 星星 {

        x坐標 = 0;

        y坐標 = 0;

        透明度 = 0;

        隨機放置星星() {

        // 隨機 x y 坐標值

        }

        閃爍() {

        // 操作透明度

        }

        }

        step2 創建 Service

        然后再為所有的星星閃爍制作一個服務,這個服務用來管理所有的星星(服務其實就是一個 class)。

        class 星星服務 {

        星星們 = [];

        get 星星的位置() {

        this.星星們.處理一下((星星) => {

        返回 {

        x: 星星的x坐標,

        y: y坐標,

        opacity: 透明度,

        }

        })

        }

        創建星星們() {

        重復 100 次:this.星星們.增加(new 星星());

        }

        }

        step3 寫入 p5

        let 星星服務實例;

        function preload() {

        星星服務實例 = new 星星服務class();

        }

        function setup() {

        星星服務實例.創建星星們();

        }

        function draw() {

        background(0);

        if (星星服務實例.星星們 的 長度 > 0) {

        星星服務實例.星星的位置.遍歷((星星) => {

        fill(255, 星星.透明度);

        ellipse(星星.x, 星星.y, 半徑, 半徑);

        })

        }

        }

        目前動畫比較簡單,還看不出來該方案有什么優勢。但是一旦動畫更加復雜,該方案對原來寫法的解耦的優越性將會是毋庸置疑的。

        我們僅僅需要的是在不同的生命周期函數中調用服務的方法,然后在 draw 函數中拿到數據后進行繪圖!

        ts-p5 以及環境搭建

        官網下載 Node.js,一路默認選項安裝;

        下載 VSCode,他為我們提供了完善的代碼提示支持;

        新建項目文件夾,命名;

        將文件夾拖入 VSCode;

        點擊 VSCode 菜單欄的“終端”或是“Terminal”選項,選擇新建終端;

        終端內輸入:npm config set registry https://registry.npm.taobao.org && pm init -y && npm i ts-p5 && npm i -D parcel-bundler;

        此時文件夾內出現了 package.json 與 package-lock.json 文件,打開前者;

        在第一行大括號的末尾回車,輸入:

        { // 在這里回車

        "scripts": {

        "start": "./node_modules/.bin/parcel ./src/index.html --no-cache",

        "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build"

        },

        // ......

        新建 src 文件夾,讓你的目錄看起來是這樣:

        - 你的文件夾名稱

        - node_modules

        - package.json

        - package-lock.json

        - src

        - index.html

        - style.css

        - main.js

        只需要在 index.html 中引入 main.js 和 style.css;

        在 index.html 中寫入以下代碼:

        body

        div id="sketch"/div

        script src="./main.js" /script

        /body

        在 main.js 中寫入以下代碼:

        import { sketchCreator } from 'ts-p5';

        import { getWindowSize } from 'ts-p5/utils';

        sketchCreator(

        {

        preload: function () {},

        setup: function (p) {

        const { width, height } = getWindowSize();

        p.createCanvas(width, height);

        p.background(0);

        },

        draw: function (p) {

        p.background(0);

        p.noStroke();

        },

        mousePressed: function (p) {

        console.log(p.mouseX);

        console.log(p.mouseY);

        },

        },

        document.querySelector('#sketch')

        );

        然后在終端輸入 npm run start,待顯示

        Server running at http://localhost:1234

        ? Built in xxxx.

        之后,方可打開瀏覽器輸入剛剛輸出的網址。

        觀察到一片漆黑,就完成了。

        之后如果需要使用到 p5 的函數或者是變量,輸入 p. 就會自動彈出代碼提示了(不要忘記在函數參數傳入 p 哦)。

        為代碼添加提示完整版(初學者向)

        為了給 p5 增加代碼提示,我們不可以使用官網推薦的方式。需要利用 TypeScript 進行模塊化的項目構建(會的同學,或者不需要代碼提示的同學可以直接跳過這一節)。

        這里需要安裝一下 Node.js,直接官網下載即可。

        以下步驟僅限 Linux 與 MacOS 平臺,Windows 不保證可以這么操作!!!

        step1 初始化項目

        新建一個文件夾,將文件夾拖入 VSCode 打開,切換至英文輸入法,同時按下 control + ~ 就可以開啟終端。

        在終端輸入 npm config set registry https://registry.npm.taobao.org && pm init -y && npm i p5 && npm i -D typescript @types/p5 parcel-bundler && ./node_modules/.bin/tsc --init 請初學者直接復制粘貼并且回車,不要嘗試自己輸入。

        這時候可以發現我們的文件夾里出現了幾個文件,并且他們全都不需要你去關心。

        - 你的文件夾名稱

        - node_modules

        - tsconfig.json

        - package.json

        - package-lock.json

        打開 package.json 文件,應該長這樣:

        {

        "name": "你的文件夾名稱",

        .....

        }

        step2 創建啟動腳本

        我們在第二行插入一些東西(一樣請直接復制,不要嘗試自己打):

        {

        "scripts": {

        "start": "./node_modules/.bin/parcel ./src/index.html --no-cache",

        "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build"

        },

        "name": "你的文件夾名稱",

        .....

        }

        step3 創建 HTML 文件

        接著我們建立 src 文件夾,并在其中新建我們的 HTML / CSS 文件:

        - 你的文件夾名稱

        - node_modules

        - tsconfig.json

        - package.json

        - package-lock.json

        - src

        - index.html

        - style.css

        src 是之后我們唯一需要關注的文件夾。

        step4 啟動項目

        照常的寫你的代碼,和之前沒有任何區別。然后隨便在 HTML 中輸入一些標簽和字符,在終端中輸入:npm run start 并等待一會兒,待顯示出

        Server running at http://localhost:1234

        ? Built in xxxx.

        之后,方可打開瀏覽器,輸入他輸出的網址。

        此時顯示了你剛剛在 HTML 中寫的文字即是成功了。

        step5 創建 TypeScript 文件

        首先在 src 中創建 main.ts 文件,并在 html 中引入。

        - src

        - index.html

        - style.css

        - main.ts

        因為 p5 的特殊性質,所以無法在 js 文件中提供完整的代碼提示,必須使用 typescript。

        step6 書寫 p5

        翻看 p5 的源代碼我們發現,p5 本身是一個構造函數,接受兩個參數,第一個是一個函數,函數接受一個參數,我們可以通過這個參數實現代碼提示:

        // main.ts

        import P5 from 'p5';

        const sketch = (p: P5) => {

        p.setup = () => {

        p.background(0);

        };

        p.draw = () => {

        p.background(0);

        p.fill(255);

        p.ellipse(0, 0, 25, 25);

        };

        };

        p5 的第二個參數是一個 HTML 元素,意思是我們可以將畫布放到這個元素中去。

        // index.html

        body

        div id="app" /div

        script src="./main.ts" /script

        /body

        這時候我們就可以使用 new P5(sketch, document.querySelector('#app')); 來掛載畫布了。

        上一篇:成都web前端培訓:JS模塊化編程規范require.js
        下一篇:成都web前端培訓:ES6和JavaScript的關系

        成都web前端培訓班:React Fiber

        成都web前端培訓機構:教你玩轉CSS的所有字體

        成都web培訓:React+AntdMobile+Axios實現全局Loading提示組件

        成都前端培訓:解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題

        • 關注微信公眾號

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        江西省

        貴州省

        廣西省

        海南省

        校花把腿张开让男生桶视频,欧美va天堂在线电影,欧美中文有码字幕在线播放,九九热线精品视频6在线