SectionA – Page 13 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Assignment 3 – Game

//David Vargas dvargas

var vVelocity =1; //direction and speed of ball
var hVelocity =5;
var x= 100; // x position of ball
var y= 100; // y position of ball
var diam = 35; //diameter of circle
var points=0; // number of points
var title = true; //title screen text variable


function setup() {
    createCanvas(200, 200);
    background(220);
    
}

function draw() {

    background(220);
    fill(150,160,240);
    ellipse(x,y,diam);
    textSize(15);
    text(points,width/2, 20);

    x += hVelocity; 
    y += vVelocity;

    // this makes ball bounce when it hits vertical walls
    if(x> width-diam / 2){
        hVelocity= random(-5,-1);
    } else if (x< diam/ 2 ) {
        hVelocity = random(1,5);
    }

    // this makes ball bounce when it hits horizontal walls
    if (y > width -diam/2){
        vVelocity= random(-5,-1);
    } else if (y < diam/2){
        vVelocity = random(1,5);
    }

    if(points>4){ //this creates the "you win" screen
        background(100,250,100,50);
        textSize(20);
        fill(255);
        text('You Win',width/3 ,height/2);
        noLoop();

    } else if(points<-4){ //this creates the "you lose" screen
        background(240,100,100,50);
        textSize(20);
        fill(255);
        text('You Lose',width/3, height/2);
        noLoop();
    }

    if(title){ // displays tile screen before mouse is pressed
        textSize(25);
        text('Click the Ball',width/6,height/2)
    }
    print('points='+points);

}

    function mousePressed() {
        if(dist(mouseX,mouseY,x,y)< diam/2){ //this changes circle direction after being pressed
        points+= 1
        vVelocity=random(-5,5)
        hVelocity=random(-5,5)
    } else (points+=-1) 

    title= false // title screen dissappears once mouse is pressed
    }

Dynamic Drawing – Project 3

trippy_geometry



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

function draw() {
    var w = width
    var h = height
    var mX = mouseX
    var mY = mouseY
    var diam= dist(w/2, h/2,mX,mY) //diameter of center circle
    var diam2= 2 * (dist(w/2,h/2,w/2 + w/4, h/2)- diam/2)// diameter of peripheral circles
    background(255);
    noFill();
    strokeWeight(constrain(diam/10,3,6)); //stroke 
    stroke(diam,diam/3,170)
    circle(w/2,h/2,diam); //this is the big circle in the middle
    
    push();
    noFill();
    strokeWeight(constrain(diam2/10,5,15));
    translate(w/2,h/2);// translates origin to canvas center
    
    var angle = atan((mY -h/2) / (mX - w/2)) //this outputs the angle of the cursor to the center of the canvas
    
    if(mX < w/2){
    var x = diam/2 * cos(angle - PI) // x position of peripheral circle based on angle of cursor
    var y = diam/2 * sin(angle - PI) // y position of peripheral circle based on angle of cursor
    } else {
    var x = diam/2 * cos(angle )
    var y = diam/2 * sin(angle )
    }
    for (var r=0; r<=2 * PI;r+=PI/4){ //the circles rotate every 45 degrees
    rotate(r);
    circle(x ,y,diam2); // these are the peripheral circles
}
    pop();

}

Project – 03

sketch

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

function draw(){
    background(60,179,113);

    translate(width/2, height/2);
    for (var BE = 0; BE < 12; BE++) {       //12 big ellipses rotating themselves 
        push();
        rotate(TWO_PI * BE / 12);
        var tx = 200 * mouseX/600;
        rotate(radians(frameCount))
        translate(tx, 0);
        fill(46, 79, 79, 200)
        ellipse(0, 0, 20, 40);
            push()
            strokeWeight(7.5)
            line(0, 0, 100, 100)    //sticks jutting out of the big ellipses
                push()
                rotate(frameCount/50)
                strokeWeight(5)
                translate(100, 100)
                line(-200, 100, 100, 50)    //thinner sticks almost perpindicular to the above ones
                pop()           //if I get rid of pop here, some really crazy things happen
            pop()
        for (var SE = 0; SE < 8; SE++) {    //8 small ellipses going in a circular line around each big ellipse
            push();
            rotate(TWO_PI * SE / 8);
            var rx = 60 * mouseY/450;
            rotate(radians(frameCount))
            fill(200, 0, 0, 150)
            ellipse(rx, 0, 8, 16);
            for (var SS = 0; SS < 8; SS++) {
                push();
                rotate(TWO_PI * SS / 8);
                var sx = 60 * mouseY/450;
                rotate(radians(frameCount))
                square(sx, 0, 8);
                pop(); }
            pop();
              }       
        pop();
    }
}

looking outwards – 03 Section A

Chrysalis by Matsys (Andrew Kudless)

This piece is a static parametric object after a certain point of algorithmic generation that is supposed to represent a “chrysalis” of sorts made of barnacles. I really like how natural it looks, like a naturally formed coral of sorts, or just marine rock that is completely covered with barnacles. A computational medium actually seems perfect for this type of creature as they are inherently geometric in form yet uniquely distinct from one another.
From the video Kudless provides on his website, you can tell that he wrote an algorithm that has all the shapes of the barnacles set already being attached to each other, so the shapes changing are all relative to each other–they all change together. Thus, the physically fabricated product is a static rendering of a paused moment during this algorithm.
In lieu of what I usually love about algorithmic art is its capability of simulating spontaneity through a controlled form of randomization–a combination of pattern/regularity but with the “naturalness” of how uniquely arbitrary entities in nature are from their own species. So, Kudless’ sensibilities work perfectly with emulating the “generativeness” of how barnacles reproduce and exist and infusing that with the medium of sculpture to create an aesthetic beauty.

https://www.matsys.design/chrysalis-iii

Looking Outwards: 03

Mingjing Lin’s parametric modeling in terms of fashion is fueled by her curiosity of the human body. Lin has created her own definitions of parametric thinking and design, which both pull inspirations from the human body: she refers to parametric thinking 2.0 to an “emphasis on the awareness of the human body,” where she creates parametric design in terms of it. Lin’s body-oriented parametric design is inspirational to me because it promotes inclusivity through an abnormal medium. The dynamic body, compared with the fluidity that is parametric modeling creates a new approach for fashion. As the industry is evolving to include body types that are beyond the standard, there is a greater need for more inclusive fashion. Through parametric modeling, fashion can be much more accessible to the masses.

Project 03

This is my project of the moon phases!

sketch

// Natalie Koch
// nataliek
// Section A

// The Phases of the Moon

var diam = 300
var value = 255
var canvasX = 600
var canvasY = 450
function setup() {
    createCanvas(canvasX, canvasY);

}

function draw() {
    background(0);
    mouseX = constrain(mouseX,25,575) //motion constraints
    mouseY = constrain(mouseY,225,225) //motion constraints
    if (width/2-mouseX >= 0) {
        diam = mouseX
        value = (mouseX/canvasX)*255
    } else if (width/2-mouseX < 0) { //size variations as moon moves
        diam = width-mouseX}
        value = (mouseX/canvasX)*255
    fill(255,255,value)
    ellipse(mouseX,mouseY,diam,diam) //moon
    ellipse(50,30,10,10)
    ellipse(100,50,10,10)
    ellipse(120,70,10,10)
    ellipse(160,30,10,10)
    ellipse(200,60,10,10)
    ellipse(250,30,10,10) // } stars
    ellipse(300,40,10,10)
    ellipse(350,20,10,10)
    ellipse(400,50,10,10)
    ellipse(450,30,10,10)
    ellipse(500,60,10,10)
    ellipse(550,30,10,10)
    fill(0)
    ellipse(-75,height/2,400,400) //black circles on sides so moon can crescent
    ellipse(675,height/2,400,400)
}

Looking Outwards 03

For this assignment, I was reading about “Robots in Architecture.” I thought the crossover between these two disciplines was really interesting, specifically because even though I don’t know much about them, I find robots fascinating. In this project, robots are used to help construct different architectural works. I don’t know much about the algorithms, but coding and engineering had to play a key role in the functioning success of these robots. The website says that KUKA|prc is a program that simulates the different positions of the robot, also citing a wide range of algorithms (such as Grasshopper) that these coders can build upon to make sure the robot functions smoothly. The creators had to have a very specific vision in mind for the buildings, and then an even greater handle on the coding needed for the robots to successfully carry it out. This is a great example of how STEM and the arts can intersect to form something powerful and innovative, and I would love to watch a project be carried out like this first hand.

Article link:
https://www.robotsinarchitecture.org/kukaprc

Watch the robot at work here:

SnP chair / project

The SnP chair by Daniel Widrig & Material Architecture Lab is an injection-molded recycled plastic sculpture of sorts. Its interlocking parts don’t require any additional fasteners, thus allowing the structural system to be disassembled and reassembled in any number of combinations, from the scale of a stool to an entire pavilion.

the SnP chair: just one configuration of the structural system

I admire the adaptability and wide applicability of this project, as well as the use of recycled material. With so many realized parametric projects, there is a tendency to disregard concerns of material use for the sake of the art.

Additionally, the interlocking “S” and “P”-shaped pieces are beautifully designed, with so many different configurations possible (as illustrated in the teams’ diagrams). The name “SnP” alludes to the s-traps and p-traps used in plumbing, though the project portfolio doesn’t elaborate much on the geometric reasoning of the individual module.

project 03: cube-y

the hardest part for me was sticking with an idea, and resisting the urge to scrap my code constantly. it was also tricky to keep my variables in check without rewriting them with each function… anyway, try moving your mouse around the canvas and clicking!

sketch

// Jaden Luscher
// section A
// project 03

var x = 0;
var y = 0;
var square1 = 0;
var square2 = 0;
var rot1 = 0;
var rot2 = 0;
var col = 200;

function setup() {
    createCanvas(600, 450);
    background(200,200,100);
}

function draw() {
  background(200,200,100);
  rectMode(CENTER);
  noStroke();
  fill(col);
  translate(width/2, height/2); // move origin to center of canvas

  square1 = (mouseX + mouseY) / 2; // move mouse to change square size
  rot1 += 0.01; // makes square 1 spin
  rotate(rot1);
  rect(x, y, square1, square1); // center square (square 1)

  square2 = (mouseX - mouseY); // size of four squares differs from square 1
  if(mouseX > mouseY) {
    rot2 = 2 * rot1; // spins clockwise
  } else {
    rot2 = -2 * rot1; // spins counter clockwise
  }
  rotate(rot2);
  rect(x + square2, y + square2, square2, square2);
  rect(x - square2, y - square2, square2, square2);
  rect(x + square2, y - square2, square2, square2);
  rect(x - square2, y + square2, square2, square2); // four squares at corners

  if (mouseIsPressed) { // squares "jitter" & turn white
    rot1 *= -1;
    col = 255;
  } else {
    col = 0;
  }

  print("square2 = ", square2);

}

Looking Outwards – 03

The Mediated Matter group creates fabrication tools to enhance the relationships between our natural and man – made environments. It also focuses on material ecology.

One of their projects, the Aguahoja II builds upon this technology by creating biopolymer skin. They used a generative pattern of rigid veins containing high concentrations of cellulose within the multi-material skin. Something that I most admire about this project is its functionality and how purposeful it is. By incorporating natural pigments and dyes, the patterns that are inspired by them can be used to communicate with other organisms. The creators artistic sensibilities come in with the fact that they get to create and turn the different culmination of patterns into skin.

https://www.media.mit.edu/projects/aguahoja-ii/overview/