We Keep Coding

Fit 100 items in a circular container, evenly spaced with javascript

I have 100 items entering the viewport in random order. Together, they need to form a circle inside a DOM container. I need some way to calculate the position the items need to move to...
The structure is kinda like this:
http://codepen.io/anon/pen/WvbKjb (visual sample with a bit of css and js inside)
<div id="circle"><!-- 100 items in here --></div</div>
And then the JS, for this sample, would generate 100 divs and set their position with css:
for (i = 0; i <= 100; i++) {
var item = document.createElement('div');
item.id = 'item'+i;
item.className = 'item';
item.setAttribute('style', 'left:0px;top:0px');
document.getElementById('circle').appendChild(item);
}
So I would generate 100 .item elements and move them around the screen. This movement is not an issue: what I don't know how to do is find the position each item has to end up at to properly fill the circle. Is there any way to easily calculate this with a formula? I'm afraid it's way beyond my math skills...
Thanks in advance for any help.
EDIT: using jQuery would be fine too.

You may start with this, just a bit of a math:
Example
the main part is:
var spacing = 360 / count;
var l = Math.cos(rotation * Math.PI / 180) * radius - itemRadius;
var t = Math.sin(rotation * Math.PI / 180) * radius - itemRadius;
rotation += spacing;
Where spacing is actually an angle

Probably a little overloaded but this is what i tried and what worked for me: https://jsfiddle.net/tx7po9eg/1/
Main Part is this function which will calculate the position of a specific element depending on the defined center and the radius.
function getPos(cent, rad, amount, iteration) {
var degree = 360 / amount * iteration;
var changeY = cent.y - (Math.sin(degree * Math.PI / 180) * rad);
var changeX = cent.x - (Math.cos(degree * Math.PI / 180) * rad);
var ret = {};
ret.x = Math.round(changeX * 100) / 100;
ret.y = Math.round(changeY * 100) / 100;
return ret;
}
here an example including visualization:
https://jsfiddle.net/tx7po9eg/3/

You will have to decide exactly HOW you want to fit all the elements inside the circle. Do you want them in a single line around the parameter? At Random? Fill the circle?
If you want to fill the circle, one thing you could do is work like that - move from the center outside, starting by putting an item in the middle, then going out and putting another circle around it, then another around it, and like that keep wrapping it in layers until you hit the end of the circle. The only thing to figure out here would be the spacing (e.g. how many circles in each layer), and that would depend on the size of each element (are the sizes fixed)?
If you can make the container circle as large as you desire, you can just start making layers until you run out of items, and then place the big circle around them.
Hope this helps...

Soft Light Blending Mode

I am trying to write a function that calculates the soft light given a foreground and a background color.
The function is below;
var background = '0xFFFFFF';
var foreground = '0x47768C';
var calculateSoftlight = function (background, foreground) {
var intBackground = parseInt(background, 16);
var intForeground = parseInt(foreground, 16);
var softlight = (1 - (2 * intForeground)) * (intBackground*intBackground) + (2 * intForeground * intBackground);
return softlight.toString(16);
}
calculateSoftlight(background, foreground); //-8eed155338bb200000
I am using the Pegtop formula as listed here; http://en.wikipedia.org/wiki/Blend_modes. I am unsure of the correct implementation of this. Any ideas?

Apply the formula to each RGB value instead of using Hex. If you need to use Hex as an input you'll probably need to convert.
You will need to normalize each value (so value / 255) and use that in the formula. Then multiply (and round) the result by 255 to convert back to 8-bit value.
Something like this should be close, I haven't used that formula specifically though so this is untested.
var top = top / 255,
bot = bot / 255;
top = ((1 - 2*bot)*Math.pow(top, 2)) + 2*bot*top,
top = Math.round(top * 255);

Rotation formula deforming polygons

I have written myself a formula to rotate the points of regular polygons (and maybe even irregular) around an orientation point. The formula seems to work on discretely coded rectangles:
tempShape.points = [[0,0],[wid,0],[wid,hig],[0,hig]];
But not on polygons generated by formula:
tempShape.points = [[len,0]];
for(var i=1; i < poin; i++){
if(gen){
tempShape.points[i] = [0,0];
tempShape.points[i][0] = len*Math.cos(angle*i);
tempShape.points[i][1] = len*Math.sin(angle*i);
}
}
This is my rotation formula:
for(var i2 = 0; i2 < displayList[i].points.length; i2++){
displayList[i].points[i2][0] = (displayList[i].pointsRot[i2][0] + displayList[i].oPoint[0]) * Math.cos(displayList[i].rotation) - (displayList[i].pointsRot[i2][1] + displayList[i].oPoint[1]) * Math.sin(displayList[i].rotation);
displayList[i].points[i2][1] = (displayList[i].pointsRot[i2][1] + displayList[i].oPoint[1]) * Math.cos(displayList[i].rotation) + (displayList[i].pointsRot[i2][0] + displayList[i].oPoint[0]) * Math.sin(displayList[i].rotation);
}
Where displayList[i] is the shape, .points is the array containing all the points, .rotation is the rotation of the shape, .oPoint is the point of orientation.
I hope you can help, thanks in advance.
Kyle.
Edit:
Just tried rather than incrementing the rotation I set a static rotation of 0.01, but this makes it act like it would normally if incremented the rotation by 0.01, so somewhere (I don't know where) it must be like incrementing my rotation by the set rotation, I just need to figure it out. Could I give my whole code for someone to look through to help me?

You are using in the second formula value displayList[i].pointsRot[i2][0] which has been already changed in the first formula. Just remember original value in temporary variable and use it.
Edit: It seems I was entangled in your longlonglong names.
Сheck that your formulas match to:
NewX = CenterX + (OldX-CenterX)*Cos(Fi) - (OldY-CenterY)*Sin(Fi)
NewY = CenterY + (OldX-CenterX)*Sin(Fi) + (OldY-CenterY)*Cos(Fi)
where (CenterX, CenterY) is point of rotation

Algorithm for random land in a "Tank Wars" game [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
Did you ever played the "Tank wars" game?
I'm programming this game with JavaScript + Canvas (for a personal challenge), and what I need is an algorithm for generating that random green land every time I start the game, but I'm not too good at maths, so I can't do it myself.
I don't want someone to give me the code, I only want the idea for the algorithm.
Thanks!

(9 segments)
Fiddle demo
(7 segments)
The main generation function look like this:
var numOfSegments = 9; // split horizontal space
var segment = canvas.width / numOfSegments; // calc width of each segment
var points = [], calcedPoints;
var variations = 0.22; // adjust this: lower = less variations
var i;
//produce some random heights across the canvas
for(i=0; i < numOfSegments + 1; i++) {
points.push(segment * i);
points.push(canvas.height / 2.8 + canvas.height * variations * Math.random());
}
//render the landscape
ctx.beginPath();
ctx.moveTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
calcedPoints = ctx.curve(points); // see below
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
The curve() function is a separate function which generate a cardinal spline. In here you can modify it to also store tension values to make more spikes. You can also used the generated points as a basis for where and at what angle the tanks will move at.
The function for cardinal spline:
CanvasRenderingContext2D.prototype.curve = function(pts, tension, numOfSegments) {
tension = (tension != 'undefined') ? tension : 0.5;
numOfSegments = numOfSegments ? numOfSegments : 16;
var _pts = [], res = [], t, i, l, r = 0,
x, y, t1x, t2x, t1y, t2y,
c1, c2, c3, c4, st, st2, st3, st23, st32;
_pts = pts.concat();
_pts.unshift(pts[1]);
_pts.unshift(pts[0]);
_pts.push(pts[pts.length - 2]);
_pts.push(pts[pts.length - 1]);
l = (_pts.length - 4);
for (i = 2; i < l; i+=2) {
//overrides and modifies tension for each segment.
tension = 1 * Math.random() - 0.3;
for (t = 0; t <= numOfSegments; t++) {
t1x = (_pts[i+2] - _pts[i-2]) * tension;
t2x = (_pts[i+4] - _pts[i]) * tension;
t1y = (_pts[i+3] - _pts[i-1]) * tension;
t2y = (_pts[i+5] - _pts[i+1]) * tension;
st = t / numOfSegments;
st2 = st * st;
st3 = st2 * st;
st23 = st3 * 2;
st32 = st2 * 3;
c1 = st23 - st32 + 1;
c2 = -(st23) + st32;
c3 = st3 - 2 * st2 + st;
c4 = st3 - st2;
x = c1 * _pts[i] + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
y = c1 * _pts[i+1] + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;
res[r++] = x;
res[r++] = y;
} //for t
} //for i
l = res.length;
for(i=0;i<l;i+=2) this.lineTo(res[i], res[i+1]);
return res; //return calculated points
}

Look into perlin noise generation, this in combination with a good smoothing algorithm can produce some pretty good terrain, and is fairly quick. There is a reference version of the code kicking around the net somewhere, which should provide you with a fairly hefty headstart

First you need a point that is random y (between 55,65); got x=0
So this is the origin point for the green, lets keep it as x1,y1 (x1 always 0).
Then you need a random integer between 30 to 40. This is x2. And a random y which is in the range y1 + 8 to y1 + 20.
Then x3 and y3 on same principle (lets call it formula type 1)
Now you need to first get a random either -1 or 1, this will be directions of y4. So y4 can go higher than y3 or lower ... this will be formula type 2.
You need to keep a max and min y for a new y, if it crosses that then go the other way -> this will be a correction type formula 3.
Xn keeps increasing till its >= width of board.
Join the lines in a eclipses ... and looks like web searches is the way to go !

I am sure there are a lot of coded libraries that you could use to make this easy. But if you are trying to code this by yourself, here is my idea.
You need to define terrain from everything else. So every part of your environment is a cluster for example. You need to define how are separated these clusters, by nodes(points) for example.
You can create a polygon from a sequence of points, and this polygon can become whatever you want, in this case terrain.
See that on the image you passed, there are peaks, those are the nodes (points). Remember to define also nodes on the borders of your environment.

There are surely a novel, written algorithms, either fractal as #DesertIvy pointed out or others, maybe there are libraries as well, but if you want toi generate what is in the image, it can be pretty straightforward, since it is just (slightly curved) lines between points. If you do it in phases, not trying to be correct at once, it is easy:
Split x region of your game screen into sections (with some minimal and maximal width) using random (you may be slightly off in last section, but it does not matter as much, I think). Remember the x-es where sections meet (including the ones at game screen border)
Prepare some data structure to include y-s as well, on previously remembered x-s. Start with leftmost.y = 0, slope = Math.random()-0.5;.
Generate each next undefined y beginning with 1: right.y = left.y + slope * (right.x-left.x); as well as update slope after each y: slope += Math.random()-0.5;. Do not bother, for the moment, if it all fits into game screen.
If you want arcs, you can generate "curviness" parameter for each section randomly which represent how much the middle of the line is bumped compared to straight lines.
Fit the ys into the game screen: first find maximal and minimal generated y (mingeny, maxgeny) (you can track this while generating in point 4). Choose where the max and min y in game screen (minscry, maxscry) (say at the top fourth and at the bottom fourth). Then transform generated ys so that it spans between minscry and maxscry: for every point, do apoint.y = minscry + (maxscry-minscry)/(maxgeny-mingeny)*(apoint.y-mingeny).
Now use lines between [x,y] points as a terrain, if you want to use "curviness", than add curvemodifier to y for any particular x in a section between leftx and rightx. The arc need not to be a circle: I would suggest a parabola or cosine which are easy to produce: var middle = (left.x+right.x)/2; var excess = (x-left)/(middle-left); and then either var curvemodifier = curviness * (1-excess*excess); or var curvemodifier = curviness * Math.cos(Math.PI/2*excess).

Wow...At one point I was totally addicted to tank wars.
Since you are on a learning adventure...
You might also learn about the context.globalCompositeOperation.
This canvas operation will let you grab an image of actual grass and composite it into your game.
You can randomize the grass appearance by changing the x/y of your drawImage();
Yes, the actual grass would probably be too distracting to include in your finished game, but learning about compositing would be valuable knowledge to have.
...and +1 for the question: Good for you in challenging yourself !

HTML 5 canvas animation - objects blinking

I am learning ways of manipulating HTML 5 Canvas, and decided to write a simple game, scroller arcade, for better comprehension. It is still at very beginning of development, and rendering a background (a moving star field), I encountered little, yet annoying issue - some of the stars are blinking, while moving. Here's the code I used:
var c = document.getElementById('canv');
var width = c.width;
var height = c.height;
var ctx = c.getContext('2d');//context
var bgObjx = new Array;
var bgObjy = new Array;
var bgspeed = new Array;
function init(){
for (var i = 1; i < 50; i++){
bgObjx.push(Math.floor(Math.random()*height));
bgObjy.push(Math.floor(Math.random()*width));
bgspeed.push(Math.floor(Math.random()*4)+1);
}
setInterval('draw_bg();',50);
}
function draw_bg(){
var distance; //distace to star is displayed by color
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0,0,width,height);
for (var i = 0; i < bgObjx.length; i++){
distance = Math.random() * 240;
if (distance < 100) distance = 100;//Don't let it be too dark
ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")";
ctx.fillRect(bgObjx[i], bgObjy[i],1,1);
bgObjx[i] -=bgspeed[i];
if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new
bgObjx[i] += width;
bgObjy[i] = Math.floor(Math.random() * height);
bgspeed[i] = Math.floor (Math.random() * 4) + 1;
}
}
}
As you can see, there are 3 arrays, one for stars (objects) x coordinate, one for y, and one for speed variable. Color of a star changes every frame, to make it flicker. I suspected that color change is the issue, and binded object's color to speed:
for (var i = 0; i < bgObjx.length; i++){
distance = bgspeed[i]*30;
Actually, that solved the issue, but I still don't get how. Would any graphics rendering guru bother to explain this, please?
Thank you in advance.
P.S. Just in case: yes, I've drawn some solutions from existing Canvas game, including the color bind to speed. I just want to figure out the reason behind it.

In this case, the 'Blinking' of the stars is caused by a logic error in determining the stars' distance (color) value.
distance = Math.random() * 240; // This is not guaranteed to return an integer
distance = (Math.random() * 240)>>0; // This rounds down the result to nearest integer
Double buffering is usually unnecessary for canvas, as browsers will not display the drawn canvas until the drawing functions have all been completed.

Used to see a similar effect when programming direct2d games. Found a double-buffer would fix the flickering.
Not sure how you would accomplish a double(or triple?)-buffer with the canvas tag, but thats the first thing I would look into.