I need to create a tangram-like object, in which a user could be able to manipulate the structure, in order to create configurations as those you can see here.
I'm trying to understand which strategy would be best for writing the code with Three.JS, remembering that in the best case I would like to add physics.
I'm really new to WebGL, any advice would be helpful.
Thank you
http://codepen.io/livinglegendparagon/full/JKEZPa/
$sizeOfYourContainer: 1000;
$s: $sizeOfYourContainer;
$Area: sqrt($s * $s);
$a: $Area / 8;
$b: $Area / 4;
This has good links for the formula for a true tangram, this above formula will give you a and b values based off of how wide/height you want your container
Related
I used the p5 editor to build an nft, and I'm working on getting it working in the fxhash sandbox. Using p5's random() function worked great when I uploaded my project to the sandbox, but quickly realized I needed to implement the fxrand() function to ensure that each individual iteration is the same when refreshing with the same hash.
Simply replacing all instances of the p5 random() function with fxrand() did not work, and I'm assuming because fxrand() simply generates a random number, whereas p5's random() function can be used in other ways (ie; random(-50, 50)).
How do I need to incorporate the fxrand() function into my project in a way that still works the same way as p5's random() function?
You may have already figured this out, and there's probably far better solutions (I'm very new to this), but here is what I figured out.
If I need a number from 0 to 9 then I can use this:
let randChoose1 = Math.floor(fxrand() * 10;
Anywhere I need to call that number I can simply use randChoose1 in place. For example, if I have an array named "bg" with 10 entries in the array, and I want to choose something from the array I can do this:
let randoBg = bg[randChoose1];
Maybe that's an image that I want to center on the canvas, I can call it with:
image(randoBg, width / 2, height / 2);
If I have 23 items in the array then I just need to declare randChoose1 with:
let randChoose1 = Math.floor(fxrand() * 23);
If you want to be able to have negative numbers be chosen, such as your example of a range from -50 to 50, it's just a matter of multiplying by rough total range you want and then subtracting half that.
let randChoose1 = Math.floor(fxrand() * 101 - 50;
In this case, randChoose1 will give you that range of results from -50 to 50. You have to multiply by 101 in order to make it possible for Math.floor to deliver 100 since it always rounds down.
If you found a better solution I'd love to hear it! This is something I'm struggling with as well, and my total experience with p5.js is less than a week at this point.
If you use randomSeed(int(fxrand()*987654321)) at the beginning of the setup function every time you call to the random function it will depend on fxrand
trying to create a player damage indication when a collision with an enemy occurs.
I used this code within a collision event of the player object:
direction = point_direction(other.x,other.y,x,y);
hsp = lengthdir_x(6,direction);
vsp = lengthdir_y(4,direction)-2;
if (sign(hsp) !=0) image_xscale = sign(hsp);
However, the player object is simply pushed upward vertically rather than backwards in a parabola.
Any, ideas on how to implement a basic knockback system?
If you want a parabola, you can add an upward force afterward, like so:
direction = point_direction(other.x, other.y, x , y);
speed = 6
motion_add(90, 3)
If you don't and you'd rather a more "repeatable" parabola that always look the same, maybe you should use another method, something like
if other.x>x {hdirection=1}else{hdirection=-1}
hspeed = hdirection*6
vspeed = -2
I believe this would work better for what you're trying to achieve, unless you want to implement knockback variable depending on the angle of collision.
So I would need to see all the rest of your player physics to be sure, but I can tell you right now that direction = point_direction(other.x,other.y,x,y); is probable not what you mean, and same goes for lengthdir(). The exact origins of the colliding objects at the moment of collision have a huge effect on what that direction is, which can cause a lot of screwiness. For example: if the line is perfectly horizontal (because other.y == y) then lengthdir_y() will always be equal to zero for any input value no matter how huge.
But more importantly direction is a built-in variable of GameMaker, so using it with a custom physics system can also cause some screwiness. Fox's answer might help if you are using built-ins, but based on the fact that you have an "hsp" and "vsp" instead of hspeed and vspeed, my guess is you want to avoid built-ins.
If you just want to get the horizontal direction of the collision, you should use sign(x - other.x). Then, instead of using lengthdir(), you can just use a constant. Here it is all together:
var dir = sign(x - other.x)
hsp = 6*dir; //I'm assuming that 6 is how much horizontal you wanted
vsp = -4;
if (sign(hsp) !=0) image_xscale = sign(hsp); //This line could just go in your step event
Hope that helps! Feel free to comment if you have more questions.
I am migrating a THREE.js app from r60 to r70. Amongst other changes I notice that r60 constructs of the following form no longer work in r70.
mesh.position.set(0,0,0);
myVector3 = new THREE.Vector3 (100,200,300);
mesh.position = myVector3;
This applies to meshes, pointLights, presumably to all Object3D's but I havent tested further.
In the above example the mesh.position x,y,z values remain unchanged at (0,0,0). For illustration see this JSFiddle and compare lines 70 and 73.
//...The next line DOES NOT update Sphere_mesh.position.x
Sphere_mesh.position = NewPos_vector3;//...
//...The next line DOES update Sphere_mesh.position.x
Sphere_mesh.position.x = NewPos_vector3.x
In a debugger no console warning is given during execution that the assignment has not worked. In the very brief THREE.js migration notes for (r68 --> r69) I see something about an Object3D's position no longer being immutable but I don't know what that means.
Anyway, my question
Is there a standard THREE construct or function I can use to copy x,y,z values from a Vector3 object to the x,y,z values of a mesh.position rather than the effective, but verbose, form such as
mesh.position.x = myVector3.x;
mesh.position.y = myVector3.y;
mesh.position.z = myVector3.z; ?
e.g. something such as
mesh.position = F_Get_Object3DPosition_from_Vector3(myVector3); ?
I know it would be easy to write my own function but a standard THREE function would be more likely to evolve smoothly with future versions of THREE.
position beeing immutable means that the position property can not be changed.
so
mesh.position = anything;
won't work (but you already discovered this)
what you can do is not change the position, but you have to change position values.
in your case, the easiest way is
mesh.position.copy (myVector3);
I think you meant myVector3 not myVector3() in the last line... Anyway, I though that would work too but the thing is, you are applying a Vector to something that supposed to be a point/Vertex. Even if that worked in my opinion it wasn't the right way to do it. How about using a simple array:
mesh.position.set(0,0,0);
new_position = [100,200,300]
mesh.position.fromArray(new_position,0)
in which 0 is the starting index. So you can have multiple position sets in one array
I am blind, and I have trouble making nice looking guis. This really frustrates me because while I am a capable developer, I cannot complete projects on my own because I am unable to make the front-end. I am wondering if any of you know of some automatic solution which produces professional looking guis? They don't have to be fancy, most of the time we are talking about basic forms/wizzard style layouts. I basically need to get away from specifying pixel heights, widths, and positions. I need something that figures out how to make things match in terms of sizes and positions in relation to one another, resize well, etc. My primary target platform is Windows. I have worked with WxWidgets before and have been very satisfied, but I needed to hire another person to do the design which I cannot keep doing longterm. I have no problem writing code, I just am not able to effectively figure out how to position and set the size for controls on the form.
Any advice would be appreciated.
I doubt there could ever be a perfect substitute for someone with keen eyesight, a passion for the work and lots of time to devote to dragging and dropping, pushing and pulling at the the widgets of a GUI until everything is just so.
However, if you are satisfied with a workaday solution that gets the job done, then I think that the wxWidgets sizers do a reasonable job. Are you familiar with these? Specify how much space you want to leave around your widgets, and whether you want them arranged vertically or horizontally. Now all you have to do is add your widgets in order to the sizer, and the sizer will automatically arrange them in an often quite decent first pass sort of way.
As a simple example, here is a simple form.
The code:
wxPanel * panel = new wxPanel(this,-1,wxPoint(-1,-1),wxSize(1000,1000));
wxSizerFlags szrflags(0);
szrflags.Border(wxALL,5);
wxBoxSizer * szrCRUDForm = new wxBoxSizer(wxVERTICAL );
wxFlexGridSizer * szr = new wxFlexGridSizer(2,1,1);
wxStaticText * field1text = new wxStaticText(panel,-1,"Entry Field #1");
wxTextCtrl * field1ctrl = new wxTextCtrl(panel,-1," ");
wxStaticText * field2text = new wxStaticText(panel,-1,"Second Entry Field");
wxTextCtrl * field2ctrl = new wxTextCtrl(panel,-1," ");
wxStaticText * field3text = new wxStaticText(panel,-1,
"A very big entry field\n"
"with a lot of description\n"
"Spread over several long lines of text");
wxTextCtrl * field3ctrl = new wxTextCtrl(panel,-1,"",wxPoint(-1,-1),wxSize(600,-1));
wxStaticText * field4text = new wxStaticText(panel,-1,"Yet another Field");
wxTextCtrl * field4ctrl = new wxTextCtrl(panel,-1," ");
szr->Add( field1text,szrflags );
szr->Add( field1ctrl,szrflags );
szr->Add( field2text,szrflags );
szr->Add( field2ctrl,szrflags );
szr->Add( field3text,szrflags );
szr->Add( field3ctrl,szrflags );
szr->Add( field4text,szrflags );
szr->Add( field4ctrl,szrflags );
wxBoxSizer * szrButtons = new wxBoxSizer( wxHORIZONTAL );
szrButtons->Add( new wxButton(panel,-1,L"CREATE"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"READ"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"UPDATE"),szrflags);
szrButtons->Add( new wxButton(panel,-1,L"DELETE"),szrflags);
szrCRUDForm->Add( szr );
szrCRUDForm->Add( szrButtons );
SetSizer(szrCRUDForm);
Produces the following GUI, without requiring any pushing or pulling
Here is an introductory, rather crude, tutorial http://neume.sourceforge.net/sizerdemo/
Here is something more sophisticated http://zetcode.com/tutorials/wxwidgetstutorial/layoutmanagement/
I am not sure what you mean by blind (Literal or figurative) but I will assume the later.
There is no replacement for imagination. Your imagination will always be what you want to achieve. Once you have it in mind you can sketch it in paper or using something like skencil.
Then you can use the tools for building the the GUI using wxWidgets. Few option are there and some of them are shown below.
I suggest wxFormbuilder or wxSmith if you want cross platform or even wxDevC++ if you want windows alone. If you can give few bucks then consider support DialogBlocks for is owned by one of wxWidgets core developers. wxCrafter looks promising but still in beta stage.
If you want to hire someone Vadim Zeitlin have such a nice company, consider to support another core developer.
wxFormBuilder
DialogBlocks
wxDevC++ Designer
Code::Block's wxSmith
XRCed Designer
wxDesigner
wxGlade
wxCrafter (In beta stage)
I want to create .NET application that accepts an image and scans all images in a folder and find those that look similar it.
Any suggestion where I should start? Are there any free/open source libraries?
You could use AForge.NET. The ExhaustiveTemplateMatching method does exactly that. There's an example in the documentation:
// create template matching algorithm's instance
// use zero similarity to make sure algorithm will provide anything
ExhaustiveTemplateMatching tm = new ExhaustiveTemplateMatching( 0 );
// compare two images
TemplateMatch[] matchings = tm.ProcessImage( image1, image2 );
// check similarity level
if ( matchings[0].Similarity > 0.95f )
{
// do something with quite similar images
}