ManyMaps is one of the custom software created by Rachel Binx. She is currently working at Netflix, with the content Science & Algorithms team in Los Angeles. She is an American data visualizer, developer, and designer. She is the co-founder of Meshu and Gifpop, two companies that create physical objects, such as maps and animated GIFs, from social data. For this particular project, it is a site for designing our own map prints. The site is built on Shopify, and Rachel Binx made the site end-to-end, including concept, frontend and backend code, visual design, and photography. It is made possible by OpenStreetMap, which is the largest open-source mapping community in the world. The individual data tiles come from Mapzen, an open-source mapping company. All of the posters and canvas prints are made in the USA.
Overall, I really enjoyed this software/website as I am able to create my own design of the place I like. For example, the place I chose there is Beijing, China where is my hometown. By selecting my favorite colors with the important location, I was able to build a connection with the place even though I am not physically there.
The design page for the users creating their dream map | updated 2017The poster I designed for my hometownThe samples/art works presented on the website
//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 07: Curves
var x;
var y;
var z;
function setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(0);
//adjusting placement & size of curves
translate(width/2, height/2);
scale(150)
limit = (map(mouseX, 0, width, 2, 8)); //caps the # of loops
limit2 = (map(mouseY,0,height,20, 80)) //caps the # of loops
push();
scale(3,3)
rotate(radians(90));
push();
rotate(mouseY,0,height,0,360)
drawLoxoB();
pop();
drawLoxo();
pop();
}
function drawLoxo() {
//a controls how many strokes there are in terms of representing the loxodrome
for (var a=.4; a<limit; a+=.2) {
//color change mapped to a
var rValue = (map(a, 0.4, 4, 0, 360))
fill(rValue);
beginShape(QUADS);
for (var t = -20; t <limit2; t+=.1) {
x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
vertex(x, y);
}
endShape();
}
}
function drawLoxoB() {
for (var a=.4; a<limit; a+=.2) {
var rValue = (map(a, 4, 0.4, 0, 360))
fill(rValue);
beginShape(QUAD_STRIP);
for (var t = -20; t <limit2; t+=.1) {
x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
vertex(x, y);
}
endShape();
}
}
I was looking at a few different curves but was most inspired by the loxodrome which I decided to try to replicate 2-dimensionally.
I wanted to create something a little haunting, but still somewhat visually exciting in the spirit of October, and as a result this is what I came up with. It brings to mind for me, the headlight of a train as it’s running towards you inside of a tunnel.
//Claire Koh
//Section E
//juyeonk@andrew.cmu.edu
//Project-07
function setup() {
createCanvas(480, 480); //sets the size of the canvas
}
function draw() {
background(0);
translate(width/2, height/2); //so that the shapes would begin from the center of the canvas
drawStar();
drawRose();
}
//this function will generate the outer shape. There is no specific name for this curve. I invented this 🙂 Also it's called drawStar because it'll draw a star if you move your mouse towards the furthermost right side of the canvas.
function drawStar() {
var flicker = random(240, 255); //will be used to make the star flicker
var transparency = random(100,200); //also will be used to make the star flicker by controlling its transparency
var gradient = map(mouseX, 0, width, 0, 255)
var a = constrain(mouseX, 50,480);
var n = constrain(mouseX, 50,480);
if (a != 480) {
push();
rotate(mouseY/300);
fill(0);
strokeWeight(0.7);
stroke(200,255-gradient,255-gradient);
beginShape();
for (var t=0; t <= 2 * PI; t+= PI/100) {
var x = 0.5 * a * cos(n * t);
var y = 0.5 * a * sin(n * t);
vertex(x, y);
}
endShape();
}
//when the a value of the equation reaches 480, the curve's stroke color and fill color will change
else {
push();
rotate(mouseY/300);
fill(flicker, 200, 200, transparency);
strokeWeight(2);
stroke(255);
beginShape();
for (var t=0; t <= 2 * PI; t+= PI/100) {
var x = 0.5 * a * cos(n * t);
var y = 0.5 * a * sin(n * t);
vertex(x, y);
}
endShape();
pop();
}
}
//this function will draw the fixed rose in the middle of the canvas
function drawRose() {
//http://mathworld.wolfram.com/Rose.html
var a = map(mouseX, 0, width, 0, 40);
var n = map(constrain(mouseX, 0, width), 0, width, 0 , 6);
var r;
noFill();
strokeWeight(1);
stroke(255);
push();
rotate(mouseY/300)
beginShape(); // will draw the rose shape in the middle
for (var t=0; t <= 2 * PI; t+= PI/100) {
r = a*sin(n*t);
x = r * cos(t);
y = r * sin(t)
vertex(x,y);
}
endShape();
pop();
}
For this project I wanted to create a set of symmetrical curves that are somewhat related to each other for the sake of aesthetics and clarity.
The shapes starts with a square and a point in the very middle. But as you move your mouse sideways you’ll notice the outer curve changes to a drastic degree while all the inner curve is doing is just drawing more rose petals at a time. The outer shape doesn’t have a specific name; it was a result of an incorrect rose petal function but I am satisfied at how it turned out because of the variety of shapes it could create.
I added a bit of fun by making the star flicker at the end when the outer shape is complete.
Can Buyukberber is a visual artist working on immersive audiovisual experiences that’s embodied both in physical and digital spaces.
Unifield is a form experiment which attempts to explore H.S.M. Coxeter’s higher dimensional geometry studies. The work intends to trigger a timeless perception by merging both archaic and futuristic components. By using computational design techniques with a digital fabrication method and projection mapping, Unifield uses the space where digital and physical overlaps as a portal to visualization possibilities of a higher dimensional object.
It works as an ambiguous sculpture, animated with light and sound that has the qualities of this historical background and scientific studies. With this correlation, Unifield aims to transcend a single association of time, which rather is a holistic understanding.
//hamza qureshi
//hqq@andrew.cmu.edu
//section e
//project 07 - curves
function setup(){
createCanvas(480,480);
angleMode(DEGREES);
}
function draw(){
background(130,120,150);
stroke(40,40,60);
strokeWeight(0.25);
noFill();
translate(width/2,height/2); //moves shapes to center of canvas
drawEpitrochoid(); //calls function to draw epitrochoid
stroke(200,200,240);
drawHypotrochoid(); //calls function to draw hypotrochoid
}
function drawEpitrochoid(){
var p = width/2; //variable to call bounds of rotational shift
var a = map(mouseX,0,width,0,40); //remaps x-value of mouse location to adjust center diameter
var b = map(mouseY,0,height/2,0,80); //remaps y-value of mouse location to adjust radius of petals
var h = 75; //number of lines
beginShape();
for (var i = 0; i < p; i++){
var t = map(i,0,mouseX/30,0,360); //remaps i-value to correspond angularly
var x = (a + b) * cos(t)-h*cos(t*(a+b)/b); //equations for epitrochoid
var y = (a + b) * sin(t)-h*sin(t*(a+b)/b);
vertex(x,y);
endShape();
}
}
function drawHypotrochoid(){
var p = width/2;//variable to call bounds of rotational shift
var a = map(mouseX,0,width,0,10); //remaps x-value of mouse location to adjust center diameter
var b = map(mouseY,0,height/2,0,20);//remaps y-value of mouse location to adjust radius of petals
var h = 50;//number of lines
beginShape();
for (var i = 0; i < p; i++){
var t = map(i,0,mouseX/15,0,360); //remaps i-value to correspond angularly
var x = (a + b) * cos(t) + h*cos(t*(a+b)/b);//equations for hypotrochoid
var y = (a + b) * sin(t) - h*sin(t*(a+b)/b);
vertex(x,y);
endShape();
}
}
In my exploration of a dynamic image using curve functions, I chose to draw an epitrochoid and a hypotrochoid. I appreciated the fact that both shapes are essentially inverses of each other. I wanted to also work the algorithms so that one would sit within the other, but the smaller one would increase in size less exponentially than the larger one. This creates an interesting sequence of shapes that produces a variety of silhouettes of the outer curve shape while maintaining a consistently shaped interior shape.
Airbnb is a hospitality service that enables people to rent a place to stay in a multitude of locations around the world. This service is much less expensive than hotels and can be more accommodating to needs as it is renting another individual’s room, home, or even an igloo instead of a single costly hotel room. The data from all of the online transactions was recorded and Rachel Binx turned it into a work of art.
This represents Airbnb’s top 50 markets, with the thickness of the lines corresponding to the relative volume of travels between each pair.
Rachel Binx is an American data visualizer, developer, and designer. She has worked at Stemen Design and NASA and is also a co-founder of Meshu and Gifpop. While working at Stemen, she was assigned to create a visual representation of all places people have traveled to and from utilizing Airbnb. Her design utilized data from Airbnb’s top 50 markets listed in a circular pattern. Lines were then drawn in between locations with the thickness of the lines being dependent on the number of travels between each pair of locations.
Originally only designed to be on a presentation by Airbnb’s CEO, it turned into this abstract design that is both visually pleasing and informational. I really admire her design as it shows data in an interesting and intuitive manor. The data taken from the travels between areas could have easily been written out in an uninteresting fashion with places listed next to their given volume of travel. This would make it difficult to quickly examine the places with the highest/lowest volume of travel between each pair. She did not only turn the data into a easily legible design, but she turned it into artwork.
Nicholas Felton is a graphic artist, designer, and creator of BikeCycle, a data visualization set which plots activity from a bike sharing program in New York City. The information was gathered over the duration of a year and updates in real time to correspond to the same date and time of 2014 when the information was gathered. This sort of delayed but real-time data visualization is effective not only in representing the locations of particular events or paths, but it also allows for a much deeper analysis of data because it is separates information into an accurate timeline, allowing viewers to perceive changes in activity over time. The advantage of utilizing such a means of visualization over more regular representational methods is that rental bike use can be related to time of day, time of year, and other factors, data which would otherwise be lost in the quagmire of conventionally compiled data sets.
I admire this project because it takes something which appears on the surface to be intrinsically two-dimensional and static and turns it into something more that is dynamic and even more informative than the standard model for data mapping. I expect that the points are placed over a static map of New York City and that the points of an array which correspond to certain times of day are called and plotted as the time and date changes.
//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-07
var nPoints = 70; //amount of elements
var Cissoid = 0; //http://mathworld.wolfram.com/CissoidofDiocles.html
var Conchoid = 0; //http://mathworld.wolfram.com/ConchoidofdeSluze.html
var titles = ["1. Cissoid", "2. Conchoid"];
var curveMode = Cissoid;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw() {
background(255, 160, 60); //orange background
translate(240, 240); //place objects or focus on middle
drawConchoidCurve(); //draw green and pink curves in back
drawCissoidCurve(); //circles and blue lines in front
}
function drawCissoidCurve() {
var x; //defining normal plane variables
var y;
var a1 = mouseX/20; //containing area of mouse interaction based on size or stretch of curves
var a2 = mouseY/70;
stroke(130, 130, 255); //blue lines
strokeWeight(.5);
beginShape(); //creating visuals based on Cissoid of Diocles curve
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI); //making i obtain to angle which is t
x = (10 * a1 * sq(t)) / (1 + sq(t)); //formulas for x and y of curve
// 10 for x and 20 for y were used as constant values based on the composition attained in the index
y = (20 * a2 * sq(t) * t) / (1 + sq(t));
fill(250, 240, 220); //off white filling
vertex(x, y); //draws single curve in normal direction for x and y on an index
vertex(-x, y); //after adding this vertex, i noticed a greater variation and extension of the curves and lines so I continued this process
vertex(x, -y);
vertex(-x, -y);
for(var ext = 0; ext < x; ext++) { //creating visuals deviating away from the lines but controlled by the same curve
push(); //contain colors in this for loop not the colors also belonging to the blue line series
fill(150, 255, 200); //green fill
ellipse(ext * 10, -y * 5, 10, 10); //greenish/aqua series of ellipses on top right and bottom left
ellipse(-ext * 10, y * 5, 10, 10);
fill(255, 120, 160); //reddish fill
ellipse(ext * 15, -y * 19, 20, 20); //ellipses accompanying the ones in code written above
ellipse(-ext * 15, y * 19, 20, 20);
pop();
}
}
endShape(CLOSE);
}
function drawConchoidCurve() {
var x2; //defining second x and y plane variables
var y2;
var b1 = mouseX; //containment of lines based on mouse interaction
var b2 = mouseY;
stroke(255, 100, 255); //magenta strokes
strokeWeight(2); //thicker stroke
beginShape();
for (var j = 0; j < nPoints; j++) {
var ang = map(j, 0, nPoints, 0, TWO_PI); //setting the angle value same as var t in the first for loop for the Cissoid of Diocles curve
x2 = ((1 / cos(ang)) + b1 * cos(ang)) * cos(ang); //formulas for Conchoid de Sluze curve
y2 = ((1 / cos(ang)) + b2 * cos(ang)) * sin(ang);
fill(200, 255, 50); //lime green fill
vertex(x2, y2); // this initial curve also only gave be one shape at first which looked like a flower petal from the center of the frame
//this shape seemed more centered rather than side oriented like the Cissoid function so I experimented with on other vertex implementation focusing on the center of x
vertex(-x2, y2); //created an inkblot array type of line series, more angular than round
push(); // so that other functions not used before like noFill only affect these two vertex
noFill(); //no fill so there is no overwhelming green
vertex(x2 * 10, y2 * 10); //creating wider and bigger curve series of the same physical orientation and interaction
vertex(-x2 * 10, y2 * 10);
pop();
}
endShape(CLOSE);
}
//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//Assignment-06-compositionwithCurve
var t=0;
var r=60;
var curveP1;
var curveP2;
var color1=141;
var color2=141;
function setup() {
createCanvas(480, 480);
}
function draw() {
var t=map(mouseY, 0, height/4, height/2, height/4);//constrain it between hieght/2 and height/3
background(156,170,164);
noStroke();
var limit;//curve for determining how many times we want to rotate
if (mouseX<width/2){
limit=map(mouseX,0,width/2,0,16);
}else{
limit=map(mouseX, width/2, width,16,0);
}
for (var num=0;num<limit;num++){//set limit as our limit for iteration
//leafs
angleMode();
fill(200,195,167);
arc(50, 50, 140, 140, 180, 270,CHORD);//all used chord becuase we need to create
arc(50, 80, 140, 140, 200, 270,CHORD);//a effect of leaves
arc(width-50, height-50, 140, 140, 180, 270,CHORD);
arc(width-50, height-80, 140, 140, 200, 270,CHORD);
fill(104,103,78);
arc(50, 70, 160, 140, 30, 0,CHORD);
arc(60, -90, 260, 240, 190,40, CHORD);
arc(width-50, height-30, 160, 140, 30, 0,CHORD);
arc(width-50, height-90, 260, 240, 190,40, CHORD);
fill(203,169,111,70);
arc(30, -40, 260, 240, 190,40, CHORD);
arc(20, 70, 140, 140, 180, 270,CHORD);
arc(55, 115, 140, 140, 200, 270,CHORD);
arc(width-150, height-90, 260, 240, 190,40, CHORD);
arc(width-20, height-70, 140, 140, 180, 270,CHORD);
arc(width-55, height-115, 140, 140, 200, 270,CHORD);
fill(212,202,144);
arc(50, 120, 240, 240, 200, 270,CHORD);
arc(width-115, height-120, 240, 240, 200, 270,CHORD);
fill(104,103,78,100);
arc(-20, 90, 160, 140, 30, 0,CHORD);
arc(20, -90, 260, 240, 190,40, CHORD);
arc(width-80, height-90, 160, 140, 30, 0,CHORD);
arc(width-80, height-90, 260, 240, 190,40, CHORD);
//inner loop for drawing the actual curve
for (var i=0;i<670;i++){
r=mouseX/5;//set the radius to continue change
if (num%4==0){//set different conditions for determing which direction we want
var x=r*cos(t)*(1+cos(t));
var y=r*sin(t)*(1+cos(t));
}
if (num%4==1){
var x=r*cos(t)*(1-cos(t));
var y=r*sin(t)*(1-cos(t));
}
if (num%4==2){
var x=r*sin(t)*(1+cos(t));
var y=r*cos(t)*(1+cos(t));
}
if (num%4==3){
var x=r*sin(t)*(1-cos(t));
var y=r*cos(t)*(1-cos(t));
}
t+=0.97;
curveP1=width/2+num*2+x-12;//circles position x
curveP2=height/2+num+y;//circles position y
if (mouseX<width/2){
var color1=map(mouseX, 0, width/2, 200, 74);//set conditions for changing color
var color2=map(mouseX, 0, width/2, 121, 36);
}else{
var color1=map(mouseX, width/2, width, 80,200);
var color2=map(mouseX, width/2, width, 35,121);
}
rotate(PI/5.0);//for rotating shape
fill(255,color1,color2,255-mouseX/3);
var size=map(mouseX,width/2,width,2,10);//also constrain size
ellipse(curveP1,curveP2,size,size);
}
}
}
sketch before starting the project
For this project, I wanted to express the idea a flower is blooming and then dying based on our mouse movement from left of the canvas to the right. So we can see there are changes of the number of petals (increase when mouseX approaching to the center of the canvas) and decreases when mouseX leaving the center of the canvas and going to the edge. With this movement, there are also changes in color, opacity, size, and the position of each dots. The audience can play this interactive work by rotating the flower and seeing how they can transform a flower from born to death. There are also some leaves being created for decoration. Here are some screenshots of the different states of the flower.
when the flower first appear, color-light orangeWhen flowers get bigger and curves appear, color becomes darker orangewhen flower bloom and become orange red
The final state of the curves, which will be reduced to fewer curves
// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-07-Curves
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
translate(width/2, height/2); // Center drawing on canvas
drawEpitrochoid(); // Calls the function drawEpitrochoid
}
// Creates the geometry of the Epitrochoid curve
function drawEpitrochoid() {
noFill();
stroke(200, 0, 0);
var points = 750;
var x;
var y;
var h = constrain(mouseX, 0, 250)
var a = 375;
var b = a/constrain(mouseY, 0 , 250) //Constrains the width of geometry created
// by the curves between the top and bottom edge of the canvas
beginShape();
for (var i=0; i < points; i++) {
var t =map(i, 0, points, 0, TWO_PI);
// Equation of epitrochoid applied to the x and y variables
x = (a-b)*cos(t) + h*cos(((a-b)/b)*t)
y = (a-b)*sin(t) + h*sin(((a-b)/b)*t)
vertex(x, y);
}
endShape();
}
I ended up going for an Epitrochoid curve, but I bounced between that and the logarithmic spiral as an option. I played around with both, but ended up going for the Epitrochoid curve. I was initially confused about what parameters of the drawing would be controlled by what variables, but I played around with it for a while until I understood how my manipulation of the code influenced my drawing. I would suggest moving slowly across the canvas, in both x and y directions to see the full breadth of geometry generated by the code.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
