Continuing my inspiration from the artwork associated with Vaporwave, I decided to pursue my generative landscape project using the aesthetics, color palette, and symbols associated with the genre. Furthermore, to add to the surrealist atmosphere of the piece, I stylistically juxtaposed the Vaporwave landscape with a minimalist depiction of a train and dog. The interior of the train serves as the non-moving element of the drawing and has a window by which the Vaporwave setting can be seen. The two javascript objects that I used were telephone poles, a common symbol in Vaporwave art, that vary in thickness, height, and number of cross beams, and imported images of a marble bust, the Windows 95 logo, and an error message that vary in position and speed. Additionally, I used a noise function to generate a mountain in the background to complete the scene.
var telephonePoles = [];
var images = [];
var showImage = [];
var mountainValue = [];
var noiseParam = 0;
var noiseStep = .1;
function preload() {
// call loadImage() and loadSound() for all media files here
images[0] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.png");
images[1] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe-1.png");
images[2] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows-1.png")
}
function setup() {
frameRate(100);
// you can change the next 2 lines:
createCanvas(480, 480);
//frameRate(20);
//create telephonePoles
for (var i = 0; i < 5; i++){
var tx = random(width);
var tt = random(1,5);
var th = random(50, height/2 - 70);
var tb = floor(random(1,4));
var pole = makePoles(tx,tt,th,tb);
telephonePoles.push(pole);
var image = makeImages(random(width/2,width),random(130,310));
showImage.push(image);
}
for(var i = 0; i <= width/5; i++){
var n = noise(noiseParam);
var value = map(n,0,1,0,height/2);
mountainValue.push(value);
noiseParam += noiseStep;
}
}
var chooseColor;
function draw() {
// you can replace any of this with your own code:
//var chooseColor = random(floor(0,5));
if (chooseColor == 0){
background(255,113,206);
} else if (chooseColor == 1){
background(1,205,254);
} else if (chooseColor == 2){
background(5,255,161);
} else if (chooseColor == 3){
background(185,103,255);
} else {
background(255,251,150)
}
drawGrid();
drawMountain();
for (var i = 0; i < 5; i++){
var t = telephonePoles[i];
t.move();
t.drawPole();
}
for (var i = 0; i < showImage.length; i++){
var m = showImage[i];
m.moveImg();
m.drawImage();
}
//image(images[0],random(0,width),height/2);
drawTrain();
drawChair();
drawLegs();
push();
translate(width,0);
scale(-1,1);
drawChair();
pop();
drawDog();
newPole();
newImage();
removeImage();
removePole();
moveMountain();
if (frameCount % 100 == 0){
chooseColor = floor(random(0,5));
}
}
function drawTrain() {
noStroke();
fill(193,143,171);
rect(0,0,width,120);
rect(0,320,width,height);
fill(221,194,59);
//window
beginShape();
vertex(0,110);
vertex(width,110);
vertex(width,330);
vertex(0,330);
beginContour();
vertex(10,320);
vertex(width-10,320);
vertex(width-10,120);
vertex(10,120);
endContour();
endShape(CLOSE);
}
function drawChair() {
noStroke();
fill(84,68,70);
beginShape();
vertex(20,height);
vertex(20,280);
curveVertex(40,300);
curveVertex(50,height);
endShape(CLOSE);
rect(30,height - 50, 100, height, 5);
}
function drawDog() {
fill("white");
noStroke();
//head
circle(400,340,50);
//body
fill("white")
ellipse(400,400,60,100);
//tail
fill("black");
beginShape();
vertex(395,445);
curveVertex(405,460);
vertex(375,470);
curveVertex(415,460);
vertex(405,450);
endShape(CLOSE);
//ears
push();
translate(32,-20);
quad(350,340,355,370,335,350,347,345);
pop();
push();
translate(287,-20);
translate(width,0);
scale(-1,1);
quad(350,340,355,370,335,350,347,345);
pop();
}
function drawLegs() {
//legs
fill("black");
rect(370,400,20,50,40);
push();
translate(40,0);
rect(370,400,20,50,40);
pop();
}
function drawGrid() {
stroke("white");
strokeWeight(.5);
for (var yShift = 0; yShift < height/2; yShift += 10){
line(0,height/2 + yShift,width,height/2 + yShift);
}
for (var xShift = -width*40; xShift < width*40; xShift += 60){
line(width/2,height/2,xShift,height);
}
}
function poleDraw() {
noStroke();
fill("black");
//trunk
push();
translate(0,-this.tall);
rect(this.x,height/2,this.thickness, this.tall);
//beams
for (var i = 0;i < this.beamNumber; i++){
rect(this.x - 20,height/2, 40, this.thickness/2);
translate(0, this.thickness);
}
pop();
}
function poleMove (){
this.x += this.speed;
}
function newPole() {
var newPoleProb = .7;
if (random(0,1) < newPoleProb){
telephonePoles.push(makePoles(width,random(1,5),random(50, height/2 - 70),
floor(random(1,4))));
}
}
function removePole() {
var polesToKeep = [];
for (var i = 0; i < telephonePoles.length; i++){
if(telephonePoles[i].x > 0){
polesToKeep.push((telephonePoles[i]));
}
}
telephonePoles = polesToKeep;
}
function removeImage() {
var imageKeep = [];
for (var i = 0; i < showImage.length; i++){
if(showImage[i].x > 0) {
imageKeep.push(showImage[i]);
}
}
showImage = imageKeep;
}
function newImage() {
var newImageProb = .009;
if (random(0,1) < newImageProb){
showImage.push(makeImages(width,random(130,310)));
}
}
function makePoles(poleX, poleThick, poleHeight,poleBeam) {
var telephonePole = {x: poleX, thickness: poleThick,
speed: -1.0, drawPole: poleDraw,
tall: poleHeight, beamNumber: poleBeam,
move: poleMove}
return telephonePole;
}
function imageDisplay(){
image(images[this.chooseImage],this.x,this.y);
}
function imageMove(){
this.x += this.speed;
}
function makeImages(imageX,imageY) {
var m = {x: imageX, y: imageY,
speed: random(-6.0,-1.0),
chooseImage: floor(random(0,images.length)),
drawImage: imageDisplay, moveImg: imageMove};
return m;
}
function drawMountain() {
noStroke();
fill(0,100);
for( var i = 0; i < width/5; i++){
beginShape();
vertex(0,height/2);
for( var i = 0; i <= width/5; i++){
vertex(5*i,mountainValue[i]);
vertex(5*(i+1),mountainValue[i+1]);
}
vertex(width,height/2);
endShape(CLOSE);
}
}
function moveMountain() {
mountainValue.shift();
var n = noise(noiseParam);
var value = map(n,0,1,0,height/2);
mountainValue.push(value);
noiseParam += noiseStep;
}