![[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)
What was really special about the piece, Astrocyte, made in 2017 was the simple fact that it was 3D printed. It brings back memories of when I was in high school and decided to do a 3D printed project for my IB Math Project. This was the first time I used a 3D printer and it was exhilarating. What is inspirational about this piece specifically is how pretty it looks. It reminds me of the Corning Museum of Glass (CMOG), where I spent a good amount of my childhood back. I would love to go see this display, and feel like I could sit there for hours and reminisce. 3D printing has become much more common than it was when I first used, it and it is really neat to see how it is growing. I imagine it took a lot of moving pieces to put this together. They had many people in various teams, such as technology, design, and research help create this project. The coolest part, is the technique used, one I have mentioned in one of my earlier inspirations, which is the combination of light changing according to movement, and sounds and vibrations playing a role in that as well.
Month: September 2020
Project 03: Dynamic Drawing
sketch
var angle = 0;
function setup() {
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(max(mouseX/2, mouseY/2), 200, 255);
noStroke();
//little fish bottom left swimming in circles
push();
translate(350, 60);
rotate(radians(-angle));
fill(190, 88, 77);
ellipse(0, 0, 100, 45);
triangle(0, 0, 60, -30, 60, 30);
//little fish top right swimming in circles
pop();
push();
translate(60, 350);
rotate(radians(angle));
fill(190, 88, 77);
ellipse(0, 0, 100, 45);
triangle(0, 0, 60, -30, 60, 30);
pop();
angle += 2;
//little fish swimming through the ripples
fill(190, 88, 77);
ellipse(mouseX, mouseY, 100, 55);
triangle(mouseX, mouseY, mouseX-60, mouseY-30, mouseX-60, mouseY+30);
//water ripples
//restrict mouseX to 0-450
var mX = max(min(mouseX, 700), 0);
//sizing of circles based on mouseX
var size1 = mouseX;
var size2 = mX/2;
var size3 = mX/3;
var size4 = mX/4;
var size5 = mX/5;
//first water drop
fill(50, 0, mouseX/2, 100);
ellipse(20, height/2, size1);
ellipse(20, height/2, size2);
ellipse(20, height/2, size3);
ellipse(20, height/2, size4);
ellipse(20, height/2, size5);
push();
//second water drop
translate(150, 0);
if (mouseX >= width/3) {
//delays time of expansion with mouse
var offset = -30;
//circle
fill(50, 50, mouseX/2, 80);
ellipse(20, height/2, size1+offset);
ellipse(20, height/2, size2+offset);
ellipse(20, height/2, size3+offset);
ellipse(20, height/2, size4+offset);
ellipse(20, height/2, size5+offset);
}
//third water drop
pop();
push();
translate(300, 0);
if (mouseX >= width/2) {
//delays time of expansion with mouse
var offset = -60;
//circles
fill(50, 100, mouseX/2, 60);
ellipse(20, height/2, size1+offset);
ellipse(20, height/2, size2+offset);
ellipse(20, height/2, size3+offset);
ellipse(20, height/2, size4+offset);
ellipse(20, height/2, size5+offset);
}
//fourth water drop
pop();
push();
translate(400, 0);
if (mouseX >= width/2+100) {
//delays time of expansion with mouse
var offset = -80;
//circles
fill(50, 150, mouseX/2, 40);
ellipse(20, height/2, size1+offset);
ellipse(20, height/2, size2+offset);
ellipse(20, height/2, size3+offset);
ellipse(20, height/2, size4+offset);
ellipse(20, height/2, size5+offset);
}
//fifth water drop
pop();
push();
translate(500, 0);
if (mouseX >= width/2+150) {
//delays time of expansion with mouse
var offset = -80;
//circles
fill(50, 200, mouseX/2, 40);
ellipse(20, height/2, size1+offset);
ellipse(20, height/2, size2+offset);
ellipse(20, height/2, size3+offset);
ellipse(20, height/2, size4+offset);
ellipse(20, height/2, size5+offset);
}
}
This is my pond with swimming and rotating fish, I started with the idea of visualizing water droplets from rain, then thought it would be cool to add the motion of a fish swimming in it.
Project-03-Dynamic-Drawing
sketchDownload
var colorx=20
function setup() {
createCanvas(600, 450);
max_distance = dist(0, 0, width, height);//the distance of the canvas
}
function draw() {
//measure how far mouse if from the center of canvas
let distanceFromCenter= dist(width/2,height/2,mouseX,mouseY);
var colorx = distanceFromCenter;
background(116,colorx,255);//the mouse as a component of the background's color
//set the distance of each ellipse
for (let x = 0; x <= width; x += 15) {
for (let y = 0; y <= height; y += 15) {
let size = dist(mouseX, mouseY, x, y);//size is decided by the mouse location
size = (size / max_distance) * 40;
fill(22,255,colorx);//the mouse as a component of the ellipse's color
noStroke();
ellipse(x, y, size, size);
}
}
}
Move the mouse to update the sizes of ellipses in both horizontal and vertical direction. The color of ellipses and the background color of canvas also varies based on the mouse’s location.
Project 03 – Dynamic Drawing
For this project, I was inspired by abstract artist, Kandinsky. I took some of the components in composition 8, and made it more interactive.
sketchDownload
//Se A Kim
//Section D
function setup() {
createCanvas(600, 450);
background(236, 233, 230);
}
function draw() {
background(236, 233, 230);
var bigCircle = constrain(pmouseX, 50, 200);
var midCircle = constrain(pmouseX, 50, 170);
var smallCircle = constrain(pmouseX, 50, 80);
var miniCircle = constrain(pmouseY, 0, 50);
var linex = constrain(pmouseX, 200, 500);
var liney = constrain(pmouseY, 100, 500);
//var leftTri = constrain(pmouseY, 100, 300);
noStroke();
//circle layers
fill(217, 167, 164, mouseY/2);
ellipse(100, 100, bigCircle);
fill(39, 26, 34);
ellipse(100, 100, midCircle);
fill(120, 65, 116, mouseY);
ellipse(100, 100, smallCircle);
frameRate(10);
stroke(3);
//double lines following mouse
line(mouseX, mouseY, pmouseX, pmouseY);
line(mouseX - 10, mouseY - 10, pmouseX -10, pmouseY - 10);
//lines
line(150, 300, linex, 300);
line(500, 430, 500, liney);
line(550, 430, linex, liney);
line(500, 10, linex + 40, liney + 40);
line(600, 0, linex - 80, liney - 80);
//arcs
stroke(1);
fill(255, 255, 255);
arc(200, 300, 80, 80, PI, 0);
arc(280, 300, 80, 80, PI, 0);
arc(360, 300, 80, 80, PI, 0);
arc(440, 300, 80, 80, PI, 0);
//large triangle
fill(244, 241, 242, mouseY/2);
triangle(300, 800 - pmouseY, 400, 300 - pmouseY, 500, 800 - pmouseY);
noStroke();
//multiple circles
fill(299, 197, 94, mouseY);
ellipse(100, 350, miniCircle);
fill(26, 104, 155, mouseY);
ellipse(230, 400, miniCircle);
ellipse(500, 300, miniCircle);
ellipse(450, 150, miniCircle);
}LookingOutwards-03
In 2019, Ying Gao, a conceptual fashion designer and media professor, released a robotic clothing collection that can reacted to its surroundings. The collection, entitled “flowing water, standing time”, response to the essence of movement by rippling, expanding and contracting as if they are live creatures. Her project questions traditional assumptions about clothing by combining robotics and fine fabrics to create performative pieces that transform their physical contour. The color and light sensors embedded in the fabric, with a tiny camera linked to a raspberry PI computer, are used to gather information about their surrounding. Data are sent to a series of actuators and magnets that is interlaced with the fabric to create movement. The clothes have a fluid and chameleon-like appearance, embodying the complexity and rhythm of the ever-changing surrounding.
LO 3
An artist who utilizes computational fabrication is Taekyeom Lee(@taekyeom). When I first started following his work, he primarily focused on 3D printing ceramics. Although that has stayed as a consistent feature of his projects, he has also ventured into working with using robots to draw intricate letterforms, printing letterforms through ceramics, and mixing in generative design. Most recently, he has printed miniature versions of his ceramics pieces to print molds for casting little soaps.
My personal favorite of his projects has been an ongoing series of printed ceramics that have evolved into many different mediums of print materials. I found great aesthetic appeal in the forms of his printed ceramics, which often focus on radial symmetry and takes inspiration from nature. He also had very interesting pieces that focus on the internal structure of the print; from the outside, it’s an unassuming form, but when you look inside, the form holds intricate twisting tunnels. I think that in creating the pieces, there is an element of letting the program make decisions and leaving complete control of how the forms come out in the hands of the printer and chance–many of his projects have collapsed while wet, rendering the print failed.
Project 03 – Dynamic Drawing
sketch
var squares = [];
function setup() {
createCanvas(600, 450);
for (var x = -280; x < 1000; x += 40) {
for (var y = -320; y < 1000; y += 40) {
squares.push(new Rect(x, y, 20, 20));
}
}
}
function draw() {
translate(300, 225);
background(56, 63, 81);
for (var y = 0; y < squares.length; y++) {
squares[y].show();
}
}
var Rect = class {
constructor(pX, pY, w, h) {
this.pX = pX;
this.pY = pY;
this.w = w;
this.h = h;
}
show() {
rectMode(CENTER);
noStroke();
var scale = Math.pow(mouseX - this.pX - 300, 2) + Math.pow(mouseY - this.pY - 225, 2);
scale = min(40*225/scale, 1);
fill(200*scale, 120/scale, 150*scale);
rotate(scale/100);
rect(this.pX, this.pY, this.w * scale, this.h * scale);
}
}
LO 3 – Computational Fabrication
The project I am looking at is Meshu, a company that uses computational fabrication to create and sell products. They make jewelry that connects locations to make a pendant out of various shapes. I think this project is a unique way of connecting people to locations, that is more than a map. I am not sure what algorithms are used, but it seems like they are just connecting “points” which represent cities on a map. Since the purpose of this project is to create pieces of art for other people, there is not a lot of room for the artist to add their own artistic sensibilities.
Link: https://meshu.io/
Looking Outwards 03: Computational Fabrication
The Vespers project is a fascinating ongoing enterprise by the Mediated Matter research group in the Media Lab at MIT. This project, inspired by the concept of the “death mask” of old, serves to memorialize the dead; here, the makers integrate many disciplines to re-engineer complex forms and symbols through each series of masks, using computational modeling techniques to physically represent culturally and philosophically relevant questions.
For instance, the second series of masks serves to negotiate the divide between life and death. They take cues from natural phenomena and forms and, using data and environmentally responsive materials, are able to digitally model and fabricate each mask. The makers use spatial mapping algorithms to encode the specific colors, geometry, and form of each mask. I find these works interesting as they are not only aesthetically impressive but serve as a model of how we might computationally “grow” and design organic tissues and prosthetics to meet specific individual needs.
Project 3: Dynamic Drawing
sketch.sl4Download
// Sarah Luongo
// Section A
function setup() {
createCanvas(600, 450);
}
function draw() {
// To change background according to positon of mouse
var bkgrR = min(mouseY/4, 45);
var bkgrB = min(mouseX/4, 45);
var bkgrG = (bkgrR-bkgrB);
// To constrain motion of stars within canvas
var motionX = map(mouseX, 0, width, 0, 15);
var motionY = map(mouseY, 0, height, 0, 15);
// To change colors of stars
var r = max(mouseX/1.8, 150);
var g = max(mouseY/1.8, 150);
var b = max((mouseY/1.8)-(mouseX/1.8), 150);
// Fourth value gives background transparency - will make all stars have "following circles" that fade as the stars move (easier to see when you move the mouse really fast
background(bkgrR, bkgrG, bkgrB, 45);
// To get rid of cursor
noCursor();
// This circle is the new cursor shape
fill(255, 255, 51); // yellow
circle(mouseX, mouseY, 3);
// Stars
fill(r, g, b);
circle(motionX, motionY, 8 * mouseX/560);
circle(motionX + 320, motionY + 420, 6 * (mouseX/560 + mouseY/410));
fill(r - 47, g - 27, b - 143);
circle(motionX + 340, motionY + 19, 8 * (mouseX/560 + mouseY/410));
circle(motionX + 233, motionY + 385, 9 * (mouseX/560 + mouseY/410));
circle(motionX + 19, motionY + 347, 8 * (mouseX/560 + mouseY/410));
fill(r + 84, g + 119, b - 78);
circle(motionX + 40, motionY + 238, 10 * (mouseX/560 + mouseY/410));
fill(r, g, b);
circle(motionX + 405, motionY + 356, 7 * (mouseX/560 + mouseY/410));
circle(motionX + 446, motionY + 395, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 23, motionY + 273, 8 * (mouseX/560 + mouseY/410));
fill(r + 210 , g - 140, b + 37);
circle(motionX + 172, motionY + 143, 6 * (mouseX/560 + mouseY/410));
circle(motionX + 204, motionY + 297, 8 * (mouseX/560 + mouseY/410));
circle(motionX + 198, motionY + 189, 10 * (mouseX/560 + mouseY/410));
fill(r + 32, g + 130, b + 23);
circle(motionX + 285, motionY + 302, 9 * (mouseX/560 + mouseY/410));
circle(motionX + 534, motionY + 67, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 67, motionY + 45, 7 * (mouseX/560 + mouseY/410));
fill(r, g, b);
circle(motionX + 423, motionY + 227, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 367, motionY + 329, 7 * (mouseX/560 + mouseY/410));
circle(motionX + 257, motionY + 348, 10 * (mouseX/560 + mouseY/410));
fill(r - 190, g + 66, b - 15);
circle(motionX + 73, motionY + 143, 9 * (mouseX/560 + mouseY/410));
circle(motionX + 143, motionY + 324, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 300, motionY + 225, 8 * (mouseX/560 + mouseY/410));
circle(motionX + 558, motionY + 420, 6 * (mouseX/560 + mouseY/410));
circle(motionX + 340, motionY + 445, 9 * (mouseX/560 + mouseY/410));
fill(r, g, b);
circle(motionX + 510, motionY + 267, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 304, motionY + 130, 8 * (mouseX/560 + mouseY/410));
circle(motionX + 229, motionY + 38, 7 * (mouseX/560 + mouseY/410));
circle(motionX + 512, motionY + 106, 8 * (mouseX/560 + mouseY/410));
fill(r - 190, g + 66, b - 15);
circle(motionX + 429, motionY + 145, 9 * (mouseX/560 + mouseY/410));
circle(motionX + 400, motionY + 73, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 172, motionY + 430, 6 * (mouseX/560 + mouseY/410));
circle(motionX + 84, motionY + 443, 9 * (mouseX/560 + mouseY/410));
circle(motionX + 117, motionY + 233, 10 * (mouseX/560 + mouseY/410));
fill(r, g, b);
circle(motionX + 545, motionY + 357, 8 * (mouseX/560 + mouseY/410));
circle(motionX + 584, motionY + 167, 10 * (mouseX/560 + mouseY/410));
circle(motionX + 448, motionY + 332, 7 * (mouseX/560 + mouseY/410));
circle(motionX + 515, motionY + 207, 6 * (mouseX/560 + mouseY/410));
}
I’m very fascinated by stars and one of my favorite albums to listen to is an astronomy album by Sleeping At Last. I was inspired by this album, so I wanted to make this project kind of like space, but a little more fun. I wasn’t quite sure how to make a star shape, so I decided to makes circles as stars. My sketch is below:
