Monday, February 24, 2020

Caligram Apollinaire Project




TITLE: COCO LOCO OCEAN WIDE


Inspired by yearly summer cruise traveling, this piece purpose is to show all the places I have been since starting to work full time in the summers as a on board DJ and Cruise Director. On every palm tree branch is a ship I have worked or been on. The trees bark plus all the sand have the names of all the Caribbean Islands I have been able to explore and travel as my ship goes port to port. On the bottom of the sand there is a blue sign that says "DJ COCO LOCO" which is my DJ name and under it says "EST 2018" because that was the year I started to work on the cruise ships. 

This project was very fun to do as it gave me the opportunity to look back and remember all the great experiences I had on the ship and at all of the ports as well. The reason why I chose a palm tree to represent this is because the palm tree is what brings everything together for the Caribbean. The palm tree in my opinion has big value and that is why a palm tree is incorporated into my logo as a DJ. This was a great project I worked on and was happy to spend the time that I spent to do it.  



- No comments:

Tuesday, February 11, 2020

Canvas Final: BB8

Mine:


Inspiration:


  • Possibly one of the best and most fun project I have done using HTML Code!


  • This was done over a course of 3 class Periods.


  • 448 Lines of Code


BB8 is one of those characters that everyone at least knows by what the tiny little robot looks like. Even though BB8 is tiny he still brings big things to the table. I wanted to make this to illustrate what power and extravagance this little guy has as he is on Star Wars. In order to do that I first created his figure with a bold outline and inserted all the curves bolts and screws and his eye on. I made it look as realistic as I could have made it using code.

As I completed the figure, I started to see what I would be able to do in order to showcase the grand character he is for all Star Wars lovers. I inserted a silver circle gradient in back of him to make him pop out with the outer later outside of the circle in all black. This left BB8 looking like he is ready to take over the world giving him a super hero look. I decided to outline the circle with orange lines going around him in order to represent how grand and extravagant he is. This was a project that I loved to work on because it brought my childhood one step closer to come alive.





My Code:

<!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(255,255,255,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;

var centerX = 400;
var centerY = 300;
var radius = 200;


// Gradient

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.stroke();

var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;

var centerX = 400;
var centerY = 300;
var radius = 200;

var startX = 300;
var startY = 200;
var startRadius = 50;
var endX = 400;
var endY = 300;
var endRadius = 200;


context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(128, 120, 127)');
grd.addColorStop(1, 'rgb(200, 224, 215)');
context.fillStyle = grd;
context.fill();
context.stroke();

//// big circle

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 2.0;
        var radius = 100;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 10;
        context.strokeStyle = "black";
        context.stroke();

 //top arc

var centerX = 400;
        var centerY = 215
        var radius = 80;
        var startangle = 3.0* Math.PI;;
        var endangle =  2.0* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 10;

        context.strokeStyle = "black";
        context.stroke();


//Simple lines

context.moveTo(317,215); // COORDINATES OF STARTING POINT
context.lineTo(483,215); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE


 //// small circle

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 3.3;
        var radius = 20;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 15;
        context.strokeStyle = "black";
        context.stroke();

 //// small circle 2 int.

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 3.3;
        var radius = 10;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 20;
        context.strokeStyle = "navy";
        context.stroke();

//// smaller circle 3 ext.

  var centerX = canvas.width / 1.8;
        var centerY = canvas.height / 3.2;
        var radius = 3;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 7;
        context.strokeStyle = "black";
        context.stroke();

// Black TRIANGLE

context.beginPath(); // begin a shape

context.moveTo(345,250); // point A coordinates

context.lineTo(475, 275); // point B coords

context.lineTo(400,360); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5
; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgb(0,0,0)"; // Reb Green Blue Alpha

context.stroke();


//bottom arc 1

var centerX = 300;
        var centerY = 255
        var radius = 70;
        var startangle = 3.8* Math.PI;;
        var endangle =  2.5* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "orange";
        context.stroke();

//bottom arc 2

var centerX = 400;
        var centerY = 400
        var radius = 70;
        var startangle = 5.1* Math.PI;;
        var endangle =  3.9* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "orange";
        context.stroke();


//bottom arc 3

var centerX = 510;
        var centerY = 290
        var radius = 55;
        var startangle = 4.6* Math.PI;;
        var endangle =  3.3* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "orange";
        context.stroke();


//// smaller circle 4 ext. bottom

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 2.1;
        var radius = 5;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 7;
        context.strokeStyle = "black";
        context.stroke();




//bottom bottom arc 3

var centerX = 510;
        var centerY = 290
        var radius = 40;
        var startangle = 4.6* Math.PI;;
        var endangle =  3.3* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "Orange";
        context.stroke();

//bottom bottom arc 2

var centerX = 400;
        var centerY = 400
        var radius = 55;
        var startangle = 5.1* Math.PI;;
        var endangle =  3.9* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "orange";
        context.stroke();


//bottom bottom arc 1

var centerX = 300;
        var centerY = 255
        var radius = 55;
        var startangle = 3.8* Math.PI;;
        var endangle =  2.5* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 15;

        context.strokeStyle = "orange";
        context.stroke();

//// big circle

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 2.0;
        var radius = 100;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 10;
        context.strokeStyle = "black";
        context.stroke();

 //top arc

var centerX = 400;
        var centerY = 215
        var radius = 80;
        var startangle = 3.0* Math.PI;;
        var endangle =  2.0* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "clear";
context.fill();
      context.lineWidth = 10;

        context.strokeStyle = "black";
        context.stroke();


//Simple lines

context.moveTo(317,215); // COORDINATES OF STARTING POINT
context.lineTo(483,215); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE

//// small circle

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 3.3;
        var radius = 20;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 15;
        context.strokeStyle = "black";
        context.stroke();

 //// small circle 2 int.

  var centerX = canvas.width / 2.0;
        var centerY = canvas.height / 3.3;
        var radius = 10;
        var startangle = 0;
        var endangle = 90 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 20;
        context.strokeStyle = "navy";
        context.stroke();

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// this needs to be included with the repeat once in a document
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/10);
context2.lineTo(canvas.width*2/3, canvas.height*3/3);
///context2.rect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
context2.strokeStyle = "orange";
context2.lineWidth = 2;
context2.stroke();
context2.closePath();



for (var x=0; x<canvas.width; x+=10) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*x/canvas.width);
//context.drawImage(canvas2,-canvas.width/2, -canvas.height/2);
// context.drawImage(canvas2,-canvas.width/4, -canvas.height/4);
context.drawImage(canvas2,0, 0);
context.restore();
}


 
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ




//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE




// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Javier Rodriguez, FMX 210, spring, 2020";
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(200,200,200,200)";
context.fillText(credits, 200, 590);
context.closePath();

</script>
</body>
</html>
- 1 comment:

Sunday, February 2, 2020

HTML5 Canvas Tutorials

HTML5 Canvas Tutorials:


  • https://www.youtube.com/watch?v=EO6OkltgudE
    • I enjoyed this video because it gave a proper break down of a beginners guide to HTML code. It was very precise and too the point which made it easier to understand.
  • https://www.youtube.com/watch?v=WSwf1SOVaoo
    • I believe that this video gives a good and easy insight to the language of HTML code. With Daniel Woods profecionalism and with his technique it made me want to work and perfect as much as possible. 
  • https://www.youtube.com/watch?v=5UkWl2jfbFQ
    • Even if this is a more older video, I think the information that is given gives a valid reason why to watch this video for help. It provides good information about the basics of code.
- No comments:
Subscribe to: Posts (Atom)

FMX SP 2020 Portfolio

FMX SPRING 2020 Portfolio It is crazy to just think like that the semester has come to ...

  • Autoscopy
    "Scooby in Paradise" So this project was one that I got the pleasure to better understand as I didn't do it right the...
  • Self Portrait
    Semester Two? Inspiration This project was one that I truly enjoyed making just because of the fact that I was able to take ...
  • Gradient Mesh Project
    Meshed Green Apple Green Apple Inspiration I decided to use an apple as my inspiration for my Mesh Project. This really doesn...