Making a DragDrop class on as3 - class

I'm making a DragDrop class on as3. I'm trying to make movable movie clips "stick" to a target MovieClip. I've got the basic drag drop and positioning/sticking to work but when I try to create an "easing" effect using Enter Frame, somehow the movie clips move to 0 x and y position.
Here's the code that's working (without EnterFrame Event).
package {
public class DragDrop {
public var clip:MovieClip;
public var targ:MovieClip;
public var myHomeX:Number;
public var myHomeY:Number;
public var myFinalX:Number;
public var myFinalY:Number;
public function selectClip(clipV:MovieClip,targV:MovieClip):void {
clip = clipV;
targ = targV;
var myHomeX = clip.x;
var myHomeY = clip.y;
var myFinalX = targ.x;
var myFinalY = targ.y;
clip.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
clip.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
clip.addEventListener(MouseEvent.ROLL_OVER,rollOver);
clip.addEventListener(MouseEvent.ROLL_OUT,rollOut);
function startDragging(e:MouseEvent):void {
clip.startDrag();
clip.beingDragged = true;
clip.parent.setChildIndex(clip,clip.parent.numChildren - 1);
}
function stopDragging(e:MouseEvent):void {
clip.stopDrag();
clip.beingDragged = false;
var onTarget:MovieClip;
if (clip.dropTarget != null)
{
onTarget = e.target.dropTarget.parent;
}
else
{
onTarget = null;
}
if ((onTarget == targ))
{
clip.onTarget = true;
targ.gotoAndStop(2);
clip.x = myFinalX;
clip.y = myFinalY;
}
else
{
clip.onTarget = false;
targ.gotoAndStop(1);
clip.x = myHomeX;
clip.y = myHomeY;
}
}
function rollOver(e:MouseEvent) {
clipGlow.restart();
}
function rollOut(e:MouseEvent) {
clipGlow.reverse();
}
}
}
}
Here's the code that's not working (with EnterFrame Event).
package {
public class DragDrop {
public var clip:MovieClip;
public var targ:MovieClip;
public var clip:MovieClip;
public var targ:MovieClip;
public var myHomeX:Number;
public var myHomeY:Number;
public var myFinalX:Number;
public var myFinalY:Number;
public function selectClip(clipV:MovieClip,targV:MovieClip):void {
clip = clipV;
targ = targV;
var myHomeX = clip.x;
var myHomeY = clip.y;
var myFinalX = targ.x;
var myFinalY = targ.y;
clip.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
clip.addEventListener(MouseEvent.MOUSE_UP,stopDragging);
clip.addEventListener(MouseEvent.ROLL_OVER,rollOver);
clip.addEventListener(MouseEvent.ROLL_OUT,rollOut);
clip.addEventListener(Event.ENTER_FRAME,slide);
function startDragging(e:MouseEvent):void {
clip.startDrag();
clip.beingDragged = true;
clip.parent.setChildIndex(clip,clip.parent.numChildren - 1);
}
function stopDragging(e:MouseEvent):void {
clip.stopDrag();
clip.beingDragged = false;
var onTarget:MovieClip;
if (clip.dropTarget != null)
{
onTarget = e.target.dropTarget.parent;
}
else
{
onTarget = null;
}
if ((onTarget == targ))
{
clip.onTarget = true;
targ.gotoAndStop(2);
}
else
{
clip.onTarget = false;
targ.gotoAndStop(1);
}
}
function rollOver(e:MouseEvent) {
clipGlow.restart();
}
function rollOut(e:MouseEvent) {
clipGlow.reverse();
}
function slide(e:Event):void {
if (! clip.beingDragged && ! clip.onTarget)
{
clip.x -= clip.x - clip.myHomeX / 5;
clip.y -= clip.y - clip.myHomeY / 5;
clip.scaleX += (1 - clip.scaleX) / 5;
clip.scaleY += (1 - clip.scaleY) / 5;
}
else if (! clip.beingDragged && clip.onTarget)
{
clip.x -= clip.x - clip.myFinalX / 5;
clip.y -= clip.y - clip.myFinalY / 5;
clip.scaleX += (1.5 - clip.scaleX) / 5;
clip.scaleY += (1.5 - clip.scaleY) / 5;
}
}
}
}
}
Thanks in advance for any help. :)

If you do this:
var myHomeX = clip.x;
var myHomeY = clip.y;
var myFinalX = targ.x;
var myFinalY = targ.y;
Then maybe clip.myHomeX should be myHomeX only etc?
function slide(e:Event):void {
if (! clip.beingDragged && ! clip.onTarget)
{
clip.x -= clip.x -myHomeX / 5;
clip.y -= clip.y -myHomeY / 5;
clip.scaleX += (1 - clip.scaleX) / 5;
clip.scaleY += (1 - clip.scaleY) / 5;
}
else if (! clip.beingDragged && clip.onTarget)
{
clip.x -= clip.x -myFinalX / 5;
clip.y -= clip.y -myFinalY / 5;
clip.scaleX += (1.5 - clip.scaleX) / 5;
clip.scaleY += (1.5 - clip.scaleY) / 5;
}
}

Related

How to change the audio sample rate in Unity?

The default audio sample rate is 48000. Is it possible to change it to other values like 44100?
I log the value of AudioSettings.outputSampleRate and it shows 48000. But it doesn't seem possible to change that value.
Here is the code to change sample rate of Unity's AudioClip:
Most simple, but very rough
Averaging approach, but channels are get mixed
Averaging approach for each channel (best quality)
public static AudioClip SetSampleRateSimple(AudioClip clip, int frequency)
{
if (clip.frequency == frequency) return clip;
var samples = new float[clip.samples * clip.channels];
clip.GetData(samples, 0);
var samplesLength = (int)(frequency * clip.length) * clip.channels;
var samplesNew = new float[samplesLength];
var clipNew = AudioClip.Create(clip.name + "_" + frequency, samplesLength, clip.channels, frequency, false);
for (var i = 0; i < samplesLength; i++)
{
var index = (int) ((float) i * samples.Length / samplesLength);
samplesNew[i] = samples[index];
}
clipNew.SetData(samplesNew, 0);
return clipNew;
}
public static AudioClip SetSampleRateAverage(AudioClip clip, int frequency)
{
if (clip.frequency == frequency) return clip;
var samples = new float[clip.samples * clip.channels];
clip.GetData(samples, 0);
var samplesNewLength = (int) (frequency * clip.length) * clip.channels;
var samplesNew = new float[samplesNewLength];
var clipNew = AudioClip.Create(clip.name + "_" + frequency, samplesNewLength, clip.channels, frequency, false);
var index = 0;
var sum = 0f;
var count = 0;
for (var i = 0; i < samples.Length; i++)
{
var index_ = (int)((float)i / samples.Length * samplesNewLength);
if (index_ == index)
{
sum += samples[i];
count++;
}
else
{
samplesNew[index] = sum / count;
index = index_;
sum = samples[i];
count = 1;
}
}
clipNew.SetData(samplesNew, 0);
return clipNew;
}
public static AudioClip SetSampleRate(AudioClip clip, int frequency)
{
if (clip.frequency == frequency) return clip;
if (clip.channels != 1 && clip.channels != 2) return clip;
var samples = new float[clip.samples * clip.channels];
clip.GetData(samples, 0);
var samplesNewLength = (int) (frequency * clip.length) * clip.channels;
var clipNew = AudioClip.Create(clip.name + "_" + frequency, samplesNewLength, clip.channels, frequency, false);
var channelsOriginal = new List<float[]>();
var channelsNew = new List<float[]>();
if (clip.channels == 1)
{
channelsOriginal.Add(samples);
channelsNew.Add(new float[(int) (frequency * clip.length)]);
}
else
{
channelsOriginal.Add(new float[clip.samples]);
channelsOriginal.Add(new float[clip.samples]);
channelsNew.Add(new float[(int) (frequency * clip.length)]);
channelsNew.Add(new float[(int) (frequency * clip.length)]);
for (var i = 0; i < samples.Length; i++)
{
channelsOriginal[i % 2][i / 2] = samples[i];
}
}
for (var c = 0; c < clip.channels; c++)
{
var index = 0;
var sum = 0f;
var count = 0;
var channelSamples = channelsOriginal[c];
for (var i = 0; i < channelSamples.Length; i++)
{
var index_ = (int) ((float) i / channelSamples.Length * channelsNew[c].Length);
if (index_ == index)
{
sum += channelSamples[i];
count++;
}
else
{
channelsNew[c][index] = sum / count;
index = index_;
sum = channelSamples[i];
count = 1;
}
}
}
float[] samplesNew;
if (clip.channels == 1)
{
samplesNew = channelsNew[0];
}
else
{
samplesNew = new float[channelsNew[0].Length + channelsNew[1].Length];
for (var i = 0; i < samplesNew.Length; i++)
{
samplesNew[i] = channelsNew[i % 2][i / 2];
}
}
clipNew.SetData(samplesNew, 0);
return clipNew;
}

Get two offset points between two points

Hi I need help finding coordinate or points offset from two endpoints of a line. In my program, I would like to specify the two points and the offset. Then I need to calculate the two offset coordinates.
I worked something out using trigonometry but it only works in some cases and when the line is in the positive quadrant.
Here is an image describing what I need to find:
Points on line
Ok so I need to find X3,Y3 and X4,Y4 coordinates.
My method I followed:
Calculate angle:
Ang = atan((Y2 - Y1)/(X2 - X1))
To find X3:
X3 = X1 + Offset * Cos(Ang)
The same concept for Y3
The issue is that if the line is in a different quadrant the point info is not correct... Any help, please.
This question is a clear case for using 2d vector math. The idea is that we subtract p1 from p2 to give us a vector that describes the length and direction of the line. We then normalize this vector, such that it has a length of 1. If you then multiply this normalized vector with the number of units you'd like to move away from the end and add the result to the end-point, you'll have a new point.
Consider an example walking along the x axis:
p1 = 0,0
p2 = 10,0
dif = p2 - p1 = (10,0)
length is 10, so it's 10 times too long - we divide it by 10 to get a vector 1 unit long.
If we then move 5 times (1,0), we end up at 5,0 - 5 units away, bewdy!
Here's a function that achieves the same thing:
function calcOffsetPoint(x1,y1, x2,y2, distTowardsP2fromP1)
{
var p1 = new vec2d(x1,y1);
var p2 = new vec2d(x2,y2);
var delta = p2.sub(p1);
var dirVec = delta.clone();
dirVec.normalize();
dirVec.timesEquals(distTowardsP2fromP1);
var resultPoint = p1.add(dirVec);
return resultPoint;
}
As you can see, this makes use of something I've called vec2d. There's a copy of it in the following snippet:
"use strict";
function byId(id){return document.getElemetById(id)}
function newEl(tag){return document.createElement(tag)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
var end1 = new vec2d(0,0);
var end2 = new vec2d(10,0);
var midPoint = calcOffsetPoint(end1.x,end1.y, end2.x,end2.y, 5);
console.log( midPoint.toStringN(2) );
}
class vec2d
{
constructor(x=0, y=0)
{
this.mX = x;
this.mY = y;
}
get x(){return this.mX;}
set x(newX){this.mX = newX;}
get y(){return this.mY;}
set y(newY){this.mY = newY;}
add(other)
{
return new vec2d(this.x+other.x, this.y+other.y);
}
sub(other)
{
return new vec2d(this.x-other.x, this.y-other.y);
}
timesEquals(scalar)
{
this.x *= scalar;
this.y *= scalar;
return this;
}
divByEquals(scalar)
{
this.x /= scalar;
this.y /= scalar;
return this;
}
dotProd(other)
{
return this.x*other.x + this.y*other.y;
}
length()
{
return Math.hypot(this.x, this.y);
}
normalize()
{
this.divByEquals( this.length() );
return this;
}
perpendicular()
{
var tmp = this.x;
this.x = -this.y;
this.y = tmp;
return this;
}
clone()
{
return vec2d.clone(this);
}
static clone(other)
{
return new vec2d(other.x, other.y);
}
toString(){return `vec2d {x: ${this.x}, y: ${this.y}}`}
toStringN(n){return `vec2d {x: ${this.x.toFixed(n)}, y: ${this.y.toFixed(n)}}`}
}
function calcOffsetPoint(x1,y1, x2,y2, distTowardsP2fromP1)
{
var p1 = new vec2d(x1,y1);
var p2 = new vec2d(x2,y2);
var delta = p2.sub(p1);
var dirVec = delta.clone();
dirVec.normalize();
dirVec.timesEquals(distTowardsP2fromP1);
var resultPoint = p1.add(dirVec);
return resultPoint;
}
I had some spare time over the weekend, so put together a working demo of the image you posted. Have a play around. Make sure you run it in full-screen, so you can see the sliders that set the offsets for p3 and p4. Disregard the coordinate-system transformation stuff, that's just there to allow me to make an image the same dimensions as your image yet conveniently display it in a window with about 5% the area. The questions come from the exercise section of some old text-book I was reading over the weekend.
"use strict";
class vec2d
{
constructor(x=0,y=0)
{
this.x = x;
this.y = y;
}
abs()
{
this.x = Math.abs(this.x);
this.y = Math.abs(this.y);
return this;
}
add(vec1)
{
return new vec2d(this.x+vec1.x, this.y+vec1.y);
}
sub(vec1)
{
return new vec2d(this.x-vec1.x, this.y-vec1.y);
}
mul(scalar)
{
return new vec2d(this.x*scalar, this.y*scalar);
}
plusEquals(vec1)
{
this.x += vec1.x;
this.y += vec1.y;
return this;
}
minusEquals(vec1)
{
this.x -= vec1.x;
this.y -= vec1.y;
return this;
}
timesEquals(scalar)
{
this.x *= scalar;
this.y *= scalar;
return this;
}
divByEquals(scalar)
{
this.x /= scalar;
this.y /= scalar;
return this;
}
normalize()
{
var len = this.length;
this.x /= len;
this.y /= len;
return this;
}
get length()
{
//return Math.sqrt( (this.x*this.x)+(this.y*this.y) );
return Math.hypot( this.x, this.y );
}
set length(newLen)
{
var invLen = newLen / this.length;
this.timesEquals(invLen);
}
dotProd(vec1)
{
return this.x*vec1.x + this.y*vec1.y;
}
perp()
{
var tmp = this.x;
this.x = -this.y;
this.y = tmp;
return this;
}
wedge(other)
{ // computes an area for parallelograms
return this.x*other.y - this.y*other.x;
}
static clone(other)
{
var result = new vec2d(other.x, other.y);
return result;
}
clone() // clone self
{
return vec2d.clone(this);
}
setTo(other)
{
this.x = other.x;
this.y = other.y;
}
get(){ return {x:this.x, y:this.y}; }
toString(){ return `vec2d {x: ${this.x}, y: ${this.y}}` }
toStringN(n){ return `vec2d {x: ${this.x.toFixed(n)}, y: ${this.y.toFixed(n)}}` }
print(){console.log(this.toString())}
};
class mat3
{
static clone(other)
{
var result = new mat3();
other.elems.forEach(
function(el, index, collection)
{
result.elems[index] = el;
}
);
return result;
}
clone()
{
return mat3.clone(this);
}
constructor(a,b,c,d,e,f)
{
if (arguments.length < 6)
this.setIdentity();
else
this.elems = [a,b,0,c,d,0,e,f,1];
}
setIdentity()
{
this.elems = [1,0,0, 0,1,0, 0,0,1];
}
multiply(other, shouldPrepend)
{
var a, b, c = new mat3();
if (shouldPrepend === true)
{
a = other;
b = this;
}
else
{
a = this;
b = other;
}
c.elems[0] = a.elems[0]*b.elems[0] + a.elems[1]*b.elems[3] + a.elems[2]*b.elems[6];
c.elems[1] = a.elems[0]*b.elems[1] + a.elems[1]*b.elems[4] + a.elems[2]*b.elems[7];
c.elems[2] = a.elems[0]*b.elems[2] + a.elems[1]*b.elems[5] + a.elems[2]*b.elems[8];
// row 1
c.elems[3] = a.elems[3]*b.elems[0] + a.elems[4]*b.elems[3] + a.elems[5]*b.elems[6];
c.elems[4] = a.elems[3]*b.elems[1] + a.elems[4]*b.elems[4] + a.elems[5]*b.elems[7];
c.elems[5] = a.elems[3]*b.elems[2] + a.elems[4]*b.elems[5] + a.elems[5]*b.elems[8];
// row 2
c.elems[6] = a.elems[6]*b.elems[0] + a.elems[7]*b.elems[3] + a.elems[8]*b.elems[6];
c.elems[7] = a.elems[6]*b.elems[1] + a.elems[7]*b.elems[4] + a.elems[8]*b.elems[7];
c.elems[8] = a.elems[6]*b.elems[2] + a.elems[7]*b.elems[5] + a.elems[8]*b.elems[8];
for (var i=0; i<9; i++)
this.elems[i] = c.elems[i];
}
transformVec2s(pointList)
{
var i, n = pointList.length;
for (i=0; i<n; i++)
{
var x = pointList[i].x*this.elems[0] + pointList[i].y*this.elems[3] + this.elems[6];
var y = pointList[i].x*this.elems[1] + pointList[i].y*this.elems[4] + this.elems[7];
pointList[i].x = x;
pointList[i].y = y;
}
}
makeTransformedPoints(pointList)
{
var result = [];
for (var i=0,n=pointList.length;i<n;i++)
{
var x = pointList[i].x*this.elems[0] + pointList[i].y*this.elems[3] + this.elems[6];
var y = pointList[i].x*this.elems[1] + pointList[i].y*this.elems[4] + this.elems[7];
result.push( new vec2d(x,y) );
}
return result;
}
rotate(degrees, shouldPrepend)
{
var tmp = new mat3();
tmp.elems[0] = Math.cos( degrees/180.0 * Math.PI );
tmp.elems[1] = -Math.sin( degrees/180.0 * Math.PI );
tmp.elems[3] = -tmp.elems[1];
tmp.elems[4] = tmp.elems[0];
this.multiply(tmp, shouldPrepend);
}
scaleEach(scaleX, scaleY, shouldPrepend)
{
var tmp = new mat3();
tmp.elems[0] = scaleX;
tmp.elems[4] = scaleY;
this.multiply(tmp, shouldPrepend);
}
scaleBoth(scaleAmount, shouldPrepend)
{
var tmp = new mat3();
tmp.elems[0] = scaleAmount;
tmp.elems[4] = scaleAmount;
this.multiply(tmp, shouldPrepend);
}
translate(transX, transY, shouldPrepend)
{
var tmp = new mat3();
tmp.elems[6] = transX;
tmp.elems[7] = transY;
this.multiply(tmp, shouldPrepend);
}
determinant()
{
var result, a, b;
a = ( (this.elems[0]*this.elems[4]*this.elems[8])
+ (this.elems[1]*this.elems[5]*this.elems[6])
+ (this.elems[2]*this.elems[3]*this.elems[7]) );
b = ( (this.elems[2]*this.elems[4]+this.elems[6])
+ (this.elems[1]*this.elems[3]+this.elems[8])
+ (this.elems[0]*this.elems[5]+this.elems[7]) );
result = a - b;
return result;
}
isInvertible()
{
return (this.determinant() != 0);
}
invert()
{
var det = this.determinant();
if (det == 0)
return;
var a,b,c,d,e,f,g,h,i;
a = this.elems[0]; b = this.elems[1]; c = this.elems[2];
d = this.elems[3]; e = this.elems[4]; f = this.elems[5];
g = this.elems[6]; h = this.elems[7]; i = this.elems[8];
this.elems[0] = (e*i - f*h); this.elems[1] = -((b*i) - (c*h)); this.elems[2] = (b*f)-(c*e);
this.elems[3] = -(d*i - f*g); this.elems[4] = (a*i) - (c*g); this.elems[5] = -( (a*f) - (c*d) );
this.elems[6] = (d*h - e*g); this.elems[7] = -((a*h) - (b*g)); this.elems[8] = (a*e)-(b*d);
var detInv = 1.0 / det;
for (var i=0; i<9; i++)
this.elems[i] *= detInv;
return this;
}
reset()
{
this.setIdentity();
}
print()
{
var str = '';
for (var i=0; i<9; i++)
{
if (i && i%3==0)
str += "\n";
str += " " + this.elems[i].toFixed(5);
}
console.log(str);
}
}
function byId(id){return document.getElementById(id)}
function newEl(tag){return document.createElement(tag)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('output').addEventListener('mousemove', onMouseMove, false);
byId('slider1').addEventListener('input', onSliderInput, false);
byId('slider2').addEventListener('input', onSliderInput, false);
draw();
}
//(400-48)/400 = 0.88
var invMat, svgInvMat;
function onMouseMove(evt)
{
var mousePos = new vec2d(evt.offsetX,evt.offsetY);
var worldPos = mousePos.clone();
invMat.transformVec2s( [worldPos] );
byId('screenMouse').textContent = `screen: ${mousePos.x},${mousePos.y}`;
byId('worldMouse').textContent = `world: ${worldPos.x.toFixed(1)}, ${worldPos.y.toFixed(1)}`;
}
function onSliderInput(evt)
{
draw();
}
function updateSliderLabels()
{
byId('ofset1Output').textContent = byId('slider1').value;
byId('ofset2Output').textContent = byId('slider2').value;
}
function draw()
{
var can = byId('output');
var ctx = can.getContext('2d');
ctx.clearRect(0,0,can.width,can.height);
var orientMat = evaluateViewOrientationMatrix(0.06*can.width,can.height-24, 0,-1);
var scaleMat = computeWindowToViewPortMatrix(2052,1317, can.width,can.height);
var viewMat = scaleMat.clone();
viewMat.multiply(orientMat);
console.log('viewMat');
viewMat.print();
invMat = viewMat.clone().invert();
for (var i=0; i<9; i++)
invMat.elems[i] /= invMat.elems[8];
ctx.strokeStyle = '#fff';
var axisPts = [ new vec2d(0,1070), new vec2d(0,0), new vec2d(0.88*2052,0) ]; // xAxis line 88% of image width
var axis = viewMat.makeTransformedPoints(axisPts);
drawLine(axis[0].x,axis[0].y, axis[1].x,axis[1].y, ctx);
drawLine(axis[1].x,axis[1].y, axis[2].x,axis[2].y, ctx);
var lineEnds = [new vec2d(330,263), new vec2d(1455,809)];
var pts2 = viewMat.makeTransformedPoints(lineEnds);
drawCircle(pts2[0].x,pts2[0].y, 4, ctx);
drawCircle(pts2[1].x,pts2[1].y, 4, ctx);
drawLine(pts2[0].x,pts2[0].y, pts2[1].x,pts2[1].y, ctx);
var rawP3 = calcOffsetCoords(lineEnds[0].x,lineEnds[0].y, lineEnds[1].x,lineEnds[1].y, byId('slider1').value);
var rawP4 = calcOffsetCoords(lineEnds[1].x,lineEnds[1].y, lineEnds[0].x,lineEnds[0].y, byId('slider2').value);
var ofsPts = viewMat.makeTransformedPoints( [rawP3, rawP4] );
drawCircle(ofsPts[0].x,ofsPts[0].y, 4, ctx);
drawCircle(ofsPts[1].x,ofsPts[1].y, 4, ctx);
updateSliderLabels();
}
function calcOffsetCoords(x1,y1, x2,y2, offset)
{
var dx = x2 - x1;
var dy = y2 - y1;
var lineLen = Math.hypot(dx, dy);
var normDx=0, normDy=0;
if (lineLen != 0)
{
normDx = dx / lineLen;
normDy = dy / lineLen;
}
var resultX = x1 + (offset * normDx);
var resultY = y1 + (offset * normDy);
return {x:resultX,y:resultY};//new vec2d(resultX,resultY); //{x:resultX,y:resultY};
}
// Exercise 6-1:
// Write a procedure to implement the evaluateViewOrientationMatrix function that calculates the elements of the
// matrix for transforming world coordinates to viewing coordinates, given the viewing coordinate origin Porigin and
// the viewUp vector
function evalViewOrientMatrix(screenOriginX,screenOriginY, worldUpVectorX,worldUpVectorY)
{
var worldUp = {x: worldUpVectorX, y: worldUpVectorY};
var len = Math.hypot(worldUp.x, worldUp.y);
if (len != 0)
len = 1.0 / len;
worldUp.x *= len;
worldUp.y *= len;
var worldRight = {x: worldUp.y, y: -worldUp.x};
var rotMat = svg.createSVGMatrix();
rotMat.a = worldRight.x;
rotMat.b = worldRight.y;
rotMat.c = worldUp.x;
rotMat.d = worldUp.y;
var transMat = svg.createSVGMatrix();
transMat = transMat.translate(screenOriginX, screenOriginY);
var result = rotMat.multiply(transMat);
return result;
}
function evaluateViewOrientationMatrix(screenOriginX,screenOriginY, worldUpVectorX,worldUpVectorY)
{
var worldUp = new vec2d(worldUpVectorX, worldUpVectorY);
worldUp.normalize();
var worldRight = worldUp.clone().perp();
var rotMat = new mat3();
rotMat.elems[0] = worldRight.x; rotMat.elems[1] = worldRight.y;
rotMat.elems[3] = worldUp.x; rotMat.elems[4] = worldUp.y;
var transMat = new mat3();
transMat.translate(screenOriginX,screenOriginY);
var result = rotMat.clone();
result.multiply(transMat);
return result;
}
/*
0 1 2
3 4 5
6 7 8
translation
-----------
1 0 0
0 1 0
tX tY 1
scaling
---------
sX 0 0
0 sY 0
0 0 1
rotation
--------
cosX -sinX 0
sinX cosX 0
0 0 1
*/
// Exercise 6-2:
// Derive the window to viewport transformation equations 6-3 by first scaling the window to
// the size of the viewport and then translating the scaled window to the viewport position
function computeWindowToViewPortMatrix(windowWidth,windowHeight,viewPortWidth,viewPortHeight)
{
var result = new mat3();
result.scaleEach(viewPortWidth/windowWidth,viewPortHeight/windowHeight);
return result;
}
// returns an SVGMatrix
function compWnd2ViewMat(windowWidth,windowHeight,viewPortWidth,viewPortHeight)
{
var result = svg.createSVGMatrix();
return result.scaleNonUniform(viewPortWidth/windowWidth,viewPortHeight/windowHeight);
}
function drawLine(x1,y1,x2,y2,ctx)
{
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
function drawCircle(x,y,radius,ctx)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, (Math.PI/180)*360, false);
ctx.stroke();
ctx.closePath();
}
canvas
{
background-color: black;
}
.container
{
display: inline-block;
background-color: #888;
border: solid 4px #555;
}
#screenMouse, #worldMouse, .control
{
display: inline-block;
width: calc(513px/2 - 2*8px);
margin-left: 8px;
}
<body>
<div class='container'>
<canvas id='output' width='513' height='329'></canvas><br>
<div id='screenMouse'></div><div id='worldMouse'></div>
<div>
<div class='control'>P2 ofs: <input id='slider1' type='range' min='0' max='500' value='301'><span id='ofset1Output'></span></div>
<div class='control'>P3 ofs: <input id='slider2' type='range' min='0' max='500' value='285'><span id='ofset2Output'></span></div>
</div>
</div>
</body>

React Leaflet.Arc - Animate

I am trying create ReactLeafletArc Plugin with animation this is the code
if (!L) {
throw "Leaflet.js not included";
} else if (!arc || !arc.GreatCircle) {
throw "arc.js not included";
} else {
L.Polyline.Arc = function (from, to, options) {
from = L.latLng(from);
to = L.latLng(to);
var vertices = 10;
var arcOptions = {};
if (options) {
if (options.offset) {
arcOptions.offset = options.offset;
delete options.offset;
}
if (options.vertices) {
vertices = options.vertices;
delete options.vertices;
}
}
var generator = new arc.GreatCircle({ x: from.lng, y: from.lat }, { x: to.lng, y: to.lat });
var line = generator.Arc(vertices, arcOptions);
var latLngs = [];
var newLine = L.polyline(line.geometries[0].coords.map(function (c) {
return c.reverse();
}), options);
var totalLength = newLine._path.getTotalLength() * 4;
newLine._path.classList.add('path-start');
newLine._path.style.strokeDashoffset = totalLength;
newLine._path.style.strokeDasharray = totalLength;
setTimeout((function (path) {
return function () {
path.style.strokeDashoffset = 0;
};
})(newLine._path), 200);
return newLine;
};
}
I get error
Uncaught TypeError: Cannot read property 'getTotalLength' of undefined
with console.log(newLine) i can see that there is not _path.
NewClass
_bounds:L.LatLngBounds
_initHooksCalled:true
_latlngs:Array[100]
options:Object
__proto__:NewClass
But if i comment the part
var totalLength = newLine._path.getTotalLength() * 4;
newLine._path.classList.add('path-start');
newLine._path.style.strokeDashoffset = totalLength;
newLine._path.style.strokeDasharray = totalLength;
setTimeout((function (path) {
return function () {
path.style.strokeDashoffset = 0;
};
})(newLine._path), 200);
The line is created without animation and with console.log(newLine) i get this
NewClass
_bounds:L.LatLngBounds
_initHooksCalled:true
_latlngs:Array[100]
_leaflet_id:122
_map:NewClass
_mapToAdd:NewClass
_parts:Array[1]
_path:path
_pxBounds:L.Bounds
_renderer:NewClass
_rings:Array[1]
_zoomAnimated:true
options:Object
__proto__:NewClass
Any suggestion?

p5.js Pong game

I am really sorry for this stupid question but i don't know what i should do.
I tried so many things nothing works.
I try to calculate the distance between playerx and the width of playerx.
Can someone just correct my code so i can understand it please try not to explain it.
var playerx = 0;
var z = 0;
var playery = 750;
var ball = {
x: 400,
y: 400,
speedx: 2,
speedy: 3,
};
function setup() {
createCanvas(800,800);}
function draw(){
background(0);
ball1();
player();
click();
wall();
bounce();
hit();
}
function hit(){
var AA = dist(playerx,playery,player.x + 200,playery)
var BB = dist(ball.x,ball.y,AA,).
if (BB <= 20){
ball.speedy = -7;
}
}
function ball1(){
fill(255);
rect(ball.x,ball.y,20,20);
}
function bounce(){
ball.x += ball.speedx;
ball.y += ball.speedy;
if (ball.x>800){
ball.speedx = -2;
}else if (ball.x<0){
ball.speedx = 3;
}else if (ball.y>800){
ball.speedy = -3;
} else if(ball.y<0){
ball.speedy = 2;
}
}
function player(){
fill(255);
rect(playerx,playery,200,20);
}
function click(){
if(keyCode === RIGHT_ARROW) {
playerx += z;
z = 3;
} else if (keyCode === LEFT_ARROW){
playerx += z;
z = -3;
}
}
function wall(){
if (playerx > 600){
playerx = 600;
} else if (playerx < 1){
playerx = 1;
}
}
check this library, it contains the code for collision detection:
https://github.com/bmoren/p5.collide2D
var playerx = 400;
var z = 0;
var playery = 750;
var ball = {
x: 400,
y: 400,
speedx: 2,
speedy: 3,
};
function setup() {
createCanvas(800, 800);
}
function draw() {
background(0);
ball1();
player();
click();
wall();
bounce();
hit();
}
function hit() {
if(checkCollision(playerx, playery, 200, 20, ball.x, ball.y, 20)){
ball.speedy = -7;
console.log("colliding");
}
}
function ball1() {
fill(255);
ellipse(ball.x, ball.y, 20, 20);
}
function bounce() {
ball.x += ball.speedx;
ball.y += ball.speedy;
if (ball.x > 800) {
ball.speedx = -2;
} else if (ball.x < 0) {
ball.speedx = 3;
} else if (ball.y > 800) {
ball.speedy = -3;
} else if (ball.y < 0) {
ball.speedy = 2;
}
}
function player() {
fill(255);
rect(playerx, playery, 200, 20);
}
function click() {
if (keyCode === RIGHT_ARROW) {
playerx += z;
z = 3;
} else if (keyCode === LEFT_ARROW) {
playerx += z;
z = -3;
}
}
function wall() {
if (playerx > 600) {
playerx = 600;
} else if (playerx < 1) {
playerx = 1;
}
}
function checkCollision(rx, ry, rw, rh, cx, cy, diameter) {
//2d
// temporary variables to set edges for testing
var testX = cx;
var testY = cy;
// which edge is closest?
if (cx < rx){ testX = rx // left edge
}else if (cx > rx+rw){ testX = rx+rw } // right edge
if (cy < ry){ testY = ry // top edge
}else if (cy > ry+rh){ testY = ry+rh } // bottom edge
// // get distance from closest edges
var distance = dist(cx,cy,testX,testY)
// if the distance is less than the radius, collision!
if (distance <= diameter/2) {
return true;
}
return false;
};

Trouble looping and remove createjs "on" eventListener with "off"

Im trying to loop and remove eventlistener in createjs:
Actor = function() {
this.update = true;
this.offset;
this.instance;
this.member = function(a_obj) {
count++;
this._container = a_obj.container;
this._images = a_obj.images;
this._name = a_obj.name;
this._top = a_obj.top;
this._left = a_obj.left;
getCirTest = new createjs.Bitmap(loader.getResult(this._images));
getCirTest.name = this._name;
getCirTest.y = this._top + 10;
getCirTest.x = this._left + 10;
getCirTest.scaleX = 0.8;
getCirTest.scaleY = 0.8;
getCirTest.cursor = "pointer";
this._container.addChild(getCirTest);
holdsAllObj[count]=getCirTest;
console.log(holdsAllObj);
md = getCirTest.on("mousedown", activate);
function activate(evt) {
myCurrentTarget = evt.currentTarget;
xyCor.push(evt.currentTarget.x, evt.currentTarget.y);
this.parent.addChild(this);
this.offset = {
x: this.x - evt.stageX,
y: this.y - evt.stageY
};
}
pm = getCirTest.on("pressmove", move);
function move(evt) {
myintersect(evt.currentTarget, getCenterBitmap);
this.x = evt.stageX + this.offset.x;
this.y = evt.stageY + this.offset.y;
update = true;
}
cc = getCirTest.on("click", release);
function release (evt) {
countClicks++;
holdsAllObj[1].off("mousedown",md);
holdsAllObj[1].off("pressmove",pm);
console.log();
if (soundPlay == true && countClicks == 1) {
console.log("im true");
mySoundInstance = createjs.Sound.play(evt.currentTarget.name);
mySoundInstance.addEventListener("complete", createjs.proxy(handleSoundComplete, mySoundInstance));
} else {
createjs.Sound.stop(evt.currentTarget.name);
countClicks = 0;
}
console.log(countClicks);
update = true;
}
} //**** END: members ****
}
Its my getCirTest, whichs have an event:
md = getCirTest.on("mousedown", activate);
It´s create 10 instance of a bitmap object like this:
for (var circles = 0; circles < 10; circles++) {
var x = Math.round(container.width / 2 + radius * Math.cos(angle) - 150 / 2);
var y = Math.round(container.width / 2 + radius * Math.sin(angle) - 150 / 2);
var MP = new Actor();
MP.member({
container: container,
images: myFTMImages[circles],
name: myFTMNames[circles],
top: y,
left: x
});
angle += step;
}
My problem is that i would like to remove the eventListeners in a event:
cc = getCirTest.on("click", release);
function release (evt) {
}
Thats why i have put the bitmaps in a array:
holdsAllObj[count]=getCirTest;
And then tried the following:
cc = getCirTest.on("click", release);
function release (evt) {
for(var ijk=0;ijk<holdsAllObj.length;ijk++){
holdsAllObj[ijk].off("mousedown",md);
holdsAllObj[ijk].off("pressmove",pm);
}
}
unfortunately .. it´does not work for me ...
This looks like an issue with js scope. JS methods are called in the window context rather than the context they are created. You can use the createjs.proxy method to apply a scope to a method call, like this:
cc = getCirTest.on("click", release, this);
Hope that helps.