This work was designed in Dreamweaver using HTML Canvas to create an image out of code!
The image consists of many lines, circles, bezier and quadratic curves, as well as gradients and different levels of translucencies.
My initial design (Image 2) was a lot more ambitious than what I was able to accomplish in the end, but I was still happy with the final outcome.
I had wanted to create an even more “psychedelic” effect utilizing repetitive curves, but I had issues figuring out where to plan my points.
This class is my first encounter with code in this style, and while I find it interesting and am even excited to learn it,
I definitely feel like a beginner and found myself frustrated, initially when I wasn’t able to create what I had hoped at the start.
I think at one point, I was ready to throw my laptop at the wall because my code was frustrating me so much.
Even so, I took a step back and looked at what I had created. Though the work wasn’t exactly as I had planned for it to be,
I had still managed to create a design with bright and vibrant colors, and I was amazed at how all these little
characters written/copied into my code section had worked together to give me this technicolor image.
I began to look at the work, not as a failed attempt, but a new creation I didn’t know I’d encounter.
The design itself is one that I have been drawing since I was in middle school.
I was fascinated with M. C. Escher’s continuous and optical illusion designs.
Along with this, I have been drawing eyes since I was very young, inspired by the works of my parents from their art days.
Using these inspirations, I came up with my rotating eye image.
When flipped, the eye is meant to present a different persona, a new personality to relate to.
The colors are also very bright, but they alter when the image is flipped as well, adding to the idea of introducing a new character.
The title of the work ‘Iris’ comes from two things. The first is obvious, the Iris of the eye is the focal point,
while the central circles are repeated throughout the work. The second is the Olympian messenger goddess
of the rainbow. She was also known as the goddess of the sea and the sky. I felt that this was a very good representation
of the colors and the personality of the work while I created it.
Overall, I’m happy with how this work is in its current state.
Although just as the iris of our eyes adjust to let in light, and rainbows never stay in one place too long,
I’ll probably revisit this work to edit it and add later!
Estimated work time: 9 hours
Inspirations:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(175,175,175,1);
}
body {
background-color: rgba(0,0,0,1);
}
#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
//////BACKGROUND
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 0, 0, 250);
grd.addColorStop(0, 'rgba(200, 150, 0, 1)');
grd.addColorStop(.75, 'rgba(200, 0, 150, 1)');
grd.addColorStop(1, 'rgba(150,0,200, 1)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(100, 0, 100)';
context.stroke();
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 400;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 0;
var gradient = context.createLinearGradient(900,0,0,0);
gradient.addColorStop(0,"rgba(0,250,250,.4)"); //STARTING COLOR
gradient.addColorStop(.05,"rgba(200,0,200,.4)");
gradient.addColorStop(.1,"rgba(0,250,250,.4)");
gradient.addColorStop(.15,"rgba(200,0,200,.4)");
gradient.addColorStop(.2,"rgba(0,250,250,.4)");
gradient.addColorStop(.25,"rgba(200,0,200,.4)");
gradient.addColorStop(.3,"rgba(0,250,250,.4)");
gradient.addColorStop(.35,"rgba(200,0,200,.4)");
gradient.addColorStop(.4,"rgba(0,250,250,.4)");
gradient.addColorStop(.45,"rgba(200,0,200,.4)");
gradient.addColorStop(.5,"rgba(0,250,250,.4)");
gradient.addColorStop(.55,"rgba(200,0,200,.4)");
gradient.addColorStop(.60,"rgba(0,250,250,.4)");
gradient.addColorStop(.65,"rgba(200,0,200,.4)");
gradient.addColorStop(.7,"rgba(0,250,250,.4)");
gradient.addColorStop(.75,"rgba(200,0,200,.4)");
gradient.addColorStop(.8,"rgba(0,250 ,250,.4)");
gradient.addColorStop(.85,"rgba(200,0,200,.4)");
gradient.addColorStop(.9,"rgba(0,250,250,.4)");
gradient.addColorStop(.95,"rgba(200,0,200,.4)");
gradient.addColorStop(1,"rgba(0,250,250,.4)");
context.fillStyle = gradient;
context.fill()
context.strokeStyle = "rgba(250,250,0,.5)";
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 330;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 20;
///// ///// white circle?
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
context2.beginPath();
context2.moveTo(325, 300);
context2.lineTo(300, 310);
/////context2.rect(canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
context2.strokeStyle = "rgba(255,255,255,.25)";
context2.lineWidth = 1;
context2.stroke();
context2.closePath();
for (var x=0; x<canvas.width; x+=5) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(x/100);
context.drawImage(canvas2,-canvas.width/2, -canvas.height/4);
context.restore();
}
var gradient = context.createLinearGradient(300,-110,300,800);
gradient.addColorStop(0,"rgba(255,0,255,.5)"); //STARTING COLOR
gradient.addColorStop(.05,"rgba(200,0,200,.5)");
gradient.addColorStop(.1,"rgba(250,250,0,.5)");
gradient.addColorStop(.15,"rgba(200,0,200,.5)");
gradient.addColorStop(.2,"rgba(250,250,0,.5)");
gradient.addColorStop(.25,"rgba(200,0,200,.5)");
gradient.addColorStop(.3,"rgba(250,250,0,.5)");
gradient.addColorStop(.35,"rgba(200,0,200,.5)");
gradient.addColorStop(.4,"rgba(250,250,0,.5)");
gradient.addColorStop(.45,"rgba(200,0,200,.5)");
gradient.addColorStop(.5,"rgba(250,250,0,.5)");
gradient.addColorStop(.55,"rgba(200,0,200,.5)");
gradient.addColorStop(.60,"rgba(250,250,0,.5)");
gradient.addColorStop(.65,"rgba(200,0,200,.5)");
gradient.addColorStop(.7,"rgba(250,250,0,.5)");
gradient.addColorStop(.75,"rgba(200,0,200,.5)");
gradient.addColorStop(.8,"rgba(250,250,0,.5)");
gradient.addColorStop(.85,"rgba(200,0,200,.5)");
gradient.addColorStop(.9,"rgba(250,250,0,.5)");
gradient.addColorStop(.95,"rgba(200,0,200,.5)");
gradient.addColorStop(1,"rgba(250,250,0,.5)");
context.fillStyle = gradient;
context.fill()
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 230;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 0;
var gradient = context.createLinearGradient(900,0,0,0);
gradient.addColorStop(0,"rgba(255,0,255,.2)"); //STARTING COLOR
gradient.addColorStop(.05,"rgba(200,0,200,.2)");
gradient.addColorStop(.1,"rgba(250,250,0,.2)");
gradient.addColorStop(.15,"rgba(200,0,200,.2)");
gradient.addColorStop(.2,"rgba(250,250,0,.2)");
gradient.addColorStop(.25,"rgba(200,0,200,.2)");
gradient.addColorStop(.3,"rgba(250,250,0,.2)");
gradient.addColorStop(.35,"rgba(200,0,200,.2)");
gradient.addColorStop(.4,"rgba(250,250,0,.2)");
gradient.addColorStop(.45,"rgba(200,0,200,.2)");
gradient.addColorStop(.5,"rgba(250,250,0,.2)");
gradient.addColorStop(.55,"rgba(200,0,200,.2)");
gradient.addColorStop(.60,"rgba(250,250,0,.2)");
gradient.addColorStop(.65,"rgba(200,0,200,.2)");
gradient.addColorStop(.7,"rgba(250,250,0,.2)");
gradient.addColorStop(.75,"rgba(200,0,200,.2)");
gradient.addColorStop(.8,"rgba(250,250,0,.2)");
gradient.addColorStop(.85,"rgba(200,0,200,.2)");
gradient.addColorStop(.9,"rgba(250,250,0,.2)");
gradient.addColorStop(.95,"rgba(200,0,200,.2)");
gradient.addColorStop(1,"rgba(250,250,0,.2)");
context.fillStyle = gradient;
context.fill()
context.strokeStyle = 'rgba(0,250,250,.5)';
context.stroke();
///////THE EYELASHES
//////////TOP LASHES
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 300);
context.bezierCurveTo(400, 100, 600, 250, 700, 170);
context.quadraticCurveTo(600, 300, 600, 300);
context.lineWidth = 5;
// line color
context.fillStyle = 'black';
context.fill()
context.strokeStyle = 'black';
context.stroke();
///////////BOTTOM LASHES
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(600, 300);
context.bezierCurveTo(400, 500, 300, 350, 100, 430);
context.quadraticCurveTo(200, 300, 200, 300);
context.lineWidth = 5;
// line color
context.fillStyle = 'black';
context.fill()
context.strokeStyle = 'black';
context.stroke();
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
context2.beginPath();
context2.moveTo(canvas.width/3, canvas.height/3);
context2.lineTo(canvas.width*2/3, canvas.height*2/3);
///context2.rect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
context2.strokeStyle = "rgba(0,0,0,.5)";
context2.lineWidth = 1;
context2.stroke();
context2.closePath();
for (var x=0; x<canvas.width; x+=5) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(x/100);
context.drawImage(canvas2,-canvas.width/3, -canvas.height/3);
context.restore();
}
/////THE BROWS
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(700, 170);
context.bezierCurveTo(400, 100, 200, 100, 100, 200);
context.bezierCurveTo(50, 25, 350, 50, 500, 75);
context.bezierCurveTo(500, 75, 600, 100, 700, 170);
context.lineWidth = 5;
// line color
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, 'rgb(100, 200, 250)');
// dark blue
grd.addColorStop(1, 'black');
context.fillStyle = grd;
context.fill();
context.lineCap = 'round';
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 430);
context.bezierCurveTo(400, 500, 600, 500, 700, 400);
context.bezierCurveTo(750, 575, 450, 550, 300, 525);
context.bezierCurveTo(300, 525, 200, 500, 100, 430);
context.lineWidth = 5;
// line color
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(.25, 'black');
// dark blue
grd.addColorStop(1, 'rgb(250, 100, 200)');
context.fillStyle = grd;
context.fill();
context.lineCap = 'round';
context.strokeStyle = 'black';
context.stroke();
///////////THE EYE SHAPE
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 300);
context.quadraticCurveTo(400, 100, 600, 300);
context.lineWidth = 5;
context.fillStyle = 'rgb(225, 250, 250)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 300);
context.quadraticCurveTo(400, 500, 600, 300);
context.lineWidth = 5;
context.fillStyle = 'rgb(250, 225, 250)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
/////THE IRIS
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(0, 'rgb(0,200,200)');
grd.addColorStop(.25, 'rgb(100,100,200)');
grd.addColorStop(.75, 'rgb(0,200,200)');
grd.addColorStop(1, 'rgb(200,0,200)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 30;
context.strokeStyle = 'RGBA(200, 0, 200, .5)';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var gradient = context.createLinearGradient(900,0,0,0);
gradient.addColorStop(0,"rgba(255,0,255,.2)"); //STARTING COLOR
gradient.addColorStop(.1,"rgba(250,250,0,.2)");
gradient.addColorStop(.4,"rgba(0,250,250,.2)");
gradient.addColorStop(.5,"rgba(250,250,0,.2)");
gradient.addColorStop(.8,"rgba(0,250,250,.2)");
gradient.addColorStop(.9,"rgba(250,250,0,.2)");
gradient.addColorStop(1,"rgba(0,250,250,.2)");
context.fillStyle = gradient;
context.fill()
context.strokeStyle = 'RGBA(0, 250, 250, .02)';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
grd.addColorStop(1, 'rgb(100,100,200)');
grd.addColorStop(.5, 'rgb(200,0,200)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'RGBA(200, 0, 200, .5)';
context.stroke();
//////PUPIL LINES
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION
var credits = "MICHAELA DOOLEY, HTML PROJECT, FMX 210, SPRING, 2020";
context.beginPath();
context.font = 'bold 12px Arial';
context.fillStyle = "rgba(255,255,255,.75)";
context.fillText(credits, 10, 575);
context.closePath();
</script>
</body>
</html>
