diff --git a/src/core/core.js b/src/core/core.js index e63846237a..5b09c1bd14 100644 --- a/src/core/core.js +++ b/src/core/core.js @@ -345,9 +345,9 @@ var p5 = function(sketch, node, sync) { } this._setProperty('frameCount', this.frameCount + 1); + this.redraw(); this._updateMouseCoords(); this._updateTouchCoords(); - this.redraw(); this._frameRate = 1000.0/(now - this._lastFrameTime); this._lastFrameTime = now; } diff --git a/src/events/mouse.js b/src/events/mouse.js index 8c185fdeb5..ae6f11e956 100644 --- a/src/events/mouse.js +++ b/src/events/mouse.js @@ -13,15 +13,12 @@ var p5 = require('../core/core'); var constants = require('../core/constants'); /* - * These are helper vars that store the mouseX and mouseY vals - * between the time that a mouse event happens and the next frame - * of draw. This is done to deal with the asynchronicity of event - * calls interacting with the draw loop. When a mouse event occurs - * the _nextMouseX/Y vars are updated, then on each call of draw, mouseX/Y - * and pmouseX/Y are updated using the _nextMouseX/Y vals. + * This is a flag which is false until the first time + * we receive a mouse event. The pmouseX and pmouseY + * values will match the mouseX and mouseY values until + * this interaction takes place. */ -p5.prototype._nextMouseX = 0; -p5.prototype._nextMouseY = 0; +p5.prototype._hasMouseInteracted = false; /** * The system variable mouseX always contains the current horizontal @@ -312,27 +309,32 @@ p5.prototype.mouseIsPressed = false; p5.prototype.isMousePressed = false; // both are supported p5.prototype._updateNextMouseCoords = function(e) { + var x = this.mouseX; + var y = this.mouseY; if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend' || e.touches) { - this._setProperty('_nextMouseX', this._nextTouchX); - this._setProperty('_nextMouseY', this._nextTouchY); - } else { - if(this._curElement !== null) { - var mousePos = getMousePos(this._curElement.elt, e); - this._setProperty('_nextMouseX', mousePos.x); - this._setProperty('_nextMouseY', mousePos.y); - } + x = this.touchX; + y = this.touchY; + } else if(this._curElement !== null) { + var mousePos = getMousePos(this._curElement.elt, e); + x = mousePos.x; + y = mousePos.y; } + this._setProperty('mouseX', x); + this._setProperty('mouseY', y); this._setProperty('winMouseX', e.pageX); this._setProperty('winMouseY', e.pageY); + if (!this._hasMouseInteracted) { + // For first draw, make previous and next equal + this._updateMouseCoords(); + this._setProperty('_hasMouseInteracted', true); + } }; p5.prototype._updateMouseCoords = function() { this._setProperty('pmouseX', this.mouseX); this._setProperty('pmouseY', this.mouseY); - this._setProperty('mouseX', this._nextMouseX); - this._setProperty('mouseY', this._nextMouseY); this._setProperty('pwinMouseX', this.winMouseX); this._setProperty('pwinMouseY', this.winMouseY); }; diff --git a/src/events/touch.js b/src/events/touch.js index 626b55a0ff..920df86855 100644 --- a/src/events/touch.js +++ b/src/events/touch.js @@ -10,15 +10,12 @@ var p5 = require('../core/core'); /* - * These are helper vars that store the touchX and touchY vals - * between the time that a mouse event happens and the next frame - * of draw. This is done to deal with the asynchronicity of event - * calls interacting with the draw loop. When a touch event occurs - * the _nextTouchX/Y vars are updated, then on each call of draw, touchX/Y - * and ptouchX/Y are updated using the _nextMouseX/Y vals. + * This is a flag which is false until the first time + * we receive a touch event. The ptouchX and ptouchY + * values will match the touchX and touchY values until + * this interaction takes place. */ -p5.prototype._nextTouchX = 0; -p5.prototype._nextTouchY = 0; +p5.prototype._hasTouchInteracted = false; /** * The system variable touchX always contains the horizontal position of @@ -77,16 +74,18 @@ p5.prototype.touches = []; p5.prototype.touchIsDown = false; p5.prototype._updateNextTouchCoords = function(e) { + var x = this.touchX; + var y = this.touchY; if(e.type === 'mousedown' || e.type === 'mousemove' || e.type === 'mouseup' || !e.touches) { - this._setProperty('_nextTouchX', this._nextMouseX); - this._setProperty('_nextTouchY', this._nextMouseY); + x = this.mouseX; + y = this.mouseY; } else { if(this._curElement !== null) { var touchInfo = getTouchInfo(this._curElement.elt, e, 0); - this._setProperty('_nextTouchX', touchInfo.x); - this._setProperty('_nextTouchY', touchInfo.y); + x = touchInfo.x; + y = touchInfo.y; var touches = []; for(var i = 0; i < e.touches.length; i++){ @@ -95,13 +94,18 @@ p5.prototype._updateNextTouchCoords = function(e) { this._setProperty('touches', touches); } } + this._setProperty('touchX', x); + this._setProperty('touchY', y); + if (!this._hasTouchInteracted) { + // For first draw, make previous and next equal + this._updateTouchCoords(); + this._setProperty('_hasTouchInteracted', true); + } }; p5.prototype._updateTouchCoords = function() { this._setProperty('ptouchX', this.touchX); this._setProperty('ptouchY', this.touchY); - this._setProperty('touchX', this._nextTouchX); - this._setProperty('touchY', this._nextTouchY); }; function getTouchInfo(canvas, e, i) {