Drawing lines to connect objects in Processing - processing

I'm doing a project that uses the ReactiVision framework and Processing for the graphical interface. Currently the code detects the fiducials, creates a square in its place and also shows the fiducial ID:
Detecting fiducials
There is more code that constantly refreshes the screen. What I want is to connect each fiducial that is detected on the screen with a line. See the picture below:
Drawing lines between fiducial shapes
I was wondering if anyone could help me out. I would really appreciate it! Please let me know if I'm not explaining this properly.
pushMatrix();
translate(tobj.getScreenX(width),tobj.getScreenY(height));
rotate(tobj.getAngle());
rect(-obj_size/2,-obj_size/2,obj_size,obj_size);
popMatrix();

Related

How do i move the mouse with processing?

I was testing processing features and wondered if I could move the mouse with code with/without libraries. So can anyone write me a code / give me a library so that it works?
I tried reading half the 284 questions and found nothing, I tried reading through github trying to find a code / a library that works.
Not an answer, but a potential workaround:
Using noCursor(); you can get rid of the default cursor, and then develop your own custom cursor using something like shapes.
E.g. circle(mouseX + 20, mouseY, 20); would always draw a "cursor" 20 pixels to the right of where your mouse position actually is.
This is how I made a custom and dynamic cursor for a little game, where it changed color and sometimes position depending on activities on the screen.

Scrollspy using Alpinejs and intersect plugin

I have a website I'm working on that utilizes DaisyUI and Alpine.js (with intersect plugin).
In one of my templates I have a stepper with sections of content relating to each step. When you click one of the steps to the stepper, it scrolls you to the related section. That part is easy peasy. The difficulty is getting the step to highlight when you've scrolled to the related content manually. My lack of understanding of the intersection observer is what is throwing me off.
Here is a pen I made as a simple illustration of what I'm trying to do: https://codepen.io/jtomeck/pen/dyeVONz
The pen only shows the use of x-intersect alone. It works-ish, but you'll notice that there are bugs if you make the viewport taller. I'd ideally like the step to only highlight when the content is near the top of the screen, or at least more than halfway above the center of the viewport. I've tried:
Using threshold, but there are bugs since it does not observe the direction (from top of viewport or bottom of viewport) the intersection is happening from, as well as the threshold being defined as a percent creates strange behaviors on different sized screens.
Using margin, but it did not appear to work at all. I believe this is option is the right solution, but I'm struggling to find the proper resources online specific to my problem. I believe the answer will come if I can figure out how to manipulate the margin using enter and leave.
If someone wouldn't mind helping me with this I'd greatly appreciate it. Bonus points if all previous steps can remain highlighted when a new step is reached :). Not a requirement though!
I'd like to request that all answers continue to utilize alpinejs since it is a constraint of the project. Thank you in advance!
TLDR - Can anyone help me figure out how to use alpinejs and its intersect plugin to make the step of a stepper component highlight when the content it relates to reaches a certain position in the viewport (scrollspy effect)?
Update: Updated codepen to use:
x-intersect.margin.10%.0.0.0="shownStep = ' STEP NUMBER ID HERE '"
According to the documentation the expected behavior would be to detect intersection "when the element gets within 10% of the top of the viewport." It does not appear to work any differently than just using x-intersect without the margin added. I'm very curious why margin does seemingly nothing. I'm going to keep looking into it, but I'd very much appreciate any guidance anyone can provide about rootMargin and why the intersect plugin does not seem to be applying it properly.

Misplaced UI made with UI in hololens emulator

I got a small problem and I can’t really find the source of it. I just created a Canvas and put a Panel in the top right corner. I got it to the right scale at 3: for the Hololens and loaded it up in the Holoemulator. The problem is that even though the panel is supposed to be in the corner, it is placed almost in the middle of the screen in the end.
Is there anything I can do to fix this or is there something I am missing?
If I need to provide more information then please tell me.
Could you double-check the [Render mode] of your Canvas? Is it set as World Space? In this render mode, the Canvas will behave as any other 3D object and will render in front of or behind other objects in the scene based on 3D placement in the scene. You need to adjust the position of the canvas from the perspective of the camera.
However, according to your post, it seems that you want to place UI elements on the screen rendered on top of the scene. If so, You should turn the [Render mode] to [Screen Space - Camera]. More information please see: Canvas

SKSceneScaleModeResizeFill on ios8 scales improperly

I have written a game in SpriteKit using objective C and it works perfectly on ios9 but it looks hideous on ios8. I would really like to know how to fix this problem, either by “correcting” my mistake, or if I have no mistake then by finding a workaround for the bug in ios8.
I think I have really done all I can to make the problem as clear as possible, including making loads of screenshots to illustrate the problem and also making a new Xcode project that is as simple as possible while still showing the problem.
If you want to try the Xcode project, here is a link for it….
xcode project
If you want to see the screenshots of the problem, then here is a link for the screenshots.
Screenshots
Now I will try to explain the code I wrote and the problem illustrated in the screenshots.
PLEASE REMEMBER: My code works perfectly on iOS9.3. So my code is obviously not complete gargage. But admittedly, I am not an expert on handling screen rotation, so probably my code could be better.
I should probably mention that both scenes have scale mode set to SKSceneScaleModeResizeFill. I chose this mode because I had tremendous difficulty doing proper layouts for all possible screen sizes (including iPhone) when working with SKSceneScaleModeAspectFill. I do I hope I can solve this problem while sticking with SKSceneScaleModeResizeFill.
Anyway, my app is a SpriteKit game with two scenes. The main scene is the GameScene, where you play the game. And this scene has a pointer to the SettingsScene, where you can change the settings of the scene. (e.g. change the level of difficulty).
Anytime the user rotates the screen, GameViewController detects this change in viewWillTransitionToSize and tells the GameScene object about the new screen width and screen height. Game Scene then adjusts the positions of its sprites in consideration of the new screen orientation and then tells its SettingsScene object about the new screen width and height to that the Settings scene is properly laid out as well.
Please note that with this design, all sprites on BOTH scenes get repositioned any time the user rotates the screen REGARDLESS of which scene is actually active at that time..
As I said before, all works as expected on ios9.3. But on ios8, the result is attrocious. The screenshots illustrate one example of typical experience on ios8. If the user rotates the screen while using the game and then goes to the settings screen, he will see something awful. And will often be trapped in this terrible experience because the button for going back to the main game might not even be fitting on the screen anymore.
At first, it might seem like I am failing to reposition sprites for landscape mode in the settings scene. But this explanation is wrong. The text on the screen shows that the last layout was performed with the landscape orientation in mind.
So what is going wrong here?
Any suggestions would be highly highly highly highly appreciated.
Thanks!
-j
p.s. In case you don't want to look directly at the linked project file, here are some details about the example code. GameViewController implements viewTransitionToSize to handle any screen rotation. It directly tells the new screen dimensions to GameScene, which then tells SettingsScene. Both scenes rearrange their sprites in consideration of the new screen dimensions. And all goes well on ios9. On ios8, however, the inactive scene ends up looking hideaous when it is presented even though it clearly did reposition its sprites according to the new dimensions.
the problem is easily resolved by these lines....
gameScene.size = newScreenSize;
settingsScene.size = newScreenSize;
anytime the orientation changes.
This code is not required for ios9. The scene knows what size the screen is without assistance. But for ios8, it seems to be needed to add this code.

Drawing over an image in win32?

First of all, keep in mind that I am a beginner in win32, so I am very likely to be missing the obvious.
I am working with Code::Blocks, C++, win32. I am making a program that:
would load an image from a file
would load some info from another file and draw it over the image.
The program would then draw additional stuff over the image later on. Also, I don't need this drawing to be actually incorporated into the image, the image only acts as a reference for the drawing.
I have managed to display the image in a child (static) window and I have successfully drawn the info onto the main window. When I wanted to combine the two so the drawing would go over the image, however, I got stuck - I didn't know what window to draw to and which message to process for the drawing. I have searched the Internet for any hints, examples, anything, but I found nothing. (This is probably because I didn't know exactly how to describe my problem.)
I have been trying different things over the past few days, like drawing to the static control with the image, and trying to paint to a transparent static control on top of the one for the image, but nothing worked.
If anyone could give me any hints, that would be great! Thanks!
Trap the WM_PAINT message for the window you want to draw. In the handler, add code draw the image (BitBlt function perhaps) first and then the drawing you want. You must also handle WM_ERASEBKGND message which is used to erase the background of the window when re-sizing etc.
Refer: WM_PAINT message, WM_ERASEBKGND message

Resources