Press your mouse to add planets and nebulas and use your mouse to hover around the Canvas and explore the universe!!
//Steven Fei & Fanjie Mike Jin
//Section A & C
//Final Project
//zfei@andrew.cmu.edu & fjin@andrew.cmu.edu
var starNumber = 150;//number of the stars on the background
var starsize = 1.5;//size of the stars
var sx = [];//array to define the x position of the stars
var sy = [];//array to define the y position of the stars
var sz = [];//array to define the z position of the stars
var amplitude = 3.14 * 3;//define the moving margin of the stars
var waveSpeed;//define the moving speed of the stars on the background
var theta = 0;//define the moving angle of the stars
var glowDefiner = [];//define the true false value for whether to let the star glow
var glowSize = 22;//glowing size of the stars
var newStars = [];//array for making new stars
var mouseXList = [];//arrays to store mouseX value
var mouseYList = [];//arrays to store mouseY value
var img; //load image for the earth texture mapping
var w = 600 / 7 // devivded the canvas into seven regions and from left to right, the pitches of the piano sound will progressively become higher
var newExplod = [];//array for making new explosion at the background
var mouseXListEx = [];//arrays to store mouseX value
var mouseYListEx = [];//arrays to store mouseY value
function setup() {
//load the background image for the texture mapping of the earth
//coded by Mike
img = loadImage("https://i.imgur.com/lamlO83.jpg");
createCanvas(600, 600,WEBGL);
//create values for the positions of the stars on the background
//coded by Mike
for (var i = 0; i < starNumber; i++){
sx.push(random(-width * 0.75, width * 0.75));
sy.push(random(-height, height));
sz.push(random(-width, height/2));
var toggle = random(1.0);
//define whether the stars on the background will glow
if(toggle < 0.9){
glowDefiner.push(false);
}else{
glowDefiner.push(true);
}
}
for(var j = 0; j < glowDefiner.length; j++){
print(glowDefiner[j]);
}
}
function draw(){
background(0);
noStroke();
normalMaterial();
centerCube();//create a center star to give a sense of what perspective we are looking at
makeCamera();//use the makeCamera function to change the viewport angle
makeearth();
push();
//draw the stars on the background
for(var i = 0; i < starNumber; i++){
//coded by Mike
push();
waveSpeed = map(sz[i], -width, height/2, 15000, 60000);//define the moving speed of the stars
theta += (TWO_PI / waveSpeed);//define the moving angle of the stars
if(theta > amplitude){
theta = -theta;//set the moving margins of the stars
}
sy[i] += sin(theta);//set the moving value to the positions
sx[i] += cos(theta);//set the moving value to the positions
translate(sx[i], sy[i], sz[i]);
if(glowDefiner[i]){
fill(255, 200, 130, 4);
sphere(glowSize);//draw glow light of the sphere
}
fill("white");
smooth();
sphere(starsize);//draw the stars
pop();
}
pop();
//draw some new stars
//coded by Steven
if (mouseXList.length != 0){
for(var k = 0; k < newStars.length; k++){
newStars[k].updateStar();//animate the expansion of the stars
push();
translate(newStars[k].x, newStars[k].y,0);
rotateX(frameCount * 0.05 + k*2);//rotate the new star
rotateY(frameCount * 0.05 + k*2);//rotate the new star
newStars[k].draw();//animate the emergence of the stars
pop();
}
}
if(newStars.length > 4){
newStars.shift();
}
push();
//make the planet
if (mouseXListEx.length != 0){
for(var k = 0; k < newExplod.length; k++){
newExplod[k].updateExplo();//animate the expansion of the stars
push();
translate(newExplod[k].x, newExplod[k].y,0);
rotateX(frameCount * 0.05 + k*2);//rotate the new star
rotateY(frameCount * 0.05 + k*2);//rotate the new star
newExplod[k].draw();//animate the emergence of the stars
pop();
}
}
if(newExplod.length > 2){
newExplod.shift();
}
pop();
}
function makeCamera(){
//coded by Steven
camX = map(mouseX, 0, width, -width/2, width/2);//changing camera position x
camY = map(mouseY, 0, height, -height/2, height/2);//changing camera position y
camZ = height/2;//changing camera position z
camera(camX, camY, camZ,0,0,0,1,1,0);//allow the viewport angle to change
}
//make object to create new stars
function makeNewStar(x, y, radius){
//coded by Mike
var newstar = {x: x,
y: y,
r: radius,
updateStar: updateStar,
draw: drawNewStar};
return newstar;
}
function makeNewExplo(x, y, radius){
//coded by Mike
var newExplo = {x: x,
y: y,
r: radius,
updateExplo: updateExplo,
draw: drawNewExplo};
return newExplo;
}
//function to draw new star
function drawNewStar(){
//coded by Mike
var color1 = random(150, 255);
var color2 = random(100,180);
var color3 = random(100,200);
var density = random(14,20);//allow different numbers of the spheres to appear on the star
for(var i = 0; i < density; i++){
var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
for(var j = 0; j< density; j++){
var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
var pX = this.r * sin(lengthValue) * cos(widthValue);
var pY = this.r * sin(lengthValue) * sin(widthValue);
var pZ = this.r * cos(lengthValue);
push();
fill(color1, color2, color3);
translate(pX, pY, pZ);
sphere(1.6);
pop();
}
}
}
function drawNewExplo(){
//coded by Mike
var color4 = random(100, 255);
var color5 = random(100,180);
var color6 = random(100,200);
var density = random(12, 15);//allow different numbers of the spheres to appear for the explosion
for(var i = 0; i < density; i++){
var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
for(var j = 0; j< density; j++){
var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
var pX1 = this.r * sin(lengthValue) * cos(widthValue * 0.5) * 0.5;
var pY1 = this.r * sin(lengthValue * 0.5) * sin(widthValue) * 0.5;
var pZ1 = this.r * cos(lengthValue);
push();
fill(color4, color5, color6);
translate(pX1, pY1, pZ1);
box(2, 2, 2);
pop();
}
}
}
function updateStar(){
//coded by Mike
this.r += random(0.5,2);//allow the new star to expand
}
function updateExplo(){
//coded by Mike
this.r += random(1,2);//allow the new explosion to expand
}
function mousePressed(){
//coded by Steven
var newStarMaking = [];
var newMouseXList = [];
var newMouseYList = [];
var newExploMaking = [];
var newmouseXListEx = [];
var newmouseYListEx = [];
var clickEx;//check whether there is existing new stars
var click;//check whether there is existing new stars
if(mouseXList.length == 0){
click = 0;
newStarMaking.push(newStars[0]);
newMouseXList.push(mouseXList[0]);
newMouseYList.push(mouseYList[0]);
}
else{
for(var l = 0; l < newStars.length; l++){
var distance = dist(mouseX - width/3, mouseY - height/3, newStars[l].x, newStars[l].y);
if(distance <= 30){
click = 1;
}else{
click = 0;
newStarMaking.push(newStars[l]);
newMouseXList.push(mouseXList[l]);
newMouseYList.push(mouseYList[l]);
}
}
newStars = newStarMaking;
mouseXList = newMouseXList;
mouseYList = newMouseYList;
}
if(click == 0){
mouseXList.push(mouseX - width/3);
mouseYList.push(mouseY - width/3);
var newStar = makeNewStar(mouseX - width/3, mouseY-width/3, 30);
newStars.push(newStar);
}
//add value to empty list
if(mouseXListEx.length == 0){
clickEx = 0;
newExploMaking.push(newExplod[0]);
newmouseXListEx.push(mouseXListEx[0]);
newmouseYListEx.push(mouseYListEx[0]);
}
else{
//assign initiating position according to the mouse postion
for(var w = 0; w < newExplod.length; w++){
var distance = dist(mouseX - width/3, mouseY - height/3, newExplod[w].x, newExplod[w].y);
if(distance <= 30){
clickEx = 1;
}else{
clickEx = 0;
newExploMaking.push(newExplod[w]);
newmouseXListEx.push(mouseXListEx[w]);
newmouseYListEx.push(mouseYListEx[w]);
}
}
//assign values back to the list
newExplod = newExploMaking;
mouseXListEx = newmouseXListEx;
mouseYListEx = newmouseYListEx;
}
//avoid invalid value
if(clickEx == 0){
mouseXListEx.push(mouseX - width/3);
mouseYListEx.push(mouseY - width/3);
var newExplo = makeNewExplo(mouseX - width/3, mouseY-width/3, 300);
newExplod.push(newExplo);
}
}
//function to make a center planet to have some understanding of the perspective
//coded by Mike
function centerCube(){
//make sure the location of the center planet is always at the center of the canvas
push();
var locX = mouseX - height / 2;
var locY = mouseY - width / 2;
ambientLight(50);
directionalLight(255, 0, 0, 0.25, 0.25, 0);
pointLight(0, 0, 255, locX, locY, 250);
ambientMaterial(100);
strokeWeight(0.5);
stroke(255);
smooth();
sphere(40);
pop();
//first ring surronding the planet
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
strokeWeight(0.5);
smooth();
stroke(255);
torus(60, 0.5);
pop();
//second ring surronding the planet
push();
rotateZ((100+ frameCount) * 0.01);
rotateX((100 + frameCount) * 0.01);
rotateY((100+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(70, 0.5);
pop();
//third ring surronding the planet
push();
rotateZ((200+ frameCount) * 0.01);
rotateX((200 + frameCount) * 0.01);
rotateY((200+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(80, 0.5);
pop();
//fourth ring surronding the planet
push();
rotateZ((300+ frameCount) * 0.01);
rotateX((300 + frameCount) * 0.01);
rotateY((300+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(90, 1);
pop();
}
//function to make a earth adjacent to the center planet
//coded by Mike
function makeearth(){
push();
translate(width / 2, height / 3, -150);
rotateX(frameCount * 0.05);
rotateY(frameCount * 0.05);
texture(img);
sphere(20);
pop();
}
In this project, we aim to establish an interactive universe made possible by using the P5 3D geometry and 3D lighting. When you are hovering around in this universe, the stars and planets will move according to your mouse position. When you lower the mouse position, the screen will be zoomed out and when you higher the mouse, the screen will zoom in more. When the mouse is pressed, new “stars” which look like the colorful spheres composed of smaller spheres with galaxy-like explosion will happen randomly on the screen and would expand further until they can be seen no more. However, once you click on the screen, you will be able to see them again. The small spheres are glowing on the background to have an interstellar appearance. The center spindle-like sphere and an “Earth” like sphere are created to give us a general understanding of what perspective we are looking at the canvas.
]]>//Steven Fei & Mike Jin
//Section A & C
//Final Project
//zfei@andrew.cmu.edu & fjin@andrew.cmu.edu
var starNumber = 150;//number of the stars on the background
var starsize = 1.5;//size of the stars
var sx = [];//array to define the x position of the stars
var sy = [];//array to define the y position of the stars
var sz = [];//array to define the z position of the stars
var amplitude = 3.14 * 3;//define the moving margin of the stars
var waveSpeed;//define the moving speed of the stars on the background
var theta = 0;//define the moving angle of the stars
var glowDefiner = [];//define the true false value for whether to let the star glow
var glowSize = 22;//glowing size of the stars
var newStars = [];//array for making new stars
var mouseXList = [];//arrays to store mouseX value
var mouseYList = [];//arrays to store mouseY value
var img; //load image for the earth texture mapping
var w = 600 / 7 // devivded the canvas into seven regions and from left to right, the pitches of the piano sound will progressively become higher
var mySndC; //Piano note C
var mySndD; //Piano note D
var mySndE; //Piano note E
var mySndF; //Piano note F
var mySndG; //Piano note G
var mySndA; //Piano note A
var mySndB; //Piano note B
var newExplod = [];//array for making new explosion at the background
var mouseXListEx = [];//arrays to store mouseX value
var mouseYListEx = [];//arrays to store mouseY value
function preload(){
//coded by Mike
//preload the soundtrack of each piano notes to the file
mySndC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/c-1.wav");
mySndD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/d-1.wav");
mySndE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/e-1.wav");
mySndF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/f-1.wav");
mySndG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/g-1.wav");
mySndA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/a-1.wav");
mySndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/b-1.wav");
mySndC.setvolume(1);
mySndD.setvolume(1);
mySndE.setvolume(1);
mySndF.setvolume(1);
mySndG.setvolume(1);
mySndA.setvolume(1);
mySndB.setvolume(1);
}
function setup() {
//load the background image for the texture mapping of the earth
//coded by Mike
img = loadImage("https://i.imgur.com/lamlO83.jpg");
createCanvas(600, 600,WEBGL);
//create values for the positions of the stars on the background
//coded by Steven
for (var i = 0; i < starNumber; i++){
sx.push(random(-width * 0.75, width * 0.75));
sy.push(random(-height, height));
sz.push(random(-width, height/2));
var toggle = random(1.0);
//define whether the stars on the background will glow
if(toggle < 0.9){
glowDefiner.push(false);
}else{
glowDefiner.push(true);
}
}
for(var j = 0; j < glowDefiner.length; j++){
print(glowDefiner[j]);
}
}
function draw(){
background(0);
noStroke();
normalMaterial();
centerCube();//create a center star to give a sense of what perspective we are looking at
makeCamera();//use the makeCamera function to change the viewport angle
makeearth();
push();
//draw the stars on the background
for(var i = 0; i < starNumber; i++){
//coded by Steven
push();
waveSpeed = map(sz[i], -width, height/2, 15000, 60000);//define the moving speed of the stars
theta += (TWO_PI / waveSpeed);//define the moving angle of the stars
if(theta > amplitude){
theta = -theta;//set the moving margins of the stars
}
sy[i] += sin(theta);//set the moving value to the positions
sx[i] += cos(theta);//set the moving value to the positions
translate(sx[i], sy[i], sz[i]);
//coded by Mike
if(glowDefiner[i]){
fill(255, 200, 130, 4);
sphere(glowSize);//draw glow light of the sphere
}
fill("white");
smooth();
sphere(starsize);//draw the stars
pop();
}
pop();
push();
//make the planet
if (mouseXListEx.length != 0){
for(var k = 0; k < newExplod.length; k++){
newExplod[k].updateExplo();//animate the expansion of the stars
push();
translate(newExplod[k].x, newExplod[k].y,0);
rotateX(frameCount * 0.05 + k*2);//rotate the new star
rotateY(frameCount * 0.05 + k*2);//rotate the new star
newExplod[k].draw();//animate the emergence of the stars
pop();
}
}
if(newExplod.length > 2){
newExplod.shift();
}
pop();
push();
// make the explosion
if (mouseXList.length != 0){
for(var k = 0; k < newStars.length; k++){
newStars[k].updateStar();//animate the expansion of the explosion in the background
push();
translate(newStars[k].x, newStars[k].y,0);
newStars[k].draw();//animate the emergence of the stars
pop();
}
}
if(newStars.length > 4){
newStars.shift();
}
pop();
}
function makeCamera(){
//coded by Steven
camX = map(mouseX, 0, width, -width/2, width/2);//changing camera position x
camY = map(mouseY, 0, height, -height/2, height/2);//changing camera position y
camZ = height/2;//changing camera position z
camera(camX, camY, camZ,0,0,0,1,1,0);//allow the viewport angle to change
}
//make object to create new stars
function makeNewStar(x, y, radius){
//coded by Steven
var newstar = {x: x,
y: y,
r: radius,
updateStar: updateStar,
draw: drawNewStar};
return newstar;
}
function makeNewExplo(x, y, radius){
//coded by Mike
var newExplo = {x: x,
y: y,
r: radius,
updateExplo: updateExplo,
draw: drawNewExplo};
return newExplo;
}
//function to draw new star
function drawNewStar(){
//coded by Mike
var color1 = random(150, 255);
var color2 = random(100,180);
var color3 = random(100,200);
var density = random(14,20);//allow different numbers of the spheres to appear on the star
for(var i = 0; i < density; i++){
var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
for(var j = 0; j< density; j++){
var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
var pX = this.r * sin(lengthValue) * cos(widthValue);
var pY = this.r * sin(lengthValue) * sin(widthValue);
var pZ = this.r * cos(lengthValue);
push();
fill(color1, color2, color3);
translate(pX, pY, pZ);
sphere(1.6);
pop();
}
}
}
function drawNewExplo(){
//coded by Mike
var color4 = random(100, 255);
var color5 = random(100,180);
var color6 = random(100,200);
var density = random(12, 15);//allow different numbers of the spheres to appear for the explosion
for(var i = 0; i < density; i++){
var lengthValue = map(i, 0, density, -PI, PI); //set longitudinal value
for(var j = 0; j< density; j++){
var widthValue = map(j, 0, density, -PI/2, PI/2);// set horizontal value
var pX1 = this.r * sin(lengthValue) * cos(widthValue * 0.5) * 0.5;
var pY1 = this.r * sin(lengthValue * 0.5) * sin(widthValue) * 0.5;
var pZ1 = this.r * cos(lengthValue);
push();
fill(color4, color5, color6);
translate(pX1, pY1, pZ1);
box(2, 2, 2);
pop();
}
}
}
function updateExplo(){
//coded by Mike
this.r += random(1,2);//allow the new explosion to expand
}
function updateStar(){
//coded by Mike
this.r += random(0.5,2);//allow the new star to expand
}
function mousePressed(){
//coded by Steven
var newStarMaking = [];//empty list for the making new star when mouse is pressed
var newMouseXList = [];
var newMouseYList = [];
var newExploMaking = [];
var newmouseXListEx = [];
var newmouseYListEx = [];
var clickEx;//check whether there is existing new stars
var click;//check whether there is existing new stars
if(mouseXList.length == 0){
click = 0;//count whether the times of starting the object
newStarMaking.push(newStars[0]);//assign values to new arrays to store valid value
newMouseXList.push(mouseXList[0]);//assign values to new arrays to store valid value
newMouseYList.push(mouseYList[0]);//assign value to new arrays to store valid value
}
else{
//define the initiating position according to the mouse position
for(var l = 0; l < newStars.length; l++){
var distance = dist(mouseX - width/3, mouseY - height/3, newStars[l].x, newStars[l].y);
if(distance <= 30){
click = 1;
}else{
click = 0;
newStarMaking.push(newStars[l]);//assign values to the new array
newMouseXList.push(mouseXList[l]);//assign values to the new array
newMouseYList.push(mouseYList[l]);//assign values to the new array
}
}
//get the valid value back to the list
newStars = newStarMaking;
mouseXList = newMouseXList;
mouseYList = newMouseYList;
}
//avoid invalid value
if(click == 0){
mouseXList.push(mouseX - width/3);
mouseYList.push(mouseY - width/3);
var newStar = makeNewStar(mouseX - width/3, mouseY-width/3, 30);
newStars.push(newStar);
}
//add value to empty list
if(mouseXListEx.length == 0){
clickEx = 0;
newExploMaking.push(newExplod[0]);
newmouseXListEx.push(mouseXListEx[0]);
newmouseYListEx.push(mouseYListEx[0]);
}
else{
//assign initiating position according to the mouse postion
for(var w = 0; w < newExplod.length; w++){
var distance = dist(mouseX - width/3, mouseY - height/3, newExplod[w].x, newExplod[w].y);
if(distance <= 30){
clickEx = 1;
}else{
clickEx = 0;
newExploMaking.push(newExplod[w]);
newmouseXListEx.push(mouseXListEx[w]);
newmouseYListEx.push(mouseYListEx[w]);
}
}
//assign values back to the list
newExplod = newExploMaking;
mouseXListEx = newmouseXListEx;
mouseYListEx = newmouseYListEx;
}
//avoid invalid value
if(clickEx == 0){
mouseXListEx.push(mouseX - width/3);
mouseYListEx.push(mouseY - width/3);
var newExplo = makeNewExplo(mouseX - width/3, mouseY-width/3, 300);
newExplod.push(newExplo);
}
//coded by Mike
//load the sound and defines the regions of the sound
if(mouseX > 0 & mouseX < w){
mySndC.play();
}
if(mouseX > w & mouseX < 2 *w){
mySndD.play();
}
if(mouseX > 2 * w & mouseX < 3 * w){
mySndE.play();
}
if(mouseX > 3 * w & mouseX < 4 * w){
mySndF.play();
}
if(mouseX > 4 * w & mouseX < 5 * w){
mySndG.play();
}
if(mouseX > 5 * w & mouseX < 6 * w){
mySndA.play();
}
if(mouseX > 6 * w & mouseX < 7 * w){
mySndB.play();
}
}
//function to make a center planet to have some understanding of the perspective
//coded by Mike
function centerCube(){
//make sure the location of the center planet is always at the center of the canvas
push();
var locX = mouseX - height / 2;
var locY = mouseY - width / 2;
ambientLight(50);
directionalLight(255, 0, 0, 0.25, 0.25, 0);
pointLight(0, 0, 255, locX, locY, 250);
ambientMaterial(100);
strokeWeight(0.5);
stroke(255);
smooth();
sphere(40);
pop();
//first ring surronding the planet
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
strokeWeight(0.5);
smooth();
stroke(255);
torus(60, 0.5);
pop();
//second ring surronding the planet
push();
rotateZ((100+ frameCount) * 0.01);
rotateX((100 + frameCount) * 0.01);
rotateY((100+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(70, 0.5);
pop();
//third ring surronding the planet
push();
rotateZ((200+ frameCount) * 0.01);
rotateX((200 + frameCount) * 0.01);
rotateY((200+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(80, 0.5);
pop();
//fourth ring surronding the planet
push();
rotateZ((300+ frameCount) * 0.01);
rotateX((300 + frameCount) * 0.01);
rotateY((300+ frameCount) * 0.01);
smooth();
strokeWeight(0.5);
stroke(255);
torus(90, 1);
pop();
}
//function to make a earth adjacent to the center planet
//coded by Mike and Steven
function makeearth(){
push();
translate(width / 2, height / 3, -150);
rotateX(frameCount * 0.05);
rotateY(frameCount * 0.05);
texture(img);
sphere(20);
pop();
}
Taiko no Tatsujin is a music-related game I found really inspiring for my final project. The main objective of Taiko no Tatsujin games is to hit a simulated Taiko drum following a chosen piece of music, corresponding to notes scrolling from the right. When the screen is scrolling, once the orange circle is landed at the dashed circle at the left side of the screen, if you hit it, at the perfect timing, you are going to get bonus and animation at the bottom is also going to change correspondently. I really admire this project in that it has a really interesting graphic and depending on the different melody that you are playing, the background animation is also changing correspondently to the music.
The scene showing the” rewinding” of the Universe is created using the latest scientific data and it is done by Hirosi Ooguri, a professor at Caltech. This image added some artist expression and its objective is to visualize neutrino oscillations. I really admire this project in that it is visualizing the universe really artistically.
These two projects are really good precedents for me as I am envisioning my final project to be a music-related project, probably piano. When the user pressed certain buttons on the piano, the universe at the background will be changed accordingly based on the music and different music will yield different visualization of the universe.
]]>In this final project, I am going to collaborate with Steven Fei. The name of our project is called, Interstellar Pianist. Our objective is to use an interaction keyboard to simulate the idea of traveling in space. The pianist will play different notes and all the different notes will trigger different actions correspondently. The background will present a view of the galaxy and viewport of the galaxy can be manipulated by changing the position of the mouse. For example, when the “A” key which is representing C on the keyboard is pressed, a planet of red color will be generated and it will keep revolving and moving slowly towards a random direction. “S” key which is representing B, another different looking planet of different color will be generated. There is going to be a limited amount of planets that you can generate. Once the maximum amount of planets is generated, the one that has been created at the very beginning will be shifted. Depending on the music you are playing, a different scenery of the universe will be created and you can move the mouse to examine and explore this universe.
// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11
// global variables declared to hold objects
// array for tree objects
var trees = []
function setup() {
//color preprared for the gradient effect
c1 = color(250, 100, 0);
c2 = color(204, 143, 0);
createCanvas(480, 480);
frameRate(100);
}
function draw() {
//draw the gradient background
for (var i = 0; i < height; i++) {
var inter = map(i, 70, 110, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, i, width, i);
}
//draw the sun in the background
noStroke();
fill(234, 120, 120, 200);
ellipse(100, 60, 90, 90);
fill(255, 146, 128, 200);
ellipse(100, 60, 76, 76);
mountainBackground(); //mountain
land()
updatetrees();
removetrees();
newtrees();
}
function updatetrees(){
// Update the x positions of the trees and display them
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removetrees(){
//remove the building from the array once it dropped off the left edge
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
// the exsiting trees will be kept
trees = treesToKeep;
}
function newtrees() {
// add a new tree to the end
var probability = 0.017;
if (random(0,1) < probability) {
trees.push(drawtrees(width));
}
}
//update position of tree every frame
function treesMove() {
this.x += this.speed;
}
//display the trees
function treesDisplay() {
noStroke();
//leaves
fill(50, 235, 173);
triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
//trunk
stroke(194, 245, 228);
line(this.x, 350, this.x, 420);
}
function drawtrees(px) {
var dt = {x: px,
//trees obeject properties
breadth: 30,
speed: -1.0,
move: treesMove,
display: treesDisplay}
return dt;
}
function mountainBackground() {
//makes mountains in the back
terrain = 0.009;
terrain2 = 0.014;
terrainSpeed = 0.0003;
//use noise function to draw random background contour of the furthest mountains
stroke(30, 148, 143,200);
beginShape();
//make slowly rolling hills
for (var j = 0; j < width; j++) {
var t = (j * terrain) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 200, 10);
line(j, y2, j, height);
}
endShape();
//use noise function to draw random background contour of the closer mountains
stroke(65, 158, 155);
beginShape();
for (var j = 0; j < width; j++) {
var t = (j * terrain2) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 400, 10);
line(j, y2, j, height);
}
endShape();
}
function land() {
//makes the land in the foreground appear
fill(46, 84, 78);
rect(0, 420, 480, 130);
}
When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.
Nataly Gattegno is an artist and one of the two founding partners of FUTUREFORMS. She is primarily focusing on design research and urban speculation through the lens of art and design theory and urban design. She was born and raised in Athens, Greece. She received her MA from Cambridge University and Masters of architecture from Princeton University.
Cosmos is one of their many interactive pavilion designs. It is a dynamic shading canopy that fosters pedestrian interactions and establishes a visual focal point at the site. Cosmos creates an open shaded space for people to fluidly move through and congregate as it provides a contemplative play of shadow and lights. The people around the area would enjoy spending time underneath the artwork’s intricate organic structure and kaleidoscopic skin and depending on the different times of the day, the shadows will be changed.
I really admire this project as the geometry of the artwork is really stunning and there is a Fibonacci-like Sequence algorithm underlying the three-dimensional structure and skin of the pavilion. The geometry allows the shadow, which is something that’s always very neglectful, to play the main role and even as interesting as the pavilion itself.
]]>// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project 10
//set the count for the four melodies
var voiceplaying = 1;
var pianoPlaying = 1;
var jazzPlaying = 1;
var electronicPlaying = 1;
function preload() {
//preloads the images
var imageUrl = "https://i.imgur.com/DcInSlj.jpg";
pic = loadImage(imageUrl);
//preloads the different types of sound
jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jazz.wav");
voice = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/voice.wav");
piano = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/piano.wav");
electronic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/electronic.wav");
//set the volume of the music track
jazz.setVolume(1);
voice.setVolume(1);
piano.setVolume(1);
electronic.setVolume(1);
}
function setup() {
//set up the background image for the music choosing
createCanvas(400, 400);
background(0);
image(pic, 0, 0);
}
function mousePressed(){
// when mouse is pressed at the designated area, the voice melody would be played
if (mouseX > width / 2 & mouseY > height / 2 && mouseX < width && mouseY < height){
//the music will be turned off once it has been clicked the second time
voiceplaying = voiceplaying + 1;
if (voiceplaying % 2 == 0){
voice.play();
} else {
voice.pause();
}
}
// when mouse is pressed at the designated area, the electronic melody would be played
if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
electronicPlaying = electronicPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (electronicPlaying % 2 == 0){
electronic.play();
} else {
electronic.pause();
}
}
// when mouse is pressed at the designated area, the piano melody would be played
if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
pianoPlaying = pianoPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (pianoPlaying % 2 == 0){
piano.play();
} else {
piano.pause();
}
}
// when mouse is pressed at the designated area, the jazz melody would be played
if (mouseX < width / 2 & mouseY < height / 2){
jazzPlaying = jazzPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (jazzPlaying % 2 == 0){
jazz.play();
} else {
jazz.pause();
}
}
}
In this project, I aim to create an interactive program that plays four different types of music genre. By clicking on the icon, you are able to choose to turn on and off each type of music. The most interesting condition is when you turn on two or three type of music together, when they are playing simultaneously, it creates a surreal and yet fun melody.
]]>Artificial intelligence researchers have made huge gains in computational creativity and there have been a number of artists that employed computational algorithm to produce albums in multiple genres, such as scored films, games and smartphone apps.
David Cope, a professor at California Santa Cruz, has been exploring the intersection of algorithms and creativity for decades and he is specialized in what he terms algorithmic composition which is essentially computer-authored music production. He writes sets of instructions that enable computers to automatically generate complete orchestral compositions. His algorithms have produced classical music ranging for single instruments arrangement all the way up to full orchestral music and it is really hard to believe that the music is composed through a computer.
I really admire this project “Bach style Prelude 29 Emmy Cope”, which he has let the computer to study the composition style of Bach. As you can hear, the final melody that the AI algorithms generate is an accurate representation of Bach’s composition style and some parts of the AI-generated music have created some unexpected beautiful melodies which is totally based on Bach’s composition techniques. The biggest advantage of the AI algorithmic music composition is perhaps “Algorithms that produce creative work have a significant benefit, then, in terms of time, energy, and money, as they reduce the wasted effort on failed ideas.” said Cope.
]]>/* Fanjie Mike Jin
fjin@andrew.cmu.edu
Section C
Project-09*/
var baseimage
function preload() {
//load in the picture of myself
var myImageURL = "https://i.imgur.com/gIuXiAy.jpg";
baseimage = loadImage(myImageURL);
}
function setup() {
//drawing the image
createCanvas(500, 500);
background(0);
baseimage.loadPixels();
// makes the pixels load faster
frameRate(1000);
}
function draw() {
//Enable mouse interactions to gerate stroke elements
var mousecolor = baseimage.get(mouseX, mouseY);
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 color = baseimage.get(ix, iy);
noStroke();
fill(mousecolor);
//paint the canvas with the mouse using smaller ellipses
ellipse(mouseX,mouseY,random(4,20),random(4, 20));
fill(color);
//Use polygons as pixels with the randomized number of sides and dimensions
polygon(x,y,random(4,20),random(4,9));
}
//draw the polygons
function polygon(x, y, r, n) {
var angle = TWO_PI / n;
beginShape();
for (var i = 0; i < TWO_PI; i += angle) {
var a1 = x + cos(i) * r;
var a2 = y + sin(i) * r;
vertex(a1, a2);
}
endShape(CLOSE);
}
// reset the canvas to blank once the mouse is clicked
function mousePressed() {
clear();
}In this project, I am trying to make the portrait in a rigid pointillism style as I really like the impressionist paintings. By varying the size of the randomized polygons, I am managing to simulate the feelings of that the protrait is being painted by rigid brushstrokes. Also, at the same time, I am able to make some touches to the image as the mouse interaction is enabled to digitally draw part of the portrait.
