My final project is both about light pollution and the aurora borealis. The details are revealed through the facts displayed when you click on the moon. The facts related to the aurorae detail how the same phenomenon that causes aurorae also cause ozone layer depletion. Additionally, the electron precipitation introduced during aurora enters the Earth’s thermosphere may cause further depletion of the ozone layer. (https://www.innovationnewsnetwork.com/evidence-of-earths-auroras-causing-mesospheric-ozone-layer-depletion/14279/). To talk about aurorae, we must also talk about light pollution. Particularly in cities, it’s difficult to see such views or any stars at all in the night sky. Pittsburgh has dealt with both these subjects; you can’t see stars at night, and recently aurorae was visible just north of the city.
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Final Project
var buildings = [];
var buildingsShowing = [];
var stars = [];
var starsShowing = [];
var counter = 0;
var starsCounter = 0;
var moonAngle = 0;
//gradient variables
const X_AXIS = 2;
let c1, c2;
var facts = ["Light pollution impacts animal behaviors, such as migration patterns, wake-sleep cycles, and habitat formation.",
"Increased amounts of light at night lowers melatonin production, resulting in sleep deprivation, stress, anxiety, etc.",
"Nocturnal light interrupts sleep and confuses the circadian rhythm in humans and animals.",
"Astronomers are concerned with light pollution as it reduces their ability to view celestial objects.",
"The phenomena that causes aurorae also causes ozone layer depletion.",
"The ozone layer protects life on Earth from damaging UV light.",
"The electron precipitation that escapes into the thermosphere during aurora may cause further ozone layer depletion.",
"The aurora borealis was recently visible as low as in Pittsburgh."];
var index = 0;
var moonImg;
function preload(){
//load image
moonImg = loadImage("https://i.imgur.com/1lsi57S.png");
}
function setup() {
createCanvas(640,240);
frameRate(30);
//lerp color for aurorae sky
c1 = color(98, 6, 137); //purple
c2 = color(1, 153, 82); //green
//buildings
for (var i = 0; i < 20;i++){
var bldngs = random(width);
buildings[i] = makeBuildings(bldngs);
}
//stars
for (var i = 0; i < 20;i++){
var strs = random(width);
stars[i] = makeStars(strs);
}
}
function draw() {
fill(6, 11, 49);
rect(0,0, 640, 240);
//if mouse is at top, stars and aurorae appear
if (mouseY<height/2){
setGradient(0, 0, 710, 400, c2, c1, X_AXIS);
updateAndDrawStars();
removeStarsOffScreen();
addNewStars();
}
//moon spins
push();
translate(50, 50);
rotate(moonAngle);
imageMode(CENTER);
image(moonImg, 0, 0, 50, 50);
pop();
moonAngle+=.05;
noStroke();
updateAndDrawBuildings();
removeBuildingsOffScreen();
addNewBuildings();
//facts cycle
push();
fill(255);
textAlign(CENTER);
textSize(9);
textFont("Georgia");
text(facts[index], width/2, 50);
pop();
}
//gradient for new background
function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
// Left to right gradient
for (let i = x; i <= x + w; i++) {
let inter = map(i, x, x + w, 0, 1);
let c = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y + h);
}
}
function updateAndDrawBuildings(){
for(var i=0; i < buildingsShowing.length; i++){
buildingsShowing[i].move();
buildingsShowing[i].draw();
}
}
function removeBuildingsOffScreen(){
var buildingsToKeep = [];
for (var i = 0; i < buildingsShowing.length; i++){
if (buildingsShowing[i].x+20 > 0) {
buildingsToKeep.push(buildingsShowing[i]);
}
}
buildingsShowing = buildingsToKeep; // remember showing buildings
}
function addNewBuildings(){
counter+=1;
if (counter % 65 == 0){
buildingsShowing.push(makeBuildings(width, 0));
}
}
//building object
function makeBuildings(bx, by){
var buildings = {x:bx, y:by,
breadth: 50,
nFloors: round(random(2,8)),
bColor: random(50,125),
speed: -1.0,
move: buildingsMove,
draw: drawBuildings }
return buildings;
}
//building characteristics
function drawBuildings(){
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(this.bColor);
push();
translate(this.x, height);
noStroke();
rect(0, -bHeight, this.breadth, bHeight);
for (var i = 0; i < this.nFloors; i++) {
fill(mouseY/height*200);
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}
function buildingsMove(){
this.x += this.speed;
}
//stars
function updateAndDrawStars(){
for (var i = 0; i < starsShowing.length; i++) {
starsShowing[i].move();
starsShowing[i].draw();
}
}
function removeStarsOffScreen(){
var starsToKeep = [];
for (var i = 0; i < starsShowing.length; i++){
if (starsShowing[i].starsX + 10 > 0) {
starsToKeep.push(starsShowing[i]);
}
}
starsShowing = starsToKeep;
}
function addNewStars(){
starsCounter+=1;
if (starsCounter % 5 == 0){
starsShowing.push(makeStars(random(width), random(height)));
}
}
//stars object
function makeStars(sx, sy){
var s = {starsX: sx,
starsY: sy,
starsSpeed: -1,
move: starsMove,
draw: starsDraw}
return s;
}
function starsMove(){
this.starsX += this.starsSpeed;
}
function starsDraw(){
fill(255);
noStroke();
circle(this.starsX, this.starsY, random(1,2));
}
//click on moon to flip through facts
function mousePressed(){
if (mouseX<75&mouseX>25&&mouseY<75&&mouseY>25){
index = floor(random(facts.length));
if (index == facts.length) {
index = 0;
}
}
}
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Generative Landscape
var hills = []; //hills array
var trees = [];
var treesShowing = [];
var clouds = [];
var cloudsShowing = [];
var counter = 0;
var cloudCounter = 0;
var noiseParam = 0;
var noiseStep = 0.002;
function setup() {
createCanvas(480, 300);
//trees
for (var i = 0; i < 20;i++){
var trs = random(width);
trees[i] = makeTrees(trs);
}
//hills
for (var i=0; i<width/2+1; i++){
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, height);
noiseParam += noiseStep;
hills.push(value);
}
for (var i = 0; i < 5; i ++) {
var cloudX = random(width);
var cloudY = random(0, 40);
cloudsShowing[i] = makeClouds(cloudX, cloudY);
}
frameRate(20);
}
function draw() {
background(165,182,182);
noStroke();
//sun
fill(204,102,0);
circle(40,50,30);
//hills fill shape
beginShape();
fill(56,87,33);
vertex(0, height);
for (var i=0; i<width/2; i+=1){
vertex(i*5, hills[i]);
}
vertex(width, height);
endShape();
hills.shift();
hills.push(map(noise(noiseParam), 0, 1, 0, height));
noiseParam += noiseStep; //move sideways
updateAndDrawClouds();
removeCloudsOffScreen();
addNewClouds();
updateandDrawTrees();
removeTreesOffScreen();
addNewTrees();
}
function updateandDrawTrees(){
for(var i=0; i < treesShowing.length; i++){
treesShowing[i].move();
treesShowing[i].draw();
}
}
function removeTreesOffScreen(){
var treesToKeep = [];
for (var i = 0; i < treesShowing.length; i++){
if (treesShowing[i].x+20 > 0) {
treesToKeep.push(treesShowing[i]);
}
}
treesShowing = treesToKeep; // remember showing trees
}
function addNewTrees(){
counter+=1;
if (counter % 25 == 0){
treesShowing.push(makeTrees(width, random(150,300)));
}
}
function makeTrees(tx, ty){
var trees = {x:tx, y:ty,
width:random(10, 20),
height:random(50, 90),
r:random(75,200), g:random(75,100), b: 0,
speed: -1.0,
move: treesMove,
draw: drawTrees }
return trees;
}
//draw trees
function drawTrees(){
fill(160,82,45);
rect(this.x, this.y, this.width, this.height);
fill(this.r, this.g, this.b);
circle(this.x-5, this.y-10, 50);
circle(this.x+20, this.y-10, 50);
circle(this.x+5, this.y-20, 50);
}
function treesMove(){
this.x += this.speed;
}
function updateAndDrawClouds(){
for (var i = 0; i < cloudsShowing.length; i++) {
cloudsShowing[i].move();
cloudsShowing[i].draw();
}
}
function removeCloudsOffScreen(){
var cloudsToKeep = [];
for (var i = 0; i < cloudsShowing.length; i++){
if (cloudsShowing[i].cloudX + 10 > 0) {
cloudsToKeep.push(cloudsShowing[i]);
}
}
cloudsShowing = cloudsToKeep;
}
function addNewClouds(){
cloudCounter+=1;
if (cloudCounter % 100 == 0){
cloudsShowing.push(makeClouds(width, random(0,60)));
}
}
function makeClouds(cx, cy){
var c = {cloudX: cx,
cloudY: cy,
cloudSpeed: -1,
move: cloudMove,
draw: cloudDraw}
return c;
}
function cloudMove(){
this.cloudX += this.cloudSpeed;
}
function cloudDraw(){
fill(165);
noStroke();
ellipse(this.cloudX, this.cloudY - 5, 60, 50);
ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);
ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);
ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);
ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);
}
My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I’ve struggled to make beautiful projects, but I’m pretty satisfied with this one.
]]>Clearview AI is an app currently being used by hundreds of law enforcement agencies in the US, including the FBI. It can compare a photo of someone’s face to a database of more than 3 billion pictures that Clearview has access to from Facebook, Venmo, YouTube, and other sites. This database includes the FBI’s own database, which contains passport and driver’s license photos. It totals more than 640 million images of US citizens. Clearview AI then returns with matches, along with links to the sites where the database photos were from; it can easily return a name, and possibly a home address as well. What if the general public had access to this app? Police officers and Clearview investors think it’s a possibility for the future. Hopefully this never happens. Personally, I’d never feel safe again. And even in the hands of law enforcement, this technology is controversial. Privacy advocates warn that the app could still return false matches to the police and result in the incarceration of innocent people, and mass implementation and abuse of this technology could be a slippery slope to a surveillance state.
]]>//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Sonic Story
var walkImage = []; //stores chick images
var walkHen = []; //stores hen images
var cornImg;
var angleCorn = 0;
var wheatImg;
var angleWheat = 0;
var snowImg = 0;
var snowY = 0;
var chirpingSound;
var cluckingSound;
var popSound;
var windSound;
function preload() {
var filenames = []; //chick images
filenames[0] = "https://i.imgur.com/Tfx9TC4.png";
filenames[1] = "https://i.imgur.com/QahosbW.png";
for (var i = 0; i < filenames.length; i++) {
walkImage[i] = loadImage(filenames[i]);
}
var fileHen = []; //hen images
fileHen[0] = "https://i.imgur.com/7p6gBTy.png";
fileHen[1] = "https://i.imgur.com/CnvJ23d.png";
for (var i = 0; i < fileHen.length; i++) {
walkHen[i] = loadImage(fileHen[i]);
}
//icon images
cornImg = loadImage("https://i.imgur.com/5qLGEX6.png");
wheatImg = loadImage("https://i.imgur.com/FjHLXeq.png");
snowImg = loadImage("https://i.imgur.com/MnUy5ko.png");
chirpingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/chirping.wav");
cluckingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clucking.wav");
popSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pop-1.wav");
windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wind-1.wav");
}
function makeCharacter(cx, cy, cdx, cdy) {
var c = {x: cx, y: cy, dx: cdx, dy: cdy,
walkingRight: true,
imageNum: 0,
stepFunction: stepCharacter,
drawFunction: drawCharacter
}
return c;
}
function makeHen(hx, hy, hdx, hdy) {
var h = {x: hx, y: hy, dx: hdx, dy: hdy,
walkingRight: true,
imageNum: 0,
stepFunction: stepHen,
drawFunction: drawHen
}
return h;
}
function stepCharacter(){
this.imageNum++;
if (this.imageNum > 1){
this.imageNum = 0;
}
if (this.imageNum>=walkImage.length){
this.imageNum = 0;
}
if (this.y >= 650){
this.y = 100;
}
if (this.x >= 550){ //start at right to flip
this.walkingRight = !this.walkingRight;
this.x = 50;
}
this.x += this.dx; //walk
}
function stepHen(){
this.imageNum++;
if (this.imageNum > 1){
this.imageNum = 0;
}
if (this.imageNum>=walkHen.length){
this.imageNum = 0;
}
if (this.y >= 650){
this.y = 100;
}
if (this.x >= 550){ //start at right to flip
this.walkingRight = !this.walkingRight;
this.x = 50;
}
this.x += this.dx; //walk
}
function drawCharacter(){ //chicks
if (this.walkingRight == true){
image(walkImage[this.imageNum], this.x, this.y);
}
else {
push();
translate(600, 0);
scale(-1,1); //look at canvas from behind
image(walkImage[this.imageNum], this.x, this.y);
pop();
}
}
function drawHen(){ //hen
if (this.walkingRight == true){
image(walkHen[this.imageNum], this.x, this.y);
}
else {
push();
translate(600, 0);
scale(-1,1); //look at canvas from behind
image(walkHen[this.imageNum], this.x, this.y);
pop();
}
}
var character = [];
var hen = [];
function setup() {
createCanvas(600,700);
frameRate(5);
imageMode(CENTER);
createDiv("p5.dom.js library is loaded.");
useSound();
for (var i = 50; i <=450; i += 200){ //chicks
character.push(makeCharacter(10, i, 5, 1));
}
for (var i = 50; i <=450; i += 200){ //hen
hen.push(makeHen(10, i, 5, 1));
}
}
function soundSetup() { // setup for audio generation
chirpingSound.setVolume(0.3);
cluckingSound.setVolume(0.5);
popSound.setVolume(0.5);
windSound.setVolume(0.5);
}
function draw() {
background(135,206,235);
//grass
noStroke();
fill(46,139,87);
rect(0, 510, 600, 200);
push();
translate(200, 500);
scale(0.2);
for (var i = 0; i < 2; i++){ //call functions chicks
character[i].stepFunction();
character[i].drawFunction();
}
pop();
if (frameCount >= 30){
push(); //hens to right
translate(300, 500);
scale(0.2);
for (var i = 0; i < 1; i++){ //call functions hen
hen[i].stepFunction();
hen[i].drawFunction();
}
pop();
}
if (frameCount >= 50 & frameCount < 90){ //call corn
push();
translate(300, 300);
scale(0.2);
rotate(radians(angleCorn)); //rotate corn
angleCorn += 20;
image(cornImg, 0, 0);
}
pop();
if (frameCount >= 90 & frameCount < 130){
push();
translate(300, 300);
scale(0.2);
rotate(radians(angleWheat)); //rotate wheat
angleWheat += 20;
image(wheatImg, 0, 0); //3 wheats
image(wheatImg, 300, 0);
image(wheatImg, 600, 0);
}
pop();
if (frameCount >= 130 & frameCount < 200){
push();
translate(10, 100);
scale(0.1);
for (var i = random(-10,10); i < 2000; i+=50){ //snow falls
image(snowImg, i*10, snowY);
snowY += 5;
}
pop();
}
text("p5.js 15104 fall 2021", 10, 15);
if (frameCount >= 1 & frameCount < 30){
chirpingSound.play();
}
if (frameCount == 33){
chirpingSound.stop();
}
if (frameCount >= 30 & frameCount < 35){
cluckingSound.play();
}
if (frameCount >= 50 & frameCount < 52){
popSound.play();
}
if (frameCount == 52){
popSound.stop();
}
if (frameCount >= 90 & frameCount < 92){
popSound.play();
}
if (frameCount == 92){
popSound.stop();
}
if (frameCount >= 130 & frameCount < 160){
windSound.play();
}
if (frameCount == 160){
windSound.stop();
}
}
I made the pixel art in Illustrator. My animation is based off of a lullaby in Spanish called Los Pollitos Dicen. My rendition is kind of a silly, abstract version. My mom would sing this to me often when I was a child.
In Spanish it goes;
Los pollitos dicen pío, pío, pío
Cuando tienen hambre, cuando tienen frío
La gallina busca el maíz y el trigo
Les da la comida, y les presta abrigo
Bajo sus dos alas, acurrucaditos
Duermen los pollitos hasta el otro día
English Translation;
The chicks say pío, pío, pío
When they’re hungry, and when they’re cold
The hen looks for corn and wheat
She gives them food and warmth
Under her wings, the chicks are comfy
And to the next day, the chicks are asleep
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Computational Portrait
var img;
function preload(){
//load image
img = loadImage("https://i.imgur.com/eaETdlz.png");
frameRate(10);
}
function setup() {
createCanvas(400, 400);
}
function draw() {
image(img, 0, 0, 400, 400);
for(var row = 0; row <= 200; row++) {
for(var col = 0; col <= 200; col++){
var x = col * 5;
var y = row * 5;
//pixels
var pixelColor = img.get(x*5, y*5);
noStroke();
fill(pixelColor);
//draw circle
circle(x + 30, y + 50, 5);
}
}
}
I didn’t expect my frame in frame pixels to create a distorted effect, but I really like how it looks. The spaces in between the circles allow you to see some of the original image underneath.
]]>Sputniko! is a Japanese/British Artist based in Tokyo. She creates film and multimedia installations which explore the social, cultural, and ethical implications of emerging technologies. She’s an Associate Professor of Design at Tokyo University of Arts. She gave a Ted Talk in TED 2019 and was selected as one of the Young Global Leaders by the World Economic Forum. One project of hers that I’m really intrigued by is “Red String of Fate – Tamaki’s Crush.” The red string of fate is a myth in which gods tie an invisible red string between soulmates. Sputniko! collaborated with scientists from NIAS to genetically engineer silkworms to spin the red string of fate by inserting genes that produce oxytocin (the social-bonding “love” hormone), and the genes of red-glowing coral into silkworm eggs. The film that accompanies the project centers around Tamaki, an aspiring genetic engineer, who makes her own red string of fate in the hopes of winning over another scientist, Sachihiko. She sews the red silk into her favorite scarf, but it’s so powerful that everyone starts to fall in love with her – everyone except Sachihiko.
https://sputniko.com/Red-Silk-of-Fate
Stefanie Posavec is a designer, artist, and author who creatively communicates data to all audiences. Her work is fun, modern, and has a heavy graphic design influence which shows through her colorful and geometric style. Her designs are not also visual but wearable (“Air Transformed”) or even interactive through dance (“Relationship Dance Steps”). She also enjoys book design when the opportunity presents itself. Her work has been exhibited at places such as the MoMA, the Storefront for Art and Architecture (New York), the Centre Pompidou (Paris), ArtScience Museum (Singapore), and more. One work I particularly enjoy is “Data Murmurations: Points in Flight (People Like You),” which illustrates how the various stakeholders in a biobank perceive the people who consent to their biological samples and data being used for research, specifically at Imperial College. The work itself looks almost childlike with the sketchy line quality, and it’s even more enjoyable when you scroll down and see the sketches of all the ways she imagined the data visualization. Describing her creativity as childlike may sound insulting, but i enjoy the uninhibited and beautiful visual of serious data. Her “Dear Data” and “Drawing the Dictionary” projects looks quite similar, and are actually all physical work, adding to the feeling of a lovely drawing handed to you by your child. Not all her work is in this style, but I find it very charming.
http://www.stefanieposavec.com/mywork
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Project 07: Composition with Curves
var x;
var y;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw() {
background(0);
for (var curveLines = 1; curveLines < 10; curveLines++){ //draw slinky
for (var amtLines = 1; amtLines < 5; amtLines++){
push();
translate(curveLines * 10, amtLines * 10);
drawEpiTri();
}
}
}
function drawEpiTri() {
var a = map(mouseX, 0, width, 15, 100);
var b = map(mouseY, 0, height, 15, 50);
noFill();
stroke(mouseX, mouseY, 0); //color changes with mouse
push();
var a = map(mouseY, 0, width, 10, 50);
var b = map(mouseX, 0, height, 10, 50);
var h = constrain(mouseY, 0, b);
var ph = mouseY/50;
beginShape();
for (var i = 0; i <= 500; i ++) { //shape equation
var theta = map(i, 0, 50, 0, TWO_PI);
x = (a+b)*cos(theta)-h*cos(ph+theta*(a+b)/b);
y = (a+b)*sin(theta)-h*sin(ph+theta*(a+b)/b);
vertex(x, y);
}
endShape();
pop();
}
Dr. Kirell Benzi is a data artist and researcher. Kirell holds a Master of Science in Communication Systems from ECE Paris and a Ph.D. in Data Science from Ecole Polytechnique Federale de Lausanne. In 2017, he started his studio, Kirelion, around information design, creative technology, data visualization, and software engineering. He has collaborated with the likes of the EU, Stanford, Princeton, Cornell, Berkeley, UCLA, and more. He creates art that is exceptionally beautiful, pieces that one wouldn’t assume is based off of data points. Some of my favorites are; “The Dark Side and the Light” (2015), which is built upon the interactions between more than 20,000 characters from the Star Wars universe. The blue nodes represent those associated with the light side of the Force, including the Jedi, the Republic, and the Rebellion. The dark side is represented by the red nodes, which includes the Siths and the Empire. Yellow nodes represent criminals and bounty hunters, which mostly connect to the red nodes. The most influential characters are Anakin and Emperor Palpatine. I also really enjoy “Scientific Euphoria” (2014), which is about how in July 2012, CERN physicists found evidence of a new elementary particle, predicted by Peter Higgs in 1964. The graph shows the flow of retweets as people discussed the discovery. The network splits into two with European tweets concentrated in the center and U.S. tweets at the bottom.
https://www.kirellbenzi.com/art
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
var minu = minute();
//sky darkens by the hour
background(hour()*5);
//scoop slowly falls by the minute
for (var col = 0; col <= 5 * minu; col+=1) {
fill("pink");
push();
translate(225, 40);
circle(0, col, 20);
pop();
}
//arm waves for each second
if (second()%2 == 0){
line(150, 350, 100, 325);
} else if (second()%2 != 0){
line(150, 350, 100, 375);
}
//stick figure man
fill("white");
circle(150, 300, 50); //head
fill("black");
circle(140, 298, 5);
circle(160, 298, 5);
line(150, 325, 150, 400); //back
line(150, 400, 125, 450); //left leg
line(150, 400, 175, 450); //right leg
line(150, 350, 225, 350); //arm with ice cream
fill(250, 215, 160);
triangle(225, 365, 215, 345, 235, 345); //ice cream cone
}
I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.
]]>