The project I chose is called Facebook Flowers by Stamen Design. Their work shows the activity of a Facebook post going viral. It takes on the form of a flower that blooms as the post gets reshared from person to person. Every new share creates a branch and reshares of that share show as an extension of the branch. I admire this piece because of the way it shows data while still creating an art piece in a way. I also really like how motion is used in this data visualization, which is not always included in other works. It is fascinating to watch how the data grows through this plant-like visualization.
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-05-Project
function setup() {
createCanvas(480, 480);
background(220);
}
function draw() {
background(250, 190, 200) //pink background
//calls column with 5 hearts
for (var x = 40; x <= width; x += 200) {
for (var y = 40;y <= height; y+= 100) {
push()
translate(x, y)
drawheart2()
drawheart()
pop()
}
}
//cals collumn with 4 hearts
for (var x = 140; x <= width; x += 200) {
for (var y = 100;y <= height; y+= 100) {
push()
translate(x, y)
drawheart2()
drawheart()
pop()
}
}
}
//draws pink hearts
function drawheart(){
fill(230, 80, 120)
strokeWeight(0)
push()
beginShape();
rotate(radians(180))
for (var i = 0; i < TWO_PI; i+=0.1) {
var mx = constrain(mouseX/300, 0.7, 1.2) //multiplier based on mouseX
var my = constrain(mouseY/300, 0.7, 1.2) //multiplier based on mouseY
var x = mx*16*pow(sin(i),3)
var y = my*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
vertex(x,y);
}
endShape(CLOSE);
pop()
}
//draws white hearts
function drawheart2(){
var t = constrain(mouseX/3, 50, 80) //transparency based on mouseX
fill(255, 255, 255, t)
strokeWeight(0)
push()
beginShape()
scale(2)
rotate(radians(180))
for (var i = 0; i < TWO_PI; i+=0.1) {
var x = 1.2*16*pow(sin(i),3)
var y = 1.2*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
vertex(x,y);
}
endShape(CLOSE);
pop()
}
For this project, I wanted to create a wallpaper again, but this time with curves. I decided to use hearts for this, in which the size changes with the mouse coordinates. The white hearts in the background also change in transparency depending on the coordinate of the mouse.
//jiaqiwa2; Jiaqi Wang; Section C
function setup() {
createCanvas(480, 480);
background(220);
}
function draw() {
// Create a blended background
fill(0, 10);
rect(0, 0, width, height);
//Keep track of how far mouse is away from the center
var dX=Math.abs(mouseX-width/2);
var dY=Math.abs(mouseY-height/2);
//xoff and yoff are used to continuously govern
//two parameters of the curve respectively
var xoff=map(dX,0,240,1,17);
var yoff=map(dY,0,240,1,17);
fill(220,49,63,60);
heart(width/2,height/2,xoff,yoff);
}
function heart(Px,Py, xoff,yoff){
push();
//move the heart to the center of the canvas
translate(Px,Py);
noStroke();
//start drawing heart curve
//with respect to mouse's distance from the center
beginShape();
for(var i=0;i<TWO_PI; i+=0.01){
var x=xoff*16*pow(sin(i),3);
var y=-yoff*(13*cos(i)-5*cos(2*i)-2*cos(3*i)-cos(4*i));
vertex(x,y);
}
endShape();
pop();
}
For this project, I wanted to create a dynamic feeling of heartbeat using the Heart Curve.
The project that inspired me is Kepler, developed by Roberto Fazio. Kepler is an interactive immersive experience based on NASA open data describing in real-time the properties and features of most exoplanets discovered up to the present time. I think the concept of having real-time updates instead of using the algorithm to summarize the data collected over years is very intriguing. Also, the way they visualize data in virtual reality creates a fresh sensation and curious experience, which is suitable media for the content Kepler displays-always going beyond the limits of the knowledge, proceeding into the unknown world.
video of “Kepler”
As for the algorithm, I know that Kepler is recorded in real-time from the Unity 3D application. I happened to know a little bit of unity. It is a very powerful software that combines coding, visualization, and even more functions, which allows artists, designers, and developers to create a real-time 3D immersive experience together.
Kepler’s representation of exoplanet
In the past, perhaps most people learn about exoplanet through documentary film or vague images captured by spacecraft, which do not necessarily convey the thrillingness of the discovery. I would say the creator’s sensibility is manifest through finding the most suitable media that perfectly embody the content, which, according to the creator, “ shapes the relationship between creative technologies and anthropic observation, placing humankind as witness of the multisensory artistic experiment.”
Bible Cross References Data visualization, Chris Harrison and Christoph Röhmild, 2007. It resembles a rainbow, similar to Noah’s Ark mentioned in the Bible.
This data visualization was a collaboration between Chris Harrison and Christoph Römhild. The data visualization depicts all of the cross-references in the Bible. There were over 63,000 cross references in total, and the challenge was to visualize this large amount of information in an elegant way. The bar graph at the bottom of the visualization represents all the chapters in the Bible. The length of each bar depicts the length of each chapter. Each cross reference is depicted by an arc, and the color of each arc corresponds to the stance of the cross reference between the chapters.
I admire the visual aspect of the data visualization. The data visualization was made so it resembles a rainbow, which also has symbolic meaning in the famous story from the Bible, “Noah’s Ark.” The connection between the Bible and data visualization was very interesting and relevant to the information Harrison was displaying.
I’m now sure about the algorithms that generated the work, but I think Harrison used an algorithm that was able to find cross references in the Bible, and compute its distance across chapters. Then, he would change the colors of the arcs based on the distance.
I played around with some of the different roulettes I found on Wolfram Math World. I wanted my project to have a psychedelic effect and change colors depending on the location of the mouse. If you move your mouse around the screen, the colors and sizes of the shapes change on the screen. The background color also changes based on the which quadrant the mouse is in.
My favorite part of the project was experimenting with the shapes’ equations. A simple change in a subtraction sign, variable, or coefficient can drastically change the shape. I also attached a few screenshots below of what the program looks like at different mouse locations.
var a; //radius of fixed circle
var b; //radius of moving circle
var h = 10; //height of the moving circle
var theta;
function setup() {
createCanvas(480, 480);
background(220);
}
function draw() {
drawBackground();
for (var x = 0; x <= 480; x += 120) {
for (var y = 0; y <= 480; y += 120) {
push();
translate(x+60, y+60);
drawEpitrochoid();
pop();
}
for (var y = 0; y <= 480; y += 120) {
push();
translate(x + 60, y + 60);
drawRanunculoid();
pop();
}
for (var y = 0; y <= 480; y += 120) {
push();
translate(x + 60, y + 60);
drawInnerRanunculoid();
pop();
}
}
}
//background changes color based on what quadrant the mouse is in.
function drawBackground() {
if (mouseX < width / 2 & mouseY < height / 2) {
background(51, 0, 54);
} else if (mouseX < width / 2 & mouseY > height / 2) {
background(173, 178, 211);
} else if (mouseX > width / 2 & mouseY < height / 2) {
background (47, 57, 77);
} else {
background (86, 102, 107);
}
}
//draws large epitroid in the background
function drawEpitrochoid() {
strokeWeight(0);
fill(mouseX + 100, mouseY + 100 , 223);
beginShape();
a = map(mouseX/2, 0, 480, 1, 50);
b = map(mouseY/2, 0, 480, 1, 50);
h = map(mouseX/2, 0, 480, 1, 50);
for (var i = 0; i < 480; i++) {
var x = (a+b) * cos(theta) - h * cos(((a+b) / b) * theta);
var y = (a+b) * sin(theta) - h * sin(((a+b) / b) * theta);
var theta = map(i, 0, 360, 0, TWO_PI);
vertex(x, y);
}
endShape();
}
//draws flower-like shape
function drawRanunculoid() {
strokeWeight(0);
fill(mouseY / 5, mouseX / 5, 77);
beginShape();
a = map(mouseY/10, 0, 480, 1, 50);
b = map(mouseY/10, 0, 480, 1, 50);
h = map(mouseX/10, 0, 480, 1, 50);
for (var i = 0; i < 480; i++) {
var x = a * (6 * cos(theta) - cos(6 * theta));
var y = a * (6 * sin(theta) - sin(6 * theta));
var theta = map(i, 0, 360, 0, TWO_PI);
vertex(x, y);
}
endShape();
}
//draws inner flower-like shape
function drawInnerRanunculoid() {
strokeWeight(0);
fill(mouseY + 80, mouseY - 50, 100);
beginShape();
a = map(mouseX/10, 0, 480, 1, 30);
b = map(mouseY/10, 0, 480, 1, 30);
h = map(mouseX/10, 0, 480, 1, 30);
for (var i = 0; i < 480; i++) {
var x = a * (6 * cos(theta) - cos(6 * theta));
var y = a * (6 * sin(theta) - sin(6 * theta));
var theta = map(i, 0, 360, 0, TWO_PI);
vertex(x, y);
}
endShape();
}
These are some screenshots of the program at different mouse locations including top left, top right, bottom left, bottom right, and center.
This week, I decided to look into the visualization of data on the NASDAQ Stock exchange. The different examples all represent a single minute of trade that occurs, the images on the top using a unique color to represent the trader, and the images on the bottom using unique colors to represent each stock. When there is a big grouping of the same color on the top, it means that the same trader is buying and selling stocks. If this occurs on the bottom, it means that a single stock is going through different transactions. The reason why I chose this project is because I thought it was really interesting to see how a very complicated topic like trading can be simplified and visualized with colors. I am in awe of how the creator broke down the system and found out the most efficient way to represent the concept. Not only does the visualization hold value and meaning, simply put, the project is very visually pleasing and engaging. It holds the viewer’s attention on the screen due to the movement and engagement, which is also useful to begin understanding the extent and depth of this project.
//Robert Rice
//rdrice
//Section C
var today = new Date();
var years = today.getFullYear()
var months = today.getMonth();
var days = today.getDate() + months*30.42; //calculates days based on the average number of days in each month
var hours = today.getHours() //aproximately correct for any given day in the year
var minutes = today.getMinutes()
var seconds = today.getSeconds();
var v = [years%1000/100, years%100/10, years%10, days, hours, minutes, seconds] //the current values for centuries, decades, years, days, hours, minutes, & seconds
var t = [10, 10, 10, 365, 24, 60, 60] //the total number of each unit in one cycle
var r = [] //radii for centuries, decades, years, days, hours, minutes, seconds squares (calculated below)
var s = [1.902*Math.pow(10, -10), 1.902*Math.pow(10, -9), 1.902*Math.pow(10, -8), 1.902*Math.pow(10, -7), 0.0000694, 0.00167, 0.1] //speeds, degrees per frame
var a = [0, 0, 0, 0, 0, 0, 0] //angles, 0 by default for testing
var w = [] //stroke weight
var iw = 5 //the stroke weight of the indicator squares
function setup() {
createCanvas(600, 600);
background(0);
angleMode(DEGREES);
rectMode(CENTER);
frameRate(60);
r[0] = (width/2)*sqrt(2);
w[0] = 15
print(v);
for (i=1; i<=6; i++) { //calculates the inset radii based on the first radius
r[i] = (r[i-1]/2)*sqrt(2);
}
for (i=1; i<=6; i++) { //calculates the stroke weights
w[i] = (w[i-1])/2;
}
for (i=0; i<=6; i++) { //sets all the starting angles based on current date & time
a[i] = (v[i]/t[i])*360
}
}
function draw() {
background(50);
noFill();
translate(width/2, height/2);
stroke(255);
for (i=0; i<=6; i++) {
push();
rotate(a[i]); //moves the rectangle
a[i] = a[i] + s[i];
strokeWeight(w[i]);
rect(0, 0, r[i], r[i]); //creates the actual rectangle
strokeWeight(iw); //creates an indicator rectangle to help the viewer understand where in the rotation everything is
rect(r[i]/2 - 5 - (w[i]/2), r[i]/2 - 5 - (w[i]/2), 5, 5); //"start" is all indicators at bottom right corner
pop();
}
}
var w = 100; //color change
var h; //hour
var m; //minute
var s; //second
var c = []; //color gradient setup
function setup() {
createCanvas(480, 480);
for (var i = 0; i < 12; i++) {
c[i] = color(w, mouseY, 200);
if (i > 6) {
w -= 20;
} else {
w += 20;
}
}
background(220);
strokeWeight(0);
frameRate(10);
}
function draw() {
h = hour();
s = second();
//hours
if(h<12) {
background(0, 50*h,50 );
} else {
background(0,255-50*(h-12),50);
//setup
translate(240, 240);
circles();
//minutes
rotate(radians(6));
fill(mouseY, m * 5, 200);
push();
ellipse(0, 0, 100, m);
pop();
}
//seconds
rotate(radians(6));
fill(mouseX, 100 - s * 5, 200);
push();
rotate(radians(s * 6));
ellipse(0, 0, 100, 2 * s);
pop();
}
function circles() {
for (var i = 0; i < 12; i++ ) {
fill(c[i] - 200);
circle(300, 0, 100);
rotate(radians(30));
}
for (var i = 0; i < 12; i++ ) {
fill(c[i] - 100);
circle(200, 0, 100);
rotate(radians(30));
}
for (var i = 0; i < 12; i++ ) {
fill(c[i]);
circle(150, 0, 100);
rotate(radians(30));
}
}
You can move the mouse around to change the color. This design was inspired by the loading buttons on websites. Loading buttons often remind me of how slowly time passses, so I used the circles in loading buttons as inspiration for my clock.
example of loading buttons
By the hour, the background gets darker or lighter. By the minute, the shade of the circle in the center background changes gets lighter. By the second, the circle in the middle grows wider, and resets after one minute.
Tree Growth is a piece of computer generated art that uses randomness to generate realistic looking trees of all shapes and sizes. It uses various leaf shapes and different species of trees, and the leaf color can also change based on the different seasons. I find this artwork really fascinating because the algorithm makes the trees look almost photo-realistic, which sets it apart from other computer-generated tree art. Its use of randomness is what makes the trees look very realistic. As a painter, I know that creating leaves on trees is a very random process, and the program accurately mimics this random process.
https://www.jerthorp.com/treegrowth
To create this art, Thorp used the Lindenmayer Systems. In 2006, the artwork was featured in the “Into the Woods” collection in London at the Digital Well Being Labs.
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
