How do I create circles connected with elastic lines in Processing.js? - processing.js

In Processing.js, I'd like to have circles that represent nodes, with lines connecting linked nodes. I'd like those connected circles to naturally pull toward each other with a kind of elasticity of the lines, and the circles to bounce against each other when they touch. Any ideas on how to do this?

I think this sample might get you going in the right direction:
Box2D.JS with Processing.js
It has the circles, the lines, and the bouncing.

Or if you want it yourself this is the Google search term you're looking for:
http://www.google.com/search?hl=en&q=force+directed+graph+javascript&aq=f&aqi=g-c1&aql=&oq=&gs_rfai=
The base algorithm is pretty simple, getting a tuned example to work a little less so. I've looked through this stuff before, but this quick search just turned up this little js project that seems to do it quite properly: http://github.com/jackrusher/jssvggraph
Shouldn't be too difficult to port.

Related

Ideas on how to animate multiple bezier curves?

I am trying to create a drawing animation out of a picture that is quite similar to this one.
From what I've been researching, I think my goal is to make multiple bezier curves. The problem is, since I do mostly programming but not quite so on the graphic design part, this gives me quite a headache.
So, any advice on where should I start (e.g. software I should use, etc.)? Thanks before.
P.S: in the end, the animation will be put on a web page.
Coding Math is a great resource, assuming you have basic knowledge of HTML, CSS and JavaScript.

Framework of choice for building smart histogram in cocoa touch

I'm familiar with the basics of objective-c and cocoa touch and I want to start now my first large iOS project.
I want to build an iPad app with a histogram like you know it from several photo apps where you can see e.g. the distribution of brightness in a picture. But it needs to be smart, i.e. scrolling horizontal, setting borders and pinching for zoom-in and zoom-out.
Is it possible to handle this requirements with iOS7 standard API or do I need a 3rd party framework like Core-Plot to achieve a histogram I described, and if so, which one would you prefer and why.
Thanks for your help!
Is it possible to handle this requirements with iOS7 standard API or do I need a 3rd party framework
It's certainly possible to do it all yourself with no help from anybody except the frameworks that Apple provides. Whether that's the best solution for you, only you can decide. I think these are the relevant considerations:
You seem to have some fairly specific requirements and it sounds like you may need fairly fine control over exactly how this histogram looks and works. These are good reasons to create the histogram yourself.
You're still fairly new to Objective-C, Cocoa Touch, etc. That's a good reason to look for something that's already written. You'll save a lot of time and frustration, but you may have to be a little more flexible in terms of what you're willing to accept; it's unlikely that anybody has already written exactly the thing you want.
I'd suggest taking a shot a building what you want, and if it turns out to be a bigger thing than you're ready to tackle, you'll at least have a better understanding of what's involved.
To get started, read up on UIBezierPath. All you really need to do is to create a view that accepts an array of numbers and draws the corresponding graph. Don't worry about zooming and scrolling yet, just make a view that draws the graph. Once you have that, you can read up on UIScrollView, which will give you the scrolling and zooming with almost no work.

Bi-directional NSLevelIndicator (origin at center of indicator) - how?

I need a graphical indication of signed "wrongness" of something, i.e. 0 is perfect, -1.0 is completely wrong in one direction, 0.3 is partly correct, but skewed to the right, 1.0 is completely wrong in the other direction. Sort of like a volt-meter.
I've searched and searched and the closest I've found was this thread: Bi-directional level indicator, but that seems to have ended abruptly, and the solution proposed doesn't seem to fit the poster's (or my) requirements.
I can't draw, but I've tried doing some crude mock-ups in IB to illustrate what I mean. The outer regions would be colored differently and there'd probably be axis information and other stuff in a final implementation. (Apparantly I'm not allowed to post images. I'll try ascii art instead)
Spot on:
[....|....]
Completely wrong to the left:
[|||||....]
Completely wrong to the right:
[....|||||]
Partly wrong:
[....|||..]
Now, I suppose I have a few options:
Subclass NSLevelIndicator (or NSLevelIndicatorCell) I don't mind this, but I'm not quite sure how to do it. From searching the web I've found answers to questions such as changing style (rounded corners, fx) and reverse of critical coloring, but such solutions seem to imply a complete override of the drawing functions, which means you lose whatever NSLevelIndicator(Cell) is doing for you with the gradients and all. I had hoped it was possible to manipulate various variables and stay clear of the actual drawing.
Create a custom view I'm not graphically minded in any way, but I suppose a start would be Apples custom view guide: Subclassing NSView. I'd like to use standard UI components as much as possible, as I'm sure Apple has better UI designers than me. I've done a custom 2D graph view earlier, which I think is OK, but that is really more of a custom view in my opinion.
Borrow someone else's implementation (or look through for inspiration) I have searched but haven't found anything, which is odd as I would assume this would be a common setup. It doesn't have to resemble the NSLevelIndicator as such. It could be a volt-meter or similar.
So which approach do I take? If 1 or 3 I need some guiding. If 2 I would like to know if the Apple documentation is sufficient for a novice like myself, or if I need further information.
PS: Asking multiple questions in the same post is probably not wise, but consider it a bonus question. When subclassing NS* stuff, how do you know which methods to override? Apple's class reference only lists public methods as far as I can tell. What I do is create a subclass and then type "self." and see what appears, but that's not very easy to sort through.
It is strange, maybe this is a recent apple update. But now NSLevelIndicator supports negative values as minimum.
So one just need to set minimum value to -n and maximum to n. The 0 will be at the middle.

Captcha's + Differnet Possibilities

I wanted to run some captcha possibities past people to see if they are easily by passed by bots etc.
What if colors were used - eg: there is a string of 10 characters are you ask people to type the red characters of where there are 5? Easy to bypass?
I've noticed a captcha on plentyoffish that involves typing in the characters under the circles. This seems a touch more complex - would this be more challenging for bots?
The other idea I was thinking was putting the requirement in an image as well meaning like in no. 1 above - you can put "type the red characters" in an image and this could change with different colors. Any value here?
Interested in what people think.
cheers
Colours are easy to bypass. A bot just takes the red channel and gets the answer. It is even easier than choosing between many possible solutions. The same applies to any noise that has another colour than the letters the user needs to find.
Symbols that don't touch the letters are very easy to ignore. Why would a bot even look at those circles that probably always stay at the same position? (valid but wasn't asked here)
Identifying circles or other symbols is easier than identifying letters, if one can do the latter, a simple symbol is no challenge.
I think captchas are used too frequently in places where they aren't the best tool. For instance, are you trying to prevent registration spam? Why use a captcha rather than email validation?
What are your intentions and have you considered alternatives to the (relatively ineffective) captcha technology?
As a side note, if you have to use them, I prefer KittyAuth myself :) http://thepcspy.com/kittenauth/#5
Color blind people will have trouble separating red from green letters. People who have trouble reading and understanding descriptions, or have other disabilities may have trouble reading the captchas too.
In some of these, the texts are so mangled that almost everyone has a hard time reading them.
I think captcha's, if used at all, should be quite easy to read. The one with the dots and triangles is doable, although it's a matter of time before someone writes an algorithm to hack them. It is very easy for computers to read this kind too.
The best way to deal with this, is increase moderation. Make your site so that it isn't rewarding to spam it at all. Don't make it the problem of your users.
Also, if you're gonna use captcha's, it may be better to build something yourself than to use common libraries. I've found that these are easier hacked, probably because it is more rewarding to write a captcha solver for something that is used by thhousands of sites.
No matter which CAPTCHA you construct, spammers will find a way to work around it, given enough incentive. Large CAPTCHA services like reCAPTCHA, for instance, get bypassed by outsourcing solving them to cheap labor in India(source).
If you run a small site, your best bet is to make your own mini-CAPTCHA, which asks a simple question. If it isn't a standard question, isn't a standard CAPTCHA module and isn't a large site, it isn't worth it for the spammers to automate bypassing it.
I've been working on a community site for an organization at my university, and we've had trouble with spammers registering, despite us using every CAPTCHA module in the book. As soon as we made our own simple one-question CAPTCHA, all spam stopped. The key to preventing this sort of spam often lies in uniqueness.

Why are HTML frames bad?

I know they are, but my co-worker doesn't believe me. He keeps telling me that Google crawls the inside content and caches it just fine. According to Google, it does crawl them, but doesn't guarantee doing it properly.
Any thoughts why frames are bad for public web sites?
There are various usability and accessibility issues with frames:
link can open in the frame it is enclosed in (e.g. a side pane);
can break the forward/backward navigation;
difficult to bookmark;
are not easily searchable (likely to see the content in Google, etc.);
break on browsers like Lynx, that are console/terminal based;
difficult to size properly (e.g. consuming height on widescreen monitors for banner frames);
can break with screen readers and magnifiers (for blind users and visual impaired users);
See http://www.angelfire.com/super/badwebs/ for an example of what not to do.
Frames are more difficult to bookmark and, therefore, more difficult to share with others.
http://www.yourhtmlsource.com/frames/goodorbad.html
IFrames (like HTML tables) are not bad. However, people were abusing them quite a lot, thus giving them the bad name.
IFrames do represent a good concept - single visual representation of documents coming from different sources, while keeping the DOM trees properly separated and isolated.
The problem arises when a script in one of the DOM trees needs to access the elements in another tree. Or when people want to reference the document location, which happens to be the URL of the root document, and fail to realize they need to location of the secondary document.
But the biggest problem with frames is that there are sites that want to encapsulated other sites in frame and trick the user to think they are interacting with the framed site, while in fact interacting with the outer one. This is the primary reason why most websites will employ some form of frame-busting scripts for their login pages.
Update: It's Friday and we need some fun, so here's the (obligatory) link to Jeff's post on frames-busting-busters-busting... :-)
At the beginning ...
The idea behind framesets is great. It's alive and kicking today; check StackOverflow's left side panel, or the header. They are fixed divs, which is basically the same thing as having frames, although a lot more flexible.
The very concept of keeping some part while changing another is simply necessary by the logic of webpages. We need something to stay where it was (typically navigation) while we go through a lot of details in the main area. Framesets served this purpose very well, they were easy to use and fully supported by all browsers, meaning 3 at that time (Netscape, IE, Opera).
Then we scorched the sky
The real, practical problems with frames had nothing to do with their basic concept. Instead, it was us being only human. I followed this whole debate very closely so believe me when I say these were the real charges against frame technology:
Designers hated them. Yes, that was the deadliest punch. Everything looked square and straight. They hated it. They wanted arcs and image backgrounds and rounded borders. Now they have it in CSS3 - guess what, they're drawing squares. #whatever
Programmers had trouble with them. It was inconvenient to follow the logic of frames, and you had to do some extra work. I mean, some. Today it's a lot harder to create AJAX solutions for the same problem, but no one complains. #whatever
Websites could include one another. This was painful for some site owners because they worked hard on something and another fella used it as own content. Later, they invented same origin policy, but it was way after starting to hate frames. Content stealing is still an issue today, absolutely unrelated to whether we have frames or not. #whatever
Back button worked differently. Yes, it was a bit annoying. But it was not the frame concept's fault, again: it was browsers who did this to us. Could have been solved easily, but nah, browsers kept going back one by one, not providing the site a way to implement its own "step back" method, and alas, this is still happening today. #whatever
So instead of coming up with a solution, the world's web developers decided to hate frames. They ditched it, and now we live in a world where there are lots of better solutions - but with a lot more effort. This was not the only feature going thru the hate-ditch-reinvent-love cycle; see vertical centering and flexbox, aka the table tag debate - and it will happen many more times because it's always easier to point fingers at something than to learn why it's great.
I don't hate frames; don't miss them either, they belong to a somewhat outdated world of web. But they were a good solution for something, and there's a chance we'll see something similar in the future just as CSS grids came back to implement what table layouts did before. The same community who hates the old solution will happily embrace the new and tell you why it's not the same at all.
I think this story has a single takeaway:
Implementations come and go.Concepts stay and evolve.
Depending on what you want to do, most things done with frames can be done with CSS. CSS stylesheets are compatible with all MODERN browsers, meaning your website will look the same if using firefox, chrome, or IE 7(with some tweaks). Also backward-compatibility is not a concern as users can view the content even with CSS off (where as a website using frames and without a frameless version of the site will be useless to a user with an old browser), it just won't be as stylized. It's also quite easy to learn, and once you get the hang of it you'll wonder why you haven't learned it in the first place.
I know this is an old thread but..
Been using Frames almost all my life and I think they are great. I still have a few websites using frames and I cannot understand why they are being droppped. Read all of the comments above and disagree with most of them. Problem is most people never bothered to overcome the issues.
Link can open in the frame it is enclosed in (e.g. a side pane);
Yes it can, but if you do it properly it does not matter. Frames can in fact be very useful for this precise reason, as clicking on a link will only refresh the frame the link it pointing to, not the entire webpage. In the days of dialup modems at very slow speeds this used to be extremely useful to save on bandwidth and make webpages appear superfast. Dont forget, there are still people around the world today (albeit not many) that have very limited internet connectivity at very slow speeds. (people on sailboats in the middle of oceans, those die hards that dial into the internet using HF radio. Oh and those that live in war zones that revert back to poor mobile phone signals, or possibly even need to dial into the internet in another contry using their infrared connections on mobile phones via a modem)
can break the forward/backward navigation.
Yes it can, but if you do it properly it wont.
difficult to bookmark
again very easy to overcome, requires very little additional work, but can be easily overcome
are not easily searchable (likely to see the content in Google, etc.);
break on browsers like Lynx, that are console/terminal based;
Already covered by somebody else earlier. Personally I have never even heard of Lynx (apart from the deodarant). In fact it used to be quite useful that pages werent searchable when you did not want to get spammed by bots searching for email addresses... Unfortunately Google or somebody figured out how to do it.
Difficult to size properly (e.g. consuming height on widescreen monitors for banner frames);
Clearly whoever wrote this has hardly any experience of using frames. This was exactly why I used frames because I could make it work on any screensize in what some would refer to as Fluid views on modern web design
can break with screen readers and magnifiers (for blind users and visual impaired users);
I suppose it can if screen reading software and maginfiers are cheap and rubbish and dont know what they are doing, probably them that complained about it, but there are others that manage this easily.
The only argument that I think makes sense, is that people were abusing them. Now I would not know how that was done, as I am not in that game, but I suppose it would be easy to use frames to show a copy of lets say a financial payment page inside another another frame which is completely hidden to make it look like the user is on the correct page. Therefore conning users out of their beer tokens. But I believe more modern webbrowsers have been updated to overcome these issues and not allow re-direction where encryption certificates are used.
I can therefore understand why they would want to restrict the use of frames, but dont understand why they need to completely remove what is a pretty good bit of tech. (Bit like saying we are going to stop people from using 0 when they do math as it causes can sometimes cause problems when you add many 0's together.)
I still have some websites that use frames and wonder when I am going to have to re-code them one day.
PS. also note that google calendar and youtube allow one to imbed pages into websites and both of these use iframes.