My clearScreen function doesn't clear the screen - javascript

I'm trying to make a game in CodeHS, but the clearScreen function doesn't clear the title screen, instead, it says that the "Sky" variable isn't defined, I assume it does the same for the rest of the variables. The title screen prints fine, I just can't clear it.
Any advice for shrinking the code is also appreciated, I tried making a function for making the windows but I have no idea how to.
Code:
var brown = new Color(140,74,47);
//The start function makes the title screen.
function start() {
titleScreen();
mouseClickMethod(clearScreen);
}
function titleScreen() {
//Landscape
var Sky = new Rectangle(400,500);
Sky.setPosition(0,0);
Sky.setColor(Color.blue);
add(Sky);
var Sun = new Circle(50);
Sun.setPosition(155,96);
Sun.setColor(Color.yellow);
add(Sun);
var Ground = new Rectangle(400,200);
Ground.setPosition(0,300);
Ground.setColor(Color.green);
add(Ground);
//Bulding
/*Windows go in order from left to right, top to bottom.
*1 is the top left window.
*/
var Building = new Rectangle(100,300);
Building.setPosition(50,100);
Building.setColor(Color.grey);
add(Building);
var Window1 = new Rectangle(35,35);
Window1.setPosition(60,110);
Window1.setColor(Color.white);
add(Window1);
var Window2 = new Rectangle(35,35);
Window2.setPosition(105,110);
Window2.setColor(Color.white);
add(Window2);
var Window3 = new Rectangle(35,35);
Window3.setPosition(60, 155);
Window3.setColor(Color.white);
add(Window3);
var Window4 = new Rectangle(35,35);
Window4.setPosition(105,155);
Window4.setColor(Color.white);
add(Window4);
var Window5 = new Rectangle(35,35);
Window5.setPosition(60,200);
Window5.setColor(Color.white);
add(Window5);
var Window6 = new Rectangle(35,35);
Window6.setPosition(105,200);
Window6.setColor(Color.white);
add(Window6);
var Window7 = new Rectangle(35,35);
Window7.setPosition(60,245);
Window7.setColor(Color.white);
add(Window7);
var Window8 = new Rectangle(35,35);
Window8.setPosition(105,245);
Window8.setColor(Color.white);
add(Window8);
var Window9 = new Rectangle(35,35);
Window9.setPosition(60,290);
Window9.setColor(Color.white);
add(Window9);
var Window10 = new Rectangle(35,35);
Window10.setPosition(105,290);
Window10.setColor(Color.white);
add(Window10);
var Door = new Rectangle(35,50);
Door.setPosition(83,350);
Door.setColor(brown);
add(Door);
var Title = new Text("Title", "100pt Aleo");
Title.setPosition(60,150);
Title.setColor(Color.black);
add(Title);
var Devs = new Text("By Terra", "40pt Aleo");
Devs.setPosition(75,200);
Devs.setColor(Color.black);
add(Devs);
var Play_Button_Background = new Rectangle(200,100);
Play_Button_Background.setPosition(90,350);
Play_Button_Background.setColor(Color.black);
add(Play_Button_Background);
var Play_Button_Text = new Text("Start", "40pt Aleo");
Play_Button_Text.setPosition(135,415);
Play_Button_Text.setColor(Color.white);
add(Play_Button_Text);
}
function clearScreen() {
titleScreen();
remove(Sky);
remove(Sun);
remove(Ground);
remove(Building);
remove(Window1);
remove(Window2);
remove(Window3);
remove(Window4);
remove(Window5);
remove(Window6);
remove(Window7);
remove(Window8);
remove(Window9);
remove(Window10);
remove(Door);
remove(Title);
remove(Devs);
remove(Play_Button_Background);
remove(Play_Button_Text);
}
function level1() {
//Adds level 1.
var test = new Circle(100);
test.setPosition(100,100);
add(test);
}

Related

Reduction over an image collection Google Earth Engine

I am using CHIRPS data set (daily precipitation) to derive mean, median, min and max precipitation within a certain time frame. Then, I want to extract the values at specific locations included in a point shapefile and save the results in a table.
The script seem to work but the output table only has zeros (0) as values for the 4 variables.
Please see the script below
var lng = 65.64;
var lat = 34.35;
var point = ee.Geometry.Point(lat, lng);
//var aoi = point.buffer(100000); // Create an area (1km buffer around point)
var country = ee.FeatureCollection('USDOS/LSIB_SIMPLE/2017')
.filter(ee.Filter.eq('country_co', 'AF'));
var aoi = country;
Map.setCenter(lng, lat, 5); // Center the map on this location, zoom level 10
var start = '2018-02-15'; // initial date of the image collection
var end = '2018-07-15'; //final date of the image collection
var p1 = ee.Geometry.Point([69.78086, 34.65411])
var p2 = ee.Geometry.Point([61.82234, 30.66048])
var table = ee.FeatureCollection(ee.List([ee.Feature(p1),ee.Feature(p2)]))
var AddPrMean = function(image) {
var PrMean = image.reduce(ee.Reducer.mean()).rename('PrMean');
return image.addBands(PrMean);
};
var AddPrMedian = function(image) {
var PrMedian = image.reduce(ee.Reducer.median()).rename('PrMedian');
return image.addBands(PrMedian);
};
var AddPrMin = function(image) {
var PrMin = image.reduce(ee.Reducer.min()).rename('PrMin');
return image.addBands(PrMin);
};
var AddPrMax = function(image) {
var PrMax = image.reduce(ee.Reducer.max()).rename('PrMax');
return image.addBands(PrMax);
};
var dataset = ee.ImageCollection('UCSB-CHG/CHIRPS/DAILY')
.filterDate(start, end)
.filterBounds(aoi)
.map(AddPrMean)
.map(AddPrMedian)
.map(AddPrMin)
.map(AddPrMax);
var composites = dataset.select(['PrMean','PrMedian','PrMin','PrMax']).first();
var YieldLocations = ee.FeatureCollection(table);
var YPrec = composites.reduceRegions(YieldLocations, ee.Reducer.max(), 1);
print(YPrec); ```
I found a solution that seems to work, however, the median always gives 0 as result.
var lat = 34.35;
var point = ee.Geometry.Point(lat, lng);
//var aoi = point.buffer(100000); // Create an area (1km buffer around point)
var country = ee.FeatureCollection('USDOS/LSIB_SIMPLE/2017')
.filter(ee.Filter.eq('country_co', 'AF'));
var aoi = country;
Map.setCenter(lng, lat, 5); // Center the map on this location, zoom level 10
var start = '2018-02-15'; // initial date of the image collection
var end = '2018-07-15'; //final date of the image collection
var p1 = ee.Geometry.Point([69.78086, 34.65411])
var p2 = ee.Geometry.Point([61.82234, 30.66048])
var table = ee.FeatureCollection(ee.List([ee.Feature(p1),ee.Feature(p2)]))
var dataset = ee.ImageCollection('UCSB-CHG/CHIRPS/DAILY')
.filterDate(start, end)
.filterBounds(aoi);
var PrMean = dataset.mean().rename('PrMean');
var PrMedian = dataset.median().rename('PrMedian');
var PrMin = dataset.min().rename('PrMin');
var PrMax = dataset.max().rename('PrMax');
var composites = PrMean
.addBands(PrMedian)
.addBands(PrMin)
.addBands(PrMax);
var YieldLocations = ee.FeatureCollection(table);
var YPrec = composites.reduceRegions(YieldLocations, ee.Reducer.max(), 1);
print(YPrec);```

create arrow using leafletjs

I want to create a arrow in leaflet using poly lines of multipolylines whichever suits..
The arrow class should take in following param
baselatitude = base of the arrow where the arrow will be on map
baselongitude = base of the arrow where the arrow will be on map
pointlatitude = the tip of the arrow on the map
pointlongitude = the tip of the arrow on the map
apointlatitude
apointlongitude
bpointlatitude
bpointlongitude
angle = rotation degree
can anyone please provide guidance on creating the arrow using following param . It would be nice to if you can create a leaflet class extension L.arrow
did that myself for fit my requirement .. pasting in if somebody finds it useful someday
feature.geometry.coordinates[0] is the geoJson collection where all the coordinates are retrieved
L.Playback.WindArrowMarker = L.Marker.extend({
initialize: function (startLatLng, options, feature) {
this._min = 99;
this._max = 0;
this._arrowStyleOptions = [
{ color: '#ffff00' },
{ color: '#00ffff' },
{ color: '#00ff00' }];
var ArrowData = feature.geometry.coordinates[0];
var ArrowBaseLon = ArrowData[0];
var ArrowBaseLat = ArrowData[1];
var ArrowPointLat = ArrowData[2];
var ArrowPointLon = ArrowData[3];
var ArrowPointALat = ArrowData[4];
var ArrowPointALon = ArrowData[5];
var ArrowPointBLat = ArrowData[6];
var ArrowPointBLon = ArrowData[7];
var ArrowHeight = ArrowData[8];
var ArrowMagnitude = ArrowData[9];
var ArrowBearing = ArrowData[10];
if (ArrowMagnitude > this._max) this._max = ArrowMagnitude;
if (ArrowMagnitude < this._min) this._min = ArrowMagnitude;
var styleToUse=this._getArrowStyle(ArrowMagnitude);
//Create Arrow structure and assign first value from the playback data
//baseLtlg //PointLtlg
this._arrowbase = L.polyline([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]], styleToUse);
//PointLtlg //PointAtLtlg
this._arrowpointA = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]], styleToUse);
//PointLtlg //PointBLtlg
this._arrowpointB = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]], styleToUse);
//Call leaflet marker initialization to attach this as marker
L.Marker.prototype.initialize.call(this, [ArrowBaseLat, ArrowBaseLon], {});
//Calculate windspeed
var windspeed = this._calculateWindspeed(ArrowMagnitude, feature.modeldata.Adder, feature.modeldata.Multiplier)
//Attach a popup
this._arrowbase.bindPopup(this.getPopupContent(ArrowBearing, windspeed));
},
_calculateWindspeed: function (magnitude, adder, multiplier) {
return (magnitude - parseFloat(adder)) / multiplier
},
_getArrowStyle: function (magnitude) {
this._arrowMagMed = 7;
this._arrowMagHigh = 10;
if (magnitude > this._arrowMagHigh)
styleToUse = this._arrowStyleOptions[2];
else if (magnitude > this._arrowMagMed)
styleToUse = this._arrowStyleOptions[1];
else
styleToUse = this._arrowStyleOptions[0];
return styleToUse;
},
getPopupContent: function (bearing, windspeed) {
return sprintf("Wind blowing from: %s deg(from North)<br> Wind Speed(m/s): %s", bearing.toFixed(1), windspeed.toFixed(1));
},
addTo: function (map) {
this._arrowbase.addTo(map);
this._arrowpointA.addTo(map);
this._arrowpointB.addTo(map);
},
move: function (windData,transitionTime, modelData) {
var ArrowBaseLon = windData[0];
var ArrowBaseLat = windData[1];
var ArrowPointLat = windData[2];
var ArrowPointLon = windData[3];
var ArrowPointALat = windData[4];
var ArrowPointALon = windData[5];
var ArrowPointBLat = windData[6];
var ArrowPointBLon = windData[7];
var ArrowHeight = windData[8];
var ArrowMagnitude = windData[9];
var ArrowBearing = windData[10];
var styleToUse = this._getArrowStyle(ArrowMagnitude);
//Assign color based on magnitude
this._arrowbase.setStyle(styleToUse);
this._arrowpointA.setStyle(styleToUse);
this._arrowpointB.setStyle(styleToUse);
//Set Base,Apoint,Bpoint LatLongs as they are the ones changing
this._arrowbase.setLatLngs([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]])
this._arrowpointA.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]])
this._arrowpointB.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]])
//Calculate windspeed
var windspeed = this._calculateWindspeed(ArrowMagnitude, modelData.Adder, modelData.Multiplier)
//Check if popup is attached
if (this._arrowbase._popup) {
//Set popup content while moving
this._arrowbase._popup.setContent(this.getPopupContent(ArrowBearing, windspeed));
}
}
});
It would be nice to if you can create a leaflet class extension L.arrow
No: this is not a place where people make things for you. But we can Google things, like Leaflet arrow which leads you directly to Leaflet.PolylineDecorator.

How to change the position randomly?

var imgOut = function(){
var outImg = Math.floor(Math.random()*slideRandom.length);
document.getElementById("random").src = imgRandom[outImg];
var outSlide = slideRandom[outImg];
outSlide();
var wr = Math.floor(Math.random()*imgRandom.length);
var btl = Math.floor(Math.random()*bottle.length);
document.getElementById("bottle2").src = bottle[outImg];
document.getElementById("bottle1").src = bottle[btl];
document.getElementById("bottle3").src = bottle[wr];
/* try below but doesn't work or syntax error occured*/
var position= ['bottle[outImg]','bottle[btl]','bottle[wr]'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
pos1();
}
what I'm try to do is
with different arrays to get different each images in different random position.
I've done different images to get but with three different arrays to put in random position doesn't work. what have I done wrong? or how to change above code?
I don't understand your requirements exactly, but consider this code:
var setImage = function(id, src) {
document.getElementById(id).src = src;
};
var chooseOne = function(array) {
return array[Math.floor(Math.random()*array.length)];
};
var setRandomImages = function() {
setImage("bottle1", chooseOne(bottle));
setImage("bottle2", chooseOne(bottle));
setImage("bottle3", chooseOne(bottle));
};
If the array bottle is a list of URLs, this will do something, though I cannot guarantee it will do what you want.
var position= ['bottle[outImg]()','bottle[btl]()','bottle[wr]()'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
//pos1();
eval( pos1 );
// or
(new Function("return pos1"))();

ESRI JS API Querytask multiple results

Query looks like query.where = Abbrev = 'BLOC' OR Abbrev = 'ZACH' OR Abbrev = 'MSC'
function getLocRes(results) {
console.log("getLocRes",results);
var geom;
//geom = results.features[0].geometry;
//console.log("geom",geom);
//console.log("extent0",extent);
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([80, 0, 0]), 2), new dojo.Color([80, 0, 0, 0.5]));
var res = results.features;
console.log("symbol",symbol);
console.log("res.length",res.length);
//map.graphics.clear();
for (var i = 0;i < res.length; i++) {
console.log("i=",i);
console.log("res[i].geometry=",res[i].geometry);
var reGeo = res[i].geometry;
var graphic = new Graphic(reGeo,symbol);
var graphic = reGeo;
console.log("graphic=",graphic);
graphic.setSymbol(symbol);
map.graphics.add(graphic);
console.log(map.graphics.length);
}
//var extent = geom.getExtent();
alert(map.graphics.graphics.length);
//map.setExtent(extent, true);
console.log("extent1",extent);
}
http://www.dexconor.com/map/img/esri3.png
the image is result in chrome console
so it seems like something wrong with var graphic = new Graphic(reGeo,symbol);
even 'for' doesn't work.
Can anyone give me some ideas?
It might be a namespace issue, does this work?
new esri.Graphic(reGeo,symbol);
also, make sure the "esri/graphic" module is loaded through require.js

Javascript Array with Links

I am using an javascript array to swap images and act like a slide show. I am looking to apply an image map to each image and link to a specific page when clicked.
I need to code an image map hot spot covering a rectangle from (24,247) to (174,284) becomes a link. But I need each image to link to a different page (the hotspot location remains the same on every image.) How do I program this so when each image changes in the slide show it links to a different page?
Here is the coding involved:
in Head Section (js file listed far below):
<style> #Slideshow1 img {height:356px; width:912px}</style>
<script type="text/javascript" src="js/slideshowmerge.js"></script>
In the HTML Section to place array:
<div class="box_broadstyle">
<script>
var imgArray = new Array();
imgArray[0] = "images2/slide_pics/full/ashley.png";
imgArray[1] = "images2/slide_pics/full/auburn.png";
imgArray[2] = "images2/slide_pics/full/brooklyn.png";
imgArray[3] = "images2/slide_pics/full/cobane.png";
imgArray[4] = "images2/slide_pics/full/giddeon.png";
imgArray[5] = "images2/slide_pics/full/hartford.png";
imgArray[6] = "images2/slide_pics/full/saratoga.png";
imgArray[7] = "images2/slide_pics/full/seabrook.png";
imgArray[8] = "images2/slide_pics/full/spring.png";
slideshowMerge('Slideshow1','',imgArray,20,5000);
</script><
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
Slideshowmerge.js listed here:
//=======================
//
// Merging Image Slideshow
//
//
//=======================
var slideshowMergeAnimate = new Array();
var slideshowMergeTimer = new Array();
var slideshowMergeCount = new Array();
var slideshowMergeImages = new Array();
//======================
function slideshowMerge(id,cl,imageArray,fadeInterval,holdTime)
{
for(i=0;i<imageArray.length;i++)
{
var imgLoad = new Image();
imgLoad.src = imageArray[i];
}
if(cl)
cl = ' class="'+cl+'"';
document.write('<div id="'+id+'"'+cl+' style="position:relative">');
document.write('<img id="'+id+'img1" style="position:absolute; top:0px; left:0px;" onload="slideshowMergeRun(\''+id+'\')"/>');
document.write('<img id="'+id+'img2" style="position:absolute; top:0px; left:0px;display:none;"/></div>');
slideshowMergeCount[id] = 0;
slideshowMergeImages[id] = imageArray;
slideshowMergeAnimate[id] = 'run';
slideshowMergeTimer[id] = setInterval('slideshowMergeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
}
//======================
function slideshowMergeAnimation(id,holdTime)
{
if(slideshowMergeAnimate[id]=='run')
{
var obj1 = document.getElementById(id+'img1');
var obj2 = document.getElementById(id+'img2');
var opa = slideshowMergeCount[id]%100;
if(opa==0)
{
if(obj1.src)
{
slideshowMergeAnimate[id] = 'hold';
setTimeout('slideshowMergeRun(\''+id+'\')',holdTime);
obj2.src = obj1.src;
obj2.style.display = 'block';
}
}
else if(opa==1)
{
slideshowMergeAnimate[id] = 'load';
obj1.src = slideshowMergeImages[id][Math.floor(slideshowMergeCount[id]/100)%slideshowMergeImages[id].length];
}
obj1.style.opacity = (opa/100).toString();
obj1.style.filter = "alpha(opacity="+opa.toString()+")";
obj2.style.opacity = ((100-opa)/100).toString();
obj2.style.filter = "alpha(opacity="+(100-opa).toString()+")";
slideshowMergeCount[id]++;
if(slideshowMergeCount[id]==(slideshowMergeImages[id].length*100))
slideshowMergeCount[id]=0;
}
}
//======================
function slideshowMergeRun(id)
{
slideshowMergeAnimate[id] = 'run';
}
//======================

Categories