diff --git a/package-lock.json b/package-lock.json index 3120c6e..0188cd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "a11y-dialog": "^7.5.0", "docdash": "^1.2.0", "esbuild-plugin-glsl": "^1.0.5", + "gifuct-js": "^2.1.2", "howler": "^2.2.1", "log4javascript": "github:Ritzlgrmft/log4javascript", "pako": "^1.0.10", @@ -2090,6 +2091,14 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "node_modules/gifuct-js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/gifuct-js/-/gifuct-js-2.1.2.tgz", + "integrity": "sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==", + "dependencies": { + "js-binary-schema-parser": "^2.0.3" + } + }, "node_modules/glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -2208,6 +2217,11 @@ "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" }, + "node_modules/js-binary-schema-parser": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz", + "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5140,6 +5154,14 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "gifuct-js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/gifuct-js/-/gifuct-js-2.1.2.tgz", + "integrity": "sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==", + "requires": { + "js-binary-schema-parser": "^2.0.3" + } + }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -5234,6 +5256,11 @@ "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" }, + "js-binary-schema-parser": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz", + "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/src/test_experiment.js b/src/test_experiment.js index 021145f..28b212b 100644 --- a/src/test_experiment.js +++ b/src/test_experiment.js @@ -66,8 +66,16 @@ psychoJS.start({ expName: expName, expInfo: expInfo, configURL: "../config.json", - resources: [ - // { + resources: [ + { + name: "cool.gif", + path: "./test_resources/cool.gif" + }, + { + name: "delorean.gif", + path: "./test_resources/delorean.gif" + } + // { // name: "007", // path: "007.jpg" // }, @@ -126,17 +134,28 @@ async function experimentInit() { gaborClock = new util.Clock(); stims.push( - new visual.GratingStim({ - win : psychoJS.window, - name: 'morph', - tex: 'sin', - mask: undefined, - ori: 0, - size: [256, 512], - pos: [0, 0], - units: "pix", - depth: 0 - }) + // new visual.GratingStim({ + // win : psychoJS.window, + // name: 'morph', + // tex: 'sin', + // mask: undefined, + // ori: 0, + // size: [256, 512], + // pos: [0, 0], + // units: "pix", + // depth: 0 + // }) + new visual.GifStim({ + win : psychoJS.window, + name: 'morph', + image: "cool.gif", + mask: undefined, + ori: 0, + size: [512, 512], + pos: [0, 0], + units: "pix", + depth: 0 + }) ); window.stims = stims; diff --git a/src/test_resources/cool.gif b/src/test_resources/cool.gif new file mode 100644 index 0000000..47ae578 Binary files /dev/null and b/src/test_resources/cool.gif differ diff --git a/src/test_resources/delorean.gif b/src/test_resources/delorean.gif new file mode 100644 index 0000000..cd38909 Binary files /dev/null and b/src/test_resources/delorean.gif differ diff --git a/src/visual/GifStim.js b/src/visual/GifStim.js index 5a16a36..59dc135 100644 --- a/src/visual/GifStim.js +++ b/src/visual/GifStim.js @@ -344,6 +344,36 @@ export class GifStim extends util.mix(VisualStim).with(ColorMixin) } } + /** + * Setter for the size attribute. + * + * @param {undefined | null | number | number[]} size - the stimulus size + * @param {boolean} [log= false] - whether of not to log + */ + setSize(size, log = false) + { + // size is either undefined, null, or a tuple of numbers: + if (typeof size !== "undefined" && size !== null) + { + size = util.toNumerical(size); + if (!Array.isArray(size)) + { + size = [size, size]; + } + } + + this._setAttribute("size", size, log); + + if (this._pixi) + { + const size_px = util.to_px(size, this.units, this.win); + const scaleX = size_px[0] / this._pixi.texture.width; + const scaleY = size_px[1] / this._pixi.texture.height; + this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX; + this._pixi.scale.y = this.flipVert ? scaleY : -scaleY; + } + } + /** * Estimate the bounding box. * @@ -424,7 +454,6 @@ export class GifStim extends util.mix(VisualStim).with(ColorMixin) // a 0.5, 0.5 anchor is required for the mask to be aligned with the image this._pixi.mask.anchor.x = 0.5; this._pixi.mask.anchor.y = 0.5; - this._pixi.addChild(this._pixi.mask); } @@ -436,15 +465,6 @@ export class GifStim extends util.mix(VisualStim).with(ColorMixin) this._needPixiUpdate = true; return; } - - // const colorFilter = new PIXI.filters.ColorMatrixFilter(); - // colorFilter.matrix[0] = 2; - // colorFilter.matrix[6] = 1; - // colorFilter.matrix[12] = 1; - // // colorFilter.alpha = 1; - // colorFilter.blendMode = PIXI.BLEND_MODES.MULTIPLY; - // console.log(colorFilter.matrix); - // this._pixi.filters = [colorFilter]; } this._pixi.zIndex = -this._depth;