For this week’s Looking Outwards, I chose to read about and look at was a 3D printed “fabric” made by the 3D print service “Digits2Widgets” in 2014, which was presented at NYC’s 3D Printshow. The 3D printed material is made to be flexible like cloth of fabric. I found it fascinating that something made with a computer could behave like an otherwise flexible, sometimes organic material. I don’t know what specific algorithms were used in the making of this material, but I know it must have involved repeatedly creating patterns, as the material is made of millions of small interlocking pieces. You can see that comfort is trying to be achieved, as 3D printed forms are usually hard and not flexible. The Design Director of Digits2Widgets, Jonathan Rowley, said he “hopes artists and designers pick up on this concept and begin to print ‘real’ flexible garments that are actually light, comfortable and totally flexible.” I could not find an official title for the product other than 3D Printed Nylon.
//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project - 3
var Xpos
var Ypos
var pupilYpos
var pupilXpos
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
//drawing the eye
if (mouseX < (width/2)){
noStroke();
fill(249, 214, 87);
}
else {
noStroke();
fill(random(0, 255), random(0, 255), random(0, 255));
}
ellipse(200, 200, 350, 350);
//shaking iris
fill(255);
ellipse(Xpos, Ypos, 200, 100);
if (mouseX > width/2) {
Xpos = width/2+ random(0,mouseX/60);
Ypos = height/2 + random(0,mouseX/60);
}
//pupil movement
var pupilXpos = constrain(mouseX, 150, 250);
noStroke();
fill(0);
ellipse(pupilXpos, 200, 40, 40);
}
For this assignment I created an eye that changes color when it looks to the right and follows the mouse. I had a little trouble with the order of things, but finally found the way to make it work.
//Ean Grady
//section B
//egrady@andrew.cmu.edu
//Project-03
function setup() {
createCanvas(640, 480);
background(400-mouseX, 200-mouseY, 300);
}
function mouseMoved(){
var R = (200-mouseX)/2;
var G = (600-mouseY)/2;
var B = 200;
var Rx = (400+mouseX)/2;
var Gx = (40+mouseY);
var Bx = 100
var Rz = (300+mouseX)/2;
var Gz = (80+mouseY);
var Bz = 50
//the squares on each corner of the canvas
fill(Rx, Gx, Bx);
noStroke();
rect (0, 0, 64, 48)
rect (576, 432, 64, 48)
rect (0, 432, 64, 48)
rect (576, 0, 64, 48)
// the longer rectangles on the side
fill (Rz, Gz, Bz);
rect (64, 0, 512, 48)
rect (64, 432, 512, 48)
rect (0, 48, 64, 384)
rect (576, 48, 64, 384)
//code for the ellipse used to draw
noStroke();
fill(R, G, B);
ellipse (mouseX, mouseY, 120, 80);
sizex=mouseX/2;
if (sizex>120){
sizex=mouseX/-4;
};
sizey=mouseY/2;
if(sizey>200){
sizey=mouseY/-4;
};
}
For this project, I wanted to create a canvas for which you could draw something using different shapes. It ended up being a little too ambitious for my programming skills, so I instead created a canvas for which you could use an ellipse to just play around with, where it changes colors as you move it around. I had the most difficult time this week trying to come up with the right code to fit what I wanted, I had to go onto the p5.js reference page a lot, but it definitely helped to familiarize myself with the program.
The “FreeSwim” Prosthesis is a project by Stuart Baynes, an Industrial Design student at Victoria University in New Zealand. The idea behind the project is to utilize computational fabrication and 3-D printing technologies to help alleviate many of the difficulties amputees face in their day-to-day lives, which in this case would be swimming. The FreeSwim Prosthesis is specifically made to aim ‘trans-tibial’ amputees swim, it is a fin-like prosthetic that is attached to the leg, which in turn helps amputees propel themselves in the water and stay afloat, it also similarly helps them get in and out of the pool/water by themselves.
I find this project particularly interesting because it shows the full range of what computational fabrication, specifically 3-D printing, in this case, is capable of. There are so many possibilities out there to explore within the realm of computational fabrication, from architecture and designing furniture all the way to helping the physically disadvantaged.
//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-03
var y = 0;
var spacing = 15;
var r = 7.5;
function setup() {
createCanvas(640, 480);
}
function draw() {
noCursor();
//background color change based on position of mouseX and mouseY
colorR = map(mouseY, 0, height, 180, 255);
colorB = map(mouseX, 0, width, 180, 255);
colorG = map(mouseX, 0, width, 160, 235);
background(colorR, colorG, colorB);
//strokewegith depends on the position of mouseY
m = map(mouseY, 0, height, 1, 5)
strokeWeight(m);
stroke(255);
//array curves with mid points that react to position of mouseX and mouseY
if (mouseX >= width/2) {
for (var i = 0; i < 640; i+= spacing) {
positionX = map(mouseX, 0, width/2, 0, 1);
positionY = map(mouseY, 0, height, 0, 1);
noFill();
beginShape();
curveVertex(i, 0);
curveVertex(i, 0);
curveVertex(positionX*i, height*positionY);
curveVertex(i, height);
curveVertex(i, height);
endShape();
}
}
//array of curves stay straight when mouseX is on left half of canvas
if (mouseX < width/2) {
for (var i = 0; i < 640; i+= spacing) {
line(i, 0, i, height);
}
}
//array of circles
for (var x = 0; x < width + r; x+= spacing) {
for (var y = 0; y < height + r; y+= spacing) {
noStroke();
//the amount of circles which changes size depends on mouseX
var n = map(mouseX, 0, width, 1, 8);
//aray of circles which changes color based on its distance from the Cursor
if (dist(mouseX, mouseY, x, y) < n*r) {
fill(random(0, 255), random(0, 255), 200);
r = 12
}
else {
fill(150);
r = 7.5
}
ellipse(x, y, r, r);
}
}
}
I wanted to create a grid base, interactive graphic that depends heavily on the position of mouseX and mouseY. The array of circles’s sizes and color depend on the distance between position of the cursor and the center point of each circle. The background color also changes based on mouseX and mouseY as well as the array of lines in the background in which the mid point changes value based on location of the cursor as well.
A project that caught my eye was Benjamin Dillenburger and Michael Hansmeyer’s Arabesque Wall which is a 3D printed ten foot tall structure, that exhibits extreme detail and intricacy.
It took four days to sand print the separate parts of the structure, which were later assembled into the final form. The geometric, folding motifs were inspired by arabesques present in Islamic art and generated using iterative algorithms and custom software.
A closer look at the detail.
I’m inspired by this work because it incorporates styles that are traditionally achieved by human labor and makes them extraordinarily complicated, so much so, that a piece like this could take decades to finish. In the article, the artists discuss how architecture should “surprise, excite, and irritate.” I believe that they were successful in fulfilling those endeavors in this piece.
According to the project’s official page, “is an installation consisting of around 64 head-size mirror objects. Each object moves its head in a particular way to give it different characteristics of human behaviour. Some chat amongst themselves, some shy away and others confidently move to grab your attention.” (http://www.chrisoshea.org/audience)
Close up of the mirrors.
By giving life to inanimate objects, this project reverses the roles of the viewer and viewed in that the people become the viewed in this case. The people have no control over the reactions of the mirrors, so the project itself plays with eliciting certain reactions from the the viewers, whether it may be discomfort or intrigue as all people react differently. It seeks to establish a different kind of relationship between viewer and technology but by using the most simplest of means.
I personally thought that this project was interesting because instead of creating projections or sounds, this project uses mirrors to reflect the world back on itself. It uses programming and calibration to set each mirror at a certain angle. Each mirror is controlled by two motors that give it tilt and pan rotations. The other interesting point is that each mirrors do not move randomly– they actually have a scripted code which allows them to achieve thoughtful movements and processes. According O’Shea, the software was developed in C++ using openFrameworks and OpenCV.
In my opinion, real world application of this project could be used in perhaps security and protection of closed official buildings. I feel like more elements such as face recognition could be applied to this project in order to be used as a filter for going through authorized and unauthorized people. Because it plays on the psychology of the individual, it could affect intruders in a building, such as making them feel uncomfortable to the point of leaving.
//Rachel Park
//Section B @ 10:30 AM
//rsp1@andrew.cmu.edu
//Project-03-Dynamic-Drawing
var c = 70;
var triX1 = 307;
var triX2 = 320;
var triX3 = 333;
var triX4 = 305;
var triX5 = 290;
var triX6 = 335;
var triX7 = 350;
var triX8 = 313;
var triX9 = 327;
var triY1 = 230;
var triY2 = 210;
var triY3 = 253;
var triY4 = 235;
var triY5 = 260;
var triY6 = 280;
var triY7 = 268;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(c,60);
//modifying the background fill color
if (mouseX < 640) {
c = mouseX * 0.5;
}
if (mouseX < 0) {
c = mouseX;
}
var m = max(min(mouseX,400),0);
var size = m * (7/8);
var starsize = c;
var n = max(min(400,mouseY),0);
var moonlocation = n * (7/8);
//making the moon
push();
noStroke();
translate(width/4,height/4);
fill(254,255,182);
ellipse(0,moonlocation,50,50);
fill(c);
ellipse(10,moonlocation,45,45);
pop();
//constructing the rocketship + fire blast
push();
noStroke();
fill(255,4,4);
triangle(309 + m * (1/8),triY1-5, 320 + m * (1/8),triY2,
331 + m * (1/8),triY1-5);
fill(215);
triangle(305 + m * (1/8),triY3,305 + m * (1/8),triY4,292 + m * (1/8),triY5);
triangle(335 + m * (1/8),triY3,335 + m * (1/8),triY4,350 + m * (1/8),triY5);
fill(255,80,16);
ellipse(width/2 + m * (1/8),265,15,15);
triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);
scale(0.5);
fill(255,248,16);
translate(width/2 + m * (1/8),260);
ellipse(width/2 + m * (1/8),265,15,15);
triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);
pop();
noStroke();
fill(188);
translate(width/2,height/2);
scale(0.25);
rectMode(CENTER);
rect(m * (1/2),0,100,100,10);
// rect(m * (1/2),0,100,100,10);
push();
//rotation of the stars
rotate(frameCount / 90.0);
//small star
push();
noStroke();
fill(mouseX/4, mouseY,mouseX/2);
/*changing the color of the stars
using the mouse movement*/
translate(width-100,height/2);
rotate(frameCount / 100.0);
scale(0.5);
star(0,0,30,50,5);
pop();
//construction of mid-size star
push();
noStroke();
fill(mouseX/8, mouseY,mouseX/2);
translate(width-400, height/2);
rotate(frameCount / -120.0);
star(0,0,30,50,5);
pop();
}
//definition and utilization of variable for the stars
function star(x, y, radius1, radius2, npoints) {
var angle = TWO_PI / npoints;
var halfAngle = angle/2.0;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius2;
var sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
This project was actually more difficult than the other projects that we have done this far, at least for me. I started with a simple idea of wanting to create a drawing of a rocket because it allowed for so many different options for using variables that move with the mouse. For this project, I decided to manipulate the movement of the rocket itself, the background color, the location of the moon, and the colors for the stars that are continually rotating around the rocket itself.
In the image below, I show some of the design ideas for the rocket itself, and which directions I initially wanted it to move.
Move the mouse up and down to move the moon, and move the mouse side to side to move the rocket and change the star colors.
//Brandon Hyun
//15104 Section B
//bhyun1@andrew.cmu.edu
//Project-03
function setup() {
createCanvas (640, 480);
}
function draw() {
//darkens the background as mouse gets closer (0,0) and lighten when the mouse gets closer to (640,0)
background(mouseX,mouseY);
fill(0);
noStroke();
//left upper corner chaos circle
//setting cordinates of where the circles are going to be drawn.
randomXlocation = random (width/2 +1);
randomYlocation = random (height/2 +1);
//drawing the circles with the cordinates and the size of the circle.
ellipse (randomXlocation, randomYlocation, 50,50);
//right lower corner chaos circle
//setting cordinates of where the circles are going to be drawn.
randomXlocation = width/2+ random (width/2 +1);
randomYlocation = height/2+ random (height/2 +1);
//drawing the circles with the cordinates and the size of the circle.
ellipse (randomXlocation, randomYlocation, 50,50);
}
For this project, I wanted to create something that had a simple concept but complicated visuals. While I was working, I wanted to express the emotion of hecticness that could only be hidden by shadows.
When I was working on this, I had a hard time in the beginning because I wasn’t really sure what variables I needed this code to work.
var posx = 20;
var posy = 20;
var posyb = 20;
var posx1 =20;
var posy1 = 20;
var dirX = 1;
var diam = 30;
var falling = 1.1;
var diam1 =30;
function setup() {
createCanvas(600, 600);
}
function draw() {
background (157,156,201);
for (var x = 5; x < width; x = x+50){
for (var y = 5; y < height; y = y+50){
push();
translate(x, y);
fill(255,255,102); //yellow
ellipse(posx1,posy,diam,diam);
pop();
}
}
//
if (mouseX > width/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
translate(x, y);
fill(204,255,153); //green
ellipse(-posx1,posy1,diam1,diam1);
diam1 += .0001;
pop();
}
}
}
//bluish
if (mouseX < width/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01;
posy1+= falling*0.01*-1;
translate(x, y);
fill(153,255,255);
ellipse(posy1,posy1,diam,diam);
pop();
}
}
}
// pink
if (mouseY > height/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01;
posy1+= falling*0.01*-1;
translate(x, y);
fill(255,102,255);
ellipse(posx,posyb,diam1,diam1);
pop();
}
}
}
// orange
if (mouseY < height/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01*-1;
posx1 += falling*0.01*1;
translate(x, y);
fill(224,96,92);
ellipse(posx,posyb,diam,diam);
pop();
}
}
}
}
I wanted to create a curtain of balls that slide through the canvas in an uncomfortable way depending on the direction of the mouse. Are you able to make them dissapear? What if you wait for a little bit?
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
