Canvas
I created this piece in Dreamweaver using codes. I've been inspired by basic shapes recently, but my main inspiration behind this piece was life and cells. Plant cells and animal cells are pretty different and I wanted to represent this by using cool or warm colors. Although cells are random and uncontrollable, I wanted to present them in a linear, geometric way to give it more of an abstract feel, without being too crazy.
A separate piece that inspired me to do this is Negative Optic Electric Force, Positive Optic Electric Force, by Alfred Jenson. The mathematical gestures are appealing to look at, which I tried to incorporate in my own piece. I also like the varying colors used. I wanted to add lines, as well as a gradient background, to add more movement and depth to the piece.
My code:
<!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
//background
var x=0;
var y=0;
var width = 800
var height= 600;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(0,0,0)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(200,50,0)");
//intermediate color
grd.addColorStop(0.5, "rgb(500,500,500)");
// ending color
grd.addColorStop(1, "rgb(0,50,200)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//back line
// starting point coordinates
var x = 0;
var y = 300;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3;
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 = 800;
var y1 = 300;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 6;
context.strokeStyle = "rgb(0,0,0)";
context.lineCap = 'round'
context.stroke();
//square 1
var x=150;
var y=150;
var width = 300
var height= 300;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgb(0,50,200)';
context.strokeStyle = 'rgb(0,100,250)';
context.fill();
context.stroke();
//red circle
var centerX = 600;
var centerY = 300
var radius = 150;
var startangle = 0* Math.PI;;
var endangle = .0001* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "red";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "red";
context.stroke();
//arc
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
var startangle = 0;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(600, 300, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//orange line
context.beginPath();
context.moveTo(450,300)
context.lineTo(750, 300);
context.lineWidth = 5; // STROKE WIDTH
context.strokeStyle = 'rgba(0,0,0,1.0)';
context.stroke(); // STROKE
//Simple lines
context.moveTo(300,150); // COORDINATES OF STARTING POINT
context.lineTo(300,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
//green square
var x=200;
var y=200;
var width = 200
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.fillStyle = 'rgb(0,200,50)';
context.strokeStyle = 'rgb(0,300,100)';
context.fill();
context.stroke();
//purple square
var x=250;
var y=250;
var width = 50
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 7;
context.fillStyle = 'rgb(100,0,200)';
context.strokeStyle = 'rgb(150,0,100)';
context.fill();
context.stroke();
//orange circle
var centerX = 600;
var centerY = 300
var radius = 70;
var startangle = 0* Math.PI;;
var endangle = .0001* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//yellow circle
var centerX = 600;
var centerY = 300
var radius = 40;
var startangle = 0* Math.PI;;
var endangle = .0001* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();
//lines
// starting point coordinates
var x = 0;
var y = 0;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 50;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 800;
var y1 = 600;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//line
// starting point coordinates
var x = 0;
var y = 0;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 50;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 800;
var y1 = 0;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Julianne Grega, FMX 210, SP 2021";
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>
Comments
Post a Comment