Project 11

Scrolling environment in space

sketch
//PLANET VARIABLES:
var numPlanets = 4;
var planet = {x: [], y: [], s: [], r: [], g: [], b: [], dx: []};
var d = [];

//STAR VARIABLES:
var numStars = 100;
var star = {x: [], y: [], s: [], dx: []};

//IMG VARIABLES:
var porthole;
var astroLinks = ["https://i.imgur.com/FrLKzou.png",
				  "https://i.imgur.com/vdhX4kE.png",
				  "https://i.imgur.com/01Kk3J7.png"];
var astroPics = [];
var astro = {x: [], y: [], s: [], dx: [], e: []};

function preload(){
	for(k = 0; k < 3; k++){
		astroPics[k] = loadImage(astroLinks[k]);
	}
	porthole = loadImage("https://i.imgur.com/YSSOdgW.png") //made this porthole graphic myself
}

function setup() {
    createCanvas(480, 480);
    background(0);
    planetInitialize();
    starInitialize();
    astroInitialize();
}

function draw() {
	background(0);
	starUpdate();
	planetUpdate();
	astroUpdate();
	image(porthole, 0, 0, width, height);
}

function drawPlanetA(x, y, s, i){ //option one for planet type (moon-y)
	strokeWeight(0);
	fill(planet.r[i], planet.g[i], planet.b[i]); //randomized color
	ellipse(x, y, s, s);
	fill(planet.r[i] + 20, planet.g[i] + 20, planet.b[i] + 20); //randomized color, but a little bit lighter
	ellipse(x - s/10, y + s/3, s/4);
	ellipse(x + s/5, y - s/10, s/3);
	ellipse(x - s/4, y - s/5, s/7);
}

function drawPlanetB(x, y, s, i){ //option two for planet type (saturn-y)
	fill(planet.r[i], planet.g[i], planet.b[i]);
	ellipse(x, y, s, s);
	strokeWeight(3);
	stroke(255-planet.r[i], 255-planet.g[i], 255-planet.b[i]);
	line(x - s*(2/3), y, x + s*(2/3), y);
	strokeWeight(0);
}

function starUpdate(){
	for(var j = 0; j < numStars; j++){
		strokeWeight(0)
		fill(250, 248, 235); //creamy white
		ellipse(star.x[j], star.y[j], star.s[j], star.s[j]);

		if(star.x[j] >= width + star.s[j]){ //if star has fully moved off screen, I reset the values
			star.s[j] = random(1, 10);
			star.x[j] = random(-20, 0-star.s[j]); //HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll
			star.y[j] = random(0, height);
    	    star.dx[j] = star.s[j] / 200;
		}else{
			star.x[j] += star.dx[j]; //if star is not offscreen, it moves to the right
		}
	}
}

function planetUpdate(){
	for(var i = 0; i < numPlanets; i++){ 
		if(d[i] <= 1){ //selects planet type: if d is less than/equal to one, planet A is drawn, if d is greater than one, planet B is drawn
			drawPlanetA(planet.x[i], planet.y[i], planet.s[i], i);
		}else if(d[i] > 1){
			drawPlanetB(planet.x[i], planet.y[i], planet.s[i], i);
		}

		if(planet.x[i] >= width + planet.s[i] + (planet.s[i] * (2/3))){ //if planet has fully moved off screen, I reset the values
			planet.s[i] = random(10, 150);
			planet.x[i] = random(-200, 0-planet.s[i]); //HOWEVER, I reset the values with the X position offscreen, so there appears to be a continuous scroll
			planet.y[i] = random(0, height);
    	    planet.r[i] = random(20, 235);
    	    planet.g[i] = random(20, 235);
    	    planet.b[i] = random(20, 235);
    	    planet.dx[i] = planet.s[i] / 200;
		}else{
			planet.x[i] += planet.dx[i]; //if planet is not offscreen, it moves to the right
		}
	}
}

function astroUpdate(){
	for(var k = 0; k < 3; k++){
		image(astroPics[k], astro.x[k], astro.y[k], astro.s[k], astro.s[k]);
		if(astro.x[k] >= astro.e[k]){
			astro.x[k] = random(-2000, -150);
			astro.y[k] = random(0, height);
			astro.s[k] = random(30, 400);
			astro.dx[k] = astro.s[k] / 200;
			astro.e[k] = random(height+150, 2000);
		}else{
			astro.x[k] += astro.dx[k];
		}
	}
}

function planetInitialize(){
	for(var i = 0; i < numPlanets; i++){
    	planet.x[i] = random(0, width); //x position
    	planet.y[i] = random(0, height); //y position
    	planet.s[i] = random(10, 150); //size
    	planet.r[i] = random(20, 235); //r, g, and b are randomized. I seperated these instead of creating a color variable so I could use R, G, and B to edit the details
    	planet.g[i] = random(20, 235);
    	planet.b[i] = random(20, 235);
    	planet.dx[i] = planet.s[i] / 200; //dx is related to the size of the planet, if it's bigger it will appear to move quicker
    	d[i] = (random(0, 2)); //variable d selects whether or not planet type A or B is selected
    }
}

function starInitialize(){
	for(var j = 0; j < numStars; j++){
    	star.x[j] = random(0, width);
    	star.y[j] = random(0, height);
    	star.s[j] = random(1, 10);
    	star.dx[j] = star.s[j] / 200; //dx is related to the size of the star, if it's bigger it will appear to move quicker
    }
}

function astroInitialize(){
	for(var k = 0; k < 3; k++){
    	astro.x[k] = random(-2000, width)
    	astro.y[k] = random(0, height);
    	astro.s[k] = random(30, 150);
    	astro.dx[k] = astro.s[k] / 200; 
    	astro.e[k] = random(height+150, 2000); //astro end: beginning/end determines where image starts/ends it's journey before reset. I made the value larger so there would be greater diversity in when astronaunts appeared
    }
}

Looking Outwards 11

NFTs Are Shaking Up the Art World—But They Could Change So Much More

https://time.com/5947720/nft-art/ 

This article discusses the ways in which the art world could be altered via the growing popularity of NFTs (non-fungible tokens). It discusses many advantages, specifically positioning the creators of NFTs as down-on-their luck digital artists posed to receive notable benefits. These benefits include an increased ability to profit from one’s art, alongside the means to make one’s digital art pieces more exclusive, and hence, considered more valuable. This, however, completely neglects to mention the ways NFTs are actually used, alongside the culture surrounding them. NFTs are not bought because someone likes the art, or at the very least, that is not the primary reason for buying them. People buy NFTs to grow their own wealth at a gamble, and it’s safe to say that the already wealthy are not those who could lose the most from investing. Those who possess social capital (think CEOs, billionaires, celebrities) are easily able to construct their own NFTs and profit hugely, the reality being that very few digital artists are, in actuality, gaining financial stability from the practice, as the article implies. Like other assets on the blockchain, it would be ridiculous to pretend that NFTs don’t serve as a tool to further enrich the wealthy, usually at the expense of those outside of the 1%. Especially given the state of capitalism in this country, this is, without a doubt, extremely damaging. Though mentioned in the article, it is also worth re-acknowledging the fact that NFTs (and anything else on the blockchain) are bad for the environment, the computer clusters used to farm NFTs often powered by fossil fuels. This article is definitely biased in favor of NFTs, and perhaps unfairly fails to mention the realities of them. That being said, the title is right: NFTs could change so much more than the art world- change it for the worse.

Looking Outwards 09: Amanda Ghassei

Amanda Ghassei https://amandaghassaei.com/ 

This week, I looked at the work of Amanda Ghassei, an engineer and computational artist. Initially, I was drawn to her work due to the way she took real, tangible, and usually historical art forms and found ways to work with those concepts computationally. Her work includes algorithms about folding origami, explorations of the historical process of locked letters, and creating a simulation based off of the process of water-marbling. The project that I chose to examine more closely was her water-marbling work, mostly because of my aesthetic attraction to the vibrant palette she uses. This work connects to other work of hers which simulates fluids, which is impressive, but I find the conceptual act of digitally recreating a historical process to be more interesting. The past is so intangible and hard to access, so the act of computationally recreating the past, in a sense, is pretty intriguing.

Water Marbling Simulation, 2022

Lvanveen Project 9: Portrait

My project 9! I decided to reuse and modify some code from our wallpaper project to make the design more fun, and overall, I’m pretty pleased!

sketch
var img; //the code takes a sec to load, but it does load don't worry!

function preload(){
	img = loadImage("https://i.imgur.com/UerFer7.jpg");
}

function setup() {
    createCanvas(480, 400);
    background(200);
    strokeWeight(0)
}

function draw() {
	fill(255);
	background(200)
	image(img, 0, 0, width, height);
	fill(255, 35, 10); //red
	rect(0, 0, width, height);

	for(var y = 0; y < 500; y += 100){ //initally the background was just bright red, but I wanted more of a pattern...
		for(var x = 0; x < 600; x += 200){ //... so I decided to reuse some code that made flowers that I used in week 5 w/ a change in color etc
            
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 600; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }
	for(var i = 0; i <= width/5; i++){ //use of 5 basically made the scale of the pixels 5x bigger
		for(var j = 0; j <= height/5; j++){
			c = img.get(i*5, j*5);
			if(c[0] > 110 & c[1] > 110 && c[2] > 110){
				strokeWeight(0);
				fill(140, 255, 251); //cyan blue of face
				rect(i*5, j*5, 5, 5);
			}
		}
	}
}

function drawFlower(x, y) { //code to make flowers
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(255, 209, 25); //main flower yellow color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(245, 183, 15); //darker yellow thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

Looking Outwards 08 : Jane Freidhoff

Jane Freidhoff https://janefriedhoff.com/ 

Studying at Columbia University and Parsons School of Design, and working at places like Google and New York University, Jane Freidhoff is an interdisciplinary artist who primarily makes small-scale video games. These games tend to explore power fantasies, specifically for marginalized groups who have historically (and even now) find disempowered in comparison to the archetypical straight white man. While violence, crime, and outrage are used to punctuate this power grab, the overall aesthetics of Freidhoff’s games are far less dark and intense. That is to say, the intensity within her games are usually found in the bright color palettes and oversaturated imagery, an aesthetic that I was immediately drawn to. This immediate juxtaposition is already quite funny, but that is not where Freidhoff’s sense of humor ends. Whether in scenarios (girls destroying a mall via car), game control (screaming to shoot a gun), or display (being able to win numbers so large that scientific notation is required), Freidhoff brings absurdity and fun to a need for power. That being said, there is a real layer of anger that sits beneath the surface of her work. Heavily inspired by Riot Grrrl, Freidhoff touches greatly on female rage, in addition to her struggles related to her queer and Jewish identities. I think I’m most drawn to Freidhoff’s aesthetics, sense of humor, and ability to tackle issues that I similarly face. The casual, funny, and relatable way she speaks about her work is also appealing to me.

Lecture: https://vimeo.com/287093861?embedded=false&source=video_title&owner=8053320

game : https://jfriedhoff.itch.io/lost-wage-rampage 

Looking Outward 07

Rachel Binx, CA Coastline Ring, 2016

For this week’s Looking Outward, I looked at Rachel Binx’s CA Coastline Ring. In order to create the work, she appropriated the outline of the California coast, wrapped it into a circle, and used that pattern to create a ring. I find this so interesting because I have an intense curiosity about the interaction between the natural world and artistic practice as a whole: whether this be in medium, subject, or otherwise. I found it clever how Binx decided to cast the ring in gold, considering the history of the gold rush in California. I think that this is a great example of the way in which content can dictate form, and vice versa. In terms of its value as a visualization tool, I’m not sure if it would be recognizable as the coast of California to the average person. That being said, as a personal memento, or even as an object to someone with prior knowledge, I can see the ways in which this ring would more than successfully serve its owner. This unconventional application of the natural world without a doubt peaks my interest. 

Gold CA Coast Ring

LO: 06

When thinking about randomness, my mind went straight to Dada, specifically Dada poetry. So much of Dada itself is left up to chance: the process, the reaction, the viewer, the artist: this is especially true with Dada poetry. Paradoxically, Dada poetry often both gave instruction on how to create Dada art while considered a piece of Dada art itself. Tristan Tzara’s 1920 To Make a Dadaist Poem is a great example:

“Pick up a newspaper.

Take some scissors.

Choose in the newspaper an article of length that tells you to give your poem.

Cut out the item.

Carefully cut out each of the words that make up the item carefully and put them in a bag.

Shake gently.

Now pull each cutting one after another.

Copy conscientiously

In the order they have left the bag.

The poem will resemble you.

And you are an infinitely original writer and a bewitching sensibility, although misunderstood by the vulgar.”

There is obvious randomness in the actions described: random newspaper, random words, random order. But Tzara’s call to action is also given to a random artist. This serves the Dada goal of nonmeaning well. I have also been considering the fact that Dada poetry that prompts viewer response is similar in a lot of ways to programming. Obviously there are differences, but the fact that one is given a list of instructions to follow, usually phrased particularly does connect the two in my mind.

excerpt of Dada poetry

Project 06

For my abstract clock, the day/night period is from 7 am to 7 pm & vice versa. This means that the sun rises & sets at 7 am & 7 pm, respectively. The number of stars displayed on screen references what minute it is, and one complete rotation of a star = 1 minute. The half-circle path that the sun/moon takes can be used to tell the hour.

sketch
//Lily van Veen, section B, lvanveen@andrew.cmu.edu, project 6
var r; //red value
var g; //green value
var b; //blue value
var h; //hour
var m; //min
var s; //sec
var x = []; //x value of top point of stars
var y = []; //y value of top point of stars
var t = 0; // rotation/turn of stars

function setup() {
	frameRate(30);
    createCanvas(480, 480);
    background(235, 205, 124);
    for(var i = 0; i < 60; i++){ 
    	x[i] = random(30, width-30);
    	y[i] = random(30, height-240);
    }
}

function draw() {
	let h = hour();
    let m = minute();
    let s = second();
	if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
    	r = 235; //yellow
    	g = 205;
    	b = 124;
    	background(r, g, b);
    }else if(h < 7 || h > 19){
    	r = 48; //blue
    	g = 68;
    	b = 133;
    	background(r, g, b);
    }else if(h == 7){
    	r += .01; // w/ .01 change in color @ 30 fps, will take abt 2 min to fully shift from day to night (also about the same time a sunset/sunrise takes :) )
    	g += .01;
    	b -= .01;
    	background(min(r, 235), min(r, 205), max(b, 124));
    }else if(h == 19){
    	r -= .01;
    	g -= .01;
    	b += .01;
    	background(max(r, 48), max(g, 68), min(b, 133));
    }

    for(var i = 0; i < m; i++){ // i is used to count the # of minutes; this is the section to draw the star - initally was going to put this under a function called drawStar(); but didn't function properly
    	push();
        translate(x[i], y[i]);
        rotate(radians(s*6));
    	fill(255, 249, 201); //light yellow
	    strokeWeight(0);
	    triangle(0, -5, -5, 5, 5, 5);
	    triangle(-5, 5, -7.5, 10, 0, 7.5);
	    triangle(5, 5, 7.5, 10, 0, 7.5);
	    triangle(0, 7.5, -5, 5, 5, 5);
	    triangle(-5, 5, -10, 0, 0, 0);
	    triangle(5, 5, 10, 0, 0, 0);
	    pop();
    }
    	push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 am -> 7 pm
    	translate(240, 480);
    	rotate(radians((((h-7)*60)+m)*(360/1440)));
    	strokeWeight(0);
    	fill(255, 248, 189);
    	ellipse(-215, 0, 50, 50);
    	pop();

    	push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 pm -> 7 am
    	translate(240, 480);
    	rotate(radians((((h-7)*60)+m)*(360/1440)+180));
    	strokeWeight(0);
    	fill(255, 248, 189);
    	ellipse(-215, 0, 50, 50); //so the ellipse to carve out moon shape is the same as bg :)
    	if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
      	    r = 235;

Project 5: Wallpaper

I decided to go full floral vintage and make a flower wallpaper! Also thought it would be cute to have a little tear in the corner, revealing the wood paneling underneath.

sketch
function setup() {
    createCanvas(600, 400);
    background(224, 224, 197);
}

function draw() {
	background(224, 224, 197);
	for(var y = 0; y < 500; y += 100){
		for(var x = 0; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }

    strokeWeight(3);
    stroke(250, 245, 237);
    fill(250, 245, 237);
    triangle(500, 350, 500, 400, 600, 350);
}

function drawFlower(x, y) {
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(230, 158, 57); //main flower orange color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(212, 127, 42); //dark orange thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

LO 05: 3D Computer Graphics

Galleria dell’Accademia – Daniele da Volterra bust 3D model

(Exhibition page)

https://sketchfab.com/3d-models/the-bronze-effigy-of-michelangelo-fb759e11a7ce470bac5e8e4fe70881c4 <- 3D MODELED BUST

When I was in Italy over the summer, I went to the Galleria dell’Accademia di Firenze, where Michelangelo’s David’s is housed. After looking at David, there was a nearby room that showed a screen with a collection of 3D models made from real life historical sculptures, specifically busts of Michelangelo made by an unidentified artist. These 3D models were created by scanning the bust, and allowed for a greater degree of investigation of technique. On the walls there were many, many iterations of these models along with actual 3D printed busts themselves, and it was really interesting to see the way these digital images existed in the real world. Obviously, the meshes of these models were more complex than, say, stylized Pixar character models, and the detail that was able to be achieved was really interesting. Ultimately, this heightened ability to investigate the bust allowed for it to be attributed to Daniele da Volterra, made in the 16th century. I also find the gap of time between the creation of this piece and digital re-appropriation to be really fascinating, and it really made me think about how the people who would’ve been renowned clay sculptures back in the day likely would’ve made great character modelers within the 3D animated film & game industry (and vice versa).

Michelangelo Busts – Galleria dell’Accademia di Firenze