I am trying to plot coordinates around a square - javascript

I am trying to plot coordinates around a square programatically here it is hard coded to show what i am after.
http://jsfiddle.net/zwkny/
// amount of chairs
var aoc = 4;
// table width
var tw = 200;
// table height
var th = 200;
// chair width height
var cwh = 60 / 2;
var space = tw * 4 / aoc;
var left = [-30,100,-30,-160];
var top = [-160,-30,100,-30];
// straing point
var sp = 12;
for(var i=0; i<aoc; i++){
var x = cwh + space * i / aoc;
console.log(x);
//var y = space / 2 - cwh * i;
$("#center").append("<div class='chair' style='left:"+left[i]+"px;top:"+top[i]+"px;'>"+i+"</div>");
}
Maths is definately not my strong point just thought i would post up here see if anyone can help point me in the right direction i keep going and update if i get it???
I need it this way to represent people the small circles standing around the large square but there will be random amounts of people and they all need to be at equal distances.
I posted the same post about a circle object yesterday and now i am on squares i just cant get my head around the maths, any help.
Sore that this has been voted down just thought i would update with a post putting all these together
http://devsforrest.com/116/plot-positions-around-shapes-with-javascript
Hope it helps someone else

var x,y;
// amount of chairs
var totalChairs = 12;
// square size
var squareSize = 200;
var chairSize = 20;
for(var i=0; i<totalChairs; i++){
var angle = 2*Math.PI * i/totalChairs;
if (angle > Math.PI/4 && angle <= Math.PI* 3/4){
x = (squareSize/2) / Math.tan(angle);
y = -squareSize/2;
} else if (angle > Math.PI* 3/4 && angle <= Math.PI* 5/4){
x = -squareSize/2;
y = (squareSize/2) * Math.tan(angle);
} else if (angle > Math.PI* 5/4 && angle <= Math.PI* 7/4){
x = -(squareSize/2) / Math.tan(angle);
y = -squareSize/2 + squareSize;
} else {
x = -squareSize/2 + squareSize;
y = -(squareSize/2) * Math.tan(angle);
}
x -= chairSize/2;
y -= chairSize/2;
$("#center").append("<div class='chair' style='left:"+x+"px;top:"+y+"px;'></div>");
}
Demo

Related

Pixelate animation

I'm trying to pixelate an animation.. I have a .png image where I cut in frames. I have a scrollbar who gives a number, which is the new size of every pixel. (rasterSize)
I already did it for an image and it's working.
http://bht-homework.com/RMA/PIX_PRES1/
But for animation it looks like doesn't calculate the first pixels.
http://bht-homework.com/RMA/PIX_PRES2/
var imgData=context.getImageData(0,0,img.width,img.height);// width is 190,height 240
for (var x = 0; x < spriteSizeWidth; x++) {
for (var y = 0; y < spriteSizeHeight; y++) {
var rasterX = ((x / rasterSize) | 0) * rasterSize;
var rasterY = ((y / rasterSize) | 0) * rasterSize;
var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;
r=imgData.data[rasterValIndex];
g=imgData.data[rasterValIndex + 1];
b=imgData.data[rasterValIndex + 2];
a=imgData.data[rasterValIndex + 3];
context.fillStyle="rgba(" +r+","+g+","+b+","+a+")";
context.fillRect(x,y,rasterSize,rasterSize);
}
}
Does someone has an idea how to fix it?
Thanks!
Though it might look as it would skip the first few pixels of your image, it actually just draws the blocks at the wrong position. It's offset by rasterSize.
You need to shift back the pixels to the correct position.
So simply replace
context.fillRect(x, y, rasterSize, rasterSize);
by
context.fillRect(x - rasterSize, y - rasterSize, rasterSize, rasterSize);

Numbers that result in a more rounded corner when graphing in Javascript

I have a for loop that returns a decimal between 0 and 1. I'd like to make a curve that appears more like a rounded corner than it is now. I'd also like to have it start ramping up only after 0.25. I can't quite figure out how to do it with the math I have now. I'm using Math.log and a linear conversion function, but maybe I need something more related to a parabolic curve.
for (i = 1; i < 101; ++i) {
var dec = i / 100
if (dec >= 0.25) {
console.log("dec = " + dec);
var large = i * 100
var log = Math.log(large);
console.log("log = " + log);
var linCon = applyLinearConversion(log, 2.8, 9.2104, -2.7, 1)
console.log("linCon " + i + " = " + linCon);
document.getElementById("graph").innerHTML += "<div style='background-color:#000000; width:" + (linCon * 1000) + "px; height:5px;'></div>";
}
}
function applyLinearConversion(OldValue, OldMin, OldMax, NewMin, NewMax) {
OldRange = (OldMax - OldMin)
if (OldRange == 0)
NewValue = NewMin
else {
NewRange = (NewMax - NewMin)
NewValue = (((OldValue - OldMin) * NewRange) / OldRange) + NewMin
}
return NewValue
}
<div id="graph"></div>
I have it populating a div with more styled divs.
Mine is like this:
I want mine more like this:
You can use the formula of the half circle graph which is:
It results in the following graph:
Since you are using horizontal divs that are stacked vertically to draw the graph, the x and y coordinates will be reversed and the left quarter of the circle will be used from the above graph.
var width = 200; // the width of the graph
var height = 200; // the height of the graph
var xOffset = 0.25 * width; // the x offset at which the graph will start ramping up (this offset is added to the graph width)
var html = ""; // to accumulate the generated html before assigning it to innerHTML (it's not a good idea to constantly update innerHTML)
for (i = 1; i < 101; ++i) {
var x = 1 - i / 100; // the x coordinate, we are using the left side of the graph so x should be negative going from -1 to 0
var y = Math.sqrt(1 - x * x); // the y coordinate as per the formula (this will be used for the width)
html += "<div style='background-color:#000000; width:" + (xOffset + y * width) + "px; height:" + (height / 100) + "px;'></div>";
}
document.getElementById("graph").innerHTML = html;
<div id="graph"></div>

Biggest distance between different points based on x-values and y-values?

I got a bunch of nodes which are stored in an array arr.
Each node has a x and y value which repesents the position on the screen.
Now, i created the middle element of arr and save it in middle.
Now, my goal is, to find out the distance between middle and all other nodes and also find out the one with the maximum distance. For the distance I use the Pythagorean theorem a^2 + b^2 = c^2, that means sqrt(a^2 + b^2) = c or in my case sqrt(x^2 + y^2) = distance between 2 nodes.
For example to create the distance between (10,10) and (20,30) I create the difference of the x-scale and the y-scale, that means x = 20-10 = 10 and y = 30-10 = 20. The result is, that the distance between those nodes is sqrt( 10^2 + 20^2) = 22,3. In my code, I check with the if-loop, which x-value and y-value is bigger to avoid negative values. But something I made is wrong. Maybe someone can help?
var middle = arr[Math.floor(arr.length / 2)];
var arrayForDistance = [];
var distance = [];
for(i = 0; i != arr[middle] & i< arr.length; i++ ) {
if(arr[i].x > arr[middle].x) {
var newX = arr[i].x - arr[middle].x;
var newY = arr[i].y - arr[middle].y;
}
else if ( arr[i].x < arr[middle].x)
{
var newX = arr[middle].x - arr[i].x;
var newY = arr[middle].y - arr[i].y;
}}
distance = sqrt( newX^2 + newY^2)
arrayForDistance.push(distance[i]);
}
var maxDistance = Math.max.apply(null, arrayForDistance)
First of all you dont need to worry about negatives since you are squareing them, they will cancel out.
secondly your for loop is wrong it should be
var middle = arr[Math.floor(arr.length / 2)];
var arrayForDistance = [];
var distance ;
for(i = 0; i< arr.length; i++ ) {
if (i != Math.floor(arr.length / 2)){
var newX = arr[i].x - arr[middle].x;
var newY = arr[i].y - arr[middle].y;
distance = sqrt( newX^2 + newY^2)
arrayForDistance.push(distance);
}
}
var maxDistance = Math.max.apply(null, arrayForDistance)

Javascript elements only snapping to grid from right side

I am trying to resize elements so that they snap to a grid and so far it is working if I resize from the right side and bottom but for some reason it doesn't work from the left side. I am sure it's just my math but here is the code:
var dimension = win.getDimension();
var newW = Math.round(dimension[0] / 10) * 10;
var newH = Math.round(dimension[1] / 10) * 10;
win.setDimension(newW, newH);
Any ideas?
So what I ended up doing was having an event called onBeforeResizeStart which saved the current x position for the window and in the onResizeFinish event I checked to see if the new x position matched the saved x position. If it did not then I just updated the x position and did the same snap calculation.
onBeforeResizeStart:
var position = getCoords(win);
window.CurrentX = position.left;
onResizeFinish
var position = getCoords(win);
if(position.left != window.currentX)
{
var newX = Math.round(position.left / 10) * 10;
win.setPosition(newX, position.top);
}
var dimension = win.getDimension();
var newW = Math.round(dimension[0] / 10) * 10;
var newH = Math.round(dimension[1] / 10) * 10;
win.setDimension(newW, newH);

Draw a html5 canvas cylindre with camera view inside the cylinder

I think the title is self-explanatory.
I need to build html5 canvas cylindre with the camera view in the center of the cylinder.
On the wall of the cylinder i need to build something like pictures, the cylinder to rotate and zoom.
If anyone has some pointers as to where to start with the camera and the cylinder please help.
To help you understand my description i have posted a image
http://s21.postimg.org/fpnmukbef/inside_cilindre.jpg
i think you must work on the 2d picture and on last step transform the needed part
to transform the good part into 3d, i think you must stretch each colon depending on the parabola equation you choice
function getStretch(x,maxx)
{ /* here i choice :
f(x) = (x*x)+3 for top
f(x) = -(x*x)+1 for bottom
when y >= 0 and y <= 4
x >= -1 and x <= +1
*/
// convert x ~ maxx to -1 ~ 1
var ratio = 2/maxx; // -1 to 1 === 2
x = x * ratio;
x -= 1; // switch from 0 ~ 2 to -1 ~ 1
var sizeY = 4;
var y = -(x*x)+1; // bottom get y >= 0 and y <= 1 result, easier to compute
y *= 2; // double to add up and bottom
var colonHeight = sizeY - y;
var colonRatio = colonHeight / sizeY;
return colonRatio; // return the height ratio for this colon
}
values for a 101 colons view : http://jsfiddle.net/L9YgL/1/
var view_start_x = 200; // current view start at 200px from left source image
var view_size_x = 399; // current view work on 400 px width
// get our stretch ratio for each colon
var stretch_values = [];
for(var x=0;x<=view_size_x;x++) stretch_values[x] = getStretch(x,view_size_x);
// now we need a function to get the colon height and position
var colonHeight = 400; // height of source image, and max height of out
function getColonInfo(x)
{ if(x < 0 || x > view_size_x) return {h:42,y:0};
// compute current colon height
var ratio = stretch_values[x];
var height = parseInt( colonHeight * ratio ,10);
var posY = parseInt( (colonHeight - height)/2 ,10);
return {h:height,y:posY};
}
// save this info for each out colon
var colon_info = [];
for(var x=0;x<=view_size_x;x++) colon_info[x] = getColonInfo(x);
// now a function to render a colon with a zoom
function renderColon(x,sourceX)
{ var info = colon_info[x];
var originalHeight = colonHeight;
var height = info.h;
var y = info.y;
// now do your reduce/blit magic here
// render at "x","y" a colon with height of "height"
// from source colon "sourceX" who get height of "originalHeight"
}
// and a function to iterate each colon and do the magic
function my2dTo3d()
{
for(x=0; x<=view_size_x; x++)
{ var offset = x + view_start_x;
renderColon(x,offset);
}
}
ok there certainly be a better method to do this, here i do it at hand, maybe css3 ?

Categories