Canvas Project With Code + Statement

 

Canvas Project:

Odd World


    This specific piece of art was created using dreamweaver. While brainstorming for what I wanted to create, I got lost and realized I had no idea what to go for. As I continued to battle with what would be original or not, my idea hit me. This semester, I have found myself lost in different thoughts and more distracted compared to usual, so I went with the idea of, "Odd World." The concept of this piece being that the house on the right has a black doorway leading to reality, while the red rectangles are other doors leading you off of your path or falling into different thoughts. 

    From the building on the left with the main door, to the suns on the right, I found this project both long but also entertaining. The longer I worked I felt as if my piece was starting to look like it was something out of star wars. I did not use this picture as inspiration, but as I worked I thought of this and decided to add this to my post. What makes this project a success to me, is the fact that I had a plan in mind and sat through and solved problems I had on the way. The idea I had in mind was something I am passionate about, and I believe that if you are able to set a goal and complete it, you have succeeded. This project took me roughly 11 hours to complete.




Here is the sketch that I used to plan out my art.


<!doctype html>

<html>

<head>

<meta charset="UTF-8">




<title> Odd World By Jude Wilferth </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;

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>





<!-- 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 context;

canvas = document.getElementById("fmxCanvas");

context = canvas.getContext("2d");


var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");


canvas1.width = canvas.width;

canvas1.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() {


context.clearRect(0,0,canvas.width, canvas.height);

context1.clearRect(0,0,canvas.width, canvas.height);


// clear additional contexts 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


//background

var mygrad=context.createLinearGradient(700,200,400,300);

mygrad.addColorStop(0,"red");

mygrad.addColorStop(0.4,"purple");

mygrad.addColorStop(1,"blue");

context.beginPath

context.rect(0,0,800,500);

context.closePath();

context.lineWidth=5;

//context.fillStyle="rgba(201,104,221,1.00)"

context.fillStyle=mygrad

context.fill();

context.strokeStyle="black";

context.stroke();

//cloud

context.beginPath();

      

context.moveTo(170, 90);

      

context.bezierCurveTo(120, 110, 120, 140, 240, 140);

     

context.bezierCurveTo(230, 190, 300, 170, 350, 140);

      

context.bezierCurveTo(420, 150, 420, 120, 390, 100);

      

context.bezierCurveTo(430, 40, 370, 30, 340, 50);

      

context.bezierCurveTo(320, 5, 250, 20, 250, 50);

      

context.bezierCurveTo(200, 5, 150, 20, 170, 80);

context.closePath();

      

context.lineWidth = 5;

      

context.fillStyle = '#7B878D';

      

context.fill();

context.strokeStyle="gray";

      

context.stroke();

//enterance to reality

context.beginPath();

      

context.moveTo(0, 600);

      

context.quadraticCurveTo(50, 50, 350, 500);

      

context.closePath();

      

context.lineWidth = 3;


context.fillStyle="gray";

context.fill();


context.strokeStyle = 'black';


context.stroke();


//horizon

context.beginPath();

context.moveTo(0,800);

context.rect(0,500,800,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="rgba(255,251,77,1.00)"

context.fill();

context.strokeStyle="black";

context.stroke();

//doorway

context.beginPath();

context.moveTo(100,400);

context.rect(100,400,50,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="black"

context.fill();

context.strokeStyle="black";

context.stroke(); 

//doorway of alternate world

context.beginPath();

context.moveTo(100,500);

context.rect(100,500,50,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="rgba(112,0,1,1.00)";

context.fill();

context.strokeStyle="black";

context.stroke();

//doorway of alternate world

context.beginPath();

context.moveTo(100,500);

context.rect(420,300,50,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="rgba(112,0,1,1.00)";

context.fill();

context.strokeStyle="black";

context.stroke();

//doorway of alternate world

context.beginPath();

context.moveTo(100,500);

context.rect(340,180,50,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="rgba(112,0,1,1.00)";

context.fill();

context.strokeStyle="black";

context.stroke();


//doorway of alternate world

context.beginPath();

context.moveTo(100,500);

context.rect(140,160,50,100);

context.closePath();

context.lineWidth=5;

context.fillStyle="rgba(112,0,1,1.00)";

context.fill();

context.strokeStyle="black";

context.stroke();

//setting sun


context.beginPath();

context.moveTo(500,500);

context.arc(600,500,200,0,3.1416,true)

context.closePath();

context.fillStyle="orange"

context.fill();

context.strokeStyle="black";

context.stroke();

//second sun

context.beginPath();

context.arc(700,200,50,0*Math.PI,2*Math.PI,false)

context.closePath();

context.fillStyle="rgba(255,119,77,1.00)"

context.fill();

context.strokeStyle="rgba(157,21,79,1.00)";

context.stroke();







 


 


 


// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////


// CREDITS


context.save();

var credits = "Jude Wilferth, FMX 210, SP 2021";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.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

  1. Sabrina SternApril 14, 2021 at 4:42 PM

    I like the colors and your use of gradient.

    ReplyDelete
  2. Carly BernardoApril 17, 2021 at 11:26 AM

    this looks great, I love the colors you used. The colors really pop. I also like the vibe of this project, very futuristic. good job :)

    ReplyDelete
  3. Casper CafferataApril 18, 2021 at 8:26 PM

    The use of gradient to try add a bright sun effect was pretty neat.

    ReplyDelete
  4. Jharia MorrisApril 20, 2021 at 11:36 PM

    I like how honest you were in your statement because I can relate.

    ReplyDelete
  5. Julianne GregaApril 21, 2021 at 8:25 AM

    I like how you were reminded of Star Wars. This piece does look a different planet.

    ReplyDelete
  6. Isa :))April 21, 2021 at 4:40 PM

    This is a great variation of the scene you showed from Star Wars. It reminds me of an old nintendo game, maybe add the second sun/moon for a better depiction of a different planet.

    ReplyDelete
  7. Haylie YaslowitzApril 23, 2021 at 12:53 PM

    I think the colors you used were very nice and I'm amazed with how many elements you included in this. Also I like the Star Wars feel

    ReplyDelete
  8. Emily Van HirtumApril 29, 2021 at 8:37 PM

    I love how this turned out and I think the background looks great. The colors that you chose really stand out and look good together. Great job!

    ReplyDelete
  9. Melanie BrzezinskiMay 2, 2021 at 4:53 PM

    This is a really nice project. I really like how honest you were within your artist statement.

    ReplyDelete
  10. seansceeryMay 4, 2021 at 2:45 PM

    I love how the gradients in the background turned out. I also really liked your artist statement and how honest you were about the meaning behind the canvas project.

    ReplyDelete

Post a Comment

Popular posts from this blog

Logos (Black and White/Three Color versions)

Image
For this project, I made five different logos of things that were significant to me. The first logo resembled my connection to basketball being on the club basketball team. The second logo was the logo that I was told to go with by most of the class, but I did not really want to pursue this logo. The third logo that I was considering out of the five designs was the logo I went with in the end. This logo was meant to be a simple but sleek design. My family has always had a connection to mountains. We meet every winter in Colorado to celebrate Christmas together as a family. I also grew up on Signal Mountain which gave me the inspiration to go with this final design. I struggled a little bit while learning the software, but in the end I am pleased with how my logos turned out. This project took me roughly 3 to 4 hours of watching tutorials on the FMX website and work on the website.  
Read more

Internet/World Wide Web

 Internet and World Wide Web     We as a society have grown to rely and depend on technology to a great extent, but where did these come from? Are Internet and the World Wide Web different or the same thing? In the late 1960's, the first working prototype or form of working internet was created. The original purpose of the creation of the internet was for the purpose of being able to allow multiple computers to communicate under a single network.       This was started by the Advanced Research Projects Agency Network, funded by the U.S. military, but was later adopted by Robert Kahn and Vinton Cerf. These computer scientists created the first rue working form of the internet. Of course, the internet has changed drastically from then and now along with technology, but this was a start.      So what is the internet? The internet is a network that allows other computers to communicate and share data. The way we use the internet today is vas...
Read more