Friday, September 9, 2022

Heart

 


<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title> ENTER THE TITLE OF THE PROJECT HERE </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


ctx.beginPath();
ctx.moveTo(400, 150);
ctx.quadraticCurveTo(325, 80, 250, 100);
ctx.bezierCurveTo(150, 120, 75, 225, 200, 350);
ctx.quadraticCurveTo(315, 435, 400, 550);
ctx.stroke();





 

 

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

// CREDITS

ctx.save();
var credits = "Dana Corrigan, Heart Exercise, FMX 210, FA/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>

Monday, January 22, 2018

Project 1: ASCII

Using a text editor, recreate a simple image - such as a logo or icon - with only HTML 5 code.  The subject is up to you.

Place the reference image on the graph either by hand or on Illustrator.  Use the graph to help you draw out the code. 

Display the graphic and its full code to your blog. Include an artist statement detailing your progress, how you created your composition and include any reference images, graph drawings and anything else that you used as a guide.

Requirements
       Please do not copy custom codes, not from your peers and not from the HTML reference websites
       The design should include custom shapes - connected lines, quadratic and bezier curves.  I will be grading it on how closely it looks to the source material (or how simplified it is).

Recommendations 
         You are allowed to create your own design rather than copy an existing graphic.  The only difference is you would be drawing it on top of your graph (or drawing it separately and overlaying it on top of the graph.

Student Examples:  If you click on the image, it will take you to their blogs, which contain their references and code.

http://michaelnassif.blogspot.com/2013/09/barcelona-is-my-favourite-team-and-i.html


http://jessdigitalarts.blogspot.com/2015/10/html-project-journal-eight.html

http://mariahdigitalarts.blogspot.com/2015/10/i-chose-to-do-minnie-mouse-for-my-html5.html





http://robertdraw.blogspot.com/2013/09/1-html5-spongebob.html

http://j210art.blogspot.com/2013/09/html-5-project.html

http://notenoughpun.blogspot.com/2013/02/slightly-less-than-average-mario.html

http://ghostofchozo.blogspot.com/2013/02/first-assignment-working.html

http://beckasdigitalartswork.blogspot.com/2015/03/html5-illustration.html

http://shieldsc1.blogspot.com/2015/03/html5-project.html