I'm trying to use the AsciiEffect.js && the CSS3DRenderer.js in combination, but don't know if that's possible without some finagling... here's the idea
var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.CSS3DRenderer();
effect = new THREE.AsciiEffect( renderer );
effect.setSize( W, H );
document.body.appendChild( effect.domElement );
but that doesn't work... here's the problem, it's my understanding the AsciiEffect script uses the canvas renderer... I'm not entirely sure how the CSS3DRenderer works (beyond my skill set)... but in theory this seems like it should be possible... no? I assume it involves making some changes to either or...
No, they're not. AsciiEffect only works with canvas-based renderers: CanvasRenderer, SoftwareRenderer and WebGLRenderer.
Related
I'm new to GameMaker, and to making games, for my second game ever I was just going to use GameMakers built in physics. It's a RPG and I'm having lot's of trouble getting the guy to shoot the bullet. I can get the bullet to be placed in the room and at the angle it needs to be at. You could normally then just use the objectnamehere.speed = to what ever you want your speed to be. But! using physics you could use the phy.speed but that's a read only variable. So i half to use the phy_speed_x and phy_speed_y. But how do I get it to shoot in the direction the bullet object is? Here's the code I have so far.
// Player shoot
var shootButton = mouse_check_button_pressed(mb_left);
var bulletSpeed = 10;
if (shootButton) {
bullet = instance_create(ot_player.x, ot_player.y, ot_bullet);
bullet.phy_rotation = phy_rotation;
bullet.phy_speed_x = bulletSpeed;
bullet.phy_speed_y = bulletSpeed;
}
I have tried putting many different variables where I have the bulletSpeed variables but nothing has seem to work. I'm stuck here, I've watch tutorials and read lots of stuff but nothing has worked!
I figured it out.
var shootButton = mouse_check_button_pressed(mb_left);
var bulletSpeed = 10;
if (shootButton) {
bullet = instance_create(ot_player.x, ot_player.y, ot_bullet);
with(bullet) {
phy_rotation = other.phy_rotation;
ldx = lengthdir_x(15, -phy_rotation)
ldy = lengthdir_y(15, -phy_rotation)
physics_apply_impulse(x, y, ldx, ldy);
}
}
Is it possible to create a single gravity / force point in matter.js that is at the center of x/y coordinates?
I have managed to do it with d3.js but wanted to enquire about matter.js as it has the ability to use multiple polyshapes.
http://bl.ocks.org/mbostock/1021841
The illustrious answer has arisen:
not sure if there is any interest in this. I'm a fan of what you have created. In my latest project, I used matter-js but I needed elements to gravitate to a specific point, rather than into a general direction. That was very easily accomplished. I was wondering if you are interested in that feature as well, it would not break anything.
All one has to do is setting engine.world.gravity.isPoint = true and then the gravity vector is used as point, rather than a direction. One might set:
engine.world.gravity.x = 355;
engine.world.gravity.y = 125;
engine.world.gravity.isPoint = true;
and all objects will gravitate to that point.
If this is not within the scope of this engine, I understand. Either way, thanks for the great work.
You can do this with the matter-attractors plugin. Here's their basic example:
Matter.use(
'matter-attractors' // PLUGIN_NAME
);
var Engine = Matter.Engine,
Events = Matter.Events,
Runner = Matter.Runner,
Render = Matter.Render,
World = Matter.World,
Body = Matter.Body,
Mouse = Matter.Mouse,
Common = Matter.Common,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create();
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.documentElement.clientWidth, 1024),
height: Math.min(document.documentElement.clientHeight, 1024),
wireframes: false
}
});
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
Render.run(render);
// create demo scene
var world = engine.world;
world.gravity.scale = 0;
// create a body with an attractor
var attractiveBody = Bodies.circle(
render.options.width / 2,
render.options.height / 2,
50,
{
isStatic: true,
// example of an attractor function that
// returns a force vector that applies to bodyB
plugin: {
attractors: [
function(bodyA, bodyB) {
return {
x: (bodyA.position.x - bodyB.position.x) * 1e-6,
y: (bodyA.position.y - bodyB.position.y) * 1e-6,
};
}
]
}
});
World.add(world, attractiveBody);
// add some bodies that to be attracted
for (var i = 0; i < 150; i += 1) {
var body = Bodies.polygon(
Common.random(0, render.options.width),
Common.random(0, render.options.height),
Common.random(1, 5),
Common.random() > 0.9 ? Common.random(15, 25) : Common.random(5, 10)
);
World.add(world, body);
}
// add mouse control
var mouse = Mouse.create(render.canvas);
Events.on(engine, 'afterUpdate', function() {
if (!mouse.position.x) {
return;
}
// smoothly move the attractor body towards the mouse
Body.translate(attractiveBody, {
x: (mouse.position.x - attractiveBody.position.x) * 0.25,
y: (mouse.position.y - attractiveBody.position.y) * 0.25
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matter-attractors#0.1.6/build/matter-attractors.min.js"></script>
Historical note: the "gravity point" functionality was proposed as a feature in MJS as PR #132 but it was closed, with the author of MJS (liabru) offering the matter-attractors plugin as an alternate. At the time of writing, this answer misleadingly seems to indicate that functionality from the PR was in fact merged.
Unfortunately, the attractors library is 6 years outdated at the time of writing and raises a warning when using a newer version of MJS than 0.12.0. From discussion in issue #11, it sounds like it's OK to ignore the warning and use this plugin with, for example, 0.18.0. Here's the warning:
matter-js: Plugin.use: matter-attractors#0.1.4 is for matter-js#^0.12.0 but installed on matter-js#0.18.0.
Behavior seemed fine on cursory glance, but I'll keep 0.12.0 in the above example to silence it anyway. If you do update to a recent version, note that Matter.World is deprecated and should be replaced with Matter.Composite and engine.gravity.
i have read all the posts about it, but cant get it done.
I have a 3d scene in webgl and need to know the 2d on the canvas for a 3d point.
I have this matrixes:
Perspective = M4x4.makePerspective( fovy, aspect, znear, zfar );
CameraView = M4x4.makeLookAt ( eye, center, up );
ViewPerspectiv = M4x4.mul( Perspective , CameraView );
And the model has:
this.ModelMatrix = M4x4.I;
this.ModelMatrix = M4x4.makeTranslate3( this.pos_x, this.pos_y, this.pos_z );
I have tryed all the posts - it always uses: view and Perspective and point .. and sometimes a transpose...
can someone use my varaiable names and just post me the lines ?? PLS !!
here is what i tryed .. but it did not work:
var point = get2dPoint( point, this.ModelMatrix, ViewPerspectiv , canvas.clientWidth, canvas.clientHeight ) ;
...
function get2dPointV2( point3D, viewMatrix, projectionMatrix, width, height)
{
var tmp1 = multiMat4ByVec3( viewMatrix , point3D );
var clip = multiMat4ByVec3( projectionMatrix , tmp1 );
var ndcSpace = new Array ( clip[0] / clip[3] , clip[1] / clip[3] , clip[2] / clip[3] );
ndcSpace[0] = ((ndcSpace[0] + 1.0) / 2.0) * width ;
ndcSpace[1] = ((ndcSpace[1] + 1.0) / 2.0) * height ;
return ndcSpace;
}
This is killing me for 12hours now..
Thanx to anybody who trys to help.
cu
uwi
i found out thet the basic approche was fine but the matrix i used needed to be transposed , that was all that was missing !
thanx anyway !
Your first sentence sounds like you want to project 3D -> 2D. Thats what the Perspective-Matrix does.
Your code is trying to invert the Perspective-Matrix, projecting from 2D -> 3D. This is used e.g. when trying to find out where you clicked with your mouse.
What are you trying to do? If you actually want to project 2D -> 3D i might find the time to explain/post some code tomorrow.
I was wondering how to distort a Flex object like Panel so it looks like a trapezoid?
Are you trying to do something like this? Flex skewing
private function skewit():void {
var smat:Matrix = new Matrix();
smat.b = Math.tan(50);
var mat:Matrix = myobject.transform.matrix;
mat.concat(smat);
myobject.transform.matrix = mat;
}
http://livedocs.adobe.com/flex/3/html/help.html?content=15_Geometry_6.html
If you're really serious about this stuff, you should write it in ActionScript and pick up the book Numerical Recipes and read the chapter on "Computational Geometry". It will probably answer all your questions and more! Have fun :)
I've ran into a weird problem with getCharBoundaries, I could not figure out what coordinate space the coordinates returned from the function was in. What ever I tried I could not get it to match up with what I expected.
So I made a new project and and added simple code to highlight the last charater in a textfield, and all of a sudden it worked fine. I then tried to copy over the TextField that had been causing me problems, into the new project. And now the same weird offset appeared 50px on the x axis. Everything else was spot on.
So after some headscracthing comparing the two TextFields, I simply can not see a difference in their properties or transformation.
So I was hoping that someone might now what property might affect the coordinates returned by getCharBoundaries.
I am using Flash CS4.
I've just had exactly the same problem and thought I'd help out by offering what my findings are. With a help from this thread, I tried to find everything that wasn't 'default' about the textfield I was using. I found that when I had switched my TextFormatAlign (or 'align' in the IDE) and TextFieldAutoSize properties to 'LEFT' as opposed to 'CENTER', it solved the problem.
A little late in the game perhaps, but worth knowing for anyone running into the same problem. This was the only thread I could find that raised the right flag...
Well the getCharBoundaries returns the boundaries in the textfield coordinate system. Where the origin is topleft corner of the textfield.
getCharBoundaries does not take into consideration the scrolling. you need to check if there are scrollbars on its parent (textarea) and if so relocate. One quick way of doing it is using localtoglobal and globaltolocal. Use the first to translate from the textfield coordinate system to the application coordinate system and then use the second to translate from the app coordinate system to the coordinate system of the parent of the textfield which is the textarea. I'm fine tuning a my method to get char boundaries i will publish it today on my blog
http://flexbuzz.blogspot.com/
Works For Me(tm) (Flex Builder AS3 project):
[Embed(systemFont="Segoe UI", fontWeight="bold", fontName="emb",
mimeType="application/x-font")]
private var EmbeddedFont:Class;
public function ScratchAs3()
{
stage.scaleMode = 'noScale';
stage.align = 'tl';
var m:Matrix = new Matrix(.8, .1, -.1, 1.1, 26, 78);
var t:TextField = new TextField();
t.autoSize = 'left';
t.wordWrap = false;
t.embedFonts = true;
t.defaultTextFormat = new TextFormat("emb", 100, 0, true);
t.transform.matrix = m;
t.text = "TEST STRING.";
addChild(t);
var r:Rectangle = t.getCharBoundaries(8);
var tl:Point = m.transformPoint(r.topLeft);
var tr:Point = m.transformPoint(new Point(r.right, r.top));
var bl:Point = m.transformPoint(new Point(r.left, r.bottom));
var br:Point = m.transformPoint(r.bottomRight);
graphics.beginFill(0xFF, .6);
graphics.moveTo(tl.x, tl.y);
graphics.lineTo(tr.x, tr.y);
graphics.lineTo(br.x, br.y);
graphics.lineTo(bl.x, bl.y);
graphics.lineTo(tl.x, tl.y);
}
To literally answer your question, it returns the coordinates in the TextField's coordinate system, not it's parent, and it is affected by DisplayObject.transform.matrix, which is the backing for the .x, .y, .scaleX, .scaleY, .width, .height, and .rotation properties.
What ever it was the solution was simple to add a new TextField, never found out what property screwed everything up.
The first answer is correct in most cases. However if your field is parented to another movie clip it may still return the wrong y coordinate. try this code:
//if this doesn't work:
myTextFormat = new TextFormat();
myTextFormat.align = TextFormatAlign.LEFT;
myFieldsParent.myField.autoSize = TextFieldAutoSize.LEFT;
myFieldsParent.myField.setTextFormat( myTextFormat);
//try this:
var x = myFieldsParent.myField.getCharBoundaries(o).x;
var y = myFieldsParent.myField.getCharBoundaries(o).y;
var myPoint:Point = new Point(myField.getCharBoundaries(o).x,myField.getCharBoundaries(o).y);
var pt:Point = new Point(myFieldsParent.myField.getCharBoundaries(o).x, myFieldsParent.myField.getCharBoundaries(o).y);
pt = myFieldsParent.myField.localToGlobal(pt);
//pt is the variable containing the coordinates of the char in the stage's coordinate space. You may still need to offset it with a fixed value but it should be constant.
I didn't test this code as I have adapted this example from code that is embedded into my project so I apologize if I'm missing something...