![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
X-Particles is a product made by a CGI company to enable artists to use particle systems to create special effects. Every year when they release a new version of the software, the company creates a showreel to display the different effects that the software affords the users. I think that these advertisements do a great job of bridging the gap between purely computational and creative work.
Author: mstropka@andrew.cmu.edu
mstropka-Project-04
//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-04
function setup() {
createCanvas(400, 300);
}
function draw() {
background(255);
//draw ten lines from upper left corner
//line spacing controled by mouseX and mouseY
for(var i = 0; i < 10; i ++){
line(0, 0, i*mouseX, mouseY);
}
//draw ten lines from upper right
for(var i = 0; i < 10; i ++){
line(400, 300 , i*mouseX, mouseY);
}
//draw ten lines from lower right
for(var i = 0; i < 10; i ++){
line(400, 0, i*mouseX, mouseY);
}
//draw ten lines from lower right
for(var i = 0; i < 10; i ++){
line(0, 300 , i*mouseX, mouseY);
}
}
For this project, I tried doing something simple because I am still not 100% comfortable with loops. So I made a couple loops that generate lines that touch at the x and y values of the mouse.
mstropka-Looking Outwards-04
This chair is part of a series of chairs called Nóize chairs by Estudio Guto Requena. The Brazilian designers recorded ambient noise in the streets of São Paulo then used the information from the sound recordings to distort the surfaces of 3D modeled chairs. They distorted three classic Brazilian chair designs. The goal for the designers was to create a chair that represented the culture and ambiance of brazil. By taking an already iconic chair design and distorting it with the sounds of the area, the designers created a very interesting object that is symbolic of their native country.
I find this project very interesting because it is an example of designers building off of the ideas that older designers had with the new technology that is available today. However, I think that the way they distorted the models of the chairs is a pretty generic algorithm for distortion. I think that this concept could be better executed if the designers edited the distortion algorithms to generate geometry that was symbolic of some other aspect of Brazil culture or reminiscent of the original design of the chair.
mstropka-Looking Outwards-03-Section E
In this Ted Talk Neri Oxman talks about using computation to drive the design of physical things. The Ted talk includes 3D animations of the generative algorithms that her team then 3D printed to make wearables. I think it is fascinating that this team is using computers to generate forms that are both organic in their appearance and function. It is very inspiring to see that computers and rapid prototyping technologies, the epitome of the artificial, are helping designers and engineers to create products that are meant to emulate natural processes. Moving forward I think that this type of research will inspire people to develop technologies that are more connected to the natural world.
mstropka-Project 03-Section E
//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 03
var squares = []; //empty array for squares
var speed = 5; // speed multiplyer for motion of squares
var squaresize = 40; //initial square size
var angle = 0 //initial rotation of squares
function setup() {
angleMode(DEGREES);
createCanvas(640, 480);
//loop that continually makes 400 squares inside the array
for (var i = 0; i < 400; i++) {
squares[i] = {
//squares are drawn at a random location on canvas
x : random(0, width),
y : random(0, height),
//draw the squares
display: function() {
push();
noFill();
stroke(225);
//if the mouse is within 100 pixels of any of the squares
if(dist(mouseX, mouseY, this.x, this.y) < 100){
stroke(255,0,0); //stroke will become red
rotate(angle + random(-10,10)); //squares will rotate +-10 degrees
squaresize = squaresize + 10; //squares will grow by 10 pixels in the x and y direction
}else{
squaresize = 40; //if the mouse is not close, the squares will return to normal size
}
rect(this.x, this.y, squaresize, squaresize); //draw the squares
pop();
},
//gives squares random movement in x and y direction if mouse is within 100 pixels
move: function() {
if(dist(mouseX, mouseY, this.x, this.y) < 100){
this.x = this.x + random(-1, 1) * speed; //causes squares to move in a random x direction
this.y = this.y + random(-1, 1) * speed; //causes squares to move in a random y direction
}else{
this.x = this.x //if the mouse is not within 100 pixels, dont move
this.y = this.y
}
}
}
}
}
function draw() {
background(120);
//make squares until the array is full
for (var i = 0; i < squares.length; i++){
squares[i].move(); //runs move function
squares[i].display(); //runs display funtion
}
}
For this project I wanted the mouse to interact with a lot of shapes in the sketch. I did some research and figured the best way to do that was to set up an array for all of the objects that the mouse was to interact with. After watching several explanations on youtube, I figured out how to apply what we learned about changing shapes in class to what I learned online about arrays. The result is a program that generates a bunch of squares that rotate, grow, move, and change color when the mouse is near them.
mstropka-Project02-Variable-Face
//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 02
//defining variables for points that define the shape of the face
var point1x = 405
var point1y = 75
var point2x = 405
var point2y = 565
var point3x = 75
var point3y = 565
var point4x = 75
var point4y = 75
//variables for colors
var r = 255
var g = 255
var b = 255
//colors for eyes
var r1 = 225
var g1 = 225
var b1 = 225
var eyesize = 20
var mouthsize = 2
function setup() {
createCanvas(480, 640);
}
function draw() {
background(250);
//outside of face is drawn with a closed curveVertex shape
strokeWeight(5);
fill(r, g, b);
beginShape();
curveVertex(point1x, point1y);
curveVertex(point1x, point1y);
curveVertex(point2x, point2y);
curveVertex(point3x, point3y);
curveVertex(point4x, point4y);
endShape(CLOSE);
//location of right and left eyes is driven by the points that control the outside of the face
//so that they always are drawn inside the shape of the head
strokeWeight(2);
fill(r1, g1, b1);
ellipse(point1x - 40, point1y + 40, eyesize, eyesize);
strokeWeight(2);
fill(r1, g1, b1);
ellipse(point4x + 40, point4y + 40, eyesize, eyesize);
//the mouth shape is made by dividing and multiplying the variables of the head shape
//to make a similar shape, but smaller
beginShape();
curveVertex(point1x/2, point1y*2);
curveVertex(point1x/2, point1y*2);
curveVertex(point2x/2, point2y/2);
curveVertex(point3x*2, point3y/2);
curveVertex(point4x*2, point4y*2);
endShape(CLOSE);
//bags under eyes
noFill();
arc(point1x - 40, point1y + 40, 50, 50, 0, HALF_PI);
arc(point4x + 40, point4y + 40, 50, 50, 0, HALF_PI);
}
function mousePressed() {
// when mouse is pressed, the points that define the face shape move
// within a range such that the outline will always take up most of the canvas
point1x = random(205,405);
point1y = random(75, 150);
point2x = random(205,405);
point2y = random(365,565);
point3x = random(75, 150);
point3y = random(365,565);
point4x = random(75,150);
point4y = random(75,150);
//when mouse is clicked, a random rgb value is assigned to colors
r = random(0,255);
g = random(0,255);
b = random(0,255);
r1 = random(0,255);
g1 = random(0,255);
b1 = random(0,255);
}
I tried to make a program that would randomly generate almost every aspect of the face, but also have all of the faces look similar enough that they could be related. My method for this was to create a shape using curveVertex points that would change every time the mouse is clicked and have all of the other features in the face defined by these points. I also added bags under the eyes to give the faces a little more character. One thing I couldn’t figure out was keeping the features from touching each other or going off of the face
mstropka-lookingoutwards-01
This is the 2016 AICP Sponsor reel. The designers behind this piece used motion capture to record various dancers performing and translate their movements to 3D avatars. The team used a combination of procedural animation techniques and dynamic simulations to add character to the different dances.
I find this piece inspiring because the artists behind the work found a way to not just combine the art of dancing with digital art, but they used the digital side to enhance the movements of the dancers. A good example of this is at 0:58-1:03 in the video. The animators emphasized the spinning motion of the dance by creating a flurry of particles that follow the dancer around. Though it is unclear exactly how the dancer is moving, the particle swarm captures the gesture of the moments in a very life like and real way. This work is a very interesting twenty first century take on the ideas that the Italian futurists developed about one hundred years ago. You may be able to see the similarities in Umberto Boccioni’s “Dynamism of a Soccer Player.”
While this video is very entertaining to watch, it only showcases very fast upbeat dancing. I would like to see the technology and techniques that the designers behind this piece used applied to different types of motions. I bet slower more subtle motions could turn into something very beautiful when combined with these effects.
mstropka-Project 01-Self Portrait
Here is what I worked on for Project 1. I tried using as few shapes as possible to create an image that captured my likeness. because I only know how to make basic shapes, I had to mask off certain shapes to make more complex shapes. I would be interested in learning a more streamlined way of creating more complex shapes.
//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Assignment-02
function setup() {
createCanvas(600, 600);
}
function draw() {
background(225,225,225);
//hair
rectMode(CENTER);
fill(255,255,51);
noStroke();
rect(300,180,350,250);
//body
fill(153,204,250);
noStroke();
ellipse(300,600,350,350);
//neck
fill(225,204,153);
stroke(153,204,200)
ellipse(300,420,150,150);
//head
fill(225,204,153);
noStroke();
ellipse(300,300,350,350);
//left eye
fill(153,204,250);
noStroke();
ellipse(220,250,100,100);
fill(0);
noStroke();
ellipse(240,235,40,40);
//right eye
fill(153,204,250);
noStroke();
ellipse(400,275,75,75);
fill(0);
noStroke();
ellipse(410,260,20,20);
// mouth
fill(0);
noStroke();
ellipse(250,400,80,60);
// hair triangles
fill(225,225,225);
triangle(100,200,50,25,300,10);
triangle(300,100,310,10,400,1);
}