I'm working on creating a function that can help me dynamically create something like this: Emotion Wheel
That is a manual mock up of what I'm trying to create dynamically. I want to pass into the function the number of axis and the number of "nodes" per half-axis. My biggest issue is figuring out placement and how to work that out. I'm still working on some rough draft stuff, but I was curious if there was something I was missing/hint on making it easier, or if I'd essentially just need to break down and dig up my Trig knowledge and come up with something from there.
Related
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
i want to program a 2D-sqare Gamefield. The gamefield shall consits of 9 subfields. The Gamefield shall be an Image, like an Spacefield or so. Here you can see the concept, and how it shall later look like (just a mockup :P)
Within this field i want to move a Object from one field to the other (vertical /horizontal) . But i don't know how i can realize that. I had think of an multidimensional array, but i don't know if this is the right way to do this. I need to know, at which pixel in the image the new field begins. But i think its no good idea to code that hard. I want to do this with Jquery, CSS and HTML. It shall become a very simple online game.
Qapla'
In game development these fields are usually called tiles.
It's perfectly fine to create a multidimensional array of Tiles.
Whether they hold their own position or if it's up to a separate renderer is up to your design.
Some links you might be interested in:
Tiles and tilemaps overview (though this uses a Canvas-element)
Using CSS transitions for smoothly moving from one Tile to the next (not as useful when using a Canvas)
jQuery animate if you don't like CSS transitions, you can make use of jQuery as well.
I'd recommend reading up on Tiles in game development first, there are tons of example implementations.
I've just started exploring using svgs within rails. I want to dynamically update a gagejs with the created_at column on my Comment model.
Is this possible? For example, if the user hasn't created a comment in x amount of time the gage drops randomly between a certain range. It sounds like a fun problem to solve, i just would like to know that it is indeed solvable.
Thank you.
You can use setTimeout to run something after a delay and DOM to update things dynamically. The links give you some examples of each so you'd just need to tie them together.
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/