canvas final fmx 2022

     Before taking this class I never coded anything in my life. It was intimidating at first but you really just have to see what you need to do. It was not too difficult, but like many have said it was trial and error. I actually ended up coding this project about five times. Every time I would click off and open something else it would delete my project. I was put into this class late but I did not see me having a harder time than the other students. I wanted to do a very simple version of starry night almost abstract looking. Since my inspiration was the starry night, I also looked at abstract versions of the painting. I took some ideas from there and made some of my own. I went simple and used simple shapes, and used similar colors to the actual Starry night. I used dreamweaver to create my project. I used squares, rectangles, circles, arcs, bezeir curves and quadratic curves. 

inspirations:




sketch: 








Code: 

//moon light//

var centerX = canvas.width / 1.5;

        var centerY = canvas.height / 5;

        var radius = 80;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();


//moon inside//

var centerX = canvas.width / 1.5;

        var centerY = canvas.height / 5;

        var radius = 50;

        var startangle = 1;

        var endangle = 1.5 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "yellow";

        context.stroke();


//building//

var x=50;

var y=100;

var width = 50

var height= 800;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(0,2,0,1.00)';

context.strokeStyle = 'rgb(28,16,16,1.00)';

context.fill();

context.stroke();

var x=100;

var y=190;

var width = 200

var height= 400;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,2,0,1.00)';

context.strokeStyle = 'rgb(28,16,16,1.00)';

context.fill();

context.stroke();


var x=10;

var y=400;

var width = 250

var height= 250;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,2,0,1.00)';

context.strokeStyle = 'rgb(28,16,16,1.00)';

context.fill();

context.stroke();


//city below//


context.beginPath();

context.rect(300,500,400,300); // x,y,w,h

context.closePath();

context.fillStyle = "rgba(38,33,33,1.00)";

context.fill();

context.strokeStyle = "rgba(3,3,3,0.86)";

context.stroke();


//sky swirls//

 

// starting point coordinates

var x = 0;

var y = 100;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 50;

var cpointY = canvas.height / 2 - 300;


// ending point coordinates

var x1 = 500;

var y1 = 30;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,255)";

context.stroke();

 

var x = 0;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 50;

var cpointY = canvas.height / 2 - 300;


// ending point coordinates

var x1 = 500;

var y1 = 30;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgba(49,49,101,1.00)";

context.stroke();

var x = 0;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 80;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 400;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgba(96,202,204,1.00)";

context.stroke();

var x = 80;

var y = 100;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 80;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 400;

var y1 = 100;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgba(85,85,203,1.00)";

context.stroke();

// starting point coordinates

var x = 400;

var y = 100;


// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 300;


// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300; 


// ending point coordinates 

var x1 = 700;

var y1 = 300;



context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);


context.lineWidth = 6;

context.strokeStyle = "rgba(99,159,176,1.00)";

context.lineCap = 'round' 

context.stroke();

// starting point coordinates

var x = 400;

var y = 500;


// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 300;


// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300; 


// ending point coordinates 

var x1 = 700;

var y1 = 300;



context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);


context.lineWidth = 6;

context.strokeStyle = "rgba(111,111,238,1.00)";

context.lineCap = 'round' 

context.stroke();




Comments

Post a Comment

Popular posts from this blog

ID HW 1

 Three videos I found for In design for beginners was, " get started with 10 beginner tips for in design." This video was only 14 minutes and and brushed on tips and tricks for certain projects. I thought it was only helpful a little bit and it didnt go into great detail about tools. For a beginner who doesn't do much with digital media design I think it would be more beneficial to take a course or watch a video describing each tool and how to use it.  https://www.youtube.com/watch?v=mVW8AF2TMnw The next video I picked was called, " in design for beginners FREE COURSE." I thought this video was great it went through all of the tools and different ways to use them to get the desired look. As an individual who has never used in design I liked this course and obviously appreciated that it was free. This video was around 2 and a half hours.  https://www.youtube.com/watch?v=RXRT3dHu6_o The last video I watched was a 5 minute video called, " adobe in design tutor
Read more

#0 BLOG

 Hi! My name is Emma Shuck and I am a pre-nursing major. I am a freshman and it is my first semester at The University of Tampa. I am excited to take this class so I can learn coding and further my experience with photoshop. I have always wanted to learn how to code, so hopefully I am good at it!       I live 45 minutes outside of Tampa and I have lived in England for three years when I was younger. I grew up around this area every weekend and I have always loved it. A hobbie I enjoy is dancing. I was a dancer for 15 years and danced all the way through high school. I was co-captain and captain of my high schools dance team. In high school I was apart of many clubs including National Honor Society and Health Occupations Students of America. In both clubs I held leadership positions. I like to be known as a leader and not a follower. One thing I am not good at would be skiing. Since I have lived in Florida most of my life, snow is a rare occasion for me! The last time I went skiing was
Read more

Selfies blog #0

Image
  $777$777777777777777777$$$7$$$$$$$$$$$$7 $$777$777777777777777777$$$$$$$$$$$$7777 $$$7777777777777777777777$$$$$$$$$$7$777 $$$77777777777777777777777$$$$$$$$$$7777 $$$77777777777777777777777$$$$$$$$$$7777 $$$$$7777777777ZZ$$77777777$$$$$$$$77777 $$$$$$77777Z$$$77$777$$777$$$$$$$$$77777 $$$$$$$7777$$$$$$$$77$$$$$$$$$$$$$777777 $$$$$$$$$77777Z$$$$$$$$$$$$$$$$$7$$$7778 $$$$$$$$$$777$$$$$$7777$$7$$$777777IIODZ $$$$$$$$$$777777777$?++7I7$$$777777I7ZOZ $$$$$$$$$$7$$?++II$$I$77?I7$7$$777IIODZZ $$$$$$88DI8IIZD8DDD888OZOZ$$777777IIZDZ$ I$$7$7DZII788DDDDDO$$77$Z8O$$77777IIZOD$ 7I7$$OOOO8ODD88DDO777III77O8$$7777IIIZDZ I77$ZOOO88DDD8D8O77IIIIIIII$O$$777IIIZDZ 777ZZOO888DDN8DZ$7III????II?DO$777IIIZD8 77ZZOOO8OOOOO8DZ7IIII???????I8Z$?77IIIZD I7ZZOO8OOOOOZOOZI77$7???????ID$I$$7D7IZD ZZZZOOOZZZ$ZOOO$II??III??IIII$ZIZDD$IIZD Z$ZZO8ZZZOOOO8$I777$7II??IZOZOZ??Z777IZD Z$ZZZOZOZOOO8ZIII77$I77IIIIII$ZOI?7IIIIZ ZZZOO8ZZOOOOZ$7IIII?II77IIII+IOO$?+IIIIZ ZZZO88Z8OD88Z$7III???I777I????OZZ$I?IIIZ OZOO8OOO8OZZZ$
Read more