Solar Explorer

Developer
Elliot Geno
Size
3,333 Kb
Views
38,456
  1. Solar Explorer Previews
  2. Solar Explorer HTML Codes
  3. Solar Explorer CSS Codes
  4. Solar Explorer JS Codes

How do I make an solar explorer?

Drag the sun and the house to find the ideal angle of your roof for solar power!. What is a solar explorer? How do you make a solar explorer? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

Solar Explorer Previews
IQ Test

Solar Explorer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solar Explorer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" id="sunExplorer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve"> <style> .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <path opacity=".08" fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M0,300l1834.1,797.5 M1834.1-497.5L0,300 M0,300h2000" /> <circle fill="#5BA7D6" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="0" cy="300" r="200" /> <polygon id="houseStroke" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="20" stroke-miterlimit="10" points="220,340 244,300 220,260 205.2,260 205.2,340" /> <g id="house"> <g id="houseArrows" opacity="0"> <path fill="none" stroke="#DB1507" stroke-width="20" stroke-miterlimit="10" d="M190,400c15.7-30,25-63.9,25-100s-9.3-71-25-100" /> <path fill="#DB1507" stroke="#DB1507" stroke-width="8" stroke-miterlimit="10" d="M199,195.6l-8.8,4.7l-8.8,4.7l3-15.7L199,195.6z M184,410.9l14.7-6.3l-8.8-4.7l-8.8-4.7L184,410.9z" /> </g> <polygon fill="#CECECE" points="220,340 244,300 220,260 174,260 174,340" /> <rect x="179.4" y="292.6" fill="#DB1507" width="32" height="16" /> <path fill="#FFFFFF" d="M197.4,330.6v-12h19v12H197.4z M216.4,282.6v-12h-19v12H216.4z" /> <polyline fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" points="216,346.5 243.9,300 216,253.5" /> <text id="houseDegrees" class="noselect" x="170" y="307" text-anchor="end" fill="#ffffff" font-family="'MyriadPro-Bold'" font-size="21">0°</text> <rect id="houseHit" x="125" y="210" fill="#FFFFFF" opacity="0" width="150" height="180" cursor="pointer" /> </g> <g id="sun"> <g id="sunArrows" opacity="0"> <path fill="none" stroke="#DB1507" stroke-width="20" stroke-miterlimit="10" d="M695,400c4.7-32.7,7-66,7-100s-2.3-67.3-7-100" /> <path fill="#DB1507" stroke="#DB1507" stroke-width="8" stroke-miterlimit="10" d="M704.8,198.6l-9.9,1.4l-9.9,1.4l8.2-13.8L704.8,198.6z M692.9,412.5l11.6-11l-9.9-1.4l-9.9-1.4L692.9,412.5z" /> </g> <circle fill="#F9CF00" stroke="#FFFFFF" stroke-width="10.625" stroke-miterlimit="10" cx="700" cy="300" r="42.5" /> <path id="sunRays" fill="none" stroke="#F9CF00" stroke-width="10" stroke-miterlimit="10" d="M673,235l9,20 M727,365l-9-20 M745,282l20-9 M635,327l20-9 M727,235l-9,20 M682,345l-9,20 M745,318l20,9 M635,273l20,9" /> <text id="sunDegrees" class="noselect" x="700" y="307" fill="#fff" font-family="'MyriadPro-Bold'" text-anchor="middle" font-size="21">0.0°</text> <rect id="sunHit" x="625" y="210" fill="#FFFFFF" opacity="0" width="150" height="180" cursor="pointer" /> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Solar Explorer - Script Codes CSS Codes

body { margin: 0;
}
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
#sunExplorer { width: 100%; height: 100%; position: absolute;
}

Solar Explorer - Script Codes JS Codes

var svg = document.getElementById("sunExplorer");
var sunAngle = 0;
var houseAngle = 0;
var mouseX = 0;
var mouseY = 0;
var earthMax = 23.5;
var houseMax = 90;
var earthRadians = earthMax * (Math.PI / 180);
var houseRadians = houseMax * (Math.PI / 180);
var cursorPoint = svg.createSVGPoint();
var sun = document.getElementById("sun");
var house = document.getElementById("house");
var sunDegreesText = document.getElementById("sunDegrees");
var houseDegreesText = document.getElementById("houseDegrees");
var angleOffset = 0;
sun.addEventListener("mousedown", onSunDown);
house.addEventListener("mousedown", onHouseDown);
function onSunDown(e) { updateMouse(e); angleOffset = Math.min(Math.max(Math.atan2(mouseY - 300, mouseX), -earthRadians), earthRadians) - sunAngle; addEventListener("mousemove", onSunDrag); window.addEventListener("mouseup", onSunUp);
}
function onSunUp(e) { removeEventListener("mousemove", onSunDrag); window.removeEventListener("mouseup", onSunUp);
}
function onSunDrag(e) { updateMouse(e); sunAngle = Math.min(Math.max(Math.atan2(mouseY - 300, mouseX) - angleOffset, -earthRadians), earthRadians); var degrees = -sunAngle * (180 / Math.PI); sunDegreesText.textContent = degrees.toFixed(1) + "°"; TweenMax.set("#sun", { rotation: -degrees, x: (Math.cos(sunAngle) * 700) - 700, y: Math.sin(sunAngle) * 700, transformOrigin: "50% 50%" }); TweenMax.set(sunDegreesText, { rotation: degrees, transformOrigin: "50% 50%" });
}
function onHouseDown(e) { updateMouse(e); angleOffset = Math.min(Math.max(Math.atan2(mouseY - 300, mouseX), -houseRadians), houseRadians) - houseAngle; addEventListener("mousemove", onHouseDrag); window.addEventListener("mouseup", onHouseUp);
}
function onHouseUp(e) { removeEventListener("mousemove", onHouseDrag); window.removeEventListener("mouseup", onHouseUp);
}
function onHouseDrag(e) { updateMouse(e); houseAngle = Math.min(Math.max(Math.atan2(mouseY - 300, mouseX) - angleOffset, -houseRadians), houseRadians); var degrees = -houseAngle * (180 / Math.PI); houseDegreesText.textContent = degrees.toFixed(0) + "°"; TweenMax.set(["#house", "#houseStroke"], { rotation: -degrees, svgOrigin: "0 300" }); TweenMax.set(houseDegreesText, { rotation: degrees, transformOrigin: "50% 50%" });
}
function updateMouse(e) { cursorPoint.x = e.clientX; cursorPoint.y = e.clientY; cursorPoint = cursorPoint.matrixTransform(svg.getScreenCTM().inverse()); mouseX = cursorPoint.x; mouseY = cursorPoint.y;
}
Solar Explorer - Script Codes
Solar Explorer - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 3
Size 3,333 Kb
Views 38,456
Do you need developer help for Solar Explorer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elliot Geno (pyrografix) Script Codes
Name
Gnat Attack
Coaster SVG
Happy Snowman
Iris
Eye Bee M
Swarm
Crash Loader
Alternate Tween Properties - TweenMax
Following a Path
TweenMax animating array object
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!