Clementine

The song 'Clementine' by Halsey has been one of my favorites since she released it. In my head, I have an entire lyric video that is full of color and animation that I would love to create one day. For now, though, I have made a Calligram with the lyrics:

Wish I could see what it's like to be the blood in my veins

Do the insides of all of my fingers still look the same?

And can you feel it too, when I am touchin' you?

And when my hair stands on ends, it's saluting you!

There is something very visual about her lyrics, and the way she sings gives me goosebumps when I read the words through the full song.

I've always been very inspired by music in my work, and I was happy to allow it to show through this piece. I hope to revisit it again and work on some details that I wasn't 100% satisfied with when I posted this blog. I had hoped to have a fill that represented the skin in the title and singer's name, and I also initially wanted to create an animation. My initial thoughts were too ambitious I think for the short amount of time I worked on this, but given another few days I think I could create something even more unique.

While having the 'lyric video' in my head, I had always imagined these lines tracing the hands in Michelangelo's The Creation of Adam. I feel that it is something recognizeable enough that people would be familiar with it, as well as an image that adds strength to Halsey's visual lyrics.

If you are curious about the song and want to listen, here you go:

Time it took to create this work: 3 hours

IRIS

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>