Jason Rohrer is a computer programmer and a game designer that not only produces games for its original purpose, but also as art. He codes creative games that are usually sold and played in the public domain, but also combines a series of them to exhibit as art works. Most shame came from the public who thought that games could not be art. However, Rohrer still believed them as artworks because creation of games was no different from painting to him. When I saw his works, I was inspired to create something similar to the pieces in his exhibitions. Similar to the format of the Pac man game, I wanted to have vivid graphics but a simple mechanism that kept the game running. Rohrer’s games and visuals were a great inspiration for me.
Jenova Chen is the designer of the playstation game, “Flower” that was released in 2009. Although this game is an actual game, it is largely considered as an art work for its aesthetic value. The interaction of the game with the players isn’t about winning or competing for a prize. The wander and exploration through the landscapes and the stunning visuals were the initial goals of this game. As visuals are important for the final project I’m planning, I wanted to get inspirations from the way she portrayed her objects. Her project was beautiful.
As I plan to work on an interactive pixel game, I looked at two popular games that I personally have played before: Fez designed by Phil Fish and Flappy Bird developed by dotGears. Flappy Bird Fez
The games definitely have their similarities. The obvious trait being the use of pixel art on both projects. The games both also create a character that is easily recognised by the audience. However, Flappy Bird can be seen as a much more simple game. While Fez requires the player to crack the puzzles by utilizing 3D-space in a 2D game world to find loops and holes, Flappy Bird only requires people to do one task of not hitting the pipes. Still, both games are challenges to their players. I look forward to creating a game of a similar caliber with a lovable character.
For the final Project, I will be collaborating with Sharon Lee from section E. Together, we will be using p5js to create a Pac-man inspired interactive game which will be divided into 3 stages. The basic components of the game include a main character in which users are able to control with keys, enemies of the main character, and the “foods” the character feeds on to either get larger or smaller. From stage 1 to 3, the stages get harder with more frequencies of “enemies” appearing on the screen. In order to progress to the next stage, the users need to reach certain points. Users gain points by the number of enemies they defeat..? We are still working on the structure of the game, but I hope this give a general idea of what our game will be like. In terms of diving up workload, we will be working together to create the basic structure of the program. Sharon will focus on the visual materials, and code stage 1 (moving the characters and imbedding the animation). I will follow up with her code and add 2 more stages to the code. I will add attraction and repel code to the characters and the enemies.
In this week’s Looking Outwards I looked at Camille Utterback’s piece Untitled 5, an installation from 2004, and Adrien M and Claire B’s piece XYZT from 2015.
I was very interested in how Utterback’s piece is so fluid and organic while still being based in algorithms. Her installation sets up animated mark making that is influenced by the movements of the viewer. A viewer can move and have the visuals respond but not in an extremely direct way, there is a slight mystery to the connection between the viewer’s movements and the resulting marks. I think it’s interesting to try to create a visual that contrasts with the aesthetic associated with computers. I like the thought process of how to program a visual that appears as if it came from the human hand, or a physical event of the natural world. Utterback’s piece accomplishes this exceptionally well, and it inspires me to create a similar aesthetic result.
XYZT is a similar installation, as it is an interactive piece that allows viewers to interact within a space to produce visuals around them. The concept is this piece is that digital light landscapes are produced across 4 different dimensions: horizontal(X), vertical(Y), depth(Z), and time(T). I thought this was a great concept, as Adrien and Claire take the immersive qualities of their piece and stretch it farther than most, creating a next-level immersive experience. Again, I love the organic quality of the white light aesthetic in this piece, and the human interaction adds a level of fluidity that contrasts with the algorithmic nature of programmed art.
I am interested in creating an animation or a game that is interactive based on Key inputs. The theme and visual that I am interested in is Sci-Fi theme. The exploration of the space and futuristic image is what I want to convey for this project. I imagine that Ultimate goal would be a interactive game/ animation that explore through the stars and character moving inside the space ship, and may be possible to change the scene to a planet with discovery and move around in different scene(planet).
Main focus of the project I want to convey is the beautiful space inside the space ship and the feeling of adventure. I do not expect myself to be able to code the whole game concept with change of scene, but my focus is on the traveling in space and convey the beauty.
I imagine that travel phase will be close to image below and change of scene probably based on time or travel speed.
Below is a concept sketch. I want this to start in space as ship travels then tells the user how to accelerate the ship and may be encounter a planet and goes into the planet. If I can figure out the change of scene and animation inside the planet, game will continue to phase where you can see the moving character, if not it will fade out with planet approaching.
Following images are from games: Galaxy on Fire , and Star Citizens. These games are consisted of open world with the main story with a battle phase occurring through out the game. It is consist of adventure and beautiful space view and creative illustration of planets, space ships, and alien cities. Galaxy on Fire is mainly battle based game that takes place in outer space. It is a rather overly simplistic story for a game that shares similar genre to other space game that involves exploration and battle. Graphic is nice but the negative thing about the game is that travel between solar system was slow, battle was not tense enough to keep tension of game. Only attracting facts of the game was the graphic; in contrast, Star citizens is a more open world based game, which is close to MMO RPG in space. This game is still in the process of development, but early access are available, and they propose a interesting dynamic of game plays with overwhelming graphics.
My main project will be close to convey similar exploration feeling of the beautiful space and interactivity with user/player.
//Hanna Jang
//Section B
//hannajan@andrew.cmu.edu;
//Project 11
function setup(){
createCanvas(400, 400);
background(12, 24, 76);
}
function draw(){
//make tree
var t1=makeTurtle(width/2, height/2);
//color and stroke weight of tree
t1.setColor(74, 246, 126);
t1.setWeight(10);
//make tree
t1.PenDown;
t1.right(100);
t1.forward(200);
t1.PenUp;
//make tree side
var t1=makeTurtle(width/2, height/2);
//color and stroke weight of tree
t1.setColor(74, 246, 126);
t1.setWeight(10);
t1.PenDown;
t1.right(80);
t1.forward(200);
t1.PenUp;
//make main star
var t2=makeTurtle(width/2, height/2);
//color and stroke weight of star
t2.setColor(255);
t2.setWeight(3);
//adjust the star size according to mouseX
var squareSize=20;
if (mouseX>width){
squareSize=100;
}
if (mouseX<width){
squareSize=30;
}
//make many squares for making star
for (var j=0; j<25; j++){
t2.right(50);
t2.left(30);
//make the squares
for (var i=0; i<4; i++){
t2.PenDown;
t2.forward(squareSize);
t2.left(90);
t2.PenUp;
}
}
//make more stars when mouse is pressed
if (mouseIsPressed){
morestar();
}
}
function morestar() {
t2=makeTurtle(mouseX, mouseY);
t2.setColor(248, 224, 127);
t2.setWeight(1);
//randomize star size
var squareSize=random(3, 50);
//make many shapes for making star
for (var j=0; j<8; j++){
t2.right(50);
t2.left(30);
//randomize the type of shapes being used for stars
var sides=random(3, 5);
for (var i=0; i<sides; i++){
t2.PenDown;
t2.forward(10);
t2.left(360/sides);
t2.PenUp;
}
}
}
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,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight};
return turtle;
}
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;
}
When thinking about what to do, I thought of an idea to make a star object, and theme it around a simple christmas tree. I then experimented using turtle graphics to make a unique looking object and added extra twinkling stars in the background when the mouse is pressed.
var cabin;
var turtle;
var spacing = 5;
function preload() {
cabin = loadImage("https://i.imgur.com/vd2MDbC.jpg");
}
function setup() {
createCanvas(437, 480);
background(140, 90, 100);
cabin.loadPixels();
turtle = makeTurtle(0, 0);
turtle.setColor(255);
for (j = 0; j <= height; j += spacing) {
for (i = 0; i <= width; i++) {
var b = brightness(color(cabin.get(i, j)));
var lineweight = map(b, 0, 255, 0, 5);
turtle.setWeight(lineweight);
turtle.forward(1);
}
turtle.goto(0, j);
}
noLoop();
}
function draw() {
}
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;}
I made an image filter using a turtle that goes horizontally across the screen, its width varying based on the brightness of the pixel underneath. The result is a stripy monochrome picture. It takes a really long time to load because the turtle goes forward only one pixel at a time. Here’s a screenshot of what it looks like once it’s loaded:
For this post I chose a piece by Laurie Spiegel from her 1970-80s album The Expanding Universe called “East River Dawn.” I’m inspired by this piece because it sounds complex and coherent. I don’t know much about music arrangement, but her work sounds well composed. The Expanding Universe was made in the 70s while Spiegel worked at Bell Laboratories. She used synthesizers and other prototype generation systems. Her reasoning behind using computers for music is that they are an artistic means rather than an end. In addition to being a trailblazer in computer music, her work was included on the Voyager spacecraft’s “Sounds of Earth” section of it’s gold record.
Though this is technically composed by a band, I very much would consider this piece much more artistic and designed than a musical composition. I think it blurs the line between the two even further because of course this is still meant to entertain.
The project is called “Marble Machine”, and is composed by Wintergatan.
Here’s the video:
You may argue that this instrument is not computational, but the design of the note timing, the construction of the machine’s parts, and the overall structure of the music is absolutely computationally based. It’s a real-world manifestation, but it was definitely created computationally. The design of the notes was then put through a CNC Mill to create the physical note timing.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
