update document template edit

ATSLotus · Jul 20, 2024 · 5ab981d · 5ab981d
1 parent ac47989
commit 5ab981d
Show file tree

Hide file tree

Showing 15 changed files with 829 additions and 203 deletions.
diff --git a/dist/ezpsy.js b/dist/ezpsy.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/example/test/singrat_js.html b/example/test/singrat_js.html
@@ -23,30 +23,31 @@
         let ez = await ezpsy.init({
             el: document.getElementById('sinGrat'),
         });
-        const arr = []
-        for(let i = 0; i < 10; i++) {
+        const list = []
+        let a = new ezpsy.sinGrat({
+            shape: {
+                x: window.innerWidth / 2,
+                y: window.innerHeight / 2,
+                r: 1280,
+                pixelsPerDegree: 57, 
+                spatialFrequency: 2,
+                angle: 0, 
+                contrast: 1, 
+                phase: 0,
+                level: 0.5,
+                gamma: 1
+            },
+            isNoise: true
+        })
+        for(let i = 0; i < 1000; i++) {
             const t0 = performance.now()
-            let a = new ezpsy.sinGrat({
-                shape: {
-                    x: window.innerWidth / 2,
-                    y: window.innerHeight / 2,
-                    r: 1280,
-                    pixelsPerDegree: 57, 
-                    spatialFrequency: 2,
-                    angle: 0, 
-                    contrast: 1, 
-                    phase: 0,
-                    level: 0.5,
-                    gamma: 1
-                },
-                isNoise: true
-            })
-            ez.add(a)
+            await a.pre_draw()
             const t1 = performance.now()
             console.log(t1 - t0)
-            arr.push(t1 - t0)
+            list.push(t1 - t0)
         }
-        console.log("AVERAGE", average(arr))
+        console.log(list)
+        console.log("AVERAGE", average(list))
     })()
 
 </script>

diff --git a/example/test/singrat_new_wasm.html b/example/test/singrat_new_wasm.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../../dist/ezpsy.js"></script>
+</head>
+<body>
+    <div id="sinGrat"></div>
+</body>
+<script>
+    const average = (arr) => {
+        let num = 0
+        arr.forEach(item => {
+            num += item
+        })
+        return num / arr.length
+    }
+    (async () => {
+        let ez = await ezpsy.init({
+            el: document.getElementById('sinGrat'),
+        });
+        const list = []
+        let a = new ezpsy.wasmSinGrating({
+            shape: {
+                x: window.innerWidth / 2,
+                y: window.innerHeight / 2,
+                r: 1280,
+                pixelsPerDegree: 57, 
+                spatialFrequency: 2,
+                angle: 0, 
+                contrast: 1, 
+                phase: 0,
+                level: 0.5,
+                gamma: 1
+            },
+            isNoise: true
+        })
+        for(let i = 0; i < 1; i++) {
+            const t0 = performance.now()
+            await a.pre_draw()
+            const t1 = performance.now()
+            console.log(t1 - t0)
+            list.push(t1 - t0)
+        }
+        console.log(list)
+        console.log("AVERAGE", average(list))
+    })()
+
+</script>
+</html>
diff --git a/example/test/singrat_wasm.html b/example/test/singrat_wasm.html
@@ -10,7 +10,6 @@
     <div id="sinGrat"></div>
 </body>
 <script>
-    // ez.add(a)
     const average = (arr) => {
         let num = 0
         arr.forEach(item => {
@@ -22,6 +21,7 @@
         let ez = await ezpsy.init({
             el: document.getElementById('sinGrat'),
         });
+        const list = []
         let a = new ezpsy.sinGrating({
             shape: {
                 x: window.innerWidth / 2,
@@ -37,34 +37,16 @@
             },
             isNoise: true
         })
-        const list = [];
-        for(let i = 0; i < 10; i++) {
+        for(let i = 0; i < 1000; i++) {
             const t0 = performance.now()
             await a.pre_draw()
             const t1 = performance.now()
             console.log(t1 - t0)
             list.push(t1 - t0)
         }
+        console.log(list)
         console.log("AVERAGE", average(list))
     })()
 
-
-    // const jsonString = JSON.stringify(list, null, 2);
-
-    // // 创建 Blob 对象
-    // const blob = new Blob([jsonString], { type: 'application/json' });
-
-    // // 生成 URL
-    // const url = URL.createObjectURL(blob);
-
-    // // 创建隐藏的 <a> 元素
-    // const b = document.createElement('a');
-    // b.href = url;
-    // b.download = 'data.json'; // 设置下载文件的文件名
-
-    // // 触发点击事件
-    // document.body.appendChild(b);
-    // b.click();
-
 </script>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ezpsy",
-    "version": "1.1.1",
+    "version": "1.1.3",
     "description": "脑科学、心理学实验设计",
     "main": "./dist/index.js",
     "types": "./dist/types/index.d.ts",

diff --git a/rollup.config.js b/rollup.config.js
@@ -65,7 +65,8 @@ module.exports = [
 
       wasm({
         sync: [
-          'static/singrat_bg.wasm'
+          'static/singrat_bg.wasm',
+          'static/singrat_bg_0.wasm'
         ]
       }),
       typescript(),  // 默认从 tsconfig加载数据

diff --git a/src/Graphic/sinGrat.ts b/src/Graphic/sinGrat.ts
@@ -56,8 +56,7 @@ export class sinGrat extends Elements{
             this.sinGrat = getNoiseSingrat(sh.r, sh.pixelsPerDegree, sh.spatialFrequency, sh.angle, sh.contrast, sh.phase, sh.level, sh.gamma)    
         }
     }
-    //绘制方法, 参数ctx为canvas.getContext('2d')
-    draw(){
+    async pre_draw() {
         let sh = this.shape;
         if(!this.isNoise)
             this.sinGrat = getSingrat(sh.r, sh.pixelsPerDegree, sh.spatialFrequency, sh.angle, sh.contrast, sh.phase, sh.gamma)
@@ -66,6 +65,10 @@ export class sinGrat extends Elements{
                 sh.level = 1
             this.sinGrat = getNoiseSingrat(sh.r, sh.pixelsPerDegree, sh.spatialFrequency, sh.angle, sh.contrast, sh.phase, sh.level, sh.gamma)    
         }
+    }
+    //绘制方法, 参数ctx为canvas.getContext('2d')
+    draw(){
+        let sh = this.shape;
         this.ctx.putImageData(this.sinGrat,this.shape.x - 1.5 * this.shape.r,this.shape.y - 1.5 * this.shape.r)
     }
     //给原有光栅加上噪声, 参数level为噪声等级

diff --git a/src/Graphic/singratWasm.ts b/src/Graphic/singratWasm.ts
@@ -0,0 +1,160 @@
+import { Shape,Opts,Style,nameStyle } from '../DataType/dataType'
+import { Elements } from '../Element';
+// import * as SG from '../../static/pkg/singrat'
+import * as TIME from '../Time/time'
+import { getWasm } from "../setWasm"
+import * as SG from '../setWasm'
+import * as SGW from "../initWasm"
+
+interface GratingShape extends Shape{
+    x: number
+    y: number
+    r: number
+    pixelsPerDegree?: number 
+    spatialFrequency?: number
+    timeFrequency?: number
+    angle?: number 
+    contrast?: number 
+    phase?: number
+    level?: number
+    gamma?: number
+}
+
+export interface GratingOpts extends Opts{
+    shape: GratingShape
+    style?: Style
+    isNoise?: boolean
+    time?: number
+}
+
+let nameId = 0;
+
+export class wasmSinGrating extends Elements{
+    readonly name?: nameStyle = {
+        name: "singrating" + nameId.toString(),
+        graphicId: nameId
+    }
+    param: Uint8Array;
+    width: number;
+    sinGrat: ImageData;        //光栅图片数据
+    imgDataList: Array<ImageData>;    //用于储存参与动画的图片
+    isNoise: boolean;
+    fps: number;
+    timeFrequency: number
+    constructor(opts: GratingOpts){
+        super();
+        this.shape = opts.shape;
+        let sh = this.shape;
+        this.width = 2*(sh.r/2+sh.r)+1;
+        this.sinGrat = new ImageData(this.width,this.width);
+        this.imgDataList = new Array<ImageData>();
+        this.isNoise = opts.isNoise;
+        this.shape.pixelsPerDegree = !this.shape.pixelsPerDegree ? 57 : this.shape.pixelsPerDegree
+        this.shape.spatialFrequency = !this.shape.spatialFrequency ?  2 : this.shape.spatialFrequency
+        this.shape.angle = !this.shape.angle ?  0 : this.shape.angle
+        this.shape.contrast = !this.shape.contrast ?  1 : this.shape.contrast
+        this.shape.phase = !this.shape.phase ?  0 : this.shape.phase
+        this.shape.level = !this.shape.level ?  0.5 : this.shape.level
+        this.shape.gamma = !this.shape.gamma ?  1 : this.shape.gamma
+        const timeFrequency = opts.shape.timeFrequency || 0
+        this.timeFrequency = timeFrequency
+        this.fps = 60
+
+        nameId++;
+    }
+    async pre_draw() {
+        const timeFrequency = this.timeFrequency
+        let sh = this.shape;
+        let param = []
+        if(!timeFrequency) {
+            // const t0 = performance.now()
+            if(this.isNoise) {
+                param = SGW.generate(sh.r,sh.pixelsPerDegree,sh.spatialFrequency,sh.angle,sh.contrast,sh.phase,sh.level,sh.gamma);
+            }
+            else
+                param = SG.pre_singrat(sh.r,sh.pixelsPerDegree,sh.spatialFrequency,sh.angle,sh.contrast,sh.phase,sh.gamma);
+            for (let i = 0, j = 0; i < this.sinGrat.data.length; i += 4, j++) {
+                this.sinGrat.data[i + 0] = param[j];
+                this.sinGrat.data[i + 1] = param[j];
+                this.sinGrat.data[i + 2] = param[j];
+                this.sinGrat.data[i + 3] = 255;
+            }
+            // const t1 = performance.now()
+            // console.log("TIME", t1 - t0)
+        } else {
+            let interval = 2*Math.PI*timeFrequency/this.fps;
+            let sh = this.shape;
+            const array = new Array(Math.ceil(this.fps)).fill(0);
+            if(this.isNoise)
+            {
+                await Promise.all(array.map(async (item, index) => {
+                    let param = SG.pre_noise_singrat(sh.r,sh.pixelsPerDegree,sh.spatialFrequency,sh.angle,sh.contrast,sh.phase+index*interval,sh.level,sh.gamma);
+                    const img = new Array()
+                    for (let i = 0, j = 0; i < this.sinGrat.data.length; i += 4, j++) {
+                        img[i + 0] = param[j];
+                        img[i + 1] = param[j];
+                        img[i + 2] = param[j];
+                        img[i + 3] = 255;
+                    }
+                    let imgData = new ImageData(new Uint8ClampedArray(img),this.width,this.width)
+                    this.imgDataList[index] = imgData
+                }))
+            }
+            else{
+                await Promise.all(array.map(async (item, index) => {
+                    const wasm = await getWasm()
+                    let param = SG.pre_singrat(sh.r,sh.pixelsPerDegree,sh.spatialFrequency,sh.angle,sh.contrast,sh.phase+index*interval,sh.gamma);
+                    const img = new Array()
+                    for (let i = 0, j = 0; i < this.sinGrat.data.length; i += 4, j++) {
+                        img[i + 0] = param[j];
+                        img[i + 1] = param[j];
+                        img[i + 2] = param[j];
+                        img[i + 3] = 255;
+                    }
+                    let imgData = new ImageData(new Uint8ClampedArray(img),this.width,this.width)
+                    this.imgDataList[index] = imgData
+                }))
+            }
+        }
+    }
+    async draw(time: number = 1000){
+        let sh = this.shape;
+        // const t0 = performance.now();
+        if(!this.timeFrequency) {
+            this.ctx.putImageData(this.sinGrat,sh.x-1.5*sh.r,sh.y-1.5*sh.r)
+        } else {
+            const fps = this.fps
+            let fpsNum = Math.floor(time / 1000 * fps);
+            let index = 0;
+            let sh = this.shape;
+            let that = this;
+            console.log(that.imgDataList[0]);
+            await (async ()=>{
+                for(let i = 0;i < fpsNum;i++) {
+                    index = i % fps;
+                    that.ctx.putImageData(that.imgDataList[index],sh.x-1.5*sh.r,sh.y-1.5*sh.r);
+                    await TIME.delay_frame(1);
+                    that.remove();
+                }
+            })();
+        }
+        // const t1 = performance.now()
+        // console.log("TIME DELAY", t1 - t0)
+    }
+    play(time: number = 1000) {
+        const fps = this.fps
+        let fpsNum = Math.floor(time / 1000 * fps);
+        let index = 0;
+        let sh = this.shape;
+        let that = this;
+        (async ()=>{
+            for(let i = 0;i < fpsNum;i++)
+            {
+                index = i % fps;
+                that.ctx.putImageData(that.imgDataList[index],sh.x-1.5*sh.r,sh.y-1.5*sh.r);
+                await TIME.delay_frame(1);
+                that.remove();
+            }
+        })()
+    }
+}
diff --git a/src/Judge/judge.ts b/src/Judge/judge.ts
@@ -17,6 +17,7 @@ import { playRandomDot, RandomDot } from '../Graphic/randomDot'
 import * as ezSinGrat from '../Graphic/sinGrat'
 import * as ezCanvas from '../Canvas/canvas'
 import { DlgContent } from '../Dialogue/dialogue0'
+import { wasmSinGrating } from '../ezpsy'
 
 export function judgeCanvasStyle(cStyle: canvasStyle):canvasStyle{
     if(!cStyle) 
@@ -187,12 +188,16 @@ export async function judgeElement(el: Elements|Group|Elements[],ctx: CanvasRend
     }
     else if(el instanceof ezSinGrat.sinGrat)
     {
-        (<ezSinGrat.sinGrat>el).draw();
+        (<ezSinGrat.sinGrat>el).pre_draw();
     }
     else if(el instanceof sinGrating){
         // console.dir("Add Success!");
         (<sinGrating>el).pre_draw();
     }
+    else if(el instanceof wasmSinGrating){
+        // console.dir("Add Success!");
+        (<wasmSinGrating>el).pre_draw();
+    }
     else if(el instanceof RandomDot)
     {
         playRandomDot(el,ctx);