Bezier and Quadratic Bee

 Made completely with code



<!doctype html>

<html>

<head>

<meta charset="UTF-8">


<title> BEZIER PRACTICE </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;

margin: 10px;

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>


<br><br>


Add your personal notes or additional information here

<!-- 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 ctx;

canvas = document.getElementById("fmxCanvas");

ctx = canvas.getContext("2d");


var canvas1;

var ctx1;

canvas1 = document.createElement("canvas");

ctx1 = canvas1.getContext("2d");


canvas1.width = canvas.width;

canvas1.height = canvas.height;


var canvas2;

var ctx2;

canvas2 = document.createElement("canvas");

ctx2 = canvas2.getContext("2d");


canvas2.width = canvas.width;

canvas2.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() {


ctx.clearRect(0,0,canvas.width, canvas.height);

ctx1.clearRect(0,0,canvas.width, canvas.height);

ctx2.clearRect(0,0,canvas.width, canvas.height);


// clear additional ctxs 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


//wings back


ctx.beginPath();

ctx.bezierCurveTo(150,170,50,5,230,140)

ctx.closePath();

 

ctx.fillStyle = "cyan"

ctx.fill();

ctx.strokeStyle = "black"

ctx.stroke();

 //bee body

ctx.beginPath();

//ctx.arc(200,175,70,0*Math.PI,2*Math.PI,false);

ctx.ellipse(200,175,90,50,0,20,20,true)


ctx.closePath();

 

ctx.fillStyle = "yellow"

ctx.fill();

ctx.strokeStyle = "black"

ctx.stroke();

 //stripe far right

        ctx.beginPath();

        ctx.bezierCurveTo(246,133,274,156,267,203)

        ctx.closePath();

        ctx.fillStyle = "black"

        ctx.fill();

        ctx.strokeStyle = "black"

        ctx.stroke();


//stripe second from right

        ctx.beginPath();

        ctx.bezierCurveTo(220,126,249,150,242,211)

            

        ctx.closePath();

        ctx.fillStyle = "black"

        ctx.fill();

        ctx.strokeStyle = "black"

        ctx.stroke();



//stripe third from right

        ctx.beginPath();

        ctx.bezierCurveTo(190,129,222,150,213,216)

            

        ctx.closePath();

        ctx.fillStyle = "black"

        ctx.fill();

        ctx.strokeStyle = "black"

        ctx.stroke();


//stripe fourth from right

        ctx.beginPath();

        ctx.bezierCurveTo(158,135,190,150,182,217)

            

        ctx.closePath();

        ctx.fillStyle = "black"

        ctx.fill();

        ctx.strokeStyle = "black"

        ctx.stroke();


//stripe fifth from right

        ctx.beginPath();

        ctx.bezierCurveTo(132,145,156,150,148,206)

            

        ctx.closePath();

        ctx.fillStyle = "black"

        ctx.fill();

        ctx.strokeStyle = "black"

        ctx.stroke();




//wings front//dont close path on bee, put a quadratic//fix the loop to work at intersection


 ctx.beginPath();

ctx.moveTo(160,143);

ctx.bezierCurveTo(158,143,380,10,237,156)

    ctx.quadraticCurveTo(217,132, 160,143)

ctx.closePath()


ctx.fillStyle = "cyan"

ctx.fill();

ctx.strokeStyle = "black"

ctx.stroke();


//trail

ctx.beginPath();

ctx.moveTo(302,170);

ctx.quadraticCurveTo(316,142,330,170);

    ctx.bezierCurveTo(330,170, 400,300,460,170);

     ctx.bezierCurveTo(513,90,333, 133,460,170); // 

     //ctx.bezierCurveTo(452,135,410,150,460,170);

     ctx.bezierCurveTo(460,170,635,300,600,170);

     ctx.bezierCurveTo(600,170,571,9,727,208);

     ctx.bezierCurveTo(727,208,800,300,730,400);

     ctx.bezierCurveTo(730,400,690,450,732,451);

     ctx.bezierCurveTo(732,451,765,446,740,428);

     ctx.strokeStyle = "black"

     ctx.stroke();

 

//flower


//petal1

    ctx.beginPath();


    ctx.moveTo(400,450);

    ctx.quadraticCurveTo(223,371,260,442);

    ctx.quadraticCurveTo(180, 485, 400, 450);

   

     ctx.closePath();

     ctx.fillStyle = "rgba(197,63,235,1)"

    ctx.fill();

     ctx.strokeStyle = "magenta"

     ctx.stroke();


 //petal2

    ctx.beginPath();

    ctx.moveTo(400,450);

    ctx.quadraticCurveTo(545,386,400,395);

    ctx.quadraticCurveTo(252, 386, 400, 450);

 

  

    ctx.closePath();

    ctx.fillStyle = "rgba(197,63,235,1)"

    ctx.fill();

    ctx.strokeStyle = "magenta"

    ctx.stroke();


 //petal3

    ctx.beginPath();

    ctx.moveTo(400,450);

    ctx.quadraticCurveTo(567,375,520,442);

    ctx.quadraticCurveTo(592, 498, 400, 450);

 

  

    ctx.closePath();

    ctx.fillStyle = "rgba(197,63,235,1)"

    ctx.fill();

    ctx.strokeStyle = "magenta"

    ctx.stroke();

 

 //petal4

    ctx.beginPath();

    ctx.moveTo(400,450);

    ctx.quadraticCurveTo(402,562,457,510);

    ctx.quadraticCurveTo(592, 498, 400, 450);

 

  

    ctx.closePath();

    ctx.fillStyle = "rgba(197,63,235,1)"

    ctx.fill();

    ctx.strokeStyle = "magenta"

    ctx.stroke();

 

//petal5

    ctx.beginPath();

    ctx.moveTo(400,450);

    ctx.quadraticCurveTo(211,474,340,510);

    ctx.quadraticCurveTo(397, 573, 400, 450);

 

  

    ctx.closePath();

    ctx.fillStyle = "rgba(197,63,235,1)"

    ctx.fill();

    ctx.strokeStyle = "magenta"

    ctx.stroke();


//stem

ctx.beginPath();

    ctx.moveTo(400,450);

    ctx.lineTo(400,600);


ctx.closePath();

ctx.strokeStyle = "green"

ctx.stroke();

ctx.lineWidth = 4



//flower center

ctx.beginPath();

//ctx.arc(200,175,70,0*Math.PI,2*Math.PI,false);

ctx.ellipse(400,450,50,20,0,20,20,true)


ctx.closePath();

 

ctx.fillStyle = "yellow"

ctx.fill();

ctx.strokeStyle = "orange"

ctx.stroke();


//leaf

ctx.beginPath();

ctx.bezierCurveTo(400,567,500,537,400,600)

ctx.fillStyle = "rgba(66,135,73)"

ctx.fill()

ctx.strokeStyle = "green"

ctx.stroke();


// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////


// CREDITS


ctx.save();

var credits = "Susanna Triantafillou, Bezier, FMX 210, SP 2022";

ctx.font = 'bold 12px Helvetica';

ctx.fillStyle = "rgba(0,0,0,1)"; // change the color here

ctx.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

ctx.shadowBlur = 12;

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

ctx.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>

Comments

Post a Comment

Popular posts from this blog

Portfolio

Image
My portfolio used a pixel grid. Using the rulers function in Adobe InDesign, I placed a ruler at ever 0.5 inches both vertically and horizontally.   
Read more

Somewhere

Image
  FINAL PRODUCT REFERENCE IMAGES In photoshop, I was able to create this work by using the polygon lasso tool and masking layers to insert myself into the scene. With the addition of rearranging some objects with mask layers and adding filters, I added myself to the 2015 Cinderella live action movie.
Read more

Autoscopy

Image
  100% Resolution Image GIFS My autoscopy project is a piece that shows me seeing past the flaws that others have made me believe I have. It is about growth and acceptance of who I am and who I will become. Others actions do not define me. I see now that my kindness and energetic personality are ones to be cherished, not pushed aside. All of the images I have combined, I have taken myself. The sunset is a Chicago sunset. I see this sunset as myself. I am a sky full of colors. The flowers is an image I took at the Chicago Botanical Gardens. It represents the way I may not be seen initially, but after closer look, I am s small, beautiful bundle of flowers that continues to spread. For my piece, I used Photoshop's neural filters, brightness, contrast, saturation, and filter galleries. 
Read more