I am trying to modify the classic "Blobs in a Jar" code to include more than one character variable. I want several different "blobs" to appear at the same time; currently the standard version has only the one "blob". But, every time I try to add more than one variable, only the first or last one will be read, and the rest will be ignored.
Here is the entire original code for reference. The line that I am referencing is at the start of the code, var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
I have tried the following lists:
var charc='hello', 'hi', 'bonjour', 'hola', 'aloha';
I have also tried removing the commas, which stopped any variables from being read.
var charc='hello'
charc=,'hi'
charc=,'bonjour'
charc=,'hola'
charc=,'aloha';
This has also been tried with repeating lines of 'var charc' individually, instead of them being nested like this.
As far as I understand, this single line should be the only part of the code I need to edit, but I am afraid there's something else I'm missing here. Do I need to have additional instructions for multiple variables to be read at once? My very very very last resort will be using the entire script for every instance of blob that I want to have and hoping that's acceptable web-coding practice.
EDIT: I did try doing this, with some interesting results. The last instance is read and duplicated for every other instance, but the others are frozen in their first frame of animation while the last instance moves. Pretty cool, but it would be way cooler if I could get the other words to show up as well.
I've looked through as many Javascript help articles as I can stand, but they only go so far when I have no previous experience with Javascript. Sorry if the answer is kinda obvious ^^"
Defining more variables with the same name won't do anything, as only the most recently defined one will be accessible.
The code on the page doesn't support multiple words, and such a feature would need to be implemented.
Related
I have a Highmap that's populated with data fetched using getJSON. What I want to achieve is have a button (or dropdown) that allows me to switch between two or more data sets.
I've seen this question asked a few times in different ways (such as this one), and reading the answers I think have a general idea of what I need to do, but I remain stuck. FWIW I'm a complete novice just trying to make something work for my colleagues, so my mistake might be fundamental or could just be a matter of syntax.
For now to prove to myself that I can make it work I've tried to implement a button that, once clicked, simply switches to a second data set using setData. While the map is displaying correctly, and I know that both JSON files are being loaded, I can't get the switch to work.
Here is my attempt in full: http://jsfiddle.net/osc9m3e7/4/
And the part that I'm sure is incorrect somehow:
$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});
I'd appreciate any tips to get me on the right track.
You have probably noticed how borders of countries are getting thicker every time you set new data. It happens because the data object is not copied but used directly, so it is modified. To copy specific object you can use for example slice() function. Below you can find an example where switching between sets of data works as it should.
API Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Example:
http://jsfiddle.net/4ub0z408/
Answered by ewolden in the comments. My issue was that I wasn't naming the chart, and therefore not able to manipulate it using setData. The working example is now here: http://jsfiddle.net/osc9m3e7/7/
var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});
Firstly, I'm a big fan of the site and have used it countless time to help me when stuck on a problem, but this is the first time I have come across something that has required me to write a question because I simply cannot find a situation like this.
I have a Json file which I am loading a bunch of data from that I then run through with my code to put the right data in the right places so it can be rendered by ThreeJS (quick side note, big thanks to mrdoob, westLangley and the rest of the ThreeJS team for what they've done and their continued engagement with helping people here).
So at that point the mesh is able to be rendered and have orbit controls and so on. Then I made just a simple exporter in a similar style to that of ThreeJS.org/editor. The big difference being that I simple use JSON.stringify on a number of objects (the one I will focus on here is called "geo") and write their data to a new Json (json2). The goal being that now I can simply load json2 into the new program which will populate "geo" with the data of the json2's geo thus circumventing all of the processing that goes into putting the data in the right places.
Now here is the issue. All the data seems to be the same between the two "geo"s, but when going to color a face in the code by using:
for ( var i = 0; i < sD.geo.faces.length; i ++ ) {
var face = sD.geo.faces[ i ];
face.color.setStyle("#0066FF");
}
the error that "face.color does not have a function called setStyle" (rough quote from memory) appears. And again, this works perfectly fine in the first program.
So I looked into it further and it seems that when digging into the "face" variable in the code above via firebug, it doesn't have a constructor or prototype in its drop down menu, as it does have the first program. I'll upload screenshots of the two dropdowns to show more visually in a little while. )Update: Nevermind, I don't have enough rep to post them. Forgot about that haha)
So the data I have doesn't have the constructor/methods, so could it be that the data I'm setting the sD.geo equal to? (even did it so that it just sets the vertices from the json2 to the sD.geo.vertices so as to avoid that but didn't work, obviously). Any other ideas as to what my issue could be? Should I add the methods to the json2 and how because I looked into that a lot and couldn't find any good examples on it.
I apologize if I jumped all over the place throughout this, I tried to keep it as linear as possible as to cause as little confusion as possible.
Any and all help is appreciated, and I am more than willing to answer any questions anyone has that I am able to.
Thanks!
After tinkering with this more, I found a solution for adding the json2's geometry data to the new program's geo.
function loadGeo(json) {
var loader = new THREE.ObjectLoader();
var object = loader.parse( json );
var pushed = false;
object.traverse(function(child) {
if (child.geometry !== undefined && pushed !== true) {
addGeometry(child.geometry);
$.each(child.material.materials, function(cm, cMat) {
sD.geo.materials.push(cMat);
});
pushed = true;
}
});
}
Now this works, but it is far from flawless. For example, in object.traverse I put in a check to only add the first geometry and material it finds and ignore the rest. Both because I am only adding a single geometry and I haven't used/looked into traverse enough to know of any proper exit. Also in the json, the materials (there are ~24 for the single geometry) are very deep in the object tree, which is okay but probably not optimal.
The one big issue that I have come across with this is that for some reason, the materialIndexes I assigned to the faces in the geometry aren't assigned properly; they all are just set to 0(from the ones I looked at, there are ~11,000 faces so couldn't look through them all). An odd issue, and will edit my answer if and when I find solutions to this or others give solutions on here.
I figured this out by going back to the three.org/editor and seeing how their importer worked and making a rough attempt at something that uses the threejs loaders in the same way, but really make it less tied into the actual Editor and make it very "bare-bones" so that it serves my purposes alone. That being said, I'm curious if there is any ThreeJS importer which uses the loaders that can just populate variables in the way like I am doing here.
I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps
This is probably a common pattern in coding, though I am not knowledgeable enough to recognize it or use the correct terminology (I would've googled it then).
When you are creating an object that will invoke a method in a loop, but the content of the loop can change according to a certain set of conditions, do you do (pseudo-code):
method _method($condition){
switch($condition){}
}
or
method init($condition){
switch($condition){
case 1:
this._method = function(){};break;
case 2:
this._method = function(){};break;
....
}
}
I prefer version 1 as it is more maintainable, but I feel version 2 is lighter. Am I correct?
I realize the answer can differ quite a lot depending on the use case, so here is mine: I have a javascript slider, implemented as a jQuery plugin. depending on options, when the slider comes to the last frame, it either scrolls back to start, or seamlessly loops. Now, if it must seamlessly loop, then when each slide advance, I must set the element that has just disappeared on the left to be queued at the far right. Which means I have to detect when the element has disappeared from the view, and do a helluva of other checks for scrollLeft values and whatnot that I don't need to do if I am simply scrolling.
So how should I go about that?
I'm sure you understand this, but it's worth repeating:
If it ain't broke, don't fix it.
You can almost never find a performance problem in non-toy software by just thinking about it.
When people learn how to solve performance problems (as, IMHO, I have),
they are often asked what the secret is.
The secret is simple - don't guess, do diagnose.
Here's the method I use.
Everybody knows that, but they go ahead guessing anyway.
For one example, review the answers to this question.
Your use case seems to be simple and doesn't need much computing time, though you should use the code which is more readable for you and easier to maintain.
When using performance critical code you should keep the code within a loop as short/inexpensive as possible.
I am experimenting with jQuery and the animate() functionality. I don't believe the work is a final piece however I have problem that I can't seem to figure out on my own or by trolling search engines.
I've created some random animate block with a color array etc and everything is working as intended including the creation and deletion of the blocks (div's). My issue is within 2mins of running the page, Firefox 4 is already at more than a 500,000k according to my task manager. IE9 & Chrome have very little noticeable impact yet the processes still continue to increase.
Feel free to check out the link here: http://truimage.biz/wip300/project%202/
My best guess are the div's are being created at a greater speed than the 2000ms they are being removed however I was hoping an expert might either have a solution or could explain what I am doing wrong and some suggestions.
On another note, from the start of my typing this out till now the process is at 2,500,000k. Insane!m
It could be a lot of things other than just your script there. It could be a mem leak in one of the jQuery things you use, pretty hard to say.
Something you could try is this though:
Instead of creating new squares, use a "square pool". Let's say you create 20 squares and just keep re-using them instead of creating new ones.
You'd basically just have an array for the pool and take elements out from it when they are displayed, and put them back to it when the animation finishes.