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

Popular posts from this blog

Black and White to Color

Image
  FINAL PRODUCTS REFERENCE PROGRESS IMAGES after this point I went back and edited the piece so the colors were not overlapping which ends up becoming the final product. Using the reference  photo, I converted it to black and white using Adobe Photoshop. I then found three color schemes on the Adobe color wheel and utilized Photoshop’s masking tools to create three fun compositions.
Read more

Portfolio

Image
My portfolio used a pixel grid. Using the rulers function in Adobe InDesign, I placed a ruler at ever 0.5 inches both vertically and horizontally.   
Read more

Multiplicity

Image
  FINAL IMAGE INDIVIDUAL PHOTOS With the use of Photoshop's polygon lasso tool and masking layers to insert myself into the same scene 6 times. I like to call this piece "The Waiting Room.” This photoshoot was taken at the R. K. Bailey Art Studio at the University of Tampa.
Read more