Arcs Sunrise
Made completely with code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ARCS // ELLIPSES </title>
<!-- import external .js scripts here -->
<!-- <script type="text/javascript" src="#" ></script> -->
<!-- modify CSS properties here -->
<style type="text/css">
body,td,th {
font-family: Monaco, "Courier New", "monospace";
font-size: 14px;
color: rgba(255,255,255,1);
}
body {
background-color: rgba(0,0,0,1);
}
#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
}
#fmxCanvas {
position: relative;
background-color:rgba(255,255,255,1);
border: rgba(255,255,255,1) thin dashed;
margin: 10px;
cursor: crosshair;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<!-- START HTML CODE HERE -->
<canvas id="fmxCanvas" width="800" height="600"></canvas>
<div id="display"></div>
<br><br>
Add your personal notes or additional information here
<!-- FINISH HTML CODE HERE -->
</div>
<script>
///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame
var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;
var fps = 30;
window.requestAnimFrame = (
function(callback) {
return rAF ||
function(callback) {
window.setTimeout(callback, 1000 / fps);
};
})();
///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE
var canvas;
var ctx;
canvas = document.getElementById("fmxCanvas");
ctx = canvas.getContext("2d");
var canvas1;
var ctx1;
canvas1 = document.createElement("canvas");
ctx1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var canvas2;
var ctx2;
canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var display;
display = document.getElementById('display');
var counter;
///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE
///////////////////////////////////////////////////////////////////////
// CALL THE EVENT LISTENERS
window.addEventListener("load", setup, false);
//////////////////////////////////////////////////////////////////////
// ADD EVENT LISTENERS
canvas.addEventListener("mousemove", mousePos, false);
//////////////////////////////////////////////////////////////////////
// MOUSE COORDINATES
var stage, mouseX, mouseY;
function mousePos(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
}
/////////////////////////////////////////////////////////////////////
// INITIALIZE THE STARTING FUNCTION
function setup() {
/////////////////////////////////////////////////////////////////////
// DECLARE STARTING VALUES OF GLOBAL VARIABLES
counter = 0;
mouseX = canvas.width/2;
mouseY = canvas.height/2;
/////////////////////////////////////////////////////////////////////
// CALL SUBSEQUENT FUNCTIONS, as many as you need
clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS
draw(); // THIS IS WHERE EVERYTHING HAPPENS
}
////////////////////////////////////////////////////////////////////
// CLEAR THE CANVAS FOR ANIMATION
// USE THIS AREA TO MODIFY BKGD
function clear() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx1.clearRect(0,0,canvas.width, canvas.height);
ctx2.clearRect(0,0,canvas.width, canvas.height);
// clear additional ctxs here if you have more than canvas1
}
////////////////////////////////////////////////////////////////////
// THIS IS WHERE EVERYTHING HAPPENS
function draw() {
counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS
if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER
clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS
////////////////////////////////////////////////////////////////////
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE
var mygrad = ctx.createRadialGradient(mouseX, mouseY, 20, 400, 300, 400);
mygrad.addColorStop(0, "yellow");
mygrad.addColorStop(0.25, "orange");
mygrad.addColorStop(0.7, "rgba(30,40,120)");
//sky
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(400,300,300,0.25*Math.PI,0.75*Math.PI,true);
ctx.lineTo(400,300);
ctx.closePath();
ctx.fillStyle = mygrad;
ctx.fill();
ctx.strokeStyle = "pink"
ctx.stroke(); // shows outline of circle
/*//mountain
ctx.beginPath()
ctx.arc(400,300,300,0.25*Math.PI,0.75*Math.PI,false)
ctx.closePath();
ctx.fillStyle = "rgba(255,42,0,1.00)"
ctx.fill()
ctx.stroke();*/
//sun
ctx.beginPath()
ctx.arc(mouseX, mouseY,30,0*Math.PI,2*Math.PI,false)
ctx.closePath();
ctx.fillStyle = "rgba(254,255,0,1.00)"
ctx.fill()
ctx.stroke();
///mountain2
ctx.beginPath();
ctx.arc(400,300,300,0.25*Math.PI,0.75*Math.PI,false);
ctx.lineTo(400,300)
ctx.closePath();
ctx.fillStyle = "rgba(130,76,0,1.00)";
ctx.fill();
ctx.strokeStyle = "pink"
ctx.stroke();
//grass
ctx.beginPath();
ctx.arc(400,300,300,0.75*Math.PI,2.25*Math.PI,true);
ctx.closePath();
ctx.fillStyle = "rgba(100,255,0,1)";
ctx.fill();
ctx.strokeStyle = "green"
ctx.stroke()
///ice
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(400,300,100,0.25*Math.PI,0.75*Math.PI,false);
ctx.lineTo (400,300)
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fill();
ctx.strokeStyle = "pink"
ctx.stroke(); // shows outline of circle
//clouds
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(300,200,100,0.25*Math.PI,0.75*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fill();
//top clouds
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(540,190,65,1*Math.PI,1.95*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fill();
///CLOUD2w
//clouds
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(500,100,100,0.25*Math.PI,0.75*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fill();
//top clouds
ctx.beginPath();
//ctx.rect(50,50,300,200);
ctx.arc(350,280,65,1*Math.PI,1.95*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fill();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
ctx.save();
var credits = "Susanna Triantafillou, Sunrise, FMX 210, SP 2022";
ctx.font = 'bold 12px Helvetica';
ctx.fillStyle = "rgba(0,0,0,1)"; // change the color here
ctx.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
ctx.restore();
//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES
display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);
/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION
requestAnimFrame(draw); // CALLS draw() every nth of a second
}
</script>
</body>
</html>
Comments
Post a Comment