Illustrator CC Video.
I found this video for beginners and it covers the top ten things that beginners need to know.
https://www.youtube.com/watch?v=Tw2qUdfvbEQ
https://www.youtube.com/watch?v=4_ESlYH4MYI
https://www.youtube.com/watch?v=RbbQl2sU-ag
Wednesday, September 18, 2019
Tuesday, September 17, 2019
Canvas Project
Composition:
Full Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//
// background
context.beginPath();
context.rect(0,0,800,600); // x,y,w,h
context.fillStyle = 'black';
context.fill();
context.closePath();
var gradient3 = context.createLinearGradient(0, 0, 800, 600);
gradient3.addColorStop(0, 'white');
gradient3.addColorStop(1, 'rgba(50, 50, 250, 0.5)');
context.fillStyle = gradient3;
context.fillRect(0, 0, 800, 600);
context.closePath();
// egg
context.beginPath();
context.arc(200,400,150,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(10,0,70)';
context.fillStyle = 'rgb(10,0,70)';
context.shadowColor = "rgba(255,255,255,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.stroke();
context.fill();
/// sperm 1
context.beginPath();
context.moveTo(200,147);
context.bezierCurveTo(150,10,400,10,350,50);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(175,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(225,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
/// sperm 2
context.beginPath();
context.moveTo(100,47);
context.bezierCurveTo(50,50,50,10,20,20);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(125,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(75,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
//// sperm 3
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,275,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,325,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(350,305);
context.bezierCurveTo(400,200,400,450,550,300);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 4
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(570,200,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(610,220,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,203);
context.bezierCurveTo(650,100,700,350,750,200);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 5
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,435,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,465,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.lineTo(575,450);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(575,450);
context.lineTo(575,425);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//// texture
context.beginPath();
context.arc(150,400,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.shadowColor = "rgba(60,0,80,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
// PURPLE TRIANGLE with transparency
context.beginPath(); // begin a shape
context.moveTo(200,250); // point A coordinates
context.lineTo(340, 450); // point B coords
context.lineTo(60,450); // 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 = "rgba(255,0,0,1)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(89,50,140,1)";
context.fill();
/// title
var text = "The Creation of Life, FMX 210 2019";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(255,255,255,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(text, 500, 550);
/// rgba meaning A pixel with A=1.0 is "solid." A=0.0 is invisible. A=0.5 is translucent
// false is default, true is counterclockwise, doesnt mean much for you
//Heart
//Bezier Curve Variables
var Ax = 200;
var Ay = 350;
var Bx = 200;
var By = 450;
var control1x = 100;
var control1y = 300;
var control2x = 100;
var control2y = 300;
var control3x = 300;
var control3y = 300;
var control4x = 300;
var control4y = 300;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Image for Inspiration: austinfertility.com
Hand Drawn Concept Art:
Project Background:
I am a creative writer and thinker but do not have an innate ability to draw or design. I drew inspiration from my first college degree in biology to find something in nature on a microscopic level. I found the image above and it had nice shapes and colors that could help me begin a Canvas project.
It took me about 10 hours total from drawing to Canvas image. I found HTML5 to be very challenging and not intuitive due to its many idiosyncratic syntax rules that are not easy to learn. Thankfully I was able to cut and paste existing language from class and other sources to help the process. I do have a newly acquired appreciation for web designers and was glad to learn to basics of HTML5 for Canvas to share with my Marketing students.
Concept Statement:
What could be more inspiring than creating art from the actual creation of life? I took the basic image and drew some concept art on graph paper - see above. I created a gradient rectangle with dark purple on the bottom right to symbolize infinity. The gradient gradually lightens to a bright white in the top left corner symbolizing divine light. The circle is the human ovum but is symbolic of everlasting life, as a circle has no beginning or end. I inserted a purple triangle inside the circle to symbolize the trinity, and within the triangle I placed a heart to symbolize Agape love, which is at the core of creation. I created four spermatozoon with one facing the apex of the triangle which approaches creation through faith, and a second approaching the right top of the heart to symbolize human emotional love as a path to spirituality. I created one spermatozoon with an L shaped tale to represent the ambivalence of free will as this shape would make the spermatozoon "swim" in circles, which can symbolize being lost before finding oneself in the divine light.
Full Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//
// background
context.beginPath();
context.rect(0,0,800,600); // x,y,w,h
context.fillStyle = 'black';
context.fill();
context.closePath();
var gradient3 = context.createLinearGradient(0, 0, 800, 600);
gradient3.addColorStop(0, 'white');
gradient3.addColorStop(1, 'rgba(50, 50, 250, 0.5)');
context.fillStyle = gradient3;
context.fillRect(0, 0, 800, 600);
context.closePath();
// egg
context.beginPath();
context.arc(200,400,150,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(10,0,70)';
context.fillStyle = 'rgb(10,0,70)';
context.shadowColor = "rgba(255,255,255,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.stroke();
context.fill();
/// sperm 1
context.beginPath();
context.moveTo(200,147);
context.bezierCurveTo(150,10,400,10,350,50);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(175,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(200,150);
context.quadraticCurveTo(225,175,200,200);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
/// sperm 2
context.beginPath();
context.moveTo(100,47);
context.bezierCurveTo(50,50,50,10,20,20);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(125,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(75,75,100,50);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
//// sperm 3
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,275,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(320,300);
context.quadraticCurveTo(340,325,350,300);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(350,305);
context.bezierCurveTo(400,200,400,450,550,300);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 4
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(570,200,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,200);
context.quadraticCurveTo(610,220,575,225);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(600,203);
context.bezierCurveTo(650,100,700,350,750,200);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
/// sperm 5
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,435,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.quadraticCurveTo(665,465,685,450);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(650,450);
context.lineTo(575,450);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(575,450);
context.lineTo(575,425);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//// texture
context.beginPath();
context.arc(150,400,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.shadowColor = "rgba(60,0,80,1)";
context.shadowBlur = 20;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(100,450,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
context.beginPath();
context.arc(110,330,20,0*Math.PI,2*Math.PI,false);
context.strokeStyle = 'rgb(30,0,70)';
context.fillStyle = 'rgb(30,0,70)';
context.stroke();
context.fill();
// PURPLE TRIANGLE with transparency
context.beginPath(); // begin a shape
context.moveTo(200,250); // point A coordinates
context.lineTo(340, 450); // point B coords
context.lineTo(60,450); // 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 = "rgba(255,0,0,1)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(89,50,140,1)";
context.fill();
/// title
var text = "The Creation of Life, FMX 210 2019";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(255,255,255,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(text, 500, 550);
/// rgba meaning A pixel with A=1.0 is "solid." A=0.0 is invisible. A=0.5 is translucent
// false is default, true is counterclockwise, doesnt mean much for you
//Heart
//Bezier Curve Variables
var Ax = 200;
var Ay = 350;
var Bx = 200;
var By = 450;
var control1x = 100;
var control1y = 300;
var control2x = 100;
var control2y = 300;
var control3x = 300;
var control3y = 300;
var control4x = 300;
var control4y = 300;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 10;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Image for Inspiration: austinfertility.com
Hand Drawn Concept Art:
Project Background:
I am a creative writer and thinker but do not have an innate ability to draw or design. I drew inspiration from my first college degree in biology to find something in nature on a microscopic level. I found the image above and it had nice shapes and colors that could help me begin a Canvas project.
It took me about 10 hours total from drawing to Canvas image. I found HTML5 to be very challenging and not intuitive due to its many idiosyncratic syntax rules that are not easy to learn. Thankfully I was able to cut and paste existing language from class and other sources to help the process. I do have a newly acquired appreciation for web designers and was glad to learn to basics of HTML5 for Canvas to share with my Marketing students.
Concept Statement:
What could be more inspiring than creating art from the actual creation of life? I took the basic image and drew some concept art on graph paper - see above. I created a gradient rectangle with dark purple on the bottom right to symbolize infinity. The gradient gradually lightens to a bright white in the top left corner symbolizing divine light. The circle is the human ovum but is symbolic of everlasting life, as a circle has no beginning or end. I inserted a purple triangle inside the circle to symbolize the trinity, and within the triangle I placed a heart to symbolize Agape love, which is at the core of creation. I created four spermatozoon with one facing the apex of the triangle which approaches creation through faith, and a second approaching the right top of the heart to symbolize human emotional love as a path to spirituality. I created one spermatozoon with an L shaped tale to represent the ambivalence of free will as this shape would make the spermatozoon "swim" in circles, which can symbolize being lost before finding oneself in the divine light.
Sunday, September 15, 2019
Monday, September 9, 2019
In completing the HTML5 for Canvas assignment I watched additional videos on HTML5 language to better understand hypertext markup language as I had never worked with it before. I watched the series beginning with the attached video. There are many rules and idiosyncrasies in this language which makes it very hard for a beginner not to make mistakes in syntax, etc.
https://www.youtube.com/watch?v=9gTw2EDkaDQ
I tried to attach my assignments making a W, 3 lines, single color square and gradient rectangle but do not see an icon to do so, and found this statement on the web.
The Blogger service allows users to create and manage a blog for free. While it has options for embedding videos and images and including other multimedia content in blog posts, it lacks the ability to attach specific files to posts. If you want to supplement a blog post with a PDF file, you need to use a separate tool to upload the file, then link to the PDF from the Blogger page.
I have sent them via email to the instructor so they are in on time.
I found the lack of a set of numbers in the Y axes makes it harder to draw in Dreamweaver as you have to guess at a coordinate value instead of knowing exactly what value works. I used graph paper to sketch our my designs first and then went to dreamweaver to draw them. Also had some difficulty logging into dreamweaver on campus and had to do so several times before I was able to use the program.
https://www.youtube.com/watch?v=9gTw2EDkaDQ
I tried to attach my assignments making a W, 3 lines, single color square and gradient rectangle but do not see an icon to do so, and found this statement on the web.
The Blogger service allows users to create and manage a blog for free. While it has options for embedding videos and images and including other multimedia content in blog posts, it lacks the ability to attach specific files to posts. If you want to supplement a blog post with a PDF file, you need to use a separate tool to upload the file, then link to the PDF from the Blogger page.
I have sent them via email to the instructor so they are in on time.
I found the lack of a set of numbers in the Y axes makes it harder to draw in Dreamweaver as you have to guess at a coordinate value instead of knowing exactly what value works. I used graph paper to sketch our my designs first and then went to dreamweaver to draw them. Also had some difficulty logging into dreamweaver on campus and had to do so several times before I was able to use the program.
Monday, September 2, 2019
Ok I took a look at tutorial videos for HTML5 Canvas. I understand the basics that we are creating a canvas - or white space on our web page - and can then draw, animate and interact with the elements. All good so far, but when they started talking about HTML and JavaScript they lost me. I've posted the videos that I watched, but way over my head at this point.
https://www.youtube.com/watch?v=LQPKzf_G18Q
https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL&index=2&t=0s
https://www.youtube.com/watch?v=T2lBVYrtPO8
https://www.youtube.com/watch?v=LQPKzf_G18Q
https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL&index=2&t=0s
https://www.youtube.com/watch?v=T2lBVYrtPO8
Subscribe to:
Posts (Atom)