I've been tracing my code and comparing notes between my own code and some sample code
I'm working from this sample code: http://mbostock.github.io/d3/talk/20111116/bundle.html
My source example is here: http://www.nogumallowed.com/test5.php
My problem is the path lines. They work, they connect, but I love in the source how the lines have more seemingly random curves to them. I can'y figure out how to recreate that. Mine all flow incredibly well, but look rather plain in comparison.
Can anyone offer any insights? I've been coming back to this for a few days, and haven't figured it out yet. The documentation hasn't tipped me in the right direction yet either.
I'm just scratching the surface of "comfortable with D3", but there's still A LOT for me to learn on it before I give myself a D3 Jedi.
It doesn't look like your clustering code (if you have any) is working very well. The subjects should be clustered together into related groups, but it doesn't appear like yours are. For instance, your node "John Sly" is connected to almost very other node except the few on either side of it. It seems to me that those nine or so highly connected nodes should be distributed around the circle, not bunched next to each other.
Related
I'm wanting to make an application with node have a cli interface, as it needs to be ran in a terminal. I want to split the terminal into several sections, one with some identification as to who is viewing the application, another with some other random info, a menu on the side that you can use the arrow keys to move up and down the options, a main logs section, and another that you can type, and press enter to send text in. I've drawn up a little diagram of how I want to make it: (I know this looks awful, it was made in mspaint)
I've gotten the console input part working by using the readline module, but I don't even know where to really start with designing the terminal how I want it, setting text in certain sections, etc. I've looked around at things like terminal-kit, and clci, but either they didn't seem like what I wanted, or their docs/examples were a mess.
I would prefer to do this with node only, not using another application in another language, as all of the stuff going to the console sections will be from the same node application.
I found the blessed library at https://github.com/chjj/blessed. It is based on the ncurses library (written in C, https://en.wikipedia.org/wiki/Ncurses) and it allows you to create different sections with specified heights, widths, etc. in different areas of the terminal. Very useful in theory, and you can follow the advice on the github page, clone the repo into your desktop, look into the test folder, and then run the different files ie. node test/widget-form.js to see the different types of interfaces that you can create in your terminal.
It hasn't really worked for me, because it keeps crashing on my end, but I see that there are a lot of open pull requests and that people are still trying, so it might be working for some, although I think that the usage for some "widgets" is limited. The next best thing I can recommend is either blessed-contrib or neo-blessed, the former being developed by some dude from Facebook. Blessed-contrib is newer so you might have more luck with it, but it's essentially made for visual output, so you'd be able to create a section for a log, a selection menu, a paragraph section, etc. but nothing to create an area where you can input text (so 4/5 of what you need), based on my reading of the documentation, which you'll find here https://github.com/yaronn/blessed-contrib.
I personally think it's dope. Good luck with it, I'm going through the motions of understanding the documentation better myself, and I've delved pretty deeply in it, so feel free to reach out if you need any help.
On another note, let me know if you've found anything else other than the resources I mentioned, which would be very helpful for me, as the alternative right now is for me to code the text user interface myself using C and the ncurses library, which I'm trying to avoid if it's unnecessary :)
EDIT:
I found something for you and for me that might send us in the right direction. Good news. This is the gitter-cli. It uses the library I mentioned above blessed. If you clone the gitter-cli's repo, follow the instructions to get a token and create an account, and join one of the rooms (you can find the name of the rooms like 'gitterHQ/javascript' on the gitter.im website), you'll see that the chat works. There might be some optimizations I'm not aware of, but I recommend just delving into their code while also delving into the blessed documentation to understand how it works. It should give you an idea of what to do next.
It took me a lot of hours to find all these different resources and connect the dots so you should definitely check them out.
I'm looking to create this project in processing, however, I'm finding the terminology a bit hard. I'm not sure how to call the effect where the line is staying permanently throughout the song to 'draw' the music data.
I would appreciate any guidance on what tutorials I could look at or an answer from someone.
My aim is to create something as close to this as possible:
https://www.youtube.com/watch?v=Bb5PTitqtlc&t=58s
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense:
You need to break your problem down into smaller pieces and then take those pieces on one at a time. Write down exactly what you want to happen, in English, and that will be an algorithm that you can think about implementing with code.
Get something simple working. Can you write a simple sketch that plays a song? Then work your way forward in small steps. Can you write a simple sketch that prints out some numeric values based on the song that's playing? Separately from that, can you create a very simple visualization using hard-coded numbers? Get all of that working separately before you think about combining them into a sketch that shows a visualization based on a song that's playing.
Then if you get stuck, you can post a more specific question along with a MCVE. Good luck.
I have been looking at Epic Games' Fortnites Website and I am trying to figure out how they achieved the 3D effect on the page:
Epic Games' Fortnite website - scrolled down to 3rd slide
Does any one have any idea how to do it? I would really like something similar to a project I'm working on. I have found Three.js, but I am quite sure that is not the solution they went with.
For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.
I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?
In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:
looks familiar, right?
So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.
The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.
I think that makes it a really great website after all.
Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)
It is a simple parallax effect using animated sprite sheets.
Parallax effect is achieved by using several layers of images/video on top of one another in different Z-depth.
You can achieve the moving part by using the mousemove event to track the cursor.
This is really confusing the heck out of me. Take a look at this screenshot:
Sometimes, the GtkFrames in my program look like on the left side, and sometimes they look like on the right side - or even a mix of the two! The program is exactly the same. Just running the same program multiple times yields very different looks of the GtkFrames in the program! How can that be?
It seems that there are two different designs of GtkFrame:
The first one has its label centered at the top of the frame and
smoothly dissolves towards the
bottom so that the frame doesn't completely enclose the GtkFrame's
contents.
The second design has its label left-aligned at the top of the frame
and draws a border around the complete GtkFrame.
The problem is now that GTK+ seems to choose one of the two designs entirely at random. I don't see any pattern in which design I'm going to get. It appears to happen completely at random which is really confusing me.
Can somebody shed a light onto this mystery? What is going on here? Is there a way to force GTK+ to use a certain design?
I'm using GTK+ 2.24.10 with the Adwaita theme on Linux Mint.
Have a look at moodi.org, sony.com/be-moved, http://www.spaceneedle.com/home/,
. How can i make site like this?
Basically, it's all done by detecting user's scrolling amount, and moving things accordingly.
You need some JavaScript and of course html & css to achieve something like that.
What JS does is that it detects if user is scrolling, it's direction and speed, then tells object "A" to move at the opposite direction of scroll, and also at 0.8 speed of it. Object "B" moves at the opposite direction but with 1.2 speed of scrolling, so You'll feel like object "B" is closer to you.
This is just a very simple example on how it works.
Remember to have a good scenario before touching the code, and while coding, break your problems into small pieces and look for them in here,
For example: How to change position of absolute element based on client scrollTop?
That's how you'll learn.
Useful links:
There are many technics, to make something efficient and clean, you need to be familiar with them to make the best decision.
Here are some links which help you start:
This is somehow old, but I think helps understanding the concept : http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website-part-2/
Css-only approach : http://keithclark.co.uk/articles/pure-css-parallax-websites/
These are just some starting points, of course you can find more tutorials and even look through source of your favorite websites to see how they achieved the effect.
Final note : I think one important thing to bear in mind is not to move many objects at the same time, once they are off the viewport, stop moving them, this helps a lot when it comes to performance specially on older machines.
jQuery Waypoint is a handy tool, which is introduced in the second link.