I am trying to add flip and flop functionality to this demo http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
I am trying by setting scalex = -1 , its works , but this demo also has resize functionality. So author finding height and width (on resizing the image) with scalex (please check below code).
After I am assigning scalex = -1 , the canvas height and width become 0. Is there any other was of doing this?
Canvas.Img.prototype.setFlop = function() {
this.width = this._oElement.width;
this.height = this._oElement.height;
this.scalex = -1
this.setImageCoords();
}
Canvas.Img.prototype.setImageCoords = function() {
this.left = parseInt(this.left);
this.top = parseInt(this.top);
this.currentWidth = parseInt(this.width) * this.scalex;
this.currentHeight = parseInt(this.height) * this.scalex;
this._hypotenuse = Math.sqrt(Math.pow(this.currentWidth / 2, 2) + Math.pow(this.currentHeight / 2, 2));
this._angle = Math.atan(this.currentHeight / this.currentWidth); ...
Related
Neither adding a SKShapeNode nor adding a SKLabelNode to a SKScene appears to work?
My gut guesses that I have a coordinate problem .. so here's the short code snippet which I have placed in my GameViewController class:
Note: I've added print statements below to debug.
FYI: I believe the values are wrong because they appear to be Frame coordinates, not Scene Coordinates. Frankly, I'm at a loss how to correct this error.
func addScoreLabelToScene(toScene: SKScene) {
if thisSceneName == "GameScene" {
let circleRadius = Double(100),
circleOffset = Double(30),
labelOffset = Double(10),
//
circlePosX = toScene.frame.size.width/2 - circleRadius - circleOffset,
labelPosX = circlePosX - labelOffset,
circlePosY = toScene.frame.size.height/2 + circleRadius + circleOffset,
labelPosY = circlePosY + labelOffset
// frame.size = 818, 1340
print("circlePosX = \(circlePosX)") // 279
print("circlePosY = \(circlePosY)") // 800
print("labelPosX = \(labelPosX)") // 269
print("labelPosY = \(labelPosY)") // 810
let circle = SKShapeNode(circleOfRadius: circleRadius)
circle.position = CGPoint(x: circlePosX, y: circlePosY)
circle.strokeColor = SKColor.red
circle.lineWidth = 2.0
circle.fillColor = SKColor.white
toScene.addChild(circle)
itsScoreLabel = SKLabelNode(fontNamed: "HelveticaNeue-Bold")
itsScoreLabel!.position = CGPoint(x: labelPosX, y: labelPosY)
itsScoreLabel!.text = "\(thisScore)"
itsScoreLabel!.fontSize = 20
itsScoreLabel!.fontColor = SKColor.blue
toScene.addChild(itsScoreLabel!)
}
} // addScoreLabelToScene
WRT to the above guess about a coordinate problem, I have hard-wired values for the PosX and PosY variables, but no success there.
In addition I have commented out both toScene.addChild() calls (one at a time) with no luck.
To complete the problem description, I have code elsewhere that adds several SKSpriteNodes with no problem.
So, what mammoth error am I committing?
As already commented above, I owe kelin above immeasurable thanks for motivating me to check my code again!
The central issue centers on specifying .zPosition = 10 or any very large number so the 2 Objects are not buried under everything.
So ... the NEW code which does it right:
func addScoreLabelToScene(toScene: SKScene) {
if thisSceneName == "GameScene" {
let circleRadius = Double(50), // lots of messing with #s involved
circleOffsetX = Double(25)
#if os(iOS)
let circleOffsetY = Double(105)
#elseif os(tvOS)
let circleOffsetY = Double(25)
#endif
// NR because we've centered the label within the circle.
// Nevertheless, as noted below, we still have to position it
// for horizontal + vertical alignment to take effect.
let labelOffsetX = Double(0),
labelOffsetY = Double(0),
//
circlePosX = toScene.frame.size.width/2 - circleRadius - circleOffsetX,
labelPosX = circlePosX - labelOffsetX,
circlePosY = toScene.frame.size.height/2 - circleRadius - circleOffsetY,
labelPosY = circlePosY - labelOffsetY
// added these print statements to debug:
// frame.size = 818, 1340
print("circlePosX = \(circlePosX)") // 334 = 818/2 - 50 - 25
print("circlePosY = \(circlePosY)") // 515 = 1340/2 - 50 - 105
print("labelPosX = \(labelPosX)") // 334 = 334 - 0
print("labelPosY = \(labelPosY)") // 515 = 515 - 0
let circle = SKShapeNode(circleOfRadius: circleRadius)
circle.zPosition = 10 // otherwise, the Object will be buried at the bottom
circle.position = CGPoint(x: circlePosX, y: circlePosY)
circle.strokeColor = SKColor.red
circle.lineWidth = 6.0
circle.fillColor = SKColor.white
toScene.addChild(circle)
itsScoreLabel = SKLabelNode(fontNamed: "HelveticaNeue-Bold")
itsScoreLabel!.zPosition = 10
// still gotta position it for alignment to take affect
itsScoreLabel!.position = CGPoint(x: labelPosX, y: labelPosY)
itsScoreLabel!.horizontalAlignmentMode = .center
itsScoreLabel!.verticalAlignmentMode = .center
itsScoreLabel!.text = "\(thisScore)"
itsScoreLabel!.fontSize = 30
itsScoreLabel!.fontColor = SKColor.blue
toScene.addChild(itsScoreLabel!)
}
} // addScoreLabelToScene
Hi so I'm stuck with a problem. My old projectile system would only shoot in 4 directions so when finding a new offset it was easy, I just had to inverse certain numbers
case "down":
xOffset = hitbox.xOffset;
yOffset = hitbox.yOffset;
width = hitbox.width;
height = hitbox.height;
break;
case "up":
xOffset = hitbox.xOffset;
yOffset = -hitbox.yOffset - hitbox.height;
width = hitbox.width;
height = hitbox.height;
break;
case "right":
xOffset = hitbox.yOffset;
yOffset = hitbox.xOffset;
width = hitbox.height;
height = hitbox.width;
break;
case "left":
xOffset = -hitbox.yOffset - hitbox.height;
yOffset = hitbox.xOffset;
width = hitbox.height;
height = hitbox.width;
break;
So this worked perfectly, but now the problem is I am no longer using rects for my hitbox and using circles, and i also now implemented 360 shooting.
I have a function that gets the x and y speed based on where I clicked but I do not have the function to get the new hitbox based on it.
newSpeed.x += speed * Math.cos(angle * Math.PI / 180);
newSpeed.y += speed * Math.sin(angle * Math.PI / 180);
How can I do something similar to get the new offset?
I'm creating a star field in a three.js scene. The code to generate the random positions of the stars is below. When the stars are rendered and the camera is pulled back enough from the center of the scene, there are a couple of visible "empty" tracks in the placement of the stars.
I'm assuming it has to do with the math in the _addStars method. Can anyone help me to tighten up the placement of the stars throughout the entire canvas?
Note: The canvas I have to work with is somewhere around an 8:1 ratio height:width. So just repositioning the camera is not an option.
UPDATE: I've added a fiddle to demonstrate the issue: https://jsfiddle.net/scottwatkins/5zjoLLpx/5/
/** Method to generate the stars and place them in the particle system */
_addStars: function () {
var starColors = [];
var starGeometry = new THREE.Geometry();
starGeometry.colors = starColors;
for (var i = 0; i < this.totalStars; i++) {
var x = 120 - Math.random() * 1040;
var y = 480 - Math.random() * 1040;
var z = 0 - Math.random() * 1040;
starGeometry.vertices.push( new THREE.Vector3( x, y, z ) );
var starColor = new THREE.Color(0xffffff);
starColor.setRGB(
.8 + Math.random() * .2,
.8 + Math.random() * .2,
.8 + Math.random() * .2);
starColors.push(starColor)
}
var starMaterial = new THREE.PointsMaterial( {
size: 2.0,
map: this.starTexture,
depthTest: false,
depthWrite: false,
blending: THREE.AdditiveBlending,
transparent : true,
vertexColors: true
} );
this.particleSystem = new THREE.Points( starGeometry, starMaterial );
this.scene.add(this.particleSystem);
}
It appears to be caused by Math.random() seems to work with THREE.Math.random16()
var x = 120 - THREE.Math.random16() * 1040;
var y = 480 - THREE.Math.random16() * 1040;
var z = 0 - THREE.Math.random16() * 1040;
Here's what it says in the docs for THREE.Math.random16():
Random float from 0 to 1 with 16 bits of randomness.
Standard Math.random() creates repetitive patterns when applied over larger space.
Updated fiddle: here
I use Mike Bostock's code to Center a map in d3 given a geoJSON object.
The important part of the code is this:
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/d/4090846/us.json", function(error, us) {
var states = topojson.feature(us, us.objects.states),
state = states.features.filter(function(d) { return d.id === 34; })[0];
/* ******************* AUTOCENTERING ************************* */
// Create a unit projection.
var projection = d3.geo.albers()
.scale(1)
.translate([0, 0]);
// Create a path generator.
var path = d3.geo.path()
.projection(projection);
// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(state),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
// Update the projection to use computed scale & translate.
projection
.scale(s)
.translate(t);
/* ******************* END *********************************** */
// Landmass
svg.append("path")
.datum(states)
.attr("class", "feature")
.attr("d", path);
// Focus
svg.append("path")
.datum(state)
.attr("class", "outline")
.attr("d", path);
});
For example, bl.ocks.org/4707858 zoom in such:
How to center and zoom on the target topo/geo.json AND adjust the svg frame dimensions so it fit a 5% margin on each size ?
Mike's explained
Basically, Mike's code states the frame dimensions via
var width = 960, height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
Once the frame is hardly set, then you check out the largest limiting ratio so your geojson shape fill your svg frame on its largest dimension relative to the svg frame dimensions widht & height. Aka, if the shape's width VS frame width or shape height VS frame height is the highest. This, in turn, help to recalculate the scale via 1/highest ratio so the shape is as small as required. It's all done via:
var b = path.bounds(state),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
// b as [[left, bottom], [right, top]]
// (b[1][0] - b[0][0]) = b.left - b.right = shape's width
// (b[1][3] - b[0][4]) = b.top - b.bottom = shape's height
Then, refreshing your scale and transition you get Mike Bostock's zoom:
New framing
To frame up around the geojson shape is actually a simplification of Mike's code. First, set temporary svg dimensions:
var width = 200;
var svg = d3.select("body").append("svg")
.attr("width", width);
Then, get the dimensions of the shapes and compute around it :
var b = path.bounds(state);
// b.s = b[0][1]; b.n = b[1][1]; b.w = b[0][0]; b.e = b[1][0];
b.height = Math.abs(b[1][1] - b[0][1]); b.width = Math.abs(b[1][0] - b[0][0]);
var r = ( b.height / b.width );
var s = 0.9 / (b.width / width); // dimension of reference: `width` (constant)
//var s = 1 / Math.max(b.width / width, b.height / height ); // dimension of reference: largest side.
var t = [(width - s * (b[1][0] + b[0][0])) / 2, (width*r - s * (b[1][1] + b[0][1])) / 2]; //translation
Refresh projection and svg's height:
var proj = projection
.scale(s)
.translate(t);
svg.attr("height", width*r);
It's done and fit the pre-allocated width=150px, find the needed height, and zoom properly. See http://bl.ocks.org/hugolpz/9643738d5f79c7b594d0
this is (I think) a relatively simple math question but I've spent a day banging my head against it and have only the dents and no solution...
I'm coding in actionscript 3 - the functionality is:
large image loaded at runtime. The bitmapData is stored and a smaller version is created to display on the available screen area (I may end up just scaling the large image since it is in memory anyway).
The user can create a rectangle hotspot on the smaller image (the functionality will be more complex: multiple rects with transparency: example a donut shape with hole, etc)
3 When the user clicks on the hotspot, the rect of the hotspot is mapped to the larger image and a new bitmap "callout" is created, using the larger bitmap data. The reason for this is so the "callout" will be better quality than just scaling up the area of the hotspot.
The image below shows where I am at so far- the blue rect is the clicked hotspot. In the upper left is the "callout" - copied from the larger image. I have the aspect ratio right but I am not mapping to the larger image correctly.
Ugly code below... Sorry this post is so long - I just figured I ought to provide as much info as possible. Thanks for any tips!
--trace of my data values
*source BitmapDada 1152 864
scaled to rect 800 600
scaled BitmapData 800 600
selection BitmapData 58 56
scaled selection 83 80
ratio 1.44
before (x=544, y=237, w=58, h=56)
(x=544, y=237, w=225.04, h=217.28)
*
Image here: http://i795.photobucket.com/albums/yy237/skinnyTOD/exampleST.jpg
public function onExpandCallout(event:MouseEvent):void{
if (maskBitmapData.getPixel32(event.localX, event.localY) != 0){
var maskClone:BitmapData = maskBitmapData.clone();
//amount to scale callout - this will vary/can be changed by user
var scale:Number =150 //scale percentage
var normalizedScale :Number = scale/=100;
var w:Number = maskBitmapData.width*normalizedScale;
var h:Number = maskBitmapData.height*normalizedScale;
var ratio:Number = (sourceBD.width /targetRect.width);
//creat bmpd of the scaled size to copy source into
var scaledBitmapData:BitmapData = new BitmapData(maskBitmapData.width * ratio, maskBitmapData.height * ratio, true, 0xFFFFFFFF);
trace("source BitmapDada " + sourceBD.width, sourceBD.height);
trace("scaled to rect " + targetRect.width, targetRect.height);
trace("scaled BitmapData", bkgnImageSprite.width, bkgnImageSprite.height);
trace("selection BitmapData", maskBitmapData.width, maskBitmapData.height);
trace("scaled selection", scaledBitmapData.width, scaledBitmapData.height);
trace("ratio", ratio);
var scaledBitmap:Bitmap = new Bitmap(scaledBitmapData);
var scaleW:Number = sourceBD.width / scaledBitmapData.width;
var scaleH:Number = sourceBD.height / scaledBitmapData.height;
var scaleMatrix:Matrix = new Matrix();
scaleMatrix.scale(ratio,ratio);
var sRect:Rectangle = maskSprite.getBounds(bkgnImageSprite);
var sR:Rectangle = sRect.clone();
var ss:Sprite = new Sprite();
ss.graphics.lineStyle(8, 0x0000FF);
//ss.graphics.beginFill(0x000000, 1);
ss.graphics.drawRect(sRect.x, sRect.y, sRect.width, sRect.height);
//ss.graphics.endFill();
this.addChild(ss);
trace("before " + sRect);
w = uint(sRect.width * scaleW);
h = uint(sRect.height * scaleH);
sRect.inflate(maskBitmapData.width * ratio, maskBitmapData.height * ratio);
sRect.offset(maskBitmapData.width * ratio, maskBitmapData.height * ratio);
trace(sRect);
scaledBitmapData.copyPixels(sourceBD, sRect, new Point());
addChild(scaledBitmap);
scaledBitmap.x = offsetPt.x;
scaledBitmap.y = offsetPt.y;
}
}
Thanks!
public function onExpandCallout(event:MouseEvent):void{
// TODO: build this on startup or only on click? Speed vs memory
if (calloutState == true) return;
if (maskBitmapData.getPixel32(event.localX, event.localY) != 0){
calloutState = true;
//create bitmap from source using scaled selection rect
var ratio:Number = (sourceBMD.width /targetRect.width);
var sRect:Rectangle = hotSpotSprite.getBounds(bkgnImageSprite);
var destRect:Rectangle = new Rectangle(sRect.x * ratio, sRect.y * ratio, sRect.width * ratio, sRect.height * ratio);
calloutBitmapData = new BitmapData(destRect.width, destRect.height, true, 0xFFFFFFFF);
calloutBitmap = new Bitmap(calloutBitmapData);
//-- scale alpha mask
var scaledMaskBitmapData:BitmapData = new BitmapData(destRect.width, destRect.height, true, 0x00000000);
var maskScale:Number = scaledMaskBitmapData.width / maskBitmapData.width;
var mMatrix:Matrix = new Matrix(maskScale, 0, 0, maskScale);
scaledMaskBitmapData.draw(maskBitmapData,mMatrix,null,null,null, false);
// copy source with scaled alpha
calloutBitmapData.copyPixels(sourceBMD, destRect, new Point(), scaledMaskBitmapData, new Point());
scaledMaskBitmapData = null;
// apply filter to bitmap
var myDropShadowFilter:DropShadowFilter = new DropShadowFilter();
myDropShadowFilter.distance = 12;
myDropShadowFilter.alpha = .3
myDropShadowFilter.strength = 1;
myDropShadowFilter.blurX = 8;
myDropShadowFilter.blurY = 8;
calloutBitmap.filters = [myDropShadowFilter];
//place on screen
calloutSprite = new Sprite();
calloutSprite.addChild(calloutBitmap)
calloutSprite.x = offsetPt.x;
calloutSprite.y = offsetPt.y;
// ADD TO PARENT DisplayContainer
calloutLayer.addChild(calloutSprite);
// calloutSprite.scaleX = 2;
// calloutSprite.scaleY = 2;
calloutSprite.doubleClickEnabled = true;
calloutSprite.addEventListener(MouseEvent.DOUBLE_CLICK, onCollapseCallout);
calloutSprite.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
calloutSprite.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
}
}