Category Archives: Uncategorized

Brandon Taylor

23 Jan 2014

Dataset – Fangraphs Baseball Stats

I’m a huge baseball fan and really like advanced stats research.  Fangraphs has impressive datasets available, down to the batted ball data.  I’m not sure what I want to do with this, but I feel like there are interesting possibilities.

Provocative Viz – Famous Movie Quotes

Mostly, the Soylent Green (#77) plot makes me very happy.  Conceptually, I like this, but the execution isn’t great across the board.  The quantity helps on that front, but I think paring out some of the quotes that are more picture than plot (#66) would be better.

Well-Crafted Viz – Internet Maps

These plots just look nice.

 

 

Kevyn McPhail

23 Jan 2014

The Letter P


/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('P', {
 
// Enter your name
author: 'Kevyn Mc',
 
// Enter a personal website, must have http
website: 'http://digital-love.squarespace.com/',
 
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
var polygon_A = anitype.makePolygon(points);
// Set an initial state
 
//Create pulsating rotation
anitype.addTween(polygon_A, {
to: { scale: 2, rotation: 2*Math.PI},
easing: Anitype.Easing.Exponential.Out,
update: function() {
anitype.addTween(polygon_A, {
to: {scale: 0, rotation: -2*Math.PI},
easing: Anitype.Easing.Exponential.In,
duration: 0.3,
start: 0.7
});
},
duration: 0.6,
start: 0
});
// Return your polygon wrapped in a group.
return two.makeGroup(polygon_A);
 
}
 
});

 The Letter A


/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('A', {
 
// Enter your name
author: 'Kevyn Mc',
 
// Enter a personal website, must have http
website: 'http://digital-love.squarespace.com/',
 
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
// Set an initial state
polygon.vertices[0].set(-215,329);
polygon.vertices[1].set(0,-329);
polygon.vertices[2].set(215,329);
polygon.vertices[3].set(-160,158);
polygon.vertices[4].set(160,158);
 
// Create the animation via a tween
function moveVert(vert, x1, x2, y1, y2){
anitype.addTween(vert, {
to: { x: x1, y: y1 },
easing: Anitype.Easing.Elastic.Out,
update: function() {
anitype.addTween(vert, {
to: {x: x2, y:y2},
easing: Anitype.Easing.Elastic.Out,
duration: 1,
start: 0
});
},
duration: 1, // Value from 0 - 1
start: 0 // Value from 0 - 1
});
}
 
moveVert(polygon.vertices[0],-700,-215,389,329);
moveVert(polygon.vertices[1],0,-0,230,-329);
moveVert(polygon.vertices[2],700,215,389,329);
moveVert(polygon.vertices[3],-900,-160,188,158);
moveVert(polygon.vertices[4],900,160,188,158);
 
// Return your polygon wrapped in a group.
return two.makeGroup(polygon);
 
}
 
});


/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('A', {
 
// Enter your name
author: 'Kevyn Mc',
 
// Enter a personal website, must have http
website: 'http://digital-love.squarespace.com/',
 
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
//var polygon = two.makePolygon(points);
var line_1 = two.makeLine(-215,329,-215,-329);
var line_2 = two.makeLine(215,329,215,-329);
var line_3 = two.makeLine(0,-329,0,-329);
 
//CreateVertices
//line_1
line_1.vertices[0].set(0,329);
line_1.vertices[1].set(0,-329);
 
//line_2
line_2.vertices[0].set(0,329);
line_2.vertices[1].set(0,-329);
 
//line_3
line_3.vertices[0].set(0,0);
line_3.vertices[1].set(0,0);
 
//Create the animation via a tween
function moveVert(vert, x1, x2, y1, y2,start,duration){
anitype.addTween(vert, {
to: { x: x1, y: y1 },
easing: Anitype.Easing.Linear.Out,
update: function() {
anitype.addTween(vert, {
to: {x: x2, y:y2},
easing: Anitype.Easing.Elastic.Out,
duration: duration,
start: start
});
},
duration: duration, // Value from 0 - 1
start: start // Value from 0 - 1
});
}
 
moveVert(line_1.vertices[1],0,215,-329,-329,0,.5);
moveVert(line_2.vertices[1],0,-215,-329,-329,.25,.5);
 
moveVert(line_3.vertices[0],0,-160,0,487,0,1);
moveVert(line_3.vertices[1],0,160,0,487,0,1);
 
// Return your polygon wrapped in a group.
return two.makeGroup(line_1,line_2,line_3);
 
}
 
});

Collin Burger

23 Jan 2014


My interpretation of the letter ‘I’ was inspired by the word “I” in English. While brainstorming about this letter, I began to think more about the word “I” and wrote “I thinks very highly of itself.” So I animated an “I” that does not think it  should be bound by its 1000×1000 pixel box. I looked at Max Hawkins’ code for ‘I’ to figure out how to get extra points from the ones given and fill them to form a polygon that resembles an ‘I’.

My Code for ‘I’:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('I', {
  // Enter your name
  author: 'Collin Burger',
  // Enter a personal website, must have http
  website: 'http://github.com/cyburgee',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    _.each(points, function(p) { console.log(p.x)});
    _.each(points, function(p) { console.log(p.y)});
    var left = _.map(points, function(p){ return p.clone(); });
    for (var i = 0; i < left.length; i++){
      left[i].x = -1;
    }
    var right = _.map(points, function(p){ return p.clone(); });
    for (var k = 0; k < right.length; k++){
      right[k].x = 1;
    }
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    anitype.addTick(function(t) {
      for (var i = 0; i < all.length; i++){
      if(all[i].x < 0)
        all[i].x = -470*Math.sin(t*Math.PI) + 1;
      else
        all[i].x = 470*Math.sin(t*Math.PI) - 1;
 
      if (all[i].y < 0)
        all[i].y = -337 - 130*Math.sin(t*Math.PI);
      else
        all[i].y = 337 + 130*Math.sin(t*Math.PI);
      }
 
      polygon.fill = polygon.stroke;
 
    },Anitype.Easing.Cubic.Out);
    //Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, and Sinusoidal.
 
     var polygon = new Two.Polygon(all,true);
 
    var ret = two.makeGroup(polygon);
 
    // Return your polygon wrapped in a group.
    return ret;
  }
 
});

Max Hawkins’ Code for ‘I’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Anitype.register('I', {
  author: 'Max Hawkins',
  website: 'http://maxhawkins.me/',
 
  construct: function(two, glyph) {
    var anitype = this;
 
    var points = anitype.makePolygon(glyph)
      .subdivide()
      .vertices;
    points = _.rest(points);
 
    var left = _.map(points, function(p){ return p.clone(); });
    var right = _.map(points, function(p){ return p.clone(); });
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    function sinOffset(time, max, min, point, i) {
        var offset = (i / points.length) + time;
        var osc = Math.sin(offset * Math.PI * 2) / 2 + 0.5;
        point.x = osc * (max - min) + min;
    }
 
    anitype.addTick(function(t){
 
      var leftOffset = _.partial(sinOffset, t, -30, -50);
      _.each(left, leftOffset);
 
      var rightOffset = _.partial(sinOffset, t, 30, 50);
      _.each(right, rightOffset);
 
      polygon.fill = polygon.stroke;
    });
 
    var polygon = new Two.Polygon(all, true);
 
    return two.makeGroup(polygon);
  }
 
});


I chose to animate ‘4’ because it only had one previous entry and I thought it could use some attention.  After testing some geometric transformations, I settled on animating the phrase in the popular lexicon that represents arithmetic, which is “Two plus two equals 4.”  While I don’t think it’s a very interesting take on animating the number, I still wanted to see if I could conjure up other characters using Anitype and incorporate them into the representation of ‘4.’

My Code for ‘4’:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('4', {
 
  // Enter your name
  author: 'Collin Burger',
 
  // Enter a personal website, must have http
  website: 'http://www.github.com/cyburgee/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    var anchors2 = [];
    var too = Anitype.getEndpoints('2',1000);
    var i = 0;
    _.each(too, function(p) {
      //var comm = Two.Commands.move;
      if (i > 0 && i < 5)         anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y,            p.controls.right.x, p.controls.right.y, Two.Commands.curve));       else if (i >= 5)
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      //console.log(anchors2.pop())
      i ++;
    });
 
    var anchorsPlus = [];
    var plus = Anitype.getEndpoints('+',1000);
    i = 0;
    _.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });
 
    var anchorsEqBottom = [];
 
    var yEq = 100;
    var xEq = 150;
    anchorsEqBottom.push(new Two.Anchor(-xEq,-yEq, -xEq,-yEq, -xEq,-yEq, Two.Commands.line));
    anchorsEqBottom.push(new Two.Anchor(xEq,-yEq, xEq,-yEq, xEq,-yEq, Two.Commands.line));
 
    var anchorsEqTop = [];
 
    anchorsEqTop.push(new Two.Anchor(-xEq,yEq, -xEq,yEq, -xEq, yEq, Two.Commands.line));
    anchorsEqTop.push(new Two.Anchor(xEq,yEq, xEq,yEq, xEq,yEq, Two.Commands.line));
 
    /*_.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });*/
 
    var pointsOrig = _.map(points, function(p) {return p.clone();});
 
    var poly4 = anitype.makePolygon(points);
    var poly2 = anitype.makePolygon(anchors2);
    var polyPlus = anitype.makePolygon(anchorsPlus);
    var polyEqBottom = anitype.makePolygon(anchorsEqBottom);
    var polyEqTop = anitype.makePolygon(anchorsEqTop);
 
    poly4.scale = 0;
    poly2.scale = 1;
    polyPlus.scale = 0;
    polyEqBottom.scale = 0;
    polyEqTop.scale = 0;
 
    var duration = 0.15;
    var beginAni = 0;
    var secondAni = beginAni + duration;// + 0.01;
    var thirdAni = secondAni + duration;// + 0.01;
    var fourthAni = thirdAni + duration;// + 0.01;
    var fifthAni = fourthAni + duration;// + 0.01;
    var sixthAni = fifthAni + duration;// + 0.01;
    //console.log(fifthAni);
    //var ease = Anitype.Easing.Circular
 
    //show first 2
    anitype.addTween(poly2, {
      from: {scale: 1},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: 0, // Value from 0 - 1
      start: beginAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: secondAni
        });
      }
    });
 
    //show plus
    anitype.addTween(polyPlus, {
      from: {scale : 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Elastic.Out,
      duration: duration, // Value from 0 - 1
      start: secondAni,
      complete: function(){
        anitype.addTween(polyPlus, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: thirdAni
        });
      }
    });
 
    //show second 2
    anitype.addTween(poly2, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: thirdAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fourthAni
        });
      }
    });
 
    //show eq
    anitype.addTween(polyEqTop, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqTop, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start:fifthAni 
        });
      }
    });
    anitype.addTween(polyEqBottom, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqBottom, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fifthAni
        });
      }
    });
 
    //show 4
    anitype.addTween(poly4, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fifthAni
    });
 
    // Return your polygon wrapped in a group.
    //var group = two.makeGroup(poly2);
    var group = two.makeGroup(poly2);
    group.add(polyPlus);
    group.add(polyEqTop);
    group.add(polyEqBottom);
    group.add(poly4);
 
    return group;
 
  }
 
});

Notes:
type_1 type_2 type_3

Chanamon Ratanalert

23 Jan 2014

[It’s 5 o’clock in the morning and class is in three and a half hours..please come back later.]

Update:

Information Visualization

Interesting Dataset: The Design of a Sign
I really enjoy this dataset, probably on bias as a designer. I find this breakdown of not only the components of a sign but also the qualities of color, typography, etc. very informative and useful. It is nice to have all this information in one area for those looking to learn the basics of communication design or just for a refresher on the terms and definitions. Additionally, I really appreciate that the poster itself isn’t a perfected final sign, but a draft that alludes to the process of designing a sign, with grid lines and everything.

Provocative Project:  What are your roots
This project is very simple and not deep at all, but I quite like it and it made me think. Whenever we look at feet (if we even dare, for the podophobic), we notice the differences between everyone’s feet as much as we notice the differences in our arms. I like that this project pretty clearly shows that there are differences in our feet and that they stem from our roots. We all know that what we look like it based on our DNA and have our stereotypical expectations about eyes, noses, and height

Well-crafted Project: Lose Sleep, Lose Your Mind and Health
I enjoy the craft of this project for many reasons. First off, the idea is a prevalent issue in the world today (and in my life as a CMU student). The image is quite grabbing and draws you into the poster. I also enjoy that the layout of the progressively worsening symptoms run in a circle, similar to that of a clock, truly conveying the progression of time and lack of sleep. The clean branches into quick blurbs for further depth are important yet not bludgeoning you with their presence.

Chanamon Ratanalert

23 Jan 2014

Michael Bay ain’t got nothing on TransformingTrucks, toys customizable in #OpenSCAD by @jaguarspeaks!

After spending a good amount of time trying to make a parametric dinosaur…
Screen Shot 2014-01-23 at 3.57.53 AM
I decided to tackle a project I could do in less time. After many various sketches…

I settled on cars–namely trucks. There are various kinds of trucks you can encounter on the highway: pickup, commercial, mail, flatbed, etc. They are composed of essentially the same parts: a front with the engine and driver, a back that varies in size and function, and wheels. This idea stemmed from my recent encounter with the game Rush Hour, breaking off from the point where I wanted to be able to construct the game pieces.
My results are okay, for the moment. I hope to be able to make them more detailed and more flexible to various car shapes in the future. For now, they remain blockish-type toys, similar to ones that could be constructed out of wood. I am glad that I was able to figure out an idea and set of variables that would create multiple versions of the same item, but be flexible enough to create more differentiated objects. By changing the variables enough, you can transform a pickup to a flatbed–a transformation that changes the object almost entirely rather than just changing a few small characteristics.
*As you can see in the code below, some commented out code when put back in will round out a number of edges and wheels of the trucks. My computer just couldn’t handle the render of them.

truck1-2
(sorry the resolution isn’t as high as it should, WordPress wasn’t agreeing with me)

truck4

truck2

The two qualities I selected to aim for with the trucks were interesting and useful. Personally, I find it interesting that different cars that you think are completely different (where a layman could drive a pickup but a greasy, chubby trucker owns his commercial truck) are essentially the same when broken down. Fiddling with the variables and coming out with almost entirely different trucks that belong in the same family is an interesting task. Additionally, I find this mockup of trucks useful for 3-D printing children’s toys. I hope to continue to work on this to have the wheels be independent of the truck and on axle so that they turn when printed. This project is also useful for experimentation with variability within parametric bounds.

The Thing thing
Truck.scad on Github

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

$fn = 128;
 
//front
fwidth = 50;
fheight = 50;
fz = 25;
roundness = 4;
//minkowski(){
	color("red") union(){
		rotate([90,0,0]) cube([fz, fwidth, fheight]);
		translate([20,0,0]) rotate([90,0,0]) cube([fz,fz,fwidth]);
	}
	//sphere(roundness);
//}
 
//back
bwidth = fwidth;
bheight = fheight/2;
blength = 80;
xd = 5; //extrusion difference (thickness of truck rim)
depth = 10;
color("red") rotate([0,0,180]) difference(){
	cube([blength, bwidth, bheight]);
	translate([xd,xd,depth]) cube([blength-2*xd, bwidth-2*xd, bheight+depth]);
}
 
//wheels
thickness = 10;
x = 15;
y = thickness/2;
z = 0;
i = 5;
wheelround = 1;
//minkowski() {
	difference(){
		color("black") translate([x,y,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/2);
		translate([x,y+i*1.5,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/4);
		translate([x,y-i*1.5,z]) rotate([90,0,0]) cylinder(h = i, r = fz/4);
	}
	//sphere(wheelround);
//}
//minkowski() {
	difference(){
		color("black") translate([x,y-fwidth,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/2);
		translate([x,y+i*1.5-fwidth,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/4);
		translate([x,y-i*1.5-fwidth,z]) rotate([90,0,0]) cylinder(h = i, r = fz/4);
	}
	//sphere(wheelround);
//}
//minkowski() {
	difference(){
		color("black") translate([x-blength,y,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/2);
		translate([x-blength,y+i*1.5,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/4);
		translate([x-blength,y-i*1.5,z]) rotate([90,0,0]) cylinder(h = i, r = fz/4);
	}
	//sphere(wheelround);
//}
//minkowski() {
	difference(){
		color("black") translate([x-blength,y-fwidth,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/2);
		translate([x-blength,y+i*1.5-fwidth,z]) rotate([90,0,0]) cylinder(h = thickness, r = fz/4);
		translate([x-blength,y-i*1.5-fwidth,z]) rotate([90,0,0]) cylinder(h = i, r = fz/4);
	}
	//sphere(wheelround);
//}

Yingri Guan

23 Jan 2014

I am always fascinated by the complexity of fractals. I was inspired to create a 3D fractal. However, the design came out to be a little disappointment as I wished to have more intricate structures in the design.

 

7521

image

 

This parametric design made reference to the design by Espen Skjervold.
Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

//Referenced Espen Skjervold's work 2013
 
 
 
//constants
maxX=20;			//< -- less important, size of the biggest object
sizeFactor=2.3;   //<-- The size factor between an object and its child objects. The smaller the factor, the larger the children will be. 
 
 
fractal(4); // <--- render the fractal with n number of levels
 
 
 
//Recursive method
module fractal(levels, i=1, xPos=0, yPos=0, zPos=0) {			
 
	currentFactor=pow(sizeFactor,i);
	x=maxX/currentFactor;
 
 
	if (i<=levels) {
 
 
		//top	
		fractal(levels, i+1, xPos , yPos , zPos);
		fractal(levels, i+1, xPos , yPos , zPos);
		fractal(levels, i+1, xPos*2 , yPos*2 , zPos*0.5);
		fractal(levels, i+1, xPos*0.7 , yPos*0.5 , zPos*0.4 );
		fractal(levels, i+1, xPos +x/2, yPos + x/2, zPos + x/2);
		fractal(levels, i+1, xPos -x/2, yPos + x/2, zPos + x/2);
		fractal(levels, i+1, xPos +x/2, yPos - x/2, zPos + x/2);
		fractal(levels, i+1, xPos -x/2, yPos - x/2, zPos + x/2);
 
		//bottom	
		fractal(levels, i+1, xPos , -yPos , -zPos );
		fractal(levels, i+1, xPos , yPos , -zPos );
		fractal(levels, i+1, xPos*3 , yPos*3 , -zPos*3 );
		fractal(levels, i+1, xPos*0.2 , yPos*0.4 , -zPos*0.5 );
		fractal(levels, i+1, xPos*1.3 , yPos*1.5 , -zPos*2 );
		fractal(levels, i+1, xPos*0.7 , yPos*0.5 , -zPos*0.4 );
		fractal(levels, i+1, xPos +x/2, yPos + x/2, -zPos - x/2);
		fractal(levels, i+1, xPos -x/2, yPos + x/2, -zPos - x/2);
		fractal(levels, i+1, xPos +x/2, yPos - x/2, -zPos - x/2);
		fractal(levels, i+1, xPos -x/2, yPos - x/2, -zPos - x/2);
 
 
		makeCube(x, xPos, yPos, zPos, i);
	}
 
 
 
}
 
 
//The actual rendering of each object
module makeCube(x, xPos, yPos, zPos, level) {
 
	union() {
 
		translate([xPos+x/2, yPos, zPos]) 
			color(["Coral"]) 
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos-x/2, yPos, zPos]) 
			color(["Coral"]) 
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos+x/2, zPos]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos-x/2, zPos]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos, zPos+x/2])
			color(["Coral"])    
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos, zPos-x/2])
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos*0.5, -zPos]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos*0.5, zPos]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos, -zPos*0.5]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos, zPos*0.5]) 
			color(["Coral"])  
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*0.5, yPos, -zPos]) 
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*0.5, yPos, zPos]) 
			color(["Coral"]) 
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*0.5, yPos*0.5, -zPos]) 
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*0.5, yPos*0.5, zPos]) 
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*2, yPos*2, -zPos])
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos*2, yPos*2, zPos])
			color(["Coral"])     
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos*2, -zPos*2])
			color(["Coral"])    
			cube((x)/1.4, center=true, $fn=10 );
 
		translate([xPos, yPos*2, zPos*2]) 
			color(["Coral"])   
			cube((x)/1.4, center=true, $fn=10 );
 
	}		
}

Yingri Guan

23 Jan 2014

I think Letter Z reminds me of really strong motion, almost like swiftly swinging the arms. Sometimes I also associate it with lightening as the shape gives its sharp look.


This letter is referencing Karadox‘s work of Letter A on AniType. I was looking for a source code to generate a swift motion and came across his work.

image-2

 

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('Z', {
 
  // Enter your name
  author: 'Yingri Guan',
 
  // Enter a personal website, must have http
  website: 'http://yingriguan.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    this.duration = 1000;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    // Set an initial state
    polygon.vertices[0].set(-200, 345);
    polygon.vertices[1].set(-200, -345); // top
    polygon.vertices[2].set(200, -345); // right bottom
    polygon.vertices[3].set(-200, 345); // left short arm
    //polygon.vertices[4].set(215, 328); // left short arm
    // Create the animation via a tween
 
    anitype.addTween(polygon.vertices[0], {
      to: { x: -200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[1], {
      to: { x: 200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: -200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[3], {
      to: { x: 200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

I picked “8” because it symbolizes good fortune in Chinese culture. With the advent of Chinese New Year, I am inspired to create a dancing “8” to celebrate this auspicious festival.  This was an accident as I was playing with Quasimondo‘s code on AniType.


image-1

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/**
 Anitype.register('8', {
 
  author: 'Yingri Guan',
 
  website: 'http://yingriguan.com/',
 
  construct: function(two, points) {
 
    var anitype = this;
 
    var polygon = anitype.makePolygon(points);
    polygon.subdivide(5);
   var circles = _.map(polygon.vertices, function(v) {
          return two.makeCircle(0, 0, 12);
        });
 
    anitype.addTick(function(percent){
 
    var t = [];
    var l = polygon.vertices.length;
 
     for ( var i = 0; i &lt; l; i++ )
     {
       var p = (percent * 8) % 1;
       var v1 =polygon.vertices[i];
      var v2 = polygon.vertices[(i+8)%l];
        t[i] = {x: v1.x + p * ( v2.x - v1.x),
                y: v1.y + p * ( v2.y - v1.y)};
      }
 
      for ( i = 0; i &lt; circles.length; i++ )
      {
        var c =circles[i];
        c.translation.x = t[i].x;
        c.translation.y = t[i].y;
      }
 
    });
 
    return two.makeGroup(circles);
  }
 
});

Nastassia Barber

23 Jan 2014

I was assigned the letter ‘s’ and chose the letter ‘v’ because there weren’t many submissions and it looked lonely. I like both of these letters a lot for whatever arbitrary reason people like letters.  I wanted to do an untangling/expansion type thing for the ‘s’ because it looks a bit like string, but the actual details and method I ended up using were pretty accidental.

sketch

Letter S


This is forked from Chris Delbuck, below:


Letter V


My favorite letter I discovered while working on this project is this one:


I love how much personality this letter has.  I feel like that ‘y’ sometimes.

 

 
Code for the ‘S’

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('S', {
 
  // Enter your name
  author: 'vermilly',
 
  // Enter a kickback website, must have http
  website: 'http://twitter.com/vermilly',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
    _.each(polygon.vertices, function(vert, i){
      vert.oY = vert.y;
      vert.oX = vert.x
      var time = { value: 0 }
      anitype.addTween(time, {
        to: { value: 1 },
        easing: Anitype.Easing.Sinusoidal.InOut,
        duration: 0.2, 
        start: 0,
        update: function() {
          vert.x = (1); 
          vert.y= .1*vert.oY;
        }
      });
 
      anitype.addTween(time, {
        to: { value: 1 },
        easing: Anitype.Easing.Sinusoidal.InOut,
        duration: 0.2, 
        start: 0.2,
        update: function() {
          vert.x = (1); 
          vert.y= .2*vert.oY;
        }
      });
 
      anitype.addTween(time, {
        to: { value: 1 },
        easing: Anitype.Easing.Sinusoidal.InOut,
        duration: 0.2, 
        start: 0.4,
        update: function() {
          vert.x = (1); 
          vert.y= .4*vert.oY;
        }
      });
 
      anitype.addTween(time, {
        to: { value: 1 },
        easing: Anitype.Easing.Sinusoidal.InOut,
        duration: 0.2, 
        start: 0.6,
        update: function() {
          vert.x = (1); 
          vert.y= .8*vert.oY;
        }
      });
 
      anitype.addTween(time, {
        to: { value: 1 },
        easing: Anitype.Easing.Sinusoidal.InOut,
        duration: 0.2, 
        start: 0.8,
        update: function() {
          vert.y = (1*vert.oY);
          vert.x = vert.oX;
        }
      });
    })
 
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

Code for the ‘V’:

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('X', {
 
  // Enter your name
  author: 'vermilly',
 
  // Enter a personal website, must have http
  website: 'http://twitter.com/vermilly',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
    // Set an initial state
    //polygon.scale = 0.5;
    polygon.vertices[0].set(-200, -350); // left top -186, -337
    polygon.vertices[1].set(0, 350); // left bottom 186, 337
    polygon.vertices[2].set(0, 350); //right top 186, -337
    polygon.vertices[3].set(200, -350); // right bottom -186, 337
 
    anitype.addTween(polygon.vertices[3], {
        to: { x: 0, y: -400},
        easing: Anitype.Easing.Elastic.Out,
        duration: 0.1,
        start: 0.0,
     });
    anitype.addTween(polygon.vertices[0], {
        to: { x: -350, y: -250},
        easing: Anitype.Easing.Elastic.Out,
        duration: 0.1,
        start: 0.0,
        complete:function(){
          anitype.addTween(polygon.vertices[0], {
                to: { x: -300, y:-300},
                easing: Anitype.Easing.Elastic.Out,
                duration: 0.2,
                start: 0.1,
                complete:function(){
                  anitype.addTween(polygon.vertices[0], {
                        to: {x: -200, y:-350},
                        easing: Anitype.Easing.Elastic.Out,
                        duration: 0.2,
                        start: 0.3,
                  complete:function(){
                  anitype.addTween(polygon.vertices[0], {
                        to: {x: 0, y:-400},
                        easing: Anitype.Easing.Elastic.Out,
                        duration: 0.2,
                        start: 0.5,
                    complete:function(){
                    anitype.addTween(polygon.vertices[0], {
                          to: {x: -200, y:-350},
                          easing: Anitype.Easing.Elastic.Out,
                          duration: 0.1,
                          start: 0.7,
                    });
                    anitype.addTween(polygon.vertices[3], {
                          to: {x: 200, y:-350},
                          easing: Anitype.Easing.Elastic.Out,
                          duration: 0.1,
                          start: 0.7,
                    });
                }
              });
             } 
           });
          }
        });
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
}
});

Nastassia Barber

23 Jan 2014

Color Flower

This visualization is super whimsical and prompted me to spend quite a while looking at all of the different color names.  It’s a “flower” shape made of the names generated by people when asked to name colors.

I really like the simplicity of this idea and how effectively it shows the variations in color naming schemes and the sheer number of different color names.

Wealth Inequality in America

This video is definitely provocative, as I saw it shared on Facebook and clicked on it myself.  I think it does a pretty good job of illustrating statistics in a way that will inspire/anger people without being super sensationalist or pandering to the viewer.  The visuals are pretty good, too, and really illustrate how big the difference is between very rich and very poor Americans more than numbers could.  I did think the video was a little repetitive, but overall really interesting even to someone with only a passing interest.

The Art of Reproduction

This project shows the discrepancies in color (and even shape) in internet reproductions of famous artwork.

This is a phenomenon a lot of people have probably noticed but never thought too much about.  I think visualizing it in this way is very original and pretty funny, too.  The variety of colors for the same patch of skin is far greater than I could have imagined.

Andrew Sweet

23 Jan 2014

Provocative

While not fancy in any fashion, this collection of data brings perspective to how customers treat those around them. An aggregation of how many customers fractionally swear when dealing with an employee in a given industry, this simple collection brings up a lot about how we’re willing to by angered by certain professionals more than others.

Well Made

This captured dataflow from Foursquare shows the pulse of a city. With simple color coding and a dynamic key to the map, the view can easily get a good-looking view of motion, as well as different types of activities that happen around the city, and where they are clustered, without having to get into the details of the individual, but thinking of the population as a whole instead. Seeing the rush hour traffic versus the few hours of night where very little activity takes place really juxtaposes well visually.

Interesting Dataset

Take 10 seconds, and slow it down to three minutes. Then watch as the numbers fly rapidly across the screen in very organized, clustered back and forth motions. 10 Seconds of Extreme Trading in Blackberry shows just that. The visuals look like some old Atari game, with bright colors and fast moving parts on a black backdrop. The data itself though is fascinatingly fast. This extreme flow of numerous individuals predicting, guessing, and following the crowd as fast as possible. While this particular video isn’t completely understandable to the layman (like myself), the motion itself reveals much more than the individual numbers involved, making this representation of the particular data very well done.