Skip to content

Instantly share code, notes, and snippets.

@mitrnsplt

mitrnsplt/changeMars.php

Created May 6, 2014 16:57
Show Gist options
  • Save mitrnsplt/c6acbfdcbe45331a6bd1 to your computer and use it in GitHub Desktop.
Save mitrnsplt/c6acbfdcbe45331a6bd1 to your computer and use it in GitHub Desktop.
Download ZIP
For my first javascript project, I built a web page directed at 14-15-year-olds about some of the issues around making Mars habitable.
Raw
changeMars.php
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>What do you want to change?</h1>
<img src="http://www.muktware.com/wp-content/uploads/2013/11/mars.jpg">
<div class="credit">
<p>Photo from Muktware</p>
</div>
<div class="buttons">
<a href="moreAir.php">Add atmosphere</a>
<a href="gravMars.php">Increase gravity</a>
</div>
</body>
</html>
Raw
gravMars.php
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script>
var incGrav;
var moreMass;
function moreGravity() {
incGrav = document.getElementById("nwNumber");
moreMass = ((((.01 * incGrav.value) + 1) * ((.01 * incGrav.value) + 1)) - 1) * 6.42 * Math.pow (10, 23);
if (isNaN(incGrav.value))
alert("Please enter just a number, no letters or symbols.");
else if (incGrav.value != "")
alert("You want to increase the gravity on Mars by " + incGrav.value + " percent. That means you have to bring about " + moreMass.toPrecision(3) + " kilograms of mass to Mars.");
else
alert("Please enter a number.");
};
function loads() {
var nLoads = (moreMass.toPrecision(3) / 24000000000).toPrecision(3);
alert ("You want to move " + nLoads + " of those 27 million ton asteroids.");
};
function longTime() {
var tripsPerYear = document.getElementById("trips");
var yrs = (((moreMass.toPrecision(3) / 24000000000).toPrecision(3)) / tripsPerYear.value).toPrecision(3);
var cens = yrs / 100;
if (isNaN(tripsPerYear.value))
alert("Please enter just a number, no letters or symbols.");
else if (tripsPerYear.value != "")
alert("You entered " + tripsPerYear.value + " asteriod deliveries each Earth year. At that rate it will take you roughly" + cens + " centuries to move the amount of mass that you want.");
else
alert("Please enter a number.");
};
</script>
</head>
<body><h1>Habbing Mars by Adding Mass</h1>
<img src="http://www.teslasociety.com/pictures/asteroid.jpg">
<div class="credit">
<p>Image source: The Tesla Memorial Society</p>
</div>
<p>How much do you want to increase the gravity on Mars in percentage terms? (If your
number is a decimal number less than one, enter it without a leading zero.)</p>
<input type="text" id="nwNumber"/>
<input type="button" onclick="moreGravity()" value="Percent increase in Martian gravity" />
<p>The force of gravity on a planet's surface is proportional to the square root of the planet's mass, so we have to
add mass. If you entered a number in the box above, you know that you want to add a lot of mass. </p>
<p>The likeliest place to get more mass is the asteriod belt. We have the technology to move a 27 million ton asteriod.
Let's assume each asteriod-moving rocket can make multiple trips.</p>
<input type="button" onclick="loads()" value="Tell me, how many rocket loads will I need?" />
<p>How many asteriods do you want to bring to Mars with your rockets each Earth year?</p>
<input type="text" id="trips"/>
<input type="button" onclick="longTime()" value="Number of asteriod deliveries each Earth year" />
<p>That's an awful long time. You better get started . . . or think of something else.</p>
<div class="buttons">
<a href="moreAir.php">Add atmosphere</a>
<a href="thanks.php">I'm done.</a>
</div>
</body>
</html>
Raw
habbing_mars.html
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Habbing (or Terraforming) Mars</h1>
<div class="pics">
<img src="http://solarsystem.nasa.gov/images/Mars__atmosphere_708.jpg">
</div>
<div class="credit">
<p>Photo by NASA</p>
</div>
<p class="main">Do you want to make Mars livable?</p>
<div class="buttons">
<a href="noMarsChanges.php">NO</a> <a href="changeMars.php">YES</a>
</div>
</body>
</html>
Raw
moreAir.php
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script>
var incAir;
var airMass;
function moreAir() {
incAir = document.getElementById("nwNumber");
airMass = (incAir.value * 5.3 * Math.pow (10, 18)).toPrecision(3);
if (isNaN(incAir.value))
alert("Please enter just a number, no symbols.");
else if (incAir.value != "")
alert("You want to increase the atmospheric pressure on Mars to " + incAir.value + " percent of Earth's at sea level. That means you have to bring about " + airMass + " kilograms of gases to Mars.");
else
alert("Please enter a number.");
};
function loads() {
var nLoads = (airMass / 24000000000).toPrecision(3);
alert ("You want to deliver " + nLoads + " loads of atmospheric gases to Mars.");
};
function longTime() {
var tripsPerYear = document.getElementById("trips");
var yrs = (((airMass / 24000000000).toPrecision(3)) / tripsPerYear.value).toPrecision(3);
var cens = yrs / 100;
if (isNaN(tripsPerYear.value))
alert("Please enter just a number, no symbols.");
else if (tripsPerYear.value != "")
alert("You entered " + tripsPerYear.value + " gas deliveries each Earth year. At that rate it will take you roughly " + cens + " centuries to move the amount of gases that you want to put in the Martian atmosphere, and even longer to replace that which the solar wind blows away.");
else
alert("Please enter a number.");
};
</script>
</head>
<body>
<h1>Habbing Mars by Adding Air</h1>
<img src="http://images.spaceref.com/news/mars.5.jpg">
<div class="credit">
<p>Photo by Space Telescope Science Institute.com</p>
</div>
<p>On first look, Mars would seem to be big enough to hold an atmosphere. At 5 km/sec, the velocity needed to escape
the planet's gravity is almost 13 times the average molecular speed of carbon dioxide at zero degrees C. It is
ten times the average molecular speed of molecular nitrogen at the same temperature, and almost 11 times the
average speed of molecular oxygen. The rule-of-thumb is that a planet can retain a gas in its atmosphere if the
average molecular speed of the gas is less than one-sixth of the velocity needed to escape the pull of the planet's
gravity.</p>
<p>There is evidence that Mars once did have an ample atmosphere of mostly carbon dixoide. What little is left is much less
than one would expect based simply on the planet's mass. What happened? The proverbial three strikes scratched the atmosphere out:
<br>
<ul>
<li>Rocks and soil absorbed carbon dioxide and nothing made them give it up again.</li>
<li>Asteriods smashing explosively into the planet blew away some of the atmosphere, and nothing replenished those losses.</li>
<li>The solar wind blew some of the atmosphere away, and nothing replaced it.</li>
</ul>
If humans have to carry air to Mars to make an atmosphere, what would it take to cover the planet? Remember, that the same amount of air
on Mars as on Earth would weigh on you less on Mars, because of the weaker gravity. The atmospheric pressure on Mars is less than one
percent of Earth's. It would have to increase 24-fold to 15 percent of the pressure at sea leve on Earth for people to be able to
walk around without space suits, but still with respirators and oxygen cannisters. Increase the atmospheric pressure eighty-three-fold
to nearly half the atmospheric pressure on earth and, with the right mix of oxygen and nitrogen, people could adjust to be able to
breathe unaided.
</p>
<p>Where do you want to set the atmospheric pressure on Mars? Enter your number as a percent of atmospheric pressure at sea level
on Earth.</p>
<input type="text" id="nwNumber"/>
<input type="button" onclick="moreAir()" value="Martian air pressure as a percent of Earth's."/>
<p>Venus has carbon dioxide. Titan has nitrogen. Assume you develop rockets that can scoop gases out of an atmosphere and liquefy it
to carry it to Mars. With a payload a little larger than the Space Shuttle's, each rocket could carry 25,000 kilograms.</p>
<input type="button" onclick="loads()" value="Tell me, how many rocket loads will I need?" />
<p>How many rocket deliveries do you want to get at Mars each Earth year?</p>
<input type="text" id="trips"/>
<input type="button" onclick="longTime()" value="Number of rocket deliveries each Earth year" />
<p>Maybe you better get started, or think of something else! It would be easier to only generate or carry enough air for the habitats where
people will live, but that would still be a big job. Maybe you can think of a better way!</p>
<div class="buttons">
<a href="thanks.php">No, I am done.</a> <a href="gravMars.php">Increase Mars's gravity</a>
</div>
</body>
</html>
Raw
mystyle.css
h1 {
text-align:left;
color: green;
font-size: 36px;
font-weight:bold;
}
/*IMAGES */
.pics {
left: 5px;
width: 70%;
position:relative;
clear:both;
}
/*IMAGE CREDIT*/
.credit {
font-size: 9px;
font-style:italic;
}
/*TEXT */
.main {
left: 5px;
font-size: 18px;
}
/* BUTTONS */
.buttons a, .buttons button{
display:inline-block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
position:relative;
background-color:#ffcccc;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
Raw
mystyle_1.css
/* ANIMATION */
#orbits {
position: absolute;
width: 90%;
height: 90%;
background-color: black;
left: 15px;
}
#sun {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -100px;
margin-left: -100px;
border-color: orange;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 144px orange;
}
#earth {
position: absolute;
top: 0;
left: 50%;
height: 20px;
width: 20px;
margin-left: -25px;
margin-top: -25px;
border-color: green;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 32px blue;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 51%;
width: 350px;
height: 340px;
margin-top: -250px;
margin-left: -250px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
#mars {
position: absolute;
top: 0;
left: 50%;
height: 8px;
width: 8px;
margin-left: -15px;
margin-top: -15px;
border-color: red;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 32px red;
}
#mars-orbit {
position: absolute;
top: 50%;
left: 51%;
width: 650px;
height: 630px;
margin-top: -350px;
margin-left: -350px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 12s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#end {
position: absolute;
top: 90%;
font-style: italic;
color: green;
}
Raw
noMarsChanges.php
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Inhospitable Mars</h1>
<div class="pics">
<img src="http://mars.jpl.nasa.gov/MPF/parker/TwnPks_RkGdn_left_sm.jpg">
</div>
<div class="credit">
<p>Photo by NASA</p>
</div>
<h2>Enjoy!</h2>
<ul>
<li>There is no breathable atmosphere.</li>
<li>There isn't any free water.</li>
<li>The average daytime temperature is -50 degrees C (-58 degrees F).</li>
<li>Gravity is only 38% of the Earth's.</li>
</ul>
<br>
<h3>Back to the Caves?</h3>
<p>If humans are ever going to live on Mars as it is, they may have to burrow
under the ground a safe distance to live in caves that retain air and water and
offer protection from falling space debris and solar radiation.</p>
<div class="buttons">
<a href="thanks.php">I am done.</a> <a href="changeMars.php">On second thought . . </a>
</div>
</body>
</html>
Raw
thanks.php
<!DOCTYPE html>
<html>
<head>
<title>Livable Mars</title>
<link rel="stylesheet" type="text/css" href="mystyle_1.css">
</head>
<body>
<body>
<div id='orbits'>
<img id="sun" src="http://goo.gl/dEEssP">
<div id='earth-orbit'>
<img id="earth" src="http://goo.gl/o3YWu9">
</div>
<div id='mars-orbit'>
<img id="mars" src="http://www.oocities.org/riot-girl/GIFS/r-plan.gif">
</div>
</div>
<div id='end'>
<h3>Solving the problems to successfully settling humans on Mars will be difficult.
Perhaps you will help find the answers.</h3>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment