SectionD – Page 34 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 3 – Dynamic Drawings

Move your mouse over the canvas to change the size of the bubbles.
Moving your mouse will also change the colors of the bubbles.
Holding down left click while mousing over the canvas will keep the bubbles on the canvas until you let go of left click.
Left clicking will while moving will change lighten the background.

//holly liu
//section d
//dynamic drawing

var x = 25;
var y = 25;
var s = 20;
var b = 50;

function setup(){
	createCanvas(600, 600);
}

function mouseMoved(){														//for as long as mouse is held down, the generated circles will not refesh
	clear();
	background(b);
	draw();
}

function draw(){
	noStroke();
	var r = 0.425 * mouseX;													//r value changes with x movement of mouse; values scaled to size of canvas 
	var g = 0.425 * mouseY;													//g value changes with y movement of mouse; values scaled to size of canvas
	var b = 108;
	fill(r, g, b);
	for (let i = 25; i <= 575; i += 50){									//generates circles
		for(let j = 25; j <= 575; j+= 50){
			s = 75 * exp(((-1) * dist(mouseX, mouseY, i, j))/100); 			//changes size of circles based on distance from mouse
			circle(i, j, s);
		}
	}
}

function mouseClicked(){													//bkg change w/ left click
	b += 10
	if(b == 200){
		b = 50
	}
}

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

For this project, I was inspired by abstract artist, Kandinsky. I took some of the components in composition 8, and made it more interactive.

sketch Download

//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);


}

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.

internal shot of corn using translucent filament

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/

Project 02 – Dynamic Drawing

I tried to visualize the sound waves when listening to music in a minimalistic way.

sketch

//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

function setup() {
    createCanvas(600, 450);
}

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}

LO 3 – Computational Fabrication

The Silk Pavilion is an incredible sculpture that combines the biological and technological world together. The silkworm’s ability to generate 3D cocoons out of silk and the digital fabrication of geometric architectural shapes were seamlessly blended to create a sturdy, yet light structure. MIT Media Lab started with a CNC machine that created an underlying structure that will hold each section of the silk and ultimately guide the silkworms.The group believes in the power of a single material as a system to enable strength and tension. There is an intersection between technology and biology which digital fabrication technologies can explore. In this case, the silkworms build and destroy parts of the nest for it to become a stronger material. They used computational techniques to model the natural processes of growth. This theme is allowing growth to happen naturally as seen in their computational design, by allowing the machine to determine which patterns would be most durable.

Looking Outwards 03 – Computational Fabrication

Liquid Speed is a 3d printed energy-return running shoe designed by Reebok and BASF. Printed with a special high-rebound liquid material, the outsole has wings that stretches and wraps around the side of the shoe. This gives a perfect customized fit when the shoe is laced up. What I really admire about this product is that it utilizes 3d printed material in an effective way to give the most personalized experience with the shoe. Having stretchable wings on each side of the shoe to tighten up and mold any desired foot to the shoe impresses me as a design major. The liquid factory uses state of the art machinery and software to build a system that draws the outsole of the shoe with a urethane-based liquid developed by BASF. The important part of this project is that the shoe does not need molds to be created. Molds are expensive, which is the reason why shoes are expensive in price. Developing a technology that eliminates the process of using molds is an innovative application in the shoe industry. I can see that the curvy shape of the outsole and wings give a smooth yet unique design to the shoe, while the reflective red color gives a powerful and strong emphasis to the overall design.

Video of Liquid Speed from Reebok Liquid Factory

Project-03 Dynamic Drawing

sketch-dynamic – square

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var r = 0;
var g = 0;
var b = 0;
var angle = 0 ;
var w = 0;
var dir = 1;
var clickNumber = 0;

 
function setup() {
    createCanvas(600,450);
    frameRate(15);
    background(100);
    
}
 
function draw() {
    
    fill(r,g,b);
    stroke(0);
    push();

    // make the rectangle rotate around mouse
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rect(mouseX/3, mouseY/3, min(mouseX/2,mouseY/2), min(mouseX/2,mouseY/2));

    //change the color and size of the second rectangle, and make it rotate anticlockwise
    fill(r,g+30,b+w);
    rect(mouseX,mouseY,w,w);
    rotate(radians(-angle));

    pop();
    angle = angle + 10;

if ( clickNumber == 15){
    noloop();
}



   
}


function mousePressed() {

     clickNumber = clickNumber + 1;

    // change red everytime mouse pressed and make it repeatable

    if (r >= 255){
        r = 0;
    } else {
        r = r + 50;
    }
    
   
   // controle the size of the second rectangle and make it change between 0- height/2
   
    if (w >= height/2){
        dir = -1 ;
    } 

    if ( w < 0){ 
        dir = 1 ;
    }

    w = w + dir*20;
    }

In this painting, you can control the circulation center by the position of your mouse and the size of the second square by your click number. You can click 15 times then the code will stop running and you will have your own painting.Enjoy.