Category: Uncategorized

Random Lines Spin Art

I spent a good amount of time trying to decide what to make. I ended up moving certain variables to fit between my triangular sides to make a star or compass shape. To keep it more simple for myself to move between to points I made it so I was not changing all of the line points. I think this helped a lot to understand the movement of the lines better. I tried to condense my code as much as I could.

file

var dx1; //variables for each triangle 1= triangle 1, 2= triangle 2
var dy1;
var dy2;
var dx3;
var dy3;
var dx4;
var numLines = 35;
function setup() {
    createCanvas(400, 400);
    background(200);
    dx1 = (100 - 50) / numLines; //x2-x1/number of lines(thick or thin)
    dy1 = (300 - 100) / numLines; //makes line lenght shorter or longer(higher,lower)
    dy2 = (100 - 300) / numLines; //some of the movement could stay the same or be switched
    dx3 = (250 - 50) / numLines;
    dy3 = (100 - 150) / numLines;
    dx4 = (50 - 250) / numLines;
}
    
function draw() { //per 1 line stroke
    strokeWeight(.5);
    var x1 = 200; //variables for each line, every triangle has 2
    var y1 = 0; //must have different variables or will not run correctly
    var x2 = 150;//even if numbers are the same
    var y2 = 200;
    var x3 = 200;
    var y3 = 400;
    var x4 = 150;
    var y4 = 200;
    var x5 = 0;
    var y5 = 200;
    var x6 = 200;
    var y6 = 250;
    var x7 = 200;
    var y7 = 250;
    var x8 = 400; 
    var y8 = 200;

    for (var i = 0; i <= numLines; i += 1) { 
        line(x1, y1, 150, 200); //top tri, left line
        x1 += dx1;
        y1 += dy1;
        line(x2, y2, 250, 200); //top tri right line
        x2 += dx1;
        y2 += dy2;
        line(x3, y3, 150, 200); //bottom tri, left line
        x3 += dx1;
        y3 += dy2;
        line(x4, y4, 250, 200); //bottom tri right line
        x4 += dx1;
        y4 += dy1;
        line(x5, y5, 200, 250); //left tri, bottom line
        x5 += dx3;
        y5 += dy3;
        line(x6, y6, 200, 150); //right tri, top line
        x6 += dx3;
        y6 += dy3;
        line(x7, y7, 200, 150); //left tri, top line
        x7 += dx4;
        y7 += dy3;
        line(x8, y8, 200, 250); //right middle tri, bottom line
        x8 += dx4;
        y8 += dy3;
    }
    noLoop();
 }

To make/ find my shape points I had to make some circles and lines first as a preliminary canvas

LO: Computational Fabrication

“In-Formed”, Nadeem Haidary

I found Nadeem Haidary’s work In-Formed especially powerful because it introduces potentially foreign and far-away-seeming data through such a ubiquitous, intimate human ritual such as eating. By visualizing the data in the prongs of a fork, the designer makes the statistic real, tangible, unable to ignore. On his website, he actually asks the question, “what if this information crawled off the page and seeped into the products that surround us?” (Haidary). As one looks at, reflects on, and imagines what it might look like to eat with this fork, it makes the reality of different eating habits and access far more tangible to the viewer than a simple fact they might read or hear. Regarding the algorithm, I assume the craft involved researching the statistics of calorie consumption by country, and then using those number to determine the proportions between each prong for each country it represented. The creator’s artistic sensibilities are manifested in the form in that it shows his ability to communicate something in a very human, tangible, and accessible way, as good designers do.

LO: Computational Fabrication

An exhibit of all four of Bernard’s Mounds pieces

Mounds, Colette Bernard, 2021

While scrolling through Instagram a couple months ago, I came across a video of artist Colette Bernard talking about experimenting with her art: 3D-printing ceramic. Bernard’s meta-forms rely upon the usual layer method of CNC 3D printing, but using clay instead of filament. It was a long process of what state to have the clay at (dry vs. wet, how large does the “filament” line have to be, ect.), but eventually she was able to print moldable ceramic. What I find most interesting about the work is the intersection between the human and the algorithmic components. Bernard mentions that she did use 3D modeling software to initially design her sculptures, but doesn’t talk further about her algorithm. Although a couple of her sculptures rely solely upon her algorithm, sometimes Bernard manually turns the printing plate during the printing process. I think this interplay between man and machine is very intriguing and brings up interesting questions about where “Colette’s” art begins and “machine production” ends. It’s almost as if the computer algorithm has taken life of its own and is participating with Bernard in creating her structures.

Project 3- Dynamic Drawing

I really like the text in my project

sketch
function setup() {
    createCanvas(600, 450);
    background(230, 230, 250);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER)
}
var xa = 300 //coordinates for rectangles a, b, and c
var ya = 225
var xb = 215
var yb = 140
var xc = 500
var yc = 425

function draw() {
    background(230, 230, 250);
    var m = max(min(mouseX, 600), 0); //constrain mouseX in canvas
    var size = dist(xa,ya,mouseX,mouseY) //size changes with distance between mouse and center
    var fillR = (dist(300,225,mouseX,mouseY)*0.3) //color changes with distance between mouse and center
    var fillG = (dist(300,225,mouseX,mouseY)*0.4)
    var fillB = (dist(300,225,mouseX,mouseY)*0.6)
    fill(fillR, fillG, fillB) //paint sqaure
    strokeWeight(5) 
    stroke(25, 25, 112)
    rect(xa,ya,size/1.5,size/1.5) //draws the rectangles
    rect(xb,yb,size/3,size/3) 
    rect(xc,yc,size/0.75,size/0.75) 

    push();
    translate(300,225) //move origin to center
    rotate(radians(mouseX)) //rotate according to position of mouseX
    ellipse(50,50,30,30) //draws the ellipses
    ellipse(-50,-50,30,30)
    ellipse(50,-50,30,30)
    ellipse(-50,50,30,30)
    ellipse(100,100,30,30)
    ellipse(-100,-100,30,30)
    ellipse(100,-100,30,30)
    ellipse(-100,100,30,30)
    ellipse(100,0,30,30)
    ellipse(-100,0,30,30)
    ellipse(0,100,30,30)
    ellipse(0,-100,30,30)
    ellipse(150,150,30,30)
    ellipse(-150,-150,30,30)
    ellipse(150,-150,30,30)
    ellipse(-150,150,30,30)
    ellipse(150,0,30,30)
    ellipse(-150,0,30,30)
    ellipse(0,150,30,30)
    ellipse(0,-150,30,30)
    pop();

    fill(255) //writes the text in black
    text("): This project is so hard  :( SOS", mouseX, mouseY)

}

Project 3- Dynamic Drawing

sketch
var x;
var y;
var strokeValue;
var mx;
var my;
var dragging 

function setup() {
    createCanvas(600, 450);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //center point variables
    let x = width/2;
    let y = height/2;
    //stroke color variable
    let strokeValue = 255;
    //map of black screen ellipse
    let mx= map(mouseX, 0, width, 0, 600);
    //allows for ellipse to drag (which I just realized
    //is pointless for this code)
    if(dragging == true) {
        x=mouseX;
        y=mouseY;
    }
    //redraws ellipse with no background
    if (mouseIsPressed) {
    stroke(strokeValue);
    noFill();
    ellipse(x, y, (mouseX), (mouseY));
    fill(0);
    //draws two ellipses on black screen, one is mapped
    } else {
        background(0)
        stroke(mouseX,0,mouseY);
        noFill();
        ellipse(mouseX, mouseY, mouseX, mouseY);
        ellipse(mx, y, mouseX, mouseY);
        text('press :)', mouseX, mouseY);
    }
}
//changes background value to current value of mouseX,mouseY
function mousePressed() {
    background(mouseX,0,mouseY);
    dragging = true;
}
//changes dragging to false
function mouseReleased() {
    dragging = false;
}

Originally, I wanted to do something really cool with infinitely generating circles. That idea morphed into this fun, interactive circle drawing. You can click anywhere on the canvas to generate a new background color based on the location of your mouse, and draw cool circles!

I’ll admit I struggled a lot with this project, but overall I am happy with what I came up with. I know it’s maybe not as complex as what we’re aiming for, however I learned a lot by creating it.

Looking Outwards 03

For this blog post on computational fabrication, I’m interested in talking about fashion designer Iris Van Herpen’s work. As a designer, she is consistently pushing the boundaries of textile materials and silhouettes, blending together nature and technology to create intricate pieces. The inspiration for her SS18 collection Ludi Naturae was the natural and manmade landscapes of our world from a bird’s-eye view, surveying the intricate aerial photography by Thierry Bornier, Andy Yeung, etc. Through the collection process film, it seems that a computer program was used to analyze the natural landscape’s curves and create an organic pattern that the designers could then refine. A 3D printer was also used to create individual physical pieces that are then hand-sewn together for the final garment. I was fascinated by the array of patterns and silhouettes Herpen created for this collection and how the organic forms flow together. While some of the designs were most organic, others were composed of simple geometric shapes arranged in different patterns and groups. Every dress was made up of many small pieces of 3D printed material so great attention to detail was placed on how they came together as a whole fabric to create an illusion of movement. 

Process film for Ludi Naturae

Project 03- Dynamic Drawing

sketch

//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D

// bee follows cursor and creates flowers when it gets near stems
var x = 300;
var y = 200;
var dx = 0;
var dy = 0;
var angle = 0;


function setup() {
    createCanvas(600, 450);
    background(204,255,255);
}

function draw() {
    noStroke()
    //bee follows mouse
    dx = mouseX - x;
    dy = mouseY - y;
    x = x + 1*dx;
    y = y + 1*dy 
    background(204,255,255);
    //sun rotates according to mouse
    fill(0,153,0)
    push();
    fill(255,128,0);
    translate(300,450/2);
    rotate(radians(abs(mouseX/3)));
    ellipse(-200,-70,100,100)
    pop();
    rect(0,height-40,width,40);
    fill(0,255,0); //flower stems
    rect(445,370,10,80);
    rect(295,370,10,80);
    rect(145,370,10,80);

    if (dist(mouseX, mouseY, 450, 350) < 50) {
        if (dist(mouseX, mouseY, 450, 350) < 25) {
            fill(255,153,255); // flower petal is pink
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(450, 350, max(mouseX-340,mouseY-340), max(mouseX-340,mouseY-340));
        fill(255,255,0); // flower center
        ellipse(450, 350, max(mouseX-380,mouseY-380), max(mouseX-380,mouseY-380)); //make right flower bigger

        fill(255,0,0); // flower petal
        ellipse(300, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(300, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make middle flower smaller

        fill(255,0,0); // flower petal
        ellipse(150, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(150, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make left flower smaller

    } else if (dist(mouseX, mouseY, 300, 350) < 50) {
        if (dist(mouseX, mouseY, 300, 350) < 25) {
            fill(255,128,0); // flower petal is orange
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(300, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
        fill(255,255,0); // flower center
        ellipse(300, 350, max(mouseX-290,mouseY-290), max(mouseX-290,mouseY-290)); // make middle flower bigger

        fill(255,0,0); // flower petal
        ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller

        fill(255,0,0); // flower petal
        ellipse(150, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(150, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make left flower smaller

    } else if (dist(mouseX, mouseY, 150, 350) < 50) {
        if (dist(mouseX, mouseY, 150, 350) < 25) {
            fill(178,102,255); // flower petal is purple
        } else {
            fill(255,0,0) // flower petal is red
        }
        ellipse(150, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
        fill(255,255,0); // flower center
        ellipse(150, 350, max(mouseX-300,mouseY-300), max(mouseX-300,mouseY-300)); // make left flower bigger

        fill(255,0,0); // flower petal
        ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller

        fill(255,0,0); // flower petal
        ellipse(300, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
        fill(255,255,0); // flower center
        ellipse(300, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290)));//make middle flower smaller
    }
    fill(255)
    ellipse(x-20,y-30,20,40); //bee wing
    ellipse(x-10,y-30,20,40); //bee wing
    fill(255,174,66);
    ellipse(x-15,y,50,25); //bee body
    fill(0)
    ellipse(x,y,5,5); // bee eye
    rect(x-55,y-5,20,10); // bee stinger
}

It took a while coming up with an idea but in the end I decided to do something fun and interactive like a game. When you move the bee close to the flower stems, a flower “blooms” while the others get smaller. I spent a long time making sure the sizes and numbers were correct but I’m happy with the end result.

initial idea sketch on whiteboard

Project-03: Dynamic Drawing, “groovy”

kstargio03projDownload
var thickness = 20;		// <-- value for weight of image parts (element: size)
var r = 0;				// <-- value for rotation angle (element: angle)
var p = -40;			// <-- value for disco ball placement (element: position)
var b = 0;				// <-- value for brightness (element: color)

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

function draw() {
    background(0);
		stroke(0);
		fill(100);
	rect(width/4, p-75, 5, 200);
	rect(3*width/4, p-75, 5, 200);
	if (int(b)==b) {		// color variation for disco ball
		fill(162+b);
	} else {
		fill(162);
	}
//disco ball:
    ellipse(width/4, p, 80, 80);
    line(width/4, p-40, width/4, p+40);
    line(width/4-5, p-40, width/4-5, p+40);
    line(width/4-10, p-40, width/4-10, p+40);
    line(width/4-15, p-40, width/4-15, p+40);
    line(width/4-20, p-40, width/4-20, p+40);
    line(width/4-25, p-40, width/4-25, p+40);
    line(width/4-30, p-40, width/4-30, p+40);
    line(width/4-35, p-40, width/4-35, p+40);
    line(width/4-40, p-40, width/4-40, p+40);
    line(width/4+5, p-40, width/4+5, p+40);
    line(width/4+10, p-40, width/4+10, p+40);
    line(width/4+15, p-40, width/4+15, p+40);
    line(width/4+20, p-40, width/4+20, p+40);
    line(width/4+25, p-40, width/4+25, p+40);
    line(width/4+30, p-40, width/4+30, p+40);
    line(width/4+35, p-40, width/4+35, p+40);
    line(width/4+40, p-40, width/4+40, p+40);
    line(width/4-40, p, width/4+40, p);
    line(width/4-40, p-5, width/4+40, p-5);
    line(width/4-40, p-10, width/4+40, p-10);
    line(width/4-40, p-15, width/4+40, p-15);
    line(width/4-40, p-20, width/4+40, p-20);
    line(width/4-40, p-25, width/4+40, p-25);
    line(width/4-40, p-30, width/4+40, p-30);
    line(width/4-40, p-35, width/4+40, p-35);
    line(width/4-40, p-40, width/4+40, p-40);
    line(width/4-40, p+5, width/4+40, p+5);
    line(width/4-40, p+10, width/4+40, p+10);
    line(width/4-40, p+15, width/4+40, p+15);
    line(width/4-40, p+20, width/4+40, p+20);
    line(width/4-40, p+25, width/4+40, p+25);
    line(width/4-40, p+30, width/4+40, p+30);
    line(width/4-40, p+35, width/4+40, p+35);
    line(width/4-40, p+40, width/4+40, p+40);
    //second disco ball:
	ellipse(3*width/4, p, 80, 80);
    line(3*width/4, p-40, 3*width/4, p+40);
    line(3*width/4-5, p-40, 3*width/4-5, p+40);
    line(3*width/4-10, p-40, 3*width/4-10, p+40);
    line(3*width/4-15, p-40, 3*width/4-15, p+40);
    line(3*width/4-20, p-40, 3*width/4-20, p+40);
    line(3*width/4-25, p-40, 3*width/4-25, p+40);
    line(3*width/4-30, p-40, 3*width/4-30, p+40);
    line(3*width/4-35, p-40, 3*width/4-35, p+40);
    line(3*width/4-40, p-40, 3*width/4-40, p+40);
    line(3*width/4+5, p-40, 3*width/4+5, p+40);
    line(3*width/4+10, p-40, 3*width/4+10, p+40);
    line(3*width/4+15, p-40, 3*width/4+15, p+40);
    line(3*width/4+20, p-40, 3*width/4+20, p+40);
    line(3*width/4+25, p-40, 3*width/4+25, p+40);
    line(3*width/4+30, p-40, 3*width/4+30, p+40);
    line(3*width/4+35, p-40, 3*width/4+35, p+40);
    line(3*width/4+40, p-40, 3*width/4+40, p+40);
    line(3*width/4-40, p, 3*width/4+40, p);
    line(3*width/4-40, p-5, 3*width/4+40, p-5);
    line(3*width/4-40, p-10, 3*width/4+40, p-10);
    line(3*width/4-40, p-15, 3*width/4+40, p-15);
    line(3*width/4-40, p-20, 3*width/4+40, p-20);
    line(3*width/4-40, p-25, 3*width/4+40, p-25);
    line(3*width/4-40, p-30, 3*width/4+40, p-30);
    line(3*width/4-40, p-35, 3*width/4+40, p-35);
    line(3*width/4-40, p-40, 3*width/4+40, p-40);
    line(3*width/4-40, p+5, 3*width/4+40, p+5);
    line(3*width/4-40, p+10, 3*width/4+40, p+10);
    line(3*width/4-40, p+15, 3*width/4+40, p+15);
    line(3*width/4-40, p+20, 3*width/4+40, p+20);
    line(3*width/4-40, p+25, 3*width/4+40, p+25);
    line(3*width/4-40, p+30, 3*width/4+40, p+30);
    line(3*width/4-40, p+35, 3*width/4+40, p+35);
    line(3*width/4-40, p+40, 3*width/4+40, p+40);
    translate(width/2, height/3);
    rotate(radians(-r));
//BODY of image:
        noStroke();
    	fill(255);
    triangle(-7, -thickness/2+1, 7, -thickness/2+1, 0, -50);	//neck
    ellipse(0, -60, 60+thickness/2, 60+thickness/2);		// head
    	fill(200+b, 100-b, 50+b);		// variable used for color change
    rect(0, 0, width/4, thickness);		// shoulders
    if (constrain(mouseX, width/10, 2*width/10) == mouseX ||	//dancing motion! for body
      constrain(mouseX, 3*width/10, 4*width/10) == mouseX || 
      constrain(mouseX, 5*width/10, 6*width/10) == mouseX || 
      constrain(mouseX, 7*width/10, 8*width/10) == mouseX || 
      constrain(mouseX, 9*width/10, width) == mouseX) {
	    quad(-thickness,0, thickness,0, width/8+5, height/3, -width/8+5, height/3);		// body
    } else {
		quad(-thickness,0, thickness,0, width/8-5, height/3, -width/8-5, height/3);		// body
    }	
		fill(255);
    quad(-width/8+1,thickness/2, -width/8+1,-thickness/2,  -width/16,-thickness+70, -width/16,+70);  // left arm   
    if (mouseX < width/2 & mouseX > width/4 || mouseX > 3*width/4) {
	    quad(width/8-1,thickness/2, width/8-1,-thickness/2,  0,-thickness+75, 0,75); //right arm
	} else {    
	    quad(width/8-1,thickness/2, width/8-1,-thickness/2,  width/4-1,-thickness-50, width/4-1,-50);    //disco baby! 	
    }	
    quad(-10,height/3-1, -10-thickness,height/3-1, -20-thickness,height/3+50, -20,height/3+50);	//left leg
    quad(10,height/3-1, 10+thickness,height/3-1, 20+thickness,height/3+50, 20,height/3+50);		// right leg 
    	fill(100);
    triangle(-20-thickness,height/3+50, -20,height/3+50, -30-thickness, height/3+65);	//left shoe
    triangle(20+thickness,height/3+50, 20,height/3+50, 30+thickness, height/3+65);		// right shoe 
    	noFill();
    	stroke(0);
    arc(0, -60, 30+thickness/2, 30+thickness/2, 0, PI);		// smile
    arc(-10, -70, 15, 15, PI, 0);		//eye
    arc(10, -70, 15, 15, PI, 0);		//eye

//rotation limits:
    if ((mouseX - width/2)/10 <= -20) {
	    r = -20;
	} else if ((mouseX - width/2)/10 >= 20) {
		r = 20;
	} else {
		r = (mouseX - width/2)/10;
	}
	
    if (mouseY/10 <= 10) {
	    thickness = 10;
	} else if (mouseY/10 >= 35) {
		thickness = 35;
	} else {
        thickness = (mouseY)/10;
	}
//color change:
    b = r*5;
//disco drop:
    if (-mouseY + 300 <= -40) {
	    p = -40;
	} else if (-mouseY + 300 >= 100) {
		p = 100;
	} else {
        p = - mouseY + 300;
    }

}

When I read the requirements for this assignment, I kept thinking about watching the shapes ‘dance’ around on the screen, which inspired the image I created.

Project 3: Dynamic Drawing

The project that I found inspirational is Benjamin Dillenburger’s Numerical Material. This project was created in 2021.

Numerical Material. This photo portrays the overall form of the artwork.

Numerical Material. This photo potrays the details of the algorithm of how the artwork was created when observed closely.

I admire this project because, the overall shape of the artwork has curves and has circular and soft lines and forms, yet when looked closely, these curves are created my geometric shapes of lines (sticks). While the sticks are white, the curvature of the surface creates positive and negative spaces as well as shadows, and lighter spaces which make the artwork very interesting to observe. The “set of rules” of parametric object are that the multiple sticks are overlapped onto each other to create a curve, and to connect the “curves” in a technical aspect to have the artwork itself hold, there are supporting sticks that overlap between these curves.

Link to Artwork

Project 3: Dynamic Drawing

luca p3

var bs = 50//boxsize
var bv = 5//boxspeed
var bx = 300//box x position
var by = 200//box y position
var an = 180//box angle

function setup() {
    createCanvas(600, 450);
    background(254, 250, 224);
    rectMode(CENTER)
    frameRate(100)
    noStroke();
}

//background
function draw(){

    rotate(radians(an));
    an=an+50;

    function mousePressed(){
        an=an-50
    }

    //colorchange
    if(mouseX<width/2 & mouseYheight/2)
        fill(220, 47, 2);
    if(mouseX<width/2 & mouseY>height/2)
        fill(250, 163, 7);

    rect(bx,by,bs,bs);

    if(mouseX & mouseY >= 600 || mouseY && mouseX >= 450)
        bs=bs+0.1;


}

I find this project quite challenging because we have a lot more variables to consider. I think it was easy to create an interaction that is totally random but it was difficult to create an interaction that was consistent every time. Through this project, I learned more about coding with multiple variables.