Denise Jiang – Final Project

For my final project I continued developed the random landscape project, adding a collision with one of the planets. I loaded more images to get the effect and modified the direction of background stars so they look more real when the spaceship is traveling ahead. The collision and explosion would bring the animation to an end.

``````//create objects
var planets = [];
var starsLeft = [];
var redStar = [];
var starsRight = [];
var starsBR = [];
var starsBL = [];
var size2 = 20;
var size3 = 350;
var light;
var light2;
var smoke;
var boom;

function preload(){
light = loadImage("http://i.imgur.com/rU3fzb5.png");
light2 = loadImage("http://i.imgur.com/UsbCAS5.png");
smoke = loadImage("http://i.imgur.com/3Uer6bI.png");
boom = loadImage("http://i.imgur.com/9V62Xu1.png");
}

function setup() {
createCanvas(600,400);
frameRate(8);
// initial planet and stars
var initialX = random(width/2);
planets[0] = makePlanets(initialX);
redStar[0] = makeRedPlanets(initialX);
redStar[1] = makeRedPlanets(initialX);

}

function draw() {
background(0);
PlanetsinMotion();
addPlanets();
StarsLinMotion();
addStarsL();
redStarinMotion();
addRed();
StarsRinMotion();
addStarsR();
StarsBRinMotion();
addStarsBR();
StarsBLinMotion();
addStarsBL();

fill("blue");
noStroke();
strokeWeight(2);
ellipse(width/2, height/2, size2, size2);
size2 +=1;
if (size2 > 200){
if (frameCount%2 > 0) {
image(light, 0,0, 500 ,500);
}

}
if (size2 > 300) {
image(light2, 100, 0, 500, 500);
}

spaceship();

if (size2 > 400) {
fill("black");
rect(0, 0, 600, 400);
fill(255, 108, 17);
ellipse(width/2, height/2, size3, size3);
size3 -= 20;
image(boom, 0, -100, 600, 600);
}

}

// all about the planets
function PlanetsinMotion() {
for (var i = 0; i < planets.length; i++) {
planets[i].move();
planets[i].display();
}
}
function addPlanets() {
var maybeAdd = 0.004;
if (random(0,1) < maybeAdd) {
planets.push(makePlanets(width));
}
}
function moveplanets() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayplanets() {
fill(187, 210, 247);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
this.randomsize += -0.01;
}
function makePlanets(planetX) {
var plt = { x: planetX,
y: height/2,
speedX: -1.0,
speedY: -0.5,
randomsize: random (10, 50),
move: moveplanets,
display: displayplanets,
}
return plt;
}

//all about the red stars
function redStarinMotion() {
for (var i = 0; i < redStar.length; i++) {
redStar[i].move();
redStar[i].display();
}
}
function moveRed() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayRed() {
fill(122, 43, 19);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);
this.randomsize += 0.1;
}
function addRed() {
var maybeAdd = 0.003;
if (random(0,1) < maybeAdd) {
redStar.push(makeRedPlanets(width));
}
}
function makeRedPlanets(redX) {
var red = {x: random(100,200),
y: random(height-50, height-100),
speedX: -0.5,
speedY: -0.7,
randomsize: random(5, 8),
move: moveRed,
display: displayRed
}
return red;

}

//all about the starsL
function StarsLinMotion() {
for (var i = 0; i < starsLeft.length; i++){
starsLeft[i].move();
starsLeft[i].display();
}
}
function displayStarsL() {
stroke("white");
point(this.x, this.y);
}
function addStarsL() {
var maybeAdd = 0.6;
if (random(0,1) < maybeAdd) {
starsLeft.push(makeStarsL());
}
}
function moveStarsL() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStarsL() {
var str = {x: random(0, width/2-50),
y: random(0, height/2+50),
speedX: -1.0,
speedY: -0.7,
move: moveStarsL,
display: displayStarsL
}
return str;
}

//all about the starsRight
function StarsRinMotion() {
for (var i = 0; i < starsRight.length; i++){
starsRight[i].move();
starsRight[i].display();
}
}
function displayStarsR() {
stroke("white");
point(this.x, this.y);
}
function addStarsR() {
var maybeAdd = 0.3;
if (random(0,1) < maybeAdd) {
starsRight.push(makeStarsR());
}
}
function moveStarsR() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStarsR(StarX) {
var strR = {x: random(width/2-2, width-50),
y: random(0, height/2+10),
speedX: 1.0,
speedY: -0.7,
move: moveStarsR,
display: displayStarsR
}
return strR;
}

//all about the starsBR
function StarsBRinMotion() {
for (var i = 0; i < starsBR.length; i++){
starsBR[i].move();
starsBR[i].display();
}
}
function displayStarsBR() {
stroke("white");
point(this.x, this.y);
}
function addStarsBR() {
var maybeAdd = 0.3;
if (random(0,1) < maybeAdd) {
starsBR.push(makeStarsBR());
}
}
function moveStarsBR() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStarsBR(StarX) {
var strBR = {x: random(width/2-2, width-50),
y: random(height/2-10, height),
speedX: 1.0,
speedY: 0.7,
move: moveStarsBR,
display: displayStarsBR
}
return strBR;
}

//all about the starsBL
function StarsBLinMotion() {
for (var i = 0; i < starsBL.length; i++){
starsBL[i].move();
starsBL[i].display();
}
}
function displayStarsBL() {
stroke("white");
point(this.x, this.y);
}
function addStarsBL() {
var maybeAdd = 0.3;
if (random(0,1) < maybeAdd) {
starsBL.push(makeStarsBL());
}
}
function moveStarsBL() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStarsBL(StarX) {
var strBL = {x: random(0, width/2+50),
y: random(height/2-10, height),
speedX: -1.0,
speedY: 0.7,
move: moveStarsBL,
display: displayStarsBL
}
return strBL;
}

//creating the interior of spaceship
function spaceship() {
noStroke();
fill(53, 58, 66);
rect(0, 315, width, height-315);//floor
fill(95, 105, 122);//light color
quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
fill(81, 90, 104);// medium light
quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
fill(73, 81, 94);//slightly dark
quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
fill(62, 68, 78);//dark
quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
fill(144, 156, 175);//lightest
quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
fill(122, 133, 153);//still very light
quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
fill(65, 73, 86);//darkest
quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3

if (size2 > 350) {
image(smoke, 0, 0, 500, 300);
}

}``````

Final Project Proposal

For my final project, I am planning to make an interactive animation that tells a story of a character traveling along the streets in a neighborhood. On his journey(his x,y positions), he may encounter other characters or be involved in some incidents. The neighborhood will be axonometric in a bird eye view. To make it interactive, I am thinking of using mouse clicks to create random incidents, for instance, the time(day or night), or the direction of him walking.

Denise Jiang – Looking Outwards 12

Interactive animation: Starry Night by Petros Vrellis 2011

Animation：The Seed by Johnny Kelly

I found these two interesting animations on Vimeo. The first one, interactive Starry Night has the stars moving according to the brush strokes. Also, the flow and the music responds to finger touches on a screen. It is creative because the animation itself is telling a story which a drawing cannot. It is dynamic and fun. In addition, the interaction allows the user to “interrupt” and take control of the story, making a personalized “Starry Night”. The second project, The seed, is an animation that uses simple geometry and some stop motion art on paper. It tells a story of an apple seed travelling and growing. The second project is not interactive, but it has multiple scenes with the main object as a center focus. I am interested in both of them, and I am going to make an interactive animation using simple geometries and try to tell a story with several scenes.

Denise Jiang – Looking Outwards 11

I discovered this amazing project by NY-based artist Lisa Park who is actively involved in the arts at the New Museum. She uses brainwaves to compose and perform music. The project has an atmosphere of Zen; it is about exploring vulnerability and self-control. Lisa approached the project by wearing a futuristic headset that contains electroencephalography (EEG) sensors, which would transpose her brainwaves to vibration of water in the plates surrounded. Music is produced using Max/MSP and Reaktor. I think this project is a very interesting integration of technology, neuroscience and art. It is not only produce music, but more importantly reflects the mood, the thinking and the neuro movements of the performer.

Denise Jiang – Project 11

``````var hiddenImage;
var turtle1;
var turtle2;

function preload() {
var imageLink = "http://i.imgur.com/Q1e8Pxg.jpg";
hiddenImage = loadImage(imageLink);
}

function setup() {
createCanvas(500, 500);
background(0);
hiddenImage.loadPixels();
turtle1 = makeTurtle(width/2, height/2);
turtle2 = makeTurtle(width/2, height/2);
frameRate(100);

}

function draw() {
//image(hiddenImage, 0, 0);
var pixcolor = hiddenImage.get(turtle1.x, turtle1.y);
print(pixcolor);

turtle1.setColor(pixcolor);
turtle1.setWeight(3);
turtle1.penDown();
if (turtle1.x < width-20 & turtle1.x > 0) {
turtle1.forward(1);
turtle1.left(random(-5,5));
}
if (turtle1.x > width-20 || turtle1.x < 20 || turtle1.y < 20 || turtle1.y > height-20 ) {
turtle1.forward(-5);
turtle1.left(random(5,10));
}

var pixcolor2 = hiddenImage.get(turtle2.x, turtle2.y);
turtle2.setColor(pixcolor2);
turtle2.setWeight(3);
turtle2.left(random(-5,5));
turtle2.left(random(-5,5));
turtle2.penDown();
if (turtle2.x < width-20 & turtle2.x > 0) {
turtle2.forward(1);
turtle2.right(random(-5,5));
}
if (turtle2.x > width-20 || turtle2.x < 20 || turtle2.y < 20 || turtle2.y > height-20 ) {
turtle2.forward(-5);
turtle2.right(random(5,10));
}

}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}``````

For this project, I used two turtles to draw the pixels of a hidden image. The turtles turn in random directions within a certain range of degrees, and they also turn once they hit the edge of the screen. Below are some possible turtle paths as they move across the screen.

Denise Jiang – Project 10

I created a scene of a spaceship travelling in space. The stars and the planets are randomized moving away from the spaceship. The planets are getting smaller(as they should be) as they move toward the edge of the screen. In the control room there is a flashing red button and a screen “monitoring” the condition of the spaceship.

``````//create objects
var planets = [];
var stars = [];
var redStar = [];

function setup() {
createCanvas(600, 400);
frameRate(8);
// initial planet and stars
var initialX = random(width);
planets[0] = makePlanets(initialX);
redStar[0] = makeRedPlanets(initialX);
redStar[1] = makeRedPlanets(initialX);
for (var i = 0; i < 100; i++) {
stars[i] = makeStars(initialX);
}
}

function draw() {
background(0);
PlanetsinMotion();
addPlanets();
StarsinMotion();
addStars();
redStarinMotion();
addRed();
spaceship();

//flashing button
if (second() & 2 > 0) {
fill("red");
} else fill(0);
noStroke();
ellipse(170, 260, 5, 5);
//make screen and moving red line
fill(226, 223, 222);
stroke(65, 73, 86);
strokeWeight(2);
rect(420, 170, 60, 50);//screen
beginShape();
noFill();
stroke("red");
strokeWeight(1);
for (var x = 0; x < width-540; x++) { //moving red line
var t = (x * 0.009) + (millis() * 0.0003);
var y = map(noise(t), 0, 0.13, 40, 45);
vertex(x+420, y+140);
}
endShape();

}

// all about the planets
function PlanetsinMotion() {
for (var i = 0; i < planets.length; i++) {
planets[i].move();
planets[i].display();
}
}
function addPlanets() {
var maybeAdd = 0.004;
if (random(0,1) < maybeAdd) {
planets.push(makePlanets(width));
}
}
function moveplanets() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayplanets() {
fill(187, 210, 247);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
this.randomsize += -0.01;
}
function makePlanets(planetX) {
var plt = { x: planetX,
y: height/2,
speedX: -1.0,
speedY: -0.5,
randomsize: random (10, 100),
move: moveplanets,
display: displayplanets,
}
return plt;
}

//all about the red stars
function redStarinMotion() {
for (var i = 0; i < redStar.length; i++) {
redStar[i].move();
redStar[i].display();
}
}
function moveRed() {
this.x += this.speedX;
this.y += this.speedY;
}
function displayRed() {
fill(122, 43, 19);
noStroke();
ellipse(this.x, this.y, this.randomsize, this.randomsize);
this.randomsize += 0.005;
}
function addRed() {
var maybeAdd = 0.003;
if (random(0,1) < maybeAdd) {
redStar.push(makeRedPlanets(width));
}
}
function makeRedPlanets(redX) {
var red = {x: random(200,400),
y: random(height-50, height-100),
speedX: -0.5,
speedY: -0.7,
randomsize: random(5, 8),
move: moveRed,
display: displayRed
}
return red;

}

//all about the stars
function StarsinMotion() {
for (var i = 0; i < stars.length; i++){
stars[i].move();
stars[i].display();
}
}
function displayStars() {
stroke("yellow");
point(this.x, this.y);
}
function addStars() {
var maybeAdd = 0.6;
if (random(0,1) < maybeAdd) {
stars.push(makeStars(random(width-50, width)));
}
}
function moveStars() {
this.x += this.speedX;
this.y += this.speedY;
}
function makeStars(StarX) {
var str = {x: random(width),
y: random(height),
speedX: -1.0,
speedY: -0.5,
move: moveStars,
display: displayStars,
}
return str;
}

//creating the interior of spaceship
function spaceship() {
noStroke();
fill(53, 58, 66);
rect(0, 315, width, height-315);//floor
fill(95, 105, 122);//light color
quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
fill(81, 90, 104);// medium light
quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
fill(73, 81, 94);//slightly dark
quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
fill(62, 68, 78);//dark
quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
fill(144, 156, 175);//lightest
quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
fill(122, 133, 153);//still very light
quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
fill(65, 73, 86);//darkest
quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3
}``````

Denise Jiang-Looking Outwards 10

Chris Sugrue is an artist and programmer who devotes herself into making interactive installation, performances and experimental interfaces. She holds a Masters degree from Parsons School of Design, and worked as a creative engineer at the Ars Eletronica Futurelab. Her work received first prize from Share Festival, and were honored with Design of the Year award for interactive category.
Her project “Augmented Hand Series” provides an engaging, real-time, playful and dreamlike experience. The project uses motion sensors to detect visitor’s hand, and displays a reimagined hand that might have extra fingers or shorter fingers. Chris collaborated with two other artists Golan Levin and Kyle McDonald. The project is amazing because it brings the impossible to seem so real while giving the visitors total freedom to “transform” their hand among a bunch of choices.

Denise Jiang- Project 09

Drawing the pixels of a photo of myself, I set the circles into random sizes. I took out the pixels of the eyes and made them flashing. Basically, it erases the pixels on every other second, and then tries to redraw. The mouse also functions as an eraser by drawing random sizes black circles.
sketch

``````var original;

function preload() {
var imageLink = "http://i.imgur.com/hfhcgZE.png";
original = loadImage(imageLink);
}

function setup() {
createCanvas(600, 600);
background(0);
original.loadPixels();
}

function draw() {
drawPixel();
eraseEyeL();
eraseEyeR();
drawMouse();
//implied grid
/*line(width/6, 0, width/6, height);
line(width/3, 0, width/3, height);
line(width/2, 0, width/2, height);
line(width/3*2, 0, width/3*2, height);
line(width/6*5, 0, width/6*5, height);
line(0, height/6, width, height/6);
line(0, height/3, width, height/3);
line(0, height/2, width, height/2);
line(0, height/3*2, width, height/3*2);
line(0, height/6*5, width, height/6*5);*/
}

function drawPixel() {
frameRate(120);
var x = random(width);
var y = random(height);
var ix = constrain(floor(x), 0, width-1);
var iy = constrain(floor(y), 0, height-1);
var pixcolor = original.get(ix, iy);
var size = random(10, 30);
fill(pixcolor);
noStroke();
ellipse(x, y, size, size);
}

//erase left eye based on seconds
function eraseEyeL() {
var ex = random(width/3, width/2);
var ey = random(height/2, height/3*2);
var erasecolor = original.get(ex, ey);
if (second() % 2>0){
frameRate(30);
fill(erasecolor);
noStroke();
ellipse(ex, ey, 15, 15);
} else {
//frameRate(300);
fill(10);
noStroke();
ellipse(width/3+50, height/2+50, 120, 120);
print(erasecolor);
}
}

//erase rigt eye based on seconds
function eraseEyeR() {
var ex = random(width/3*2, width/6*5);
var ey = random(height/2, height/3*2);
var erasecolor = original.get(ex, ey);
if (second() % 2>0){
frameRate(20);
fill(erasecolor);
noStroke();
ellipse(ex, ey, 15, 15);
} else {
//frameRate(300);
fill(10);
noStroke();
ellipse(width/3*2+50, height/2+50, 120, 120);
print(erasecolor);
}
}

//erase pixels according to mouse positions
function drawMouse() {
var mx = mouseX;
var my = mouseY;
var msize = random(20,30);
fill(0);
noStroke();
ellipse(mx, my, msize, msize);
}

``````

Denise Jiang-Looking Outwards 09

Looking through my peer’s Looking Outwards posts, one of Shan Wang’s posts on 3D computer graphics caught my eyes. I have heard about Alex Roman and the architectural rendering film of the Exeter Library by Louis Khan. After watching the video and reading Shan’s opinion, I agree with her that this computer generated project is full of great uses of lighting, shades and color. I also liked how she described him as an CG artists who has amazing aesthetic sensibility and techniques in rendering. In addition, I think Roman’s works are valuable because his mix uses of different software and the carefully interpreted details of nature. He added active human figures into his renderings, which made them more lively and vivid.

Computer Generated Graphic of Louis Khan’s library in Exeter 2009

Denise Jiang- Project 07

``````var nPoints=300;

function setup() {
createCanvas(500,500);
}

function draw() {
background(157,129,137);
drawLeaf();
drawPeach();
drawPedal();
}

function drawPeach(){
var xa;
var ya;
var v;
fill(255,202,212);
noStroke();
push();
translate(width/2, height/2-40);
beginShape();
var a;
var b=map(mouseY, 0,height, 250,255);
for (var i=0; i<nPoints; i++){
var t=map(i,0, nPoints, 0, TWO_PI);
xa=a*((v-1)*cos(t)+cos((v-1)*t))/v;
ya=a*((v-1)*sin(t)+sin((v-1)*t))/v;
a=constrain(b,250,255);
v=3;
vertex(ya,xa);
}
endShape();
pop();
}

function drawPedal(){
var xp;
var yp;
noFill();
stroke(255,229,217);
strokeWeight(5);
push();
translate(width/2, height/2+30);
var m=map(mouseX, 0, height, 0, 5);
var n=constrain(m,0,5);
beginShape();
for (var i=0; i<nPoints; i++){
var t=map(i,0, nPoints, 0, TWO_PI);
xp=10*(n+2)*(cos(t)-cos((n+1)*t));
yp=10*(n+2)*(sin(t)-sin((n+1)*t));
vertex(xp,yp);
}
endShape();
pop();
}

function drawLeaf(){
var c=map(mouseY, 0, height, 0, 5);
fill(215,226,220);
noStroke();
push();
translate(width/2, height/2);
rotate(radians(50));
ellipse(-100,-140, 50+c, 145+c);
pop();
}
``````

I used two different pedal curves in this project. One of them I managed to use MouseX to control the n number of the pedals, while the other one I set the n number to 3 to create the two-pedal peach shape. Moving the mouse from left to right will increase the number of pedals from 0 to 5. MouseY controls the size of the peach.