Art And Technology/ Digital Design

Tuesday, September 9, 2014

Project 1

I chose to make a geometric fox for project one. However, it was coming up with the idea that was easy. I started with the background and created a gradient starting with yellow (the sun) and ending in dark green (the forest). The hard part came when deciding what points to put into the code to draw the shapes in the correct place. I found the arches to be the hardest to place. It was a large amount of guessing on my part on which numbers to put in for the position of the arches. I made the head of the fox stick out more by making it a solid fill of red, while I made the body to be 25% transparent. All in all I am proud of what I was able to create using code.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//rectangle background

var x=0;
var y=0;
var width = 600
var height= 800;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'lime';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,55)");
//intermediate color
grd.addColorStop(0.5, "rgb(153,255,51)");
// ending color
grd.addColorStop(1, "rgb(0,51,0)");
context.fillStyle = grd;
context.fill();
context.fill();

context.stroke();

//Body
// Set the style properties.
context.fillStyle = "rgba(255,0,0,0.75)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(300, 175); // give the (x,y) coordinates
context.lineTo(475, 650);
context.lineTo(100, 650);
context.lineTo(300, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//head
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;
context.fillStyle = "rgb(255,0,0)";
context.beginPath();
// Start from the top-left point.
context.moveTo(150, 175); // give the (x,y) coordinates
context.lineTo(450, 175);
context.lineTo(300, 425);
context.lineTo(150, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();
context.fill();

//left ear
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(150, 50); // give the (x,y) coordinates
context.lineTo(250, 175);
context.lineTo(150, 175);
context.lineTo(150, 50);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//inner
//Simple V line in pink
context.fillStyle= 'white';
var x= 160;
var y = 150;
var x1 = 160;
var y1 = 80;
var x2 = 215;
var y2 = 160;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=160;
var y=150;
var x1=215;
var y1=160;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"

//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"

//right ear
// Set the style properties.
context.fillStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(350, 175); // give the (x,y) coordinates
context.lineTo(450, 50);
context.lineTo(450, 175);
context.lineTo(350, 175);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//inner
//Simple V line in pink

var x= 375;
var y = 160;
var x1 = 430;
var y1 = 90;
var x2 = 435;
var y2 = 150;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'butt';
context.lineWidth = 2;// declare the width in pixels of the line
context.strokeStyle = 'white'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x=375;
var y=160;
var x1=435;
var y1=150;
//comment
context.beginPath();
context.moveTo (x,y);
context.lineTo (x1,y1);
context.lineCap= "butt";
context.lineWidth= 2;
context.strokeStyle= 'white';

context.stroke();
context.fill();
//left eye

//Arc
var x = canvas.width / 2.5;
var y = canvas.height / 3;
var radius = 25;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;

// line color
context.strokeStyle = 'black';
context.stroke();

//right eye

//Arc
var x = canvas.width / 1.75;
var y = canvas.height / 3;
var radius = 25;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;

// line color
context.strokeStyle = 'black';
context.stroke();

//nose

// Set the style properties.
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.lineWidth = 3;

context.beginPath();
// Start from the top-left point.
context.moveTo(275, 390); // give the (x,y) coordinates
context.lineTo(325, 390);
context.lineTo(300, 425);
context.lineTo(275, 390);

// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

//right leg

var x= 325;
var y = 525;
var x1 = 325;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 400;
var y = 525;
var x1 = 400;
var y1 = 650;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//right paw
var x=330;
var y=625;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();

context.stroke();

var x= 350;
var y = 640;
var x1 = 350;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 375;
var y = 640;
var x1 = 375;
var y1 = 675;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//left leg
var x= 175;
var y = 525;
var x1 = 260;
var y1 = 450;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 250;
var y = 530;
var x1 = 280;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates // draw line to following point
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//left paw
var x=250;
var y=450;
var width =75
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.fill();

context.stroke();

var x= 275;
var y = 475;
var x1 = 275;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 300;
var y = 475;
var x1 = 300;
var y1 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'black'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//tail
context.fillStyle= "rgba(255,0,0,.75)";

var x = canvas.width / 1.5;
var y = canvas.height / 1.65;
var radius = 175;
var startAngle = .38 * Math.PI;
var endAngle = 1.54 * Math.PI;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 3;

// line color
context.strokeStyle = 'red';
context.stroke();
context.fill();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="800"></canvas>
</body>
</html>

Monday, September 1, 2014

Digital Rectangle

Creating this rectangle was fairly easy using the coding shell. It was just a little bit of changing numbers and colors

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=100;
var y=350;
var width = 100
var height= 400;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'black';
context.strokeStyle = 'black';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, 'purple');
//intermediate color
grd.addColorStop(0.5, 'blue');
// ending color
grd.addColorStop(1, 'black');
context.fillStyle = grd;
context.fill();
context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

Sunday, December 8, 2013

Flash mobs

The idea of flash mobs exploded in 2003 when a man, "Bill" encouraged people in New York City to come together to create random acts of fun with the purpose of confusing the general population. Technology was implemented to get the flash mobs to come together. The first few flash mobs were so entertaining that it became a new phenomenon. People everywhere began to create these fun random acts for the public. Some were just because, but others had a cause driving them. "Bill" stopped while he was ahead and the idea of flash mobs were still burring in people's minds. He didn't want to be a part of the phase when it died. When the media began doing stories on flash mobs the idea spread around the nation. However, anti-mobs were also formed which lead to the popularity downfall. Now flash mobs are not a big thing. They still occur on college campus and in communities, however, the media attention is very little. The idea of a flash mob is now only kept alive through youtube and the internet.

I feel that the main drive behind flash mobs was that people felt they needed to be apart of something. They wanted to get out of the normalcy of their lives so they joined a mob. They also wanted other people to be able to stop and actually see what was going on in the world. The whole idea was to bring a short amount of fun and happiness to the lives of the people that happened to be in the location that the mob would be in. Flash mobs came during a time that people needed to get their minds off of the bad events occurring in the world. They needed a short amount of time to just forget all of that and enjoy the day at hand.

Golan Levin

Golan Levin is an artist but also has a background in engineering. He combines his talents to create fascinating interactive works of art. He claims to focus more on the behavior behind the piece rather than its ascetic qualities. In his interview Levin is talking about his moving eye sculpture and how he used it to create a different relationship between spectators. Not only is the person viewing the piece a spectator, but the piece itself is also one. Levin engineered the eye in such a way that it seems as though it has a personality. The eye follows the spectators every move and is programed to blink a split second after them. Levin works primarily with the behavior and tries to create pieces that allow interaction with the spectator. He wants to trigger behaviors and be able to study the relationship between a created behavior and the reaction with a natural behavior. I find Golan Levin's work interesting. It is not what I think about when someone says art, however, I can still see it as that. I like how he is interested in the reaction of the spectators. I found that with my performance art I became more interested in people's reactions to me rather than the original message behind the piece. I can appreciate where Golan Levin is coming from and I would love to get to experience his work in person one day.

Saturday, December 7, 2013

Reaction to "A Scientist Predicts the Future" by Michio Kaku

Michio Kaku predicts that the future will be full of new technologies. The untransformed human body will be obsolete. Technology will be so ingrained into our generation that people will not know how to react with out it. It will silently slip into our everyday lives. He predicts that college students will be the first to be fully ingrained under technology once it becomes a cheaper commodity. It will be common place for them. Technology will advance so rapidly that computers will essentially hold no more use in society. College students would instead have digital contacts that are capable of surfing the web and holding massive memory. He says robots will be an everyday instillation in society in order to answer questions rapidly. While this society sounds like one of perfection, is it really? I feel that a society run more by technology than human interaction becomes one in where the population is susceptible to being blinded from reality. This new step in our future could be an amazing success or our ultimate end. There are very high expectations in the technology of the future. However, I feel that if society as a whole becomes dependent on technology it will eventually collapse. This collapse would end up in a reversal of knowledge and society would go back to the ideas of decades earlier.

Kick'n it Old School

Breakdancing emerged around the same time as disco music. The reason is due to the new music style that was becoming widely popular. DJs were mixing short one minute song clips with beats to create music perfect for dancing to. The DJs that were more geared to hip-hop music took this idea of mixing beats and created songs that were just that. This exploration is what started the breakdancing movement. These new songs were perfect to show off fast foot work and athletic floor moves. Breakdancing started off as a street dance and was mainly used by gangs as a way to solve problems with rival gangs instead of fighting. Breakdancing emerged during an era that big on dance battles. Those who danced in this style were called "B-boys" or "breakers." The gangs implemented breakdancing in their dance battles to show their superior athletic abilities. The winner of the battle was essentially the winner of the "fight" and the problem was normally solved. Breakdancing moved from the streets and into main stream media by performers such as James Brown.

Breakdancing incorporates quick foot work, floor work, and upper body strength. Moves like the head spin or the windmill. Break dancers will also perform moves where they will freeze in mid air in what is a seemingly uncomfortable position.

Tuesday, December 3, 2013

Performance Art

For my performance art project I decided to try and give people a judge free moment to share their opinions. I did this by dressing in an outfit that would draw attention and standing still in the middle of the WestShore Mall. I had a Post-It note sign that read, "What would you say if you wouldn't be judged?" I also held a stack of Post-It notes and a Sharpie for people to write their feelings and stick on me. The performance did not go as I expected it would. There were more people who looked on from afar and would not participate than people that did. I was hoping to get some profound opinions from people, but there were very few. I noticed that when one person stepped out to participate, more followed suit. It was as if they were worried what others would think of them if they wrote anything.
I still feel that my performance raised awareness in the people who stopped to see what was going on. There is so much judgement in the world that people are afraid to be themselves and speak their minds.

Here are the results: