//Huijun Shen
//huijuns@andrew.cmu.edu
//section D
//fire
var fireAnim = [];
var fireArr = [];
//particles
var drag = 0.0002;
var gravity = 0.3;
var particles = [];
//koala
var koalaImg;
var koala;
//var counter
var counter = 5;
function preload(){
//fire animation image
var filenames = [];
filenames[0] = "https://i.imgur.com/31vYPuX.png";
filenames[1] = "https://i.imgur.com/ZhfTftF.png";
filenames[2] = "https://i.imgur.com/iGSBFBe.png";
filenames[3] = "https://i.imgur.com/GCq7AjU.png";
filenames[4] = "https://i.imgur.com/zZGdjbN.png";
for (var i = 0; i < filenames.length; i++) {
fireAnim[i] = loadImage(filenames[i]);
}
koalaImg = loadImage("https://i.imgur.com/Xm5QW4o.png");
}
function setup(){
createCanvas(480,480);
frameRate(24);
imageMode(CENTER);
koala = koalaMake(45,420);
}
function draw(){
background(144,232,232);
//background trees
var col = 0;
var row= 0;
var r = 0;
for( col = 0; col < 18; col++){ //tree coloe gradation
var g = 200;
var b = 50;
for( row = 3; row < 12; row++ ){
fill(r,g,b);
b +=5;
treeDraw(col*28+12,row*38);
}
r +=10;
}
//counter
textSize(15);
fill(200,50,0);
text("fire count ",15,25);
text(counter.toString(),80,25);
//intro text
if(frameCount>0 & frameCount < 24){
textSize(50);
fill(255);
text("Click Mouse",150,200);
}
if(frameCount>=24 & frameCount < 48){
textSize(50);
fill(255);
text("Hit Key w",150,200);
}
//fire
if(frameCount % 72 == 0){
//print(startCount);
var fire = makeFire(480,410);
fireArr.push(fire);
}
for(var i = 0; i < fireArr.length; i++){
var f = fireArr[i]
f.drawFunction();
f.stepFunction();
print(f.size);
//print(counter);
if (f.size <= 0.2 || f.x <= 0.2){
print(f.x);
counter = counter - 1;
}
if (f.size<=0.2|| f.x <= 0.2 ){ //Here I choose 0.2 is because 0 is not working, the condition can not run
fireArr.splice(i,1);
print("test splice");
}
}
//sun
fill(223,242,136);
circle(400,50,50);
// add new particle to the object
newParticles = [];
for (var i = 0; i < particles.length; i++) { // for each particle
var p = particles[i];
p.stepFunction();
p.drawFunction();
//particle vanishes
if (p.age < 200) {
newParticles.push(p);
}
}
particles = newParticles;
//trunck
noStroke()
fill(82,62,41);
rect(30,280,12,200);
//koala
koala.drawFunction();
koala.stepFunction();
//ground
fill(181,170,156);
rect(0,450,480,30);
//game ending, win or loose
if(counter == 0){
//background (255);
textSize(40);
fill(0,100,200,150);
rect(0,0,width,height);
fill(255);
image(koalaImg,width/2,height/2-100,150,150);
text("KOALA SAVED ! ",width/2-130,height/2);
noLoop();
}
for(var i = 0; i < fireArr.length; i++){
var f = fireArr[i]
if (dist(f.x,f.y,koala.x,koala.y) <= 50){
background (255,50,0,150);
textSize(40);
fill(255);
text("MISSION FAILED ! ",width/2-150,height/2);
noLoop();
}
}
}
//make new particles by pressing mouse
function mousePressed() {
var newp = makeParticle(mouseX, mouseY,
random(-10, 10), random(-10, 0),color(random(1,255),random(1,255),random(1,255),random(5,15)));
particles.push(newp);
for(var j = 0; j < fireArr.length; j ++){
var fire = fireArr[j];
if(dist(mouseX,mouseY,fire.x,fire.y)<= 400*0.2*fire.size ){
fire.size -= 0.2;
}
if(abs(fire.size -0.1) <=0.0001 || abs(fire.x-0)<0.0001 ){
//print(fire.size)
fireArr.splice(j,1);
}
}
}
function keyPressed(){
if (key === "w"){
koala.y += koala.dy;
}
}
function counterUpdate(){
for(var j = 0; j < fireArr.length; j ++){
var fire = fireArr[j];
}
if (fireArr.length > 0 & fire.size <= 0){
counter = counter - 1;
}
}
function makeFire(fx,fy){
var p = {x:fx,
y:fy,
dx:-8,
imageNumber:0,
size:1.0,
stepFunction:stepFire,
drawFunction:drawFire,
}
return p;
}
function stepFire(){
this.imageNumber++;
//print(this.imageNumber);
if (this.imageNumber > 4){
this.imageNumber = 0;
}
this.x+=this.dx;
}
function drawFire(){
push();
translate(this.x,this.y);
scale(0.3*this.size);
image(fireAnim[this.imageNumber],0,0);
pop();
//print("test", this.x,this.y);
}
function treeMake(tx,ty){
var t = {x:tx,
y:ty,
color:c,
//stepFunction:stepFire,
drawFunction:treeDraw,
}
return t;
}
function treeDraw(x,y){
push();
translate(x, y);
triangle(-5,0,5,0,0,-15);
beginShape();
vertex(0,-35);
vertex(-8,-20);
vertex(0,-25);
vertex(8,-20);
endShape(CLOSE);
beginShape();
vertex(0,-25);
vertex(-12,-12);
vertex(0,-15);
vertex(12,-12);
endShape(CLOSE);
pop();
}
//particles
function particleStep() {
this.age++;
this.x += this.dx;
this.y += this.dy;
this.dy = this.dy + gravity; // force of gravity
// drag is proportional to velocity squared
// which is the sum of the squares of dx and dy
var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
// d is the ratio of old velocty to new velocity
var d = vs * drag;
//limit the speed
d = min(d, 0.9);
// scale dx and dy to include drag effect
this.dx *= (0.8 - d);
this.dy *= (0.9 - d);
if(this.age % 40 == 0){
this.size*= (1-0.2);
}
}
function particleDraw() {
fill(this.pc);
circle(this.x, this.y,this.psize);
}
// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy,pc,psize) {
p = {x: px, y: py,
dx: pdx, dy: pdy,
age: 0,
pc:color(0,random(100,150),random(150,250)),
psize:random(5,15),
stepFunction: particleStep,
drawFunction: particleDraw
}
return p;
}
//koala
function koalaMake(kx,ky){
var k = {
x:kx,
y:ky,
dy:-40,
gravityK:3,
drawFunction:koalaDraw,
stepFunction:koalaStep,
}
return k;
}
function koalaDraw(){
image(koalaImg,this.x,this.y,70,70);
}
function koalaStep(){
this.y += this.gravityK;
this.y = constrain(this.y,280,423);
}
I am inspired by the wildfire this year which both happened in Australia and California. Till now I still can remember the pictures I saw about wildlives. Those pictures made me sad.
Also I would like to write one project a bit gamy which can bring some of the interesting points of 15104 together.
How to Play:
1 Hit right button on the fire to extinguish them
2 Or hit W key to move the koala when you failed in 1#
3 When you save your koala for 5 fireballs, you win.
4 If the fireball hit the koala, you lose.
Improvement:
1 If I have more time, I would add a start button. Now the program runs automatically. With the start button, the player will feel better.
2 Also, maybe I would add a tutorial before the game begins. Like, first one fireball is burning in the middle of the canvas, and the player needs to extinguish it first to start the game. Then, a fireball is coming toward the koala, the player needs to hit W to help the koala escape from the fire then start the game.
//Huijun Shen
//huijuns@andrew.cmu.edu
//section D
// the general idea of this project is presenting an array of buildings
//which are on the hill and are coverd by trees.
var buildings = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.02;
var hillHeight = [];
// var clouds = [];
// var land = [];
// var cX = random(100,200);
// var cY = random(100,200);
function setup(){
createCanvas(480,480);
//hill
for (var i = 0; i <= width/3; i+=1){
var n = noise(noiseParam);
var value = map(n,0,1,0,width);
//hillHeight.shift();
hillHeight.push(value);
noiseParam += noiseStep;
}
//buildings
for(var i = 0; i < 10; i ++){
var rx = random(width);
buildings[i]=makeBuilding(rx);
}
frameRate(10);
}
function draw(){
background(144,232,232);
//sun
fill(223,242,136);
circle(400,50,50);
//hill
noStroke();
var n = noise(noiseParam);
var value = map(n,0,1,0,width);
hillHeight.shift(); //update value in array
hillHeight.push(value);
noiseParam += noiseStep;
for (var i = 0; i < width/5 ; i += 1){
fill(50,120,20); //square shape
beginShape();
vertex(5*i,hillHeight[i]);
vertex(5*i+5, hillHeight[i+1]);
vertex(5*i+5,height);
vertex(5*i,height);
endShape();
}
//displayHorizon();
//buildings
updateBuildings();
removeBuilding();
addNewBuilding();
//tree
updateTrees();
removeTrees();
addNewTrees();
fill(181,170,156);
rect(0,460,480,30);
}
//horizon
function displayHorizon(){
stroke(0);
line(0,height-50,width,height-50);
}
//buildings
function updateBuildings(){
for (var i = 0; i < buildings.length; i ++){
buildings[i].move();
buildings[i].display();
}
}
function removeBuilding(){
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i ++){
if (buildings[i].x + buildings[i].breadth > 0){
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep;
}
function addNewBuilding(){
if(random(0,1)<0.03){
buildings.push(makeBuilding(width-2));
}
}
function buildingMove(){
this.x += this.speed;
}
function makeBuilding(birthLocationX){
var bldg = {
x:birthLocationX,
y:random(400,450),
breadth:random(30,50),
r:random(255),
b:random(255),
g:random(255),
speed : -2.0,
nFloors : round(random(2,6)),
move:buildingMove,
display:buildingDisplay
}
return bldg;
}
function buildingDisplay(){
var floorHeight = 25;
var bHeight = this.nFloors*floorHeight;
fill(this.r,this.g,this.b);
stroke(0);
push();
translate(this.x,this.y);
rect (0,-bHeight-10,this.breadth,bHeight);
stroke(200);
for(var i = 0; i < this.nFloors; i ++){
fill(this.r+10,this.g-20,this.b+50);
//rect(5,-15-(i*floorHeight),this.breadth-10, 10);
rect(5,-20-(i*floorHeight),this.breadth-10, 10);
}
pop();
}
//tree
function updateTrees(){
for (var i = 0; i < trees.length; i ++){
trees[i].move();
trees[i].display();
}
}
function removeTrees(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i ++){
if (trees[i].x + trees[i].breadth > 0){
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
function addNewTrees(){
if(random(0,1)<0.1){
trees.push(makeTrees(width+30));
}
}
function treeMove(){
this.x += this.speed;
}
function makeTrees(birthLocationX){
var tree = {
x:birthLocationX,
y:random(400,450),
treeHeight:random(30,150),
breadth:random(10,20),
width:random(50,80),
r:random(100,120),
b:random(120,130),
g:random(150,255),
speed : -5.0,
move:treeMove,
display:treeDraw,
}
return tree;
}
function treeDraw(){
var treeHeight;
push();
translate(this.x,this.y);
fill(128,101,64);
rect(0,0,10,50);
fill(this.r,this.g,this.b);
ellipse (0,0,this.width,treeHeight);
pop();
}
In this week’s topic, I found a very interesting project called “ Clothing for Moderns” created by artist Lea Albaugh.
The link is here : http://www.instamatique.com/clothing-for-moderns.html
And here : https://www.hcii.cmu.edu/people/lea-albaugh
Lea Albaugh is a PhD student in HCI institute of CMU. This is not too much description on the web but I guess her major working field is Human Computer interaction. She is also an augmented fashion designer and game developer.
Her major studying field makes her project very interesting.
In this project, she mainly talked about women’s expression in public space, especially spaces prevailed by male leaders/supervisors. She uses cloth and actuators to build wearables that can potentially “speak”.
I think the general idea of this project is very crucial. As a woman, I frequently found myself judging my personal expression. Sometimes, I felt I speak too much in public and in a team work environment and sometimes I doubt myself speak too little in a conflict situation.
By writing this LO, I doubt males also do the same thing frequently. This is the reason I want to talk about this project. It reminds me, as a female, sometimes, expression itself is not only related to words, facial expressions and actions.
This project offers me a new look for my own situations.
//Huijun Shen
//huijuns@andrew.cmu.edu
//Section D
//Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog
//hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at
//the phone and pick it up and says "hello".
var frameCount = 0;
var chr,dogPic,bgSound,ringSound,dogSound,helloSound,walkSound,dogBark;
function preload() {
// call loadImage() and loadSound() for all media files here
bg = loadImage("https://i.imgur.com/MAsTt65.png");
chr = loadImage("https://i.imgur.com/1Z57hnP.png");
dogPic = loadImage("https://i.imgur.com/7h6Oxjz.png");
// load sound
bgSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bg_music.wav");
ringSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/telephone_ring.wav");
dogSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/dog-on-wooden.wav");
helloSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hello.mp3");
walkSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walk-1.wav");
dogBark = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/puppy_bark.wav");
}
function setup() {
createCanvas(480,480);
useSound();
frameRate(10);
//create character
man = new Object();
man.image = chr;
man.x=-250;
man.y=0;
man.dx=6;
man.draw = manDraw;
dog = new Object();
dog.image = dog;
dog.x = 0;
dog.y = 500;
dog.dx = 10;
dog.draw = dogDraw;
}
function soundSetup() { // setup for audio generation
// you can replace any of this with your own audio code:
bgSound.setVolume(0.1);
ringSound.setVolume(0.3);
walkSound.setVolume(0.5);
dogSound.setVolume(0.6);
helloSound.setVolume(0.7);
}
function draw() {
// you can replace any of this with your own code:
background(200);
image(bg,0,0,600,600);
//sound play
if(frameCount == 0){
bgSound.play();
}
if(frameCount == 90 || frameCount ==120 || frameCount ==150){
ringSound.play();
}
if(frameCount == 180 ){
walkSound.play();
dogBark.play();
}
if(frameCount == 320){
helloSound.play();
}
// man enters and stops
if(frameCount >180 ){
man.draw();
man.x+=man.dx;
if(frameCount >= 300){
man.dx =0;
}
}
// dog goes across the canvas
if(frameCount > 190 ){
dog.draw();
dog.x+=dog.dx;
}
frameCount ++;
if(frameCount == 400){
noLoop();
}
print(frameCount);
}
function manDraw(){
image(chr,this.x,this.y);
}
function dogDraw(){
image(dogPic,this.x,this.y,60,90);
}
Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at the phone and pick it up and says “hello”.
The codes worked for a while on my computer and worked for the first time on the page then it stops working. I spend a lot of time to figure out why but failed.
I basically code the numbers of the sound and the details is not possible for me to refine without hearing them.
I have tried my best.
The size is not right and also the bg sound is not playing even though other sound are playing sometimes.
]]>In this week’s topic, I would like to talk about artist Gottfried Michael Koenig’s work.
Gottfried is a contemporary composer and learnt both music theories and music representations. His work is drastically different from traditional composer’s work. In his presentation in the link above, the music is very suitable for a sci-fi movie background. I admire him for using this avant-garde method to make music in the 1950s, which is a very early stage for even computer and network development. I believe his style and working method had a big impact on the later electronic music. Even though electronic music is not my personal favorite music style, I can still see the art expression in it. This music trend, again as I mentioned before, is very modern and very distinct from all the previous music trends.
I can not guess the algothism and method used in this piece of music, but by guessing, I think he made the basic music elements into variables and borrowed randomness into it.
Basically, I think every Epoch-making work is precious.
]]>//Huijun Shen
//huijuns@andrew.cmu.edu
//section D
var imgFace;
function preload(){
imgFace = loadImage("https://i.imgur.com/d3YOxlo.jpg");
}
function setup(){
createCanvas(480,480);
// imageMode(CENTER);
imgFace.loadPixels();
imgFace.resize(480,480);
noStroke();
frameRate(200);
}
function draw(){
//image(imgFace,0,0,width,height);
var xp = floor(random(imgFace.width));
var yp = floor(random(imgFace.height));
var pix = imgFace.get(xp,yp);
fill(pix);
print(pix);
push();
translate(xp,yp);
Orthotomic();
pop();
}
function Orthotomic(ex,ey){ // Here is the code I reused from my previous work and I made some changes to it so that it fit this painting better.
var nPoints = 100;
var x,y;
beginShape(); // the shape
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = constrain(mouseX,0,150)/30*cos(t); //the shape size is affected by mouseX
y = sin(t);
var x1 =x*cos(2*t)-y*sin(2*t)+2*sin(t);
var y1 =-x * sin(2*t) - y*cos(2*t) + 2*cos(t);
vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
}
endShape(CLOSE);
}
In this project, I customized the shape of the “Brush” a bit by reusing previous and made it a bit randomized. The edge of the brush is changing every frame. The size of the brush is controlled by MouseX so that painter can do big stroke at the very beginning and small stroke at the very end to put more details.
]]>
As a concept artist, I basically do visual design for games. I am very interested in generative art, so that I checked back to week 2 LO and found Robert’s post about Dillenberger & Hansmeyer’s 3D printer grotto. (Thank you for your post)
I think the working process of computer generative art and concept design are very different but concept art can borrow some essence from computer generative art for sure. Especially about the weird shape and repetitive technology feeling, this aspect is very hard for the human brain to create.
But as always, I don’t think computer generative art can be directly used in concept design. It is very easy to tell the picture is to some extent lack of deep thinking and art re-twist. People’s eyes like to see something that has big, medium, small reads. The problem of computer generative art is that it is very even. I definitely think the 3D work I referenced here is awesome and also I definitely think it is not suitable for any game or film without re-design by designers. It is full of details. Just imagine if audience need to watch a movie and it has so many details for 90 minutes long, they will be so bored after 10 minutes because they don’t know what to look at.
In one sentence, I think computer generative art is awesome as a starting point for design, but it is far from excellent in terms of using it in mature visual products.
( Here is my portfolio just in case someone is curious about what I am literally doing for games: www.yolishen.com)
For this week’s topic, I watched the talk of Christina “Phazero”Curlee about “ from Video Art to Video Game”.
Christina is from a self-taught traditional fine art background and put her interest in art, interaction, game design and programming. She blends different principles of game and art in order to find her own vision in game style. Her work heavily demonstrates symbol and non-verbal experiences.
The purposes of her art mainly focus on communicating with people and facilitate interactions. During her art journey, she tried many things, like painting, installation art, photography, video art and video games.
The way I admire her is about her way to treat her anxiety, depression and stress. She uses video games as a way to communicate with others and she describes game design as setting a room and welcoming people to start a conversation.
She uses video game or video game media to discuss some serious topics which are hard to describe in some other situations, like multisensory interactive experiences, space and human bilateral influences, etc.
Even during the recent day, the game industry, especially the indie game area, has witnessed huge change and improvement. A lot of people still tend to think video games are undesirable things for humans, especially for kids. I would like to see more artists to use video game as a tool to prompt active communication and use the trait of video games in a positive way to inspire other people.
Eyeo 2019 – Christina Phazero Curlee from Eyeo Festival on Vimeo.
]]> // Huijun Shen session D
// huijuns@andrew.cmu.edu
var nPoints = 100;
//var lineGroup = [];
function setup() {
createCanvas(400,400);
background(180);
frameRate(10);
}
function draw() {
background(150);
noStroke();
push();
translate(width/2,height/2);
rotate(mouseX/30); // make it rotate according to x position
Orthotomic();
pop();
}
function Orthotomic(){ //draw the shape
var x;
var y;
noFill();
fill(255-mouseY*0.3,mouseY*0.2,100); // make color related to y position
stroke(3);
beginShape(); // the shape
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = constrain(mouseX,0,400)/30*cos(t);
y = sin(t);
var x1 =20*(x*cos(2*t)-y*sin(2*t)+2*sin(t));
var y1 =20*(-x * sin(2*t) - y*cos(2*t) + 2*cos(t));
vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
}
endShape(CLOSE);
}
For this week’s topic, I looked at a chart relating to money- Trillions.
The author is David Macandless, and the source are from New York Times, Bloomberg, UNESCO,WorldBank,Forbes,World Health Organisation, Stanford Uni, Credit Suisse, etc.
Money is a very interesting topic but when the number gets huge, it is very hard to get a real feeling of the amount.
https://informationisbeautiful.net/visualizations/trillions-what-is-a-trillion-dollars/
In this chart, the author raised some very interesting(or not that interesting) topics about what money can do.
By comparing the size of different squares, it is easier to get the idea of how large a concept means or how much money to get one thing to be done.
Among all the topics and comparisons the author can make, those topics shown on the chart silently describe the author’s opinions about some social topics.Also the author secretly implies his/her opinion by gradually changing colors.
I think by visualizing data and deliberately representing data in a certain way, people are easier to get influenced because they tend to think data is object numbers.
]]>