diff --git a/blocks.js b/blocks.js index da5e9294..65ab90be 100644 --- a/blocks.js +++ b/blocks.js @@ -918,8 +918,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) { negative : ['negative'], comic: ['comic'], duplicate: ['duplicate'], - confetti: ['confetti'], - }, + confetti: ['confetti'] + }, true ); part.setContents(['ghost']); diff --git a/objects.js b/objects.js index 7d6ce148..81ce072b 100644 --- a/objects.js +++ b/objects.js @@ -1292,11 +1292,11 @@ SpriteMorph.prototype.init = function (globals) { this.idx = 0; // not to be serialized (!) - used for de-serialization this.wasWarped = false; // not to be serialized, used for fast-tracking - this.graphicsValues = { 'negative': 0, //dictionary of all the orignal values - 'fisheye': 0, - 'whirl': 0, - 'pixelate': 0, - 'mosaic': 0, + this.graphicsValues = { 'negative': 0, + 'fisheye': 0, + 'whirl': 0, + 'pixelate': 0, + 'mosaic': 0, 'brightness': 0, 'color': 0, 'comic': 0, @@ -1431,7 +1431,7 @@ SpriteMorph.prototype.drawNew = function () { ctx.scale(this.scale * stageScale, this.scale * stageScale); ctx.translate(shift.x, shift.y); ctx.rotate(radians(facing - 90)); - ctx.drawImage(pic.contents, 0, 0); + ctx.drawImage(pic.contents, 0, 0); // apply graphics effects to image this.image = this.applyGraphicsEffects(this.image); @@ -2847,13 +2847,14 @@ SpriteMorph.prototype.changeScale = function (delta) { this.setScale(this.getScale() + (+delta || 0)); }; -// Spritemorph graphics effects +// Spritemorph graphic effects SpriteMorph.prototype.graphicsChanged = function () { var myself = this; return Object.keys(this.graphicsValues).some( - function(any) { - return myself.graphicsValues[any] < 0 || myself.graphicsValues[any] > 0; + function (any) { + return myself.graphicsValues[any] < 0 || + myself.graphicsValues[any] > 0; } ); }; @@ -2861,103 +2862,106 @@ SpriteMorph.prototype.graphicsChanged = function () { SpriteMorph.prototype.applyGraphicsEffects = function (canvas) { // For every effect: apply transform of that effect(canvas, stored value) // The future: write more effects here + var ctx, imagedata, pixels, newimagedata; function transform_negative(p, value) { + var i, rcom, gcom, bcom; if (value !== 0) { - for (i = 0; i < p.length; i = i + 4) { - var rcom = 255 - p[i + 0] - var gcom = 255 - p[i + 1] - var bcom = 255 - p[i + 2] + for (i = 0; i < p.length; i += 4) { + rcom = 255 - p[i]; + gcom = 255 - p[i + 1]; + bcom = 255 - p[i + 2]; - if (p[i + 0] < rcom) { //check if current number less than the complement. if so, then - p[i + 0] = p[i + 0] + value - } else if (p[i + 0] > rcom) { - p[i + 0] = p[i + 0] - value //or else decrease towards it + if (p[i] < rcom) { //compare to the complement + p[i] += value; + } else if (p[i] > rcom) { + p[i] -= value; } if (p[i + 1] < gcom) { - p[i + 1] = p[i + 1] + value + p[i + 1] += value; } else if (p[i + 1] > gcom) { - p[i + 1] = p[i + 1] - value + p[i + 1] -= value; } if (p[i + 2] < bcom) { - p[i + 2] = p[i + 2] + value + p[i + 2] += value; } else if (p[i + 2] > bcom) { - p[i + 2] = p[i + 2] - value - }; - }; - }; + p[i + 2] -= value; + } + } + } return p; - }; + } function transform_brightness(p, value) { + var i; if (value !== 0) { for (i = 0; i < p.length; i += 4) { - p[i+0] = p[i+0] + value; //255 = 100% of this color. 255 everything = white. - p[i+1] = p[i+1] + value; //if value is negative, add more value to p. if value is positive, subtract value from p - p[i+2] = p[i+2] + value; - p[i+3] = p[i+3]; - }; - }; + p[i] += value; //255 = 100% of this color + p[i + 1] += value; + p[i + 2] += value; + } + } return p; - }; + } function transform_comic(p, value) { + var i; if (value !== 0) { for (i = 0; i < p.length; i += 4) { - var frequency = value; - p[i + 0] = p[i + 0] + Math.sin(i * frequency) * 127 + 128 - p[i + 1] = p[i + 1] + Math.sin(i * frequency) * 127 + 128 - p[i + 2] = p[i + 2] + Math.sin(i * frequency) * 127 + 128 - p[i + 3] = p[i + 3]; - }; - }; - return p; - }; + p[i] += Math.sin(i * value) * 127 + 128; + p[i + 1] += Math.sin(i * value) * 127 + 128; + p[i + 2] += Math.sin(i * value) * 127 + 128; + } + } + return p; + } function transform_duplicate(p, value) { + var i; if (value !== 0) { for (i = 0; i < p.length; i += 4) { - p[i + 0] = p[i * value + 0] - p[i + 1] = p[i * value + 1] - p[i + 2] = p[i * value + 2] + p[i] = p[i * value]; + p[i + 1] = p[i * value + 1]; + p[i + 2] = p[i * value + 2]; p[i + 3] = p[i * value + 3]; - }; - }; + } + } return p; - }; + } function transform_confetti(p, value) { + var i; if (value !== 0) { - for (i = 0; i < p.length; i++) { - p[i] = Math.sin(value * p[i]) * 127 + p[i] - }; - }; + for (i = 0; i < p.length; i += 1) { + p[i] = Math.sin(value * p[i]) * 127 + p[i]; + } + } return p; - }; + } - if (this.graphicsChanged()) { //operates image pixel manipulation if graphicschanged = true. - ctx = canvas.getContext("2d"); + if (this.graphicsChanged()) { + ctx = canvas.getContext("2d"); imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height); pixels = imagedata.data; - // for each effect, do a transform. at any given time, a sprite should wear all 7 effects - /*pixels = transform_whirl(pixels, this.graphicsValues['whirl']);*/ - pixels = transform_negative(pixels, this.graphicsValues['negative']); - pixels = transform_brightness(pixels, this.graphicsValues['brightness']); - pixels = transform_comic(pixels, this.graphicsValues['comic']); - /*pixels = transform_pixelate(pixels, this.graphicsValues['pixelate']);*/ - pixels = transform_duplicate(pixels, this.graphicsValues['duplicate']); - /*pixels = transform_color(pixels, this.graphicsValues['color']);*/ - /*pixels = transform_fisheye(pixels, this.graphicsValues['fisheye']);*/ - pixels = transform_confetti(pixels, this.graphicsValues['confetti']); - - //the last object will have all the transformations done on it - newimagedata = ctx.createImageData(imagedata); //make new imgdata object - newimagedata.data.set(pixels); //add transformed pixels - ctx.putImageData(newimagedata, 0, 0); - }; + //A sprite should wear all 7 effects at once + /*pixels = transform_whirl(pixels, this.graphicsValues.whirl);*/ + pixels = transform_negative(pixels, this.graphicsValues.negative); + pixels = transform_brightness(pixels, this.graphicsValues.brightness); + pixels = transform_comic(pixels, this.graphicsValues.comic); + /*pixels = transform_pixelate(pixels, this.graphicsValues.pixelate);*/ + pixels = transform_duplicate(pixels, this.graphicsValues.duplicate); + /*pixels = transform_color(pixels, this.graphicsValues.color);*/ + /*pixels = transform_fisheye(pixels, this.graphicsValues.fisheye);*/ + pixels = transform_confetti(pixels, this.graphicsValues.confetti); - return canvas; //for each effect, apply the transformation on the image we receive + //the last object will have all the transformations done on it + newimagedata = ctx.createImageData(imagedata); //make imgdata object + newimagedata.data.set(pixels); //add transformed pixels + ctx.putImageData(newimagedata, 0, 0); + } + + return canvas; }; SpriteMorph.prototype.setEffect = function (effect, value) { @@ -2965,8 +2969,8 @@ SpriteMorph.prototype.setEffect = function (effect, value) { if (eff === 'ghost') { this.alpha = 1 - Math.min(Math.max(+value || 0, 0), 100) / 100; } else { - this.graphicsValues[eff] = value; //changes the value of the dictionary - }; + this.graphicsValues[eff] = value; + } this.drawNew(); this.changed(); }; @@ -2978,16 +2982,19 @@ SpriteMorph.prototype.getGhostEffect = function () { SpriteMorph.prototype.changeEffect = function (effect, value) { var eff = effect instanceof Array ? effect[0] : null; if (eff === 'ghost') { - this.setEffect(effect, this.getGhostEffect() + (+value || 0)); //special for ghost because of alpha value + this.setEffect(effect, this.getGhostEffect() + (+value || 0)); } else { this.setEffect(effect, this.graphicsValues[eff] + value); - }; + } }; SpriteMorph.prototype.clearEffects = function () { - for (var effect in this.graphicsValues) { - this.setEffect([effect], 0); - }; + var effect; + for (effect in this.graphicsValues) { + if (this.graphicsValues.hasOwnProperty(effect)) { + this.setEffect([effect], 0); + } + } this.setEffect(['ghost'], 0); }; @@ -4141,17 +4148,17 @@ StageMorph.prototype.init = function (globals) { this.trailsCanvas = null; this.isThreadSafe = false; - this.graphicsValues = { 'negative': 0, //dictionary of all the original values - 'fisheye': 0, - 'whirl': 0, - 'pixelate': 0, - 'mosaic': 0, + this.graphicsValues = { 'negative': 0, + 'fisheye': 0, + 'whirl': 0, + 'pixelate': 0, + 'mosaic': 0, 'brightness': 0, 'color': 0, 'comic': 0, 'duplicate': 0, 'confetti': 0 - }; + }; StageMorph.uber.init.call(this); @@ -4209,15 +4216,15 @@ StageMorph.prototype.setScale = function (number) { StageMorph.prototype.drawNew = function () { var ctx; StageMorph.uber.drawNew.call(this); - if (this.costume) { + if (this.costume) { ctx = this.image.getContext('2d'); ctx.scale(this.scale, this.scale); - ctx.drawImage( - this.costume.contents, + ctx.drawImage( + this.costume.contents, (this.width() / this.scale - this.costume.width()) / 2, - (this.height() / this.scale - this.costume.height()) / 2 + (this.height() / this.scale - this.costume.height()) / 2 ); - this.image = this.applyGraphicsEffects(this.image) //apply graphics effects to this image. + this.image = this.applyGraphicsEffects(this.image); } };