Variable and equation in SVG? - html

For example, imagine, I want to create a rectangle in SVG where the height is equal to (3*width)^2+width and add, at the bottom, a circle of radius width/2 (cx,cy, r = f( width)). Everything depends only of one parameter : the rectangle width.
I know it is possible to do it with javascript but I would like something more direct. Is it ccs variable, the only alternative ?
Thanks for answer.
Rq : I read this post (How do I define or reference a variable in SVG?) but it is rather old (from 2015) and it seems the situation has not so much evolved or I googled poorly.

Related

Is it possible to limit the device/camera movement in Facebook AR Studio?

For example there is an image using canvas with a rectangle in World Space. In doing so the camera/device can look around freely with the image placed into the "real" world. I wonder if there is a way to limit that "movement", spanning left to right, top to bottom but the device/camera view is limited at a certain point. Even if users turn the device/camera 360degrees, the view is stuck at a certain point. Say if the user pans left the camera/device stops at rotationY: 9, If right then stops at rotationY :-15, rotationX is stuck at 0.
I saw there's a BoundBox in the documentation but not sure what that is. There's a DeviceMotionModule but no idea how to use it. I don't know what the script example given is suppose to do.
Look into using DeviceMotion. https://sparkar.com/ar-studio/learn/documentation/reference/classes/devicemotionmodule
The script example rotates the 3d plane according to the rotation of the phone.
You will have to do some maths to position your objects according to rules and signal you get from DeviceMotion.
Using the reactive module you can access the "Clamp" method which is actually made to restrict values between two bounds. I recently found this out because I had a similar problem. From this page
clamp(x: ScalarSignal, min: ScalarSignal, max: ScalarSignal): ScalarSignal
Returns a signal with the value that is the value of the given x signal constrained to lie between the values of the given min and max signals.
Note: The behavior is undefined if min is greater than max.

hitTestObject not working properly AS3

How to make the objects detect each other without having to be so accurate? Currently, the program that I'm working on only allow the items to be matched when it is accurately matched at the upper left edge but i did not use hitTestPoint, I used hitTestObject. Below are my codes.
if (bin1.hitTestObject(item)){
updateShape(item, bin1);
If bin1 and item are both DisplayObjects, which I don't see how they couldn't be (DisplayObject is a base class that's extended by a bunch of others like MovieClip and Sprite) then you should be able to just do a little quick and dirty calculation yourself. The way you worded your question led me to believe that bin1 and item have their origins in the top left, so you should be able to use this code to see if the complete rectangles that both of them inhabit are hitting, which isn't all that accurate if the objects are rotated, but it sounds like that's almost what you're looking for:
if(Math.abs((bin1.x+bin1.width/2)-(item.x+item.width.2)) < bin1.width/2 + item.width/2 &&
Math.abs((bin1.y+bin1.height/2)-(item.y+item.height/2)) < bin1.height/2 + item.height/2)
updateShape(item,bin1);
If their origins aren't actually in the top left and are centered, remove all the .width/2 and .height/2 parts with the .x and .y parts in the parentheses. Hopefully this helps!

Setting QTextDocument painter's rectangle (where to paint)

I am painting on a window simple html using QTextDocument::drawContents(painter)
I want to do the drawing inside some margins in the window but I don't see a direct way to specify the target rectangle of the painting (in the painter/window).
I guess a few ways to do it:
Using the QTextDocuments::setMargin (although this does not allow different values for left/top.
Placing the html into an styled <div>
Applying a translation transform to the painter.
But all this seems a bit too much for what I want to do and I guess if I a missing something straight (as you do with QPainter::drawText where you tell the target rectangle)
Set the textWidth property to the width of the area where the text is supposed to fit. The clipping rectangle you pass to drawContents will cut the text off vertically if there's too much of it to fit; you can't do much about that of course.
So, this would be the missing function you're after:
void drawContents(QPainter * p, QTextDocument & doc, const QRectF & rect) {
p->save();
p->translate(rect.topLeft());
doc.setTextWidth(rect.width());
doc.drawContents(p, rect);
p->restore();
}
Yes, you do need to jump through a few hoops, that's why it needs to be factored out. It's perhaps lamentable that a similar overload of drawContents doesn't exist.

What is the purpose of setEulerZYX() in bullet physics?

I have been looking into the RagdollDemo and have kind of got stuck in the part where setEulerZYX() is used in basis matrix.
transform.setIdentity();
transform.setOrigin(btVector3(btScalar(-0.35), btScalar(1.45), btScalar(0.)));
transform.getBasis().setEulerZYX(0,0,M_PI_2);
m_bodies[BODYPART_LEFT_UPPER_ARM] = localCreateRigidBody(btScalar(1.), offset*transform, m_shapes[BODYPART_LEFT_UPPER_ARM]);
I did some research, yet couldn`t fully understand what exactly does this function do and why it is needed. Any help would be very nice.
It is a way (there are others) to set the rotation of the body.
http://bulletphysics.org/Bullet/BulletFull/classbtMatrix3x3.html#a0acce3d3502e34b4f34efd275c140d2a
So this is setting it to 0,0,M_PI_2, M_PI_2 being Pi/2 means this is a rotation on the x axis of 1/4 turn, i.e. 90 degrees.

Comparing two bitmaps against each other for match as3

I'm trying to position an image on top of another image based upon the make-up of the smaller image. The smaller image is a cut-out of a larger image and I need it to be positioned exactly on the larger image to make it look like a single image, but allow for separate filters and alphas to be applied. As the images are not simple rectangles or circles, but complex satellite images, I cannot simply redraw them in code. I have quite a few images and therefore do not feel like manually finding the position of each image every and hard setting them manually in actionscript. Is there any way for me to sample a small 5-10 sq. pixel area against the larger image and set the x and y values of the smaller image if a perfect match is found? All the images are in an array and iterating through them has already been set, I just need a way to sample and match pixels. My first guess was to loop the images pixel by pixel right and down, covering the whole bitmap and moving to the next child in the array once a match was found, leaving the matched child where it was when the perfect match was found.
I hope I understood your question correctly.
There may be an option that uses copypixels to achieve what you want. You can use the bitmapdata.rect value to determine the size of the sample you want, and loop through the bigger bitmap using thet rectangle and a moving point. Let's see if I can code this out...
function findBitmapInBitmap(tinyimg:BitmapData, largeimg:BitmapData):Point {
var rect:Rectangle = tinyimg.rect;
var xbound:uint = largeimg.rect.width;
var ybound:uint = largeimg.rect.height;
var imgtest:BitmapData = new BitmapData(tinyimg.rect.width, tinyimg.rect.height);
for (var ypos:uint = 0, y <= ybound, y++) {
for (var xpos:uint = 0, x <= xbound, x++) {
imgtest.copyPixels(largeimg, rect, new Point(xpos, ypos);
if (imgtest.compare(tinyimg) == 0) return new Point(xpos, ypos);
}
}
return new Point(-1,-1); // Dummy value, indicating no match.
}
Something along those lines should work - I'm sure there's room for code elegance and possible optimization. However, it seems like something like this method would be very slow, since you'd have to check each pixel for a match.
There is a better way. Split your big image into layers, and use the blitting technique to composite them at runtime. In your case, you could create a ground texture without satellites, and then create the satellites separately, and use the copyPixels method to place them whereever you want. Google "blitting in as3" to find some good tutorials. I'm currently working on a game project that uses this technique and it's a very good method.
Good luck!
Edit: Forgot to code in a default return statement. Using this method, you'd have to return an invalid point (like (-1,-1)) and check for it outside the function. Alternatively, you could just copy your small bitmap to the big one within the function, which would be much more logical, but I don't know your requirements.
You need to find pixel sequence in the big image. BitmapData.getPixel gives you pixel value. So get first pixel from small image, find it in big image, then continue comparing until you find full match. If you have trouble to code that, feel free to ask.
For the actual comparison, there's BitmapData.compare which returns the number 0 if the BitmapData objects are equivalent.