writing loops in Google Earth Engine - javascript

I am trying to write a loop to export multiple images in a time window. rather than doing them all at once.
here is the script I am currently using that works great at exporting one image at one.
the collection size is 287 images a day, and I just need them named FRP and then the number that was exported.
if anyone could help I would appreciate it very much.
below is the code I am currently using to export one Image at a time.
var USgeometry = ee.Geometry.Rectangle({coords: [-122.15, 41.25, -121.25, 42], geodesic: false});
Map.centerObject(USgeometry, 10);
// This function clips images to the ROI feature collection
var clipToCol = function(image){
return image.clip(USgeometry);
};
var collection = ee.ImageCollection('NOAA/GOES/16/FDCC')
.filterDate('2021-08-05', '2021-08-06').map(clipToCol);
var listOfImages = collection.toList(collection.size());
//this is where you change your image you want to select
var image = ee.Image(listOfImages.get(0));
var power = image.select('Power');
Export.image.toDrive({
image:power,
description: "FRP0",
crs:'EPSG:3031',
scale:100,
region:USgeometry
});

Related

PIXI.JS Newbie, looking for advice and troubleshoot of a textureCache, loader issue

ive ventured into the world of PIXI and JS, new programming language for me, liking the way it is right now but i have an issue.
I am a bit confused with the TextureCache and the loader. If you look at part of my code i try to add 3 different images to the screen. Ive been following the 'Get Started section' of the pixi website. I wanted to add their cat image, which i have, the tileset image (all of it)* and then a tile of the tileset image.
The issue is, i create 3 new sprite instances and the tileset image shows the area ive set for the tile(rocket) when i want it to show the whole tileset. Ive loaded in the tileset iin the cahce and the loader.
Why does tile show the cropped image and not the whole image?
Am i using the cache correctly to just store images?
Am i using the resources method properly to locate the image FROM the cache or the loader?
Is there any point of the cache?
my thoughts**
when you use the rectangle method, it destroys the original image and the cropped version is now tileset1 (the name of my image)?
<html>
<body>
<script src="pixi.js"></script>
<script>
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle,
TextureCache = PIXI.utils.TextureCache;
let app = new PIXI.Application({
width: 1000,
height: 600,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
TextureCache["tileset1.png","images/3.png"];
//load an image and run the `setup` function when it's done
loader.add(["images/3.png","tileset1.png"]).load(setup);
//This `setup` function will run when the image has loaded
function setup() {
let texture = TextureCache["tileset1.png"];
let rectangle = new Rectangle(96,64,32,32);
texture.frame = rectangle;
//Create the cat sprite, use a texture from the loader
let card = new Sprite(resources["images/3.png"].texture);
let tile = new Sprite(resources["tileset1.png"].texture);
let rocket = new Sprite(texture);
card.scale.set(0.06,0.06);
tile.x=400;
tile.y=400;
rocket.x=100;
rocket.y=100;
//Add the cat to the stage
app.stage.addChild(card);
app.stage.addChild(tile);
app.stage.addChild(rocket);
app.renderer.render(app.stage);
}
</script>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.js"></script>
Is there any point of the cache? - this question seems to be most important from your questions :)
Searching around about "pixi.js" and "TextureCache" gives following answers for example:
https://github.com/pixijs/pixi.js/issues/4053
MySecret commented on May 23, 2017:
the docs has no specs about PIXI.utils.TextureCache
...
englercj commented on May 26, 2017
This is intentional, it is not meant as a public-facing API. It is an internal cache used by some texture creation methods.
https://www.html5gamedevs.com/topic/17788-loader-and-texturecache-tutorial-anywhere/
xerver - Pixi.js Moderator:
Here is the loader: https://github.com/englercj/resource-loader
The code is really well documented, and there are examples on the readme. The pixi examples also use the loader a few times: http://pixijs.github.io/examples/
The TextureCache is an internal mechanism, there is rarely any reason you should even know it exists.
https://www.html5gamedevs.com/topic/25575-pixiloaderresources-or-texturecache/
xerver - Pixi.js Moderator:
Dont do this:
let e = PIXI.utils.TextureCache[player.img];
Instead use the resources the loader loaded for you:
let e = PIXI.loader.resources[player.img].texture;
...
TLDR: Usually TextureCache shouldnt be used directly :)
See also:
this explanation: https://www.html5gamedevs.com/topic/9255-pixijs-caching/?tab=comments#comment-55233
http://pixijs.download/release/docs/PIXI.BaseTexture.html#.addToCache
^ example of usage: https://jsfiddle.net/themoonrat/br35x20j/

Adjusting Canvas size to image size with Pixi.js

I'm working on a really basic image editor (designed primarily to place text on an image), using PixiJS... though this may be more of a Canvas question, I'm not sure how to classify it as I'm green to Canvas and completely new to Pixi. Unfortunately I can't replicate the behavior in JSFiddle. As of now, I only have this running on localhost, but if anyone has suggestions on how to share this code, I'm open for any feedback.
The idea is that users would be able to select a image to edit (templates for various forms of signage), with the canvas rendering to the size of the image and adding said image as a child on loading the page. For now I'm using a 400 x 650px placeholder for testing purposes. The problem is that on an initial loading or hard refresh of the page, the canvas size defaults to Pixi's 800 x 600px. Soft refreshing the page will size the canvas to the image's dimensions, but I'd like to fix this issue... and I'm sure it's probably an easy fix, but I'm in uncharted waters here. Any help is appreciated. Thanks in advance.
I apologize if some of this code looks wonky, I'm fully aware this is a huge mess right now.
Javascript (this is actually in an AngularJS controller for the time being)
var img = new Image();
var signagetemplate = "placeholderSIGN.png";
img.src = signagetemplate;
var canwidth = img.width;
var canheight = img.height;
var renderer = PIXI.autoDetectRenderer(canwidth, canheight, {
transparent: true,
resolution: 1
});
document.getElementById('display').appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader
.add("signitem", signagetemplate)
.load(setup);
function setup() {
signitem = new PIXI.Sprite(
PIXI.loader.resources["signitem"].texture
);
stage.addChild(signitem);
renderer.render(stage);
}
Edit 9/21/17
I've tried using Pixi's built-in loader as suggested by Hachi in the comments to load the image, but it doesn't seem to load it at all. In the log, it's undefined. I don't understand this loader...
loader.add('signitem', signagetemplate);
loader.load((loader, resources) => {
console.log(resources.name, 'loaded.', 'progress:',resources.progressChunk, '%');
});
loader.load(setup);
I figured it out. All of the examples I found for working with the loader confused me a little bit, mainly just the syntax for entering basic JavaScript. Whether or not this is the cleanest way of going about the problem, I'm not sure, but this seems to work, at least locally. My feelings will not be hurt if someone comes along with a better solution.
var container = new PIXI.Container();
var signagetemplate = //Image to be loaded
var loader = PIXI.loader;
var canwidth;
var canheight;
var renderer = PIXI.autoDetectRenderer({
transparent: true,
resolution: 1
});
loader.add("signtemp", signagetemplate)
loader.on('complete', function(loader, resources, IMAGE) {
var signitem = new PIXI.Sprite(loader.resources.signtemp.texture);
canwidth = signitem.width;
canheight = signitem.height;
container.addChild(signitem);
})
loader.load(setup);
function setup() {
renderer.resize(canwidth, canheight);
renderer.render(container);
}
document.getElementById('display').appendChild(renderer.view);

How do I import a sprite sheet with its JSON file into my phaser game?

I am creating a game using the phaser game engine. I created a sprite sheet and downloaded it. It came with the 256 × 384 .png file with my frames and a JSON file which I assume contains information about how to split up the frames. I don't know how to import the sprite sheet with the JSON file into my preload() function. I tried using the following code but it is not working. Any help would be greatly appreciated.
var game = new Phaser.Game(1200, 750, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload(){
game.load.image('background', 'assets2/background.png');
game.load.json('robot', 'assets2/VillainSpriteSheet_json.json');
game.load.spritesheet('robot', 'assets2/VillainSpriteSheet.png');
}
var villain;
function create(){
var villainjson = game.cache.getJSON('robot');
//enable physics
game.physics.startSystem(Phaser.Physics.ARCADE);
//create background
var background = game.add.sprite(0, 0, 'background');
//villain
villain = game.add.sprite(50, 50, 'robot');
//enable phsyics
game.physics.arcade.enable(villain);
villain.body.bounce.y = .2;
villain.body.gravity.y = 300;
villain.body.collideWorldBounds = true;
}
I think you are confusing two frameworks, jQuery and Phaser. For loading and displaying sprites you don't need jQuery, just Phaser will do.
The load.spritesheet expects a spritesheet where all sprites have a fixed width and height, so with all sprites in a grid layout.
What you have sounds like a spriteatlas, the difference being that in a spriteatlas each sprite can have a different width and height, and all these widths and heights per sprite are described in the accompanying .JSON file.
So I think you are looking for the load.atlasJSONHash function, something like this:
function preload(){
//..
game.load.atlasJSONHash('robot', 'assets2/VillainSpriteSheet.png', 'assets2/VillainSpriteSheet_json.json');
// and then load a sprite like so
// Note: 'myframename1' should be some framename from the .json file
var villain = game.add.sprite(50, 50, 'robot', 'myframename1');
And btw just to clarify, the load.json in Phaser can be used to just load a .json file, for example with for your own customised data like level layouts, dialog/multilanguage texts, highscore data, enemy patterns etc.
You don't want jQuery's getJSON(). You want the Phaser one.
It would be something like
p = new Phaser.Game(...);
p.cache.getJSON('foo');
p.load.image(...);

html 5 canvas: using draw image in game makes loop very slow

i am making a game based on draw images and clear it every some part of second.
i started with:
var peng = new Image();
and then:
peng.onload = function() {
context.drawImage(peng, pengXPosition, pengYPosition, pengWidth, pengHight);
};
and in the loop:
var i=0;
function pengMoveRight(){ i++;if(i==1){peng.src = 'images/1.png';}else if(i==2)
{peng.src = 'images/2.png';} else if(i==3){peng.src = 'images/3.png';}else if(i==4){
peng.src = 'images/4.png';}else if(i==5){peng.src = 'images/5.png';}else if(i==6){
peng.src = 'images/6.png';i-=6;}}
when i run it it works well on IE but on chrome and mozilla it`s too slow and the character is about to disappear .. i used setinterval(); once and window.requestAnimationFrame(); once and both of them cause the same problem.
what should i do to make it smooth move?
here is the full script http://mark-tec.com/custom%20game/
Instead of changing the source, try to create several Image objects instead. That way, the drawImage call can always use a pre-loaded image.
You need to preload all the images or use the sprite method (all images packed into a single sprite) in order to avoid the initial delay caused by the image loading only when it's needed.
However, after that initial problem, your example should run fine once all the images are cached.

Images not being drawn on HTML5 canvas everytime

I'm working on a web app with which users can construct a mesh containing simple objects (rectangular shaped) that can hold text and/or images. Users can create as many of these objects as they like, and in each object that can hold an image, upload one of their own. The app is online if you'd like to test it: goalcandy.com (use demo#demo.com / demo for the email and pswd fields to log in).
Once they finalize their work, they can convert that mesh to PNG. This is done by first drawing everything that's on the mesh on an HTML canvas, which is afterward converted to a PNG image, locally.
When needing to draw the array of existing images onto the canvas, I first have to preload them, which I do like this:
query = []; // array with paths to the image
var count = query.length,
images = [],
loaded = 0;
for (i=0; i<count; i++) {
images[i] = new Image();
images[i].onload = function(){
loaded++;
if (loaded == count)
drawOnCanvas();
};
images[i].src = query[i];
}
function drawOnCanvas() {
// draw the images onto the canvas
}
The problem with all of this is that on a slow, "tired" computer, the PNG sometimes turns out blank in the spaces where some user-uploaded images are supposed to be, because the images don't get drawn onto the canvas. As if they haven't finished downloading. On a good, fast computer, this doesn't happen. How can I solve this, and why does it happen? Considering that I've already attached a handler for the "load" event, I don't see the logic...

Categories