FINAL CANVAS PROJECT Wilberg

FINAL CANVAS PROJECT

ANINE WILBERG


During the past couple of weeks, I have worked on one of the hardest computer programs I have ever tried. Dreamweaver was both challenging and hard, but also very fulfilling. It brought me great joy to finish all the assignments, and to know that I tried my best over the last weeks. I will never say I am a great coder, but to know that I learned something new, and handed in all the assignments and tried my best, makes me smile. Coding is not easy, but I knew with hard work, and hours spent, assignments would be done.  


For my final project I wanted to create something that held great meaning to me. The evil eye symbolizes protection and luck. It has also been found through thousands of years of history across many cultures. Growing up in Oslo, Norway in a very free and accepted culture you learn to accept other people, different cultures, and different religions. The Norwegian church is Lutheran, but we also have other Christian denominations, such as Catholicism. Due to a big number of immigrants to Norway Islam has also become a dominant religion. Therefore, growing up I was always interested in other religions and symbolize. In my house we had many evil eyes, and as a young girl I was always captured by its beauty, elegance and meaning. I always loved the meaning behind it, and today I have many different evil eyes, or “Nazar”, as it is called, all over my house, and other places that hold great meaning to me. I always wear it as a necklace, as well as I have it on my tennis bag, and in my purse. As each Nazar has different colors, they hold different meanings.  


For my final project I wanted to create the blue one, and perhaps the most common color. A blue eye is the color of good luck or good karma. This color projects positive energies such as creativity, motivation, commitment as well as protection against evil eyes. As I had some struggles with coding, I wanted to bring it to life, and give my project some good luck as well as motivation.  

In the final creative stage, I decided to use circles as my base, and put it all together with different shapes and geometric figures. 











My codes:


<!doctype html> <html> <head> <meta charset="UTF-8"> <title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </title> <!-- import external .js scripts here --> <!-- <script type="text/javascript" src="#" ></script> --> <!-- modify CSS properties here --> <style type="text/css"> body,td,th { font-family: Monaco, "Courier New", "monospace"; font-size: 14px; color: rgba(255,255,255,1); } body { background-color: rgba(0,0,0,1); } #container { position: relative; text-align: left; width: 95%; height: 800px; } #fmxCanvas { position: relative; background-color:rgba(255,255,255,1); border: rgba(255,255,255,1) thin dashed; cursor: crosshair; display: inline-block; } </style> </head> <body> <div id="container"> <!-- START HTML CODE HERE --> <canvas id="fmxCanvas" width="800" height="600"></canvas> <div id="display"></div> <!-- FINISH HTML CODE HERE --> </div> <script> /////////////////////////////////////////////////////////////////////// // DECLARE requestAnimFrame var rAF = window.requestAnimFrame || window.mozRequestAnimFrame || window.webkitRequestAnimFrame || window.msRequestAnimFrame; var fps = 30; window.requestAnimFrame = ( function(callback) { return rAF || function(callback) { window.setTimeout(callback, 1000 / fps); }; })(); /////////////////////////////////////////////////////////////////////// // DEFINE GLOBAL VARIABLES HERE var canvas; var context; canvas = document.getElementById("fmxCanvas"); context = canvas.getContext("2d"); var canvas1; var context1; canvas1 = document.createElement("canvas"); context1 = canvas1.getContext("2d"); canvas1.width = canvas.width; canvas1.height = canvas.height; var display; display = document.getElementById('display'); var counter; /////////////////////////////////////////////////////////////////////// // DEFINE YOUR GLOBAL VARIABLES HERE /////////////////////////////////////////////////////////////////////// // CALL THE EVENT LISTENERS window.addEventListener("load", setup, false); ////////////////////////////////////////////////////////////////////// // ADD EVENT LISTENERS canvas.addEventListener("mousemove", mousePos, false); ////////////////////////////////////////////////////////////////////// // MOUSE COORDINATES var stage, mouseX, mouseY; function mousePos(event) { stage = canvas.getBoundingClientRect(); mouseX = event.clientX - stage.left; mouseY = event.clientY - stage.top; } ///////////////////////////////////////////////////////////////////// // INITIALIZE THE STARTING FUNCTION function setup() { ///////////////////////////////////////////////////////////////////// // DECLARE STARTING VALUES OF GLOBAL VARIABLES counter = 0; mouseX = canvas.width/2; mouseY = canvas.height/2; ///////////////////////////////////////////////////////////////////// // CALL SUBSEQUENT FUNCTIONS, as many as you need clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS draw(); // THIS IS WHERE EVERYTHING HAPPENS } //////////////////////////////////////////////////////////////////// // CLEAR THE CANVAS FOR ANIMATION // USE THIS AREA TO MODIFY BKGD function clear() { context.clearRect(0,0,canvas.width, canvas.height); context1.clearRect(0,0,canvas.width, canvas.height); // clear additional contexts here if you have more than canvas1 } //////////////////////////////////////////////////////////////////// // THIS IS WHERE EVERYTHING HAPPENS function draw() { counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS //////////////////////////////////////////////////////////////////// // >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE  var x = 0; var y = 0; var width = canvas.width; var height = canvas.height; var centerX = 400; var centerY = 300; var radius = 80; 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, 80)'; context.fill(); context.strokeStyle = 'rgba(40,112,215,1.00)'; 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, 'rgba(255,255,255,1.00)'); grd.addColorStop(1, 'rgba(255,252,249,1.00)'); context.fillStyle = grd; context.fill(); context.stroke();   // starting point coordinates var x = 0; var y = 300; // control point coordinates ( magnet ) var cpointX = canvas.width / 2 - 50; var cpointY = canvas.height / 2 - -300; // ending point coordinates var x1 = 800; var y1 = 300; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineWidth = 5; context.strokeStyle = "rgba(67,124,194,0.81)"; context.stroke(); // starting point coordinates var x = 0; var y = 300; // control point coordinates ( magnet ) var cpointX = canvas.width / 2 - 50; var cpointY = canvas.height / 2 - 300; // ending point coordinates var x1 = 800; var y1 = 300; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineWidth = 5; context.strokeStyle = "rgba(69,125,182,0.47)"; context.stroke(); context.beginPath(); context.arc(400,300,240,0*Math.PI, 0.2857142857*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(255,242,242,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,0.2857142857*Math.PI, 0.5714285714*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(255,250,246,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,0.5714285714*Math.PI, 0.8571428571*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(255,255,255,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,0.8571428571*Math.PI, 1.142857143*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(250,252,250,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,1.142857143*Math.PI, 1.428571428*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(249,249,254,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,1.428571428*Math.PI, 1.714285714*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(247,244,249,1.00)" context.stroke(); context.beginPath(); context.arc(400,300,240,1.714285714*Math.PI, 2*Math.PI,false); context.lineWidth=30 context.strokeStyle="rgba(247,245,249,1.00)" context.stroke(); var x = 0; var y = 10; // control point 1 coordinates ( magnet ) var cpointX1 = canvas.width / 6; var cpointY1 = canvas.height / 2 +0; // control point 2 coordinates ( magnet ) var cpointX2 = canvas.width / 1.5; var cpointY2 = canvas.height / 2 - 700; // ending point coordinates var x1 = 0; var y1 = 10; context.beginPath(); context.moveTo(x, y); context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1); context.lineWidth = 6; context.strokeStyle = "rgba(64,107,203,1.00)"; context.lineCap = 'round' context.stroke(); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 15; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 5; context.strokeStyle = "#1240B3"; context.stroke();   var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 40; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 5; context.strokeStyle = "#0E61B9"; context.stroke(); // <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE /////////////////////////////////////////////////////////////////// // CREDITS context.save(); var credits = "Anine Wilberg, FMX 210, FA 2022"; context.font = 'bold 12px Helvetica'; context.fillStyle = "rgba(0,0,0,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(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE context.restore(); ////////////////////////////////////////////////////////////////// // HTML DISPLAY FIELD FOR TESTING PURPOSES display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter); ///////////////////////////////////////////////////////////////// // LAST LINE CREATES THE ANIMATION requestAnimFrame(draw); // CALLS draw() every nth of a second } </script> </body> </html>



Kommentarer

Legg inn en kommentar

Populære innlegg fra denne bloggen

PHOTOSHOP: SOMEWHERE

Bilde
  PHOTOSHOP: SOMEWHERE         Artist statement:     With the use of photoshop I got to place myself into my favorite TV shows . For this project I used different tools on photoshop that complemented my wish and got the perfect final photo. I used a photo I found online of the TV show “Sex and the City ” . I really enjoy watching this TV show, as well as their movies. Since all the characters are very stylish, I found a photo of me wearing the perfect outfit, that matches their colors and the total vibe and aesthetic of the characters. Since the characters are walking in the street of New York city, I also had to be walking. With the help of the right angle, clothes, and Photoshop tools, I managed to create the perfect photo, and photo shop myself as “the new friend of the cast ” .   I truly enjoyed working on this project and seeing myself photos shopped into the TV show made me realize that maybe one day I will be walking the streets of New York City with my own fri
Les mer

Anine Wilberg intro blog post

Bilde
  My name is Anine Wilberg, I am 21 years old, from Oslo, Norway.  As Oslo is both the capital and Norway's biggest city, it has a lot to offer. In between busy streets, it has a beautiful landscape and nature, which depicts my childhood, which has helped me to become the women I am today. I have always been a reflection of a unique upbringing. I spent most of my time, on skis or on the tennis court. I have always loved sports, and I think learning to be structured, and working hard for my goals, as well as seeing real passion from a young age, helped shaped my personality. I am a very adventurous and creative person, as I believe comes from traveling around the world playing Tennis but also exploring different countries, as well as cultures.  My favorite accomplishment in my life is a difficult question to answer. I think an easy way out would be to think of my tennis results, or getting into a great university across the world from where I grew up. But, I think the biggest accomp
Les mer

InDesign Homework

 InDesign https://www.youtube.com/watch?v=0eqhUFRlvgI I loved this video. It gave a great look into how we use different tools in InDesign. Since I have never used InDesign it was super helpful and gave really basic introduction that was easy to follow and do on your own. It was a great introduction to InDesign, and I recommend everyone who wants to learn about InDesign to watch this clip.  https://www.youtube.com/watch?v=4rT6UJlJ0f0 I really enjoyed this video. It gave me a lot of inspiration as well as motivation to finish of the semester and work hard. I really liked how he used both photoshop and InDesign for his designs. It was cool to see because last month we focused on Photoshop, so it was fun to understand what he was doing. I also learned how to use new tools on InDesign.  https://www.youtube.com/watch?v=K0mND94VlWs This video was so creative and I loved how it helped show what to do with photos and how to be creative with a cover design. Super helpful and I learned how to us
Les mer