Read Kristine’s post before proceeding, as this will discuss our project in more detail.
We thought it would be easier to walk through one of the scenarios we wanted to develop in order to explain how this project will work. One of the stories will be about how Jesus fed 5000 people with 2 fish and 5 loaves. The character would start on the left side of the canvas and the user would move it along the path using the arrow keys. Along the path, they would collect 2 fish and 5 breads. Then halfway, they would meet Jesus who they can click on, making Him say something in a text box. Then, you would click on Him again and there would be an animation in which randomized bread and fish would appear in the canvas. The user would then move along the path and reach the end of the path at the right side of the canvas.
In a similar manner we will generate one or two more stories the user can choose from. We will also add more objects and add more speech to make it interactive and tell the Bible story.
The first project that I drew inspiration from was Monument Valley created by Ustwo games using Unity software. This indie puzzle game allows the user to walk princess Ida through multiple pathways including optical illusions and objects in order to clear each stage. I really admire this game not only because it’s fun and calming, but also because of its aesthetics. The use of simple color and primitive shapes come together to create the intricate and complex landscape designs. I wanted to incorporate the idea of going through a pathway and make use of similar aesthetics that Monument Valley uses.
Some of the different landscape backgrounds for different stages in Monument Valley.
The other project I drew inspiration from was Hyper Light Drifter which is a 2d role playing game developed by Abylight Studios. The player controls the Drifter and goes through the different stories collecting items on the way and fights monsters. Our project wants to mimic the 2D pixel drawing style and how the character is able to interact with the environment.
Screen capture of one of the landscapes in Hyper Light Drifter.
For my final project, I want to create an interactive art that takes the viewer to different sceneries from animation film, Howl’s Moving Castle. This is a Miyazaki film that is based on a fantasy novel written by a British author, Diana Wynne Jones. Since this is my favorite Studio Ghibli film, I thought it would be interesting for me to base my final project on this film. Howl, a wizard, has a magical door that opens up to different places based on the color of the circle that is seen below. Hence, I will create an interactive art in which the viewer could change the color and see different landscapes.
Depending on the color the pointer is set to, the door opens to different locations. Rough sketch of my idea
Each scenery will be based on the actual film and each will have one moving element.
For “Black” location, I will depict the war scene. For this scene, there will be bomb exploding on the ground.
“Black” location: a scene from the movie
For “Yellow”, I will create a flower field landscape in which the grass will be moving to depict its movement from the wind.
“Yellow” location: flower field
For “Red” location, I will recreate Sophie (the main female character)’s hometown, which will have a train passing by.
Lastly, for the “Green” location, I would either have the palace from the movie.
For my final project, I want to create an interactive art that takes the viewer to different places. One project I found that was inspiring is the Quantum Fluctuations: Experiments in Flux that was created by Markos Kay. As a digital artist who is fascinated by science, this project depicts the “complexity and transient nature of the most fundamental aspect of reality”: the Quantum world. Kay worked with several scientists working on the Large Hardon Collider at the CERN, Geneva for this project. Using the particle simulations that were done by a supercomputer as his brush and paint, he created digital art that shows what happens during a proton collision. This project stood out since he is showcasing a natural phenomenon in rather artificial manner. All the sceneries in Howl’s Moving Castle (my project) are dreamy and exaggerated realities. Given the fictional context, I hope to depict reality yet in dream-like manner similar to Kay’s project.
Second project I found was the Cloud Portal installation by Ned Kahn in San Francisco, CA. Kahn also explores the interdisciplinary field of art and science. He is specifically interested in the fluid motion of water, fog, sand and light, which he uses to depict the complex and continually changing systems. His project, Cloud Portal, is constructed with stacked horizontal sheets of stainless steel, and mist that represents the cloud appears from the central void of the portal. This project reminded me of Berndnaut Smilde’s cloud installations.
Cloud Portal by Ned Kahn in Davis Court, San Francisco.
Although Kahn’s works are physical installations in contrast to the digital art by Kay, they both illustrate our scientific reality by recreating natural phenomenon artificially.
For this project, We are going to create a scene with the theme of an interstellar pianist. The background will be a 3D view of the galaxy and the viewport will be manipulated through changing the mouse position. The foreground will be an array of piano keys that can be connected by the keyboards. Once a short tune is played, a star is given birth. There can be a maximum amount of the stars. Once the maximum is reached, the oldest star will be eliminated. The stars that are given birth to will be presented in a 3D form and different colors to differentiate from the galaxy in the background. Depending on the different tunes that the user played, different type of stars can be generated.
The Two projects discussed in this Looking Outwards are the Zaha Hadid Volu Pavilion and Water Drawing Project.
The Volu Pavilion appears to be made from a continuous piece and features an oval roof that tilts downwards to create a shade for dining. Comprised of a series of structural bands collecting at the spine and expanding overhead, the patterning of the pavilion is optimized to be at mose singly curved.
The Patterning of the single curved Pavilion
The second project is the Drawing Water Project which collects national water consumption data with rainfall data into a series of maps. The data are parsed with python scripts and each line in the drawing corresponds to a daily rainfall measurement. The length of the line and its initial placement are dtermined by the amount of rainfall measured and where it fell. The final placement and color of each line are determined by the influence of urban water consumers. When the rainfall is pulled farther from where it fell, it changes color from blue to black. Such a mapping strategy creates an interesting artistic and informational drawing that tells information in a more direct way.
A scripted generated art by collecting rainfall and water consumption data
What I find the two projects interesting is that both projects demonstrate a strong sense of visual impression, no matter in 3D or 2D forms. Such strategies can be learned to apply to the final project for visual aesthetic pleasure. Meanwhile, both projects give a more interaction based opportunity to investigate either the law of physics may impact on the patterning of the structure or the data of rainfall overtime can change the overal composition of the drawing. Both projects definitely inspire me with such interactive quality and the strong flexibility and enlighten me to make a final project that can be a combination of generative art, interactive art, dynamic drawing, and computational drawings.
For this project, I was inspired by some of the previous works done in the past 15-104 classes. Especially the ones that were done regarding the concepts of the shooting stars and lamps inspired me. I tried to replicate the frame of the lamps with the detail feature of the sphere function as well as showing the glow by creating multiple translucent sphere in and out of them.
It takes some time for the lamps to start appearing unless you drag around the screen to look for them.
For this week’s looking outwards to give attention to female artists in the field of creative coding, I would like to focus on Sharon Daniel. Sharon Daniel is a professor in the Film and Digital Media department and serves as chair for the Digital Arts and New Media MFA program at the University of California, Santa Cruz. Her works are focused on empowering and giving voice to those who don’t receive as much attention and are often mistreated, and become the victims of injustice in our society.
a screenshot of “blood sugar”
My favorite work of hers is called, “Blood Sugar”. It is an archive of interviews with numerous conversations with different types of addicts. The conversations include why and how they became addicts. The visualization shows the form of sound wave as well as different key sentences that reacts to the movement of the mouse.
What interests me is that the visualization is not necessarily a crucial part of the story and it could have been explained in many other ways, but because it creates a certain atmosphere, while emphasizing the “voice” of the interviewee, it adds to the experience of listen. Especially how one can rotate the sound wave in the 3D space provides metaphorically different perspectives.
let flowers = [];
let grass = [];
let clouds = [];
function setup() {
createCanvas(600,600);
//inital placement for flowers
for (let i = 0; i < 50; i++) {
let firstX = random(width);
let firstY = random(height);
flowers[i] = makingFlower(firstX,firstY)
}
// inital placement for grass
for (let gx = 0; gx < 400; gx++) {
let grassX = random(width);
let grassY = random(height);
grass[gx] = makingGrass(grassX,grassY);
}
// initial placement for clouds
for (let j = 0; j < 7; j++) {
let cloudx = random(width);
let cloudy = random(height);
clouds[j] = makingCloud(cloudx, cloudy);
}
}
function draw() {
background(105,130,80);
//drawing the grass
updateAndDisplayGrass();
addingGrass();
removingGrass();
//drawing the flowers
updateAndDisplayflowers();
addingFlowers();
removingFlowers();
// drawing the clouds
updateAndDisplayClouds();
addingClouds();
removingClouds();
}
////////////////////////////////////flowers//////////////////////////
///removing flowers from the array once they go off screen
function removingFlowers() {
var keeping = [];
for (var i = 0; i < flowers.length; i++) {
if (flowers[i].x + flowers[i].r > 0) {
keeping.push(flowers[i]);
}
}
flowers = keeping; //keeping certain flowers in the flowers array
}
//update all the flowers in the array
function updateAndDisplayflowers(){
for (var i = 0; i < flowers.length; i++){
flowers[i].move();
flowers[i].display();
}
}
//adding new flowers to the array according to a certain liklihood
function addingFlowers() {
var newflowerliklihood = 0.05;
var initialX = random(width);
var initialY = 0;
if (random(0,1) < newflowerliklihood) {
flowers.push(makingFlower(initialX,initialY));
}
}
//the flower object
function makingFlower(firstX,firstY) {
var flr = {x: firstX,
y: firstY,
r: round(random(10,40)),
move: moveflowers,
display: showflowers}
return flr;
}
//specifying the drawing of the flower
function showflowers() {
noStroke();
fill(230, 80, 50); //red petals
ellipse(this.x+3, this.y, 3, 4);
ellipse(this.x-3, this.y, 3, 4);
ellipse(this.x, this.y-3, 3, 4);
ellipse(this.x, this.y+3, 3, 4);
fill(230, 130, 50); // orange center
ellipse(this.x, this.y, 5, 5);
fill(90, 40, 30); // red inner center
ellipse(this.x, this.y, 1, 1);
}
//speciftying the movement of the flower
function moveflowers() {
this.y = this.y + 1
}
/////////////////////////////////// grass////////////////////////////////
function removingGrass() {
var keepingGrass = [];
for (var i = 0; i < grass.length; i++) {
if (grass[i].x > -10) {
keepingGrass.push(grass[i]);
}
}
grass = keepingGrass;
}
function updateAndDisplayGrass(){
for (var i = 0; i < grass.length; i++){
grass[i].move();
grass[i].display();
}
}
function addingGrass() {
var newgrassliklihood = 0.5;
var initialX = random(width);
var initialY = 0;
if (random(0,1) < newgrassliklihood) {
grass.push(makingGrass(initialX,initialY));
}
}
function makingGrass(grassX,grassY) {
var gss = {x: grassX,
y: grassY,
move: moveGrass,
display: showGrass}
return gss;
}
function showGrass() {
strokeWeight(random(1,2));
stroke(130,160,140);
line(this.x, this.y, this.x-2, this.y+2);
}
function moveGrass() {
this.y = this.y + 1
}
/////////////////////clouds///////////////////////////////////////////////
function removingClouds() {
var keepingClouds = [];
for (var i = 0; i < clouds.length; i++) {
if (clouds[i].x > -10) {
keepingClouds.push(clouds[i]);
}
}
clouds = keepingClouds;
}
function updateAndDisplayClouds(){
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}
function addingClouds() {
var newcloudliklihood = 0.02;
var initialX = random(width);
var initialY = 0;
if (random(0,1) < newcloudliklihood) {
clouds.push(makingCloud(initialX,initialY));
}
}
function makingCloud(cloudX,cloudY) {
var cld = {x: cloudX,
y: cloudY,
move: moveCloud,
display: showCloud}
return cld;
}
function showCloud() {
noStroke();
fill(150,180,190,20); // light blue
beginShape();
vertex(this.x , this.y);
quadraticVertex(this.x - 236, this.y - 351 , this.x + 7 , this.y - 357);
bezierVertex(this.x -17, this.y -215, this.x + 132, this.y + 180, this.x, this.y);
endShape(CLOSE)
}
function moveCloud() {
this.y = this.y + 3
}
a landscape by Gustav Klimt I was inspired by
For this project, I was really inspired by the prompt of looking outside of a window. I love flowers and the peacefulness of watching clouds pass. I also love the colors in Gustav Klimpt’s landscapes, so I really wanted to incorporate this into my project, as well as get some practice drawing curves.
/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project-11-landscape
*/
var c1, c2; // for gradient
var smile = [];
function setup() {
createCanvas(480, 480);
frameRate(50);
//setting up background gradient
c1 = color(15, 113, 115);
c2 = color(240, 93, 94);
}
function draw() {
gradient(c1, c2); // background color
drawMountains();
desert();
drawSun();
updateSmile();
deleteSmile();
addSmile();
}
// setting up gradient for the sky
function gradient(c1, c2) {
noFill();
noStroke();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}
function drawMountains () { // drawing mountains by using terrain
var terrainSpeed = 0.0005;
var terrainDetail = 0.006;
stroke(47, 57, 94);
noFill();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, height / 2, height);
line(x, y, x, height); //draws lines from the points of terrain to the bottom of the canvas
}
endShape();
}
function desert () { //drawing the dessert land
fill(216, 164, 127);
noStroke();
beginShape();
vertex(0, height - 60);
vertex(width, height - 60);
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}
function drawSun() { // drawing sun at a suspended location
fill(216, 30, 91);
circle(400, 200, 50);
}
function updateSmile() {
for(var i = 0; i < smile.length; i++) {
smile[i].move();
smile[i].draw();
}
}
function deleteSmile() {
var smileToKeep = [];
for(var i = 0; i < smile.length; i++) {
if(smile[i].xx + smile[i].w > 0) {
smileToKeep.push(smile[i]);
}
}
smile = smileToKeep;
}
function addSmile() {
var newSmile = 0.008;
if (random(1) < newSmile) {
smile.push(makeSmile(width, random(450, 480)));
}
}
function moveSmile() {
this.xx += this.speed; // moving the smiles to the left
}
function drawSmile() {
// drawing the face
stroke(56, 63, 81);
strokeWeight(2);
fill(255, 120, 79);
push();
translate(this.xx, this.yy);
circle(0, -this.hh, this.w);
pop();
//drawing the eyes
fill(56, 63, 81);
noStroke();
push();
translate(this.xx, this.yy);
ellipse(-5, -this.hh - 5, 6, 13);
ellipse(5, -this.hh - 5, 6, 13);
pop();
//drawing mouth
stroke(56, 63, 81);
strokeWeight(2);
noFill();
push();
translate(this.xx, this.yy);
arc(0, -this.hh + 5, 20, 15, TWO_PI, PI);
pop();
}
function makeSmile(birthLocationX, birthLocationY) {
var sm = {xx: birthLocationX, yy: birthLocationY,
w: random(30, 50), hh: random(10, 30), speed: -1,
move: moveSmile, draw: drawSmile}
return sm;
}
For this project, I wanted to add an element of surprise to my landscape: smiley faces. I roughly sketched out my plan (as seen below) after being inspired by pictures of the desert in Arizona. This is why I chose the light brown for the land – sandy and dry – and darker and colder blue for the mountains. to convey that they are really far away. Overall, this project helped me feel more comfortable with drawing objects.
My rough sketch for this projectPicture of a desert in Arizona that inspired overall landscape and color schemes.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
