Scripting.One: Ingenuity's flight

It's not news anymore that powered flight was successfully conducted on Mars. First flight was on April 19, 2021 and had logged 12 flights with almost 22 hrs of flight time. That's impressive for an autonomous helicopter on a planet 300 million miles away from Earth. This is not your typical NASA Mars Exploration article. Instead an idea that was influenced with Chrome's Dino Run and a fun side of with Mars Helicopter's Ingenuity as it takes flight in a webpage.

How about we keep it flying?

I'm sharing a project that I've been working to do just as this. I will not create an actual helicopter. Instead, I'll create a web app that could apply the same dynamics as Google Chrome's Dino run. Well...the foundation...for start.

I'm not going to create the game. But, I'm going to share the baseline on how that endless strip of scene as the main character run its way through the desert. On this case, I'll let Mars Helicopter fly endlessly with the Martian terrain and mountains as the background. I'm using Google Apps Script to build this project. Long term goal is to make this interactive like that Dino run above. Who knows, I might get bored some more...

So, here's the script(see it fly on this link > https://script.google.com/macros/s/AKfycbzuXWmwAxdiaT2LTDyumpEOjLfXV9HeLNoU1qituMkqARRmCcrbEZCNKYqCbKbTRCEslQ/exec):

	function doGet(request) {
	return HtmlService
	.createTemplateFromFile('Page')
	.evaluate()
	.setSandboxMode(HtmlService.SandboxMode.IFRAME)
	.setTitle('Ginny Flight');
	}

	function include(filename) {
	return HtmlService.createHtmlOutputFromFile(filename)
	.setSandboxMode(HtmlService.SandboxMode.IFRAME)
	.getContent();
	}

	function get_other_details(){
	var ss = SpreadsheetApp.openById(<INSERT GOOGLE SHEET ID HERE. THIS IS WHERE I GET THOUSE TEXT ON THE WEB PAGE LIKE RELEASE NOTES AND ALL);
	var ws = ss.getSheetByName("Refs");
	var new_app_link = ws.getRange("B1").getValue();
	var yt_play_list = ws.getRange("B2").getValue();
	var rNotes = ws.getRange("B3").getValue();
	Logger.log({APPLINK:new_app_link,
	YTPLAYLISTLINK:yt_play_list});
	return {APPLINK:new_app_link,
	YTPLAYLISTLINK:yt_play_list,
	RELEASENOTE:rNotes};
	}

view raw Code.gs hosted with ❤ by GitHub

	<style>
	.game {
	width: 600px;
	height: 200px;
	border: 1px solid black;
	margin: auto;
	overflow: hidden;
	/* background-color:orange; */
	background-image: url(<INSERT YOUR IMAGE SOURCE/URL HERE. ON MY PROJECT I USE GOOGLE DRIVE>);
	background-repeat: no-repeat;
	background-size: cover ;
	animation: mountain 15s infinite linear;
	}

	.yt_playlist_container, .yt_playlist_container{
	width: 600px;
	height: 400px;
	margin: auto;
	}

	.appLink_container, .releaseNotes{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	width: 600px;
	margin: auto;
	/* background-color: blue; */
	}

	#heli {
	width: 50px;
	height: 50px;
	background-image: url(<INSERT YOUR IMAGE SOURCE/URL HERE. ON MY PROJECT I USE GOOGLE DRIVE>);
	background-size: 50px 50px;
	position: relative;
	top: 150px;

	animation: ascend 1s ease-in alternate-reverse infinite ;
	transform: rotate(20deg);
	}

	@keyframes mountain {
	0%{background-position:0 0;}
	100%{background-position: -7206px 0;}
	}

	.ascend {
	animation: ascend 1s linear ;
	transform: rotate(20deg);
	}

	.descend {
	animation: descend 0.8s linear ;
	animation-direction: reverse;
	}

	.pause {
	animation-play-state: paused;
	}

	@keyframes ascend {
	from {top: 100px;}
	to {top: 30px;}
	}

	@keyframes descend {
	from {top: 150px;}
	to {top: 0px;}
	}

	</style>

view raw CSS.html hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<?!= include("CSS"); ?>
	</head>
	<body>
	<div class="game">
	<div id="heli"></div>
	<div id="mountain_bg"></div>
	</div>
	<div id="release_notes" class="releaseNotes">
	<p id="rNotes"></p>
	</div>
	<div id="appLinkContainer" class="appLink_container">
	<a id="appLink">NEW APP LINK</a>
	</div>
	<div id="ytPlaylistContainer" class="yt_playlist_container">
	<iframe id="iframe_prio_video" class="yt_playlist_container" width="560" height="315"
	src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
	</iframe>
	</div>
	<?!= include("Script");?>
	</body>
	</html>

view raw Page.html hosted with ❤ by GitHub

	<script>
	google.script.run.withSuccessHandler(showDetails).withFailureHandler(fail).get_other_details();

	function showDetails(data){
	document.getElementById('appLink').href = data.APPLINK;
	document.getElementById('rNotes').innerHTML = data.RELEASENOTE;
	}

	function fail(){
	alert("Fail");
	}

	</script>

view raw Script.html hosted with ❤ by GitHub

Scripting.One

Pages

Saturday, August 21, 2021

Ingenuity's flight

No comments:

Post a Comment