I want to calculate the coordinates round a circle.
i can not get it to print the coordinates and i am unsure whether it calculates them at all.
My code:
HTML:
<p>Here is the coordinates: </p>
JS:
#screen size will use screen.width and screen.height later
var sW = 1920;
var sH = 1080;
#Two arrays with the coordinates stored in them
var XcircleCoordinates;
var YcircleCoordinates;
#rows should be rows in database. I will use php to get the information, but assume 4 for now.
var rows = 4;
#radius and center of circle.
var radius = 200;
var center = [sW/2,sH/2];
function xCord(i){
XcircleCoordinates[i] = radius*Math.cos((2.0*Math.PI*i)/rows)+center[0];
return XcircleCoordinates[i];
}
function yCord(i){
YcircleCoordinates[i] = radius*Math.sin((2.0*Math.PI*i)/rows)+center[1];
return YcircleCoordinates[i];
}
for (var i = 0; i < 10; i++){
$('p').prepend(xCord(i));
}
Your code have few syntax error, below should work.
//screen size will use screen.width and screen.height later
var sW = 1920;
var sH = 1080;
//two arrays with the coordinates stored in them
var XcircleCoordinates = new Array();
var YcircleCoordinates = new Array();
//rows should be rows in database. I will use php to get the information, but assume 4 for now.
var rows = 4;
//radius and center of circle.
var radius = 200;
var center = [sW/2,sH/2];
function xCord(i){
XcircleCoordinates[i] = radius*Math.cos((2.0*Math.PI*i)/rows)+center[0];
return XcircleCoordinates[i];
}
function yCord(i){
YcircleCoordinates[i] = radius*Math.sin((2.0*Math.PI*i)/rows)+center[1];
return YcircleCoordinates[i];
}
for (var i = 0; i < 10; i++){
$('p').prepend(xCord(i));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Here is the coordinates: </p>
Related
I want to find all clipping mask layer from psd. but problem is how can we identify clipping mask layers in psd currently I'm using below code.
I tried this How to identify clipping masks in Photoshop using JavaScript
But it is not working.
for (var x = 0; x < layers.length; x++) {
var layerindex = layers[x];
doc.activeLayer = doc.artLayers[x];
var ref = new ActionReference();
ref.putEnumerated( charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
var desc = executeActionGet(ref);
if(desc.hasKey(charIDToTypeID('GrpL'))){
alert("this is Clipping Mask Layer");
}
}
var doc = activeDocument,
layers = activeDocument.layers;
for (var x = 0; x < layers.length; x++)
{
doc.activeLayer = doc.layers[x];
var ref = new ActionReference();
ref.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
var desc = executeActionGet(ref);
if (desc.hasKey(charIDToTypeID('Grup')) && desc.getBoolean(charIDToTypeID('Grup')))
{
alert("this is Clipping Mask Layer: " + doc.activeLayer.name);
}
}
I'm trying to create a slot game;
I have some images that I put into an array
var createSlots = function(){
//setup images as tilingSprites
var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200);
var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200);
var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200);
var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200);
var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200);
var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200);
var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200);
var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200);
var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);
var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200);
//push slots into array; images, sprites etc.
mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10);
};
for the moment I have 2 functions (will combine them once I get this working)
createReels1 and createReels2
what they do is copy the mainSlotArray use a shuffle function
Then populate to 2 columns (reels) each (at the moment createReels2 only does one reel)
it then removes the array element from the array it's using
The trouble I'm having is that whatever image tiles are used in createReels2, disappear if they are being used in createReels1 function, e.g if image1.png used in createReels2 and createReels1, then it is not visible in the first 2 reels
createReels functions below (alot of hard coding!)
var createReels1 = function(){
slotArr1 = mainSlotArr.slice();
shuffle(slotArr1);
var counter = 0;
var num = 0
for(var i = 0; i <2; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = i*130;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr1[j];
var toDel = slotArr1.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
console.log(slot);
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[i].addChild(slot);
slotArr1.splice(toDel, 1);//remove from array
}
}
}
var createReels2 = function(){
slotArr2 = mainSlotArr.slice();
shuffle(slotArr2);
var counter = 0;
var num = 0
for(var i = 0; i <1; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = 260;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr2[j];
var toDel = slotArr2.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[2].addChild(slot);
slotArr2.splice(toDel, 1);//remove from array
}
}
}
If I understood the code correctly, with quick check:
Sprites can have only one parent. If you check the Sprite object, it actually has a parent property. So slotArr1 and slotArr2 have identical Sprites and that fact doesn't change id you slice them. Then when you are assigning them to different containers, they get moved from one container to the other. You can reuse textures sure, but one Sprite can only have on parent.
These are my coordinates of Selected diagonal points, will be more when selected points are more.
1: 25.312063043186914 2: 55.30672073364258
1: 25.24096949112138 2: 55.40525436401367
1: 25.224509592006314 2: 55.3462028503418
1: 25.22513076073063 2: 55.281314849853516
1: 25.27822894908031 2: 55.25899887084961
below is my current mysql query not giving me perfect result between selected diagonal.any help??
SELECT
*
FROM
tbl_custom
WHERE latitude <= 25.312063043186914
AND latitude >= 25.224509592006314
AND longitude <= 55.40525436401367
AND longitude >= 55.25899887084961
To eliminate the points within your bounding box query but not within polygon you require to use Point in Polygon algorithm.
The easiest way to do this is to have the coordinates in arrays. These can be used to find max and min coordinates for the query and for parameters for pointInPolygon() function.
function pointInPolygon(polySides,polyX,polyY,x,y) {
var j = polySides-1 ;
oddNodes = 0;
for (i=0; i<polySides; i++) {
if (polyY[i]<y && polyY[j]>=y || polyY[j]<y && polyY[i]>=y) {
if (polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x) {
oddNodes=!oddNodes;
}
}
j=i; }
return oddNodes;
}
In your Map code using jQuery getJSON()
var polySides = 4;//number of points in polygon
//horizontal Latitude coordinates of polygon
var polyLat = new Array();
polyLat[0] = 51.5;
polyLat[1] = 51.5;
polyLat[2] = 52.5;
polyLat[3] = 53;
polyLat[4] = 51.5;//First point repeated to close polygon
//vertical Longitude coordinates of polygon
var polyLng = new Array();
polyLng[0] = 0.5;
polyLng[1] = -1.9;
polyLng[2] = -1;
polyLng[3] = 0.6;
polyLng[4] = 0.5;
//Coordinates for bounding box
var maxLat = Math.max.apply(null,polyLat);
var minLat = Math.min.apply(null,polyLat);
var maxLng = Math.max.apply(null,polyLng);
var minLng = Math.min.apply(null,polyLng);
//Using jQuery
var url = "yourFile .php";
url +="?maxLat="+maxLat +"&minLat="+minLat +"&maxLng="+maxLng +"&minLng="+minLng;
$.getJSON(url,function(data) {
$.each(data.marker,function(i,dat){
if (pointInPolygon(polySides,polyLat,polyLng,dat.lat,dat.lng)){
var latlng = new google.maps.LatLng(dat.lat,dat.lng);
addMarker(latlng,dat.name);
bounds.extend(latlng);
}
});
map.fitBounds(bounds);
});
Map obtained using Bounding Box and Point in Polygon.
The page i am making is designed to:
take the dimensions of a set of tiles and a wall then print out how many tiles are needed to fill the area of the wall
print on screen a visual representation of what the wall will look like with the tiles on.
so far i've managed to successfully complete the first part.
<style>
#wallspace {
width:300px;
height:auto;
overflow:hidden;
position:relative;
margin:auto;
}
</style>
<form >
Tile Dimensions<br />
Width: <input type="text" id="tile_width" />cm
height: <input type="text" id="tile_height" />cm
<br />
Wall Dimensions<br />
Width: <input type="text" id="wall_width" />cm
height:<input type="text" id="wall_height" />cm
</form>
<button onclick="createWall()" >Try it</button>
<p id="result"> </p>
<div id="wallspace">
</div>
<script language="javascript" type="text/javascript">
function createWall() {
//collect dimensions from user input
var tileWidth = document.getElementById("tile_width").value;
var tileHeight = document.getElementById("tile_height").value;
var wallWidth = document.getElementById("wall_width").value;
var wallHeight = document.getElementById("wall_height").value;
//find the areas of the tile and the wall
var tileArea = tileWidth * tileHeight;
var wallArea = wallWidth * wallHeight;
//divide these to find the number of tiles needed
var noOfTiles = (wallArea/tileArea);
document.getElementById("result").innerHTML="number of tiles needed are " +
noOfTiles;
}
</script>
Now when it comes to printing the wall, I was trying to use a nested for loop to print the tiles. As below:
function printTiles()
{
var tileWidth = document.getElementById("tile_width").value;
var tileHeight = document.getElementById("tile_height").value;
var wallWidth = document.getElementById("wall_width").value;
var wallHeight = document.getElementById("wall_height").value;
//rows
for (var i = 0; i < wallHeight; i = i + tileHeight)
{
//collumns
for (var a = 0; a < wallWidth; a = a + tileWidth)
{
var div = document.createElement("div");
div.style.width = tileWidth + "px";
div.style.height = tileHeight + "px";
div.style.cssFloat = "left";
div.style.borderWidth = "2px";
div.style.borderStyle = "solid";
div.innerHTML = i;
document.getElementById("wallspace").appendChild(div);
}
}
so the nested for loop would print each column on the row than go to the next row so on.
For some reason my printTiles is not working at all and i dont understand why? secondly, when i get it working can i simply use
document.getElementById("wallspace").innerHTML=printTiles();
Leave a comment if you don't understand what i'm trying to do and i'll try to explain it better.
You are appending your DIV to itself with this line:
div.appendChild(div);
What you should be doing is something like this:
document.getElementById("wallspace").appendChild(div);
Also, your printTiles() function has no way of knowing what wallWidth, tileWidth, wallHeight and tileHeight are, as they are declared inside of createWall(). You might need to either combine these functions or add these lines to the beginning of printTiles():
var tileWidth = document.getElementById("tile_width").value;
var tileHeight = document.getElementById("tile_height").value;
var wallWidth = document.getElementById("wall_width").value;
var wallHeight = document.getElementById("wall_height").value;
Somewhere in my code, I seem to be doing something wrong and I cannot tell which part is going awry. I've printed to console the values I'm getting from the various arrays and it seems to match up. Then when I run the equalization function (a la Wikipedia-Histogram Equalization) my output image is close to total black. I was trying to interpret this guy's php into javascript just to test some stuff out and figured I did a decent job. But I'm not an expert.
The pertinent parts:
function imageLoaded(ev) {
element = document.getElementById("canvas1");
c = element.getContext("2d");
im = ev.target; // the image
// read the width and height of the canvas
width = element.width;
height = element.height;
// stamp the image on the left of the canvas:
c.drawImage(im, 0, 0);
// get all canvas pixel data
imageData = c.getImageData(0, 0, width, height);
w2 = width / 2;
var reds = new Array();
var greens = new Array();
var blues = new Array();
var freqR = new Array();
var freqG = new Array();
var freqB = new Array();
if (imageData){
buildHistograms(reds, greens,blues);
buildFrequencies(reds, greens, blues, freqR, freqG, freqB);
}
var alpha = 255/(w2*height);
// run through the image
for (y = 0; y < height; y++) {
inpos = y * width * 4; // *4 for 4 ints per pixel
outpos = inpos + w2 * 4;
for (x = 0; x < w2; x++) {
//reads pixel data(of img c)to each channel of rgb
r = imageData.data[inpos++];
g = imageData.data[inpos++];
b = imageData.data[inpos++];
a = imageData.data[inpos++];
//using histogram eqalization formula:
adjR = freqR[r]*alpha;
adjG = freqG[g]*alpha;
adjB = freqB[b]*alpha;
//assigns pixel data of output image
imageData.data[outpos++] = adjR;
imageData.data[outpos++] = adjG;
imageData.data[outpos++] = adjB;
imageData.data[outpos++] = a;
}
}
// put pixel data on canvas
c.putImageData(imageData, 0,0);
}
im = new Image();
im.onload = imageLoaded;
im.src = "Lenna.png";
function buildHistograms(reds,greens,blues){
//run through image building histogram
for (y=0; y < height; y++){
inpos = y * width *4;
for (x=0; x < w2; x++){
rd = imageData.data[inpos++];
g = imageData.data[inpos++];
b = imageData.data[inpos++];
a = imageData.data[inpos++];
// Add counts to our histogram arrays for each color.
reds.push(rd);
greens.push(g);
blues.push(b);
}
}
// Sort them by keys into order
reds.sort(function(a,b){return a-b});
greens.sort(function(a,b){return a-b});
blues.sort(function(a,b){return a-b});
}
function buildFrequencies(reds, greens, blues, freqR, freqG, freqB){
// Build frequency charts for all colors: takes REDS GREENS BLUES from buildHistograms and places them on top of each other accordingly
for(i=0; i<=255; i++){
sumR=0;
sumG=0;
sumB=0;
for(j=0; j<= i; j++){
if (reds[j]){sumR+=reds[j];}
if (greens[j]){sumG+=greens[j];}
if (blues[j]){sumB+=blues[j];}
}
freqR[i] = sumR;
freqG[i] = sumG;
freqB[i] = sumB;
}
}
Any help is appreciated, Thanks.
Looks like my build frequencies section was all wrong. I modified it in this way:
var len = reds.length;
for (j=0; j < len; j++) {
var rCurrVal = reds[j];
var gCurrVal = greens[j];
var bCurrVal = blues[j];
if (freqR.hasOwnProperty(rCurrVal)) {
freqR[rCurrVal] += 1;
} else {
freqR[rCurrVal] = 1;
}
if (freqG.hasOwnProperty(gCurrVal)) {
freqG[gCurrVal] += 1;
} else {
freqG[gCurrVal] = 1;
}
if (freqB.hasOwnProperty(bCurrVal)) {
freqB[bCurrVal] += 1;
} else {
freqB[bCurrVal] = 1;
}
}
for (i=0; i<255; i++){
if ($.inArray(i,reds)===-1){freqR[i]=0;}
if ($.inArray(i,greens)=== -1){freqG[i]=0;}
if ($.inArray(i,blues)=== -1){freqB[i]=0;}
if (i>0){
freqR[i]+=freqR[i-1];
freqG[i]+=freqG[i-1];
freqB[i]+=freqB[i-1];
}
}