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

Project 5: Wallpaper

function setup() {
    createCanvas(400, 400);
    background(0);
    noLoop();
}

function draw() {
    stroke(255, 202, 141); //yellow
    strokeWeight(0.5); //for diagonal lines

    for (var x = 0; x <= 400; x += 50) { //draw diagonal lines
        for (var y = 0; y <= 400; y += 50) {
            line(x, y+height/8, x+width/8, y); // diagonal lines
            line(x, y, x-width/8, y-height/8); // diagonal lines
        }
    }

    strokeWeight(1.5); //for petals
    hpetal (0, 50); //initial petal 
    for (var x = 0; x <= 400; x+=100) { //draw petals
        for (var y = 50; y <= 450; y+=100) {
            hpetal(x, y); 
            hpetal(x+50, y+50);
            hpetal(x-50, y-50);
        }
    } 
}

function hpetal (x, y) {
    //left petal
    fill(231, 193, 206); //pink
    beginShape();
    curveVertex(x, y);
    curveVertex(x, y);
    curveVertex(x+25, y-10);
    curveVertex(x+50, y);
    curveVertex(x+25, y+10);
    curveVertex(x, y);
    curveVertex(x, y);
    endShape();

    //right petal
    fill(170, 201, 206); //pale green
    beginShape();
    curveVertex(x+50, y);
    curveVertex(x+50, y);
    curveVertex(x+75, y-10);
    curveVertex(x+100, y);
    curveVertex(x+75, y+10);
    curveVertex(x+50, y);
    curveVertex(x+50, y);
    endShape();

    //top petal
    fill(244, 220, 208); //pale pink
    beginShape();
    curveVertex(x+50, y-50);
    curveVertex(x+50, y-50);
    curveVertex(x+60, y-25);
    curveVertex(x+50, y);
    curveVertex(x+40, y-25);
    curveVertex(x+50, y-50);
    curveVertex(x+50, y-50);
    endShape(); 

    //bottom petal
    fill(170, 201, 229); //pale blue
    beginShape();
    curveVertex(x+50, y);
    curveVertex(x+50, y);
    curveVertex(x+60, y+25);
    curveVertex(x+50, y+50);
    curveVertex(x+40, y+25);
    curveVertex(x+50, y);
    curveVertex(x+50, y);
    endShape(); 

}

Through this project, I became more comfortable with using nested loops and understood better how they work. This is my initial sketch:

I wanted to create a wallpaper that involved these symmetrical petals, and so I started by drawing them. Then I explored a little by shifting and overlapping the petals for a more interesting effect. This is the version without the overlaps, which I quite enjoy as well:

My design doesn’t quite remind me of wallpaper, instead, I see it more as a pattern for a silk square scarf. I really enjoyed testing and adding different elements to generate a pattern for this project!

Looking Outwards 05: 3D Computer Graphics

One project that caught my attention immediately is “Spells” created by Sasha Vinogradova in 2021. “Spells” is a series composed of 3 pieces, “Air”, “Whisper”, and “Fire”, intending to express “the magic one feels when inspiration strikes”. The 3D strings in the work represent the energy streams that allow us to connect, feel, and create. I really like this project because the artist did an incredible job in creating dimensions. Although it’s a 2D image, the way the strings are twisted and wrapped in the space creates depth and the illusion of a 3D sphere. “Spells” was designed using C4D and Zbrush, which are both 3D software for the creative industries. I explored both of these tools, and I found their features to be quite fascinating. For instance, Zbrush can actually allow users to sculpt 3D figures through “digital clay”. This week’s LO allowed me to gain some insight on how digital art and computer graphics can now exceed 2D and allow artists to generate 3D and interactive art.

String Art

sketch

var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 50;

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

function draw() {
    background(200);
    //line(mouseX, mouseX, 150-mouseY, 300+mouseY);
    //line(mouseX, mouseX, 350-mouseY, 100+mouseY);

    var x1 = mouseX;
    var y1 = mouseX;
    var x2 = mouseX;
    var y2 = mouseX;

    dx1 = (mouseX-mouseY)/numLines;
    dy1 = (mouseX-mouseY)/numLines;
    dx2 = (150-mouseY-350-mouseY)/numLines;
    dy2 = (300+mouseY-100+mouseY)/numLines;

    for (var i = 0; i <= numLines; i += 1) {
        stroke(0);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    var r = 20;

    fill(255,140,140);
    noStroke();
    circle(mouseY, mouseX, 2*r);

    fill(140,140,255);
    circle(width-mouseY, height-mouseX, 40);

    var xc1 = mouseY;
    var yc1 = mouseX+r;
    var xc2 = width-mouseY;
    var yc2 = height-mouseX-r;


    for (var i = 0; i <= 2*PI; i += PI/4) {
        stroke(0);
        line(xc1, yc1, xc2, yc2);
        if (i <= PI/2) {
            xc1 += r*Math.sin(i);
            yc1 -= r-r*Math.cos(i);
            xc2 -= r*Math.sin(i);
            yc2 += r-r*Math.cos(i);
        } else if (i > PI/2 & i <= PI) {
            xc1 -= r*Math.sin(i);
            yc1 -= r-r*Math.cos(i);
            xc2 += r*Math.sin(i);
            yc2 += r-r*Math.cos(i);
        } else if (i > PI & i <= 3*PI/2) {
            xc1 -= r*Math.sin(i);
            yc1 += r-r*Math.cos(i);
            xc2 += r*Math.sin(i);
            yc2 -= r-r*Math.cos(i);
        } else if (i > 3*PI/2 & i <= 2*PI) {
            xc1 += r*Math.sin(i);
            yc1 += r-r*Math.cos(i);
            xc2 -= r*Math.sin(i);
            yc2 -= r-r*Math.cos(i);
        }
    }
}

Sound Art

Ikue Mori makes interesting music using electronic drums. I love how she collaborates with multiple other artists to combine each of their unique sounds. It allows her to produce different mixtures of music. I also like how immersive it is with headphones. It always amazes me how people can get the “360º surround sound” by having each earbud play different sounds. Integrating this into the music really adds to the ambience. Mori previously used physical drums, but made the switch to electronic music. The partially computer generated sound probably comes from noises the computer makes that are then manipulated by the artist. Although these sounds come from a computer and are not organic noises from a physical instrument, Mori’s unique sound can still be heard across her works.

String Art

sketch Download

var dx1;
var dy1;
var dx2;
var dy2;

function setup() {
    createCanvas(400, 300);
    background(200);
}

function draw() {
    drawLines(0, 50, 400, 200, 150, 300, 100, 100, 50);
    drawLines(100, 0, 300, 300, 150, 200, 350, 100, 50);
    drawLines(0, 200, 300, 100, 300, 300, 400, 300, 50);
    drawLines(350, 100, 300, 200, 150, 300, 350, 100, 50);
    noLoop();
}

function drawLines(x1, y1, x2, y2, x3, y3, x4, y4, numLines) {
  dx1 = (x3-x1)/numLines;
  dy1 = (y3-y1)/numLines;
  dx2 = (x4-x2)/numLines;
  dy2 = (y4-y2)/numLines;
  line(x1, y1, x3, y3);
  line(x2, y2, x4, y4);
  for (var i = 0; i <= numLines; i += 1) {
      line(x1, y1, x2, y2);
      x1 += dx1;
      y1 += dy1;
      x2 += dx2;
      y2 += dy2;
  }
}

Although my art isn’t super cool, I’m glad that I was able to write a method to draw shapes. Now I can spam it as many times as I want and just put in the parameters for where the lines should start and end 🙂

LO 4: Sound Art

For this week’s Looking Outwards, I chose Janet Cardiff and George Bures Miller’s Forty-Part Motet Sound Installation.

The British-Columbia based Artists created this Installation by having the Salisbury Cathedral Choir sing Thomas Tallis’ 1573 “Spem in Alium.” With the recordings in place, 40 Speakers were set up in groups of 5 and separated by Musical Group.

By moving between the Speakers and within the area, a person is about change their perception of the Track – feeling and hearing it dynamically morph.
I admire the Work’s simplicity and ease of access.

The Artists just used Speakers to create their Sound Art, relying on already utilized Algorithms to make this.

Furthermore, the music they chose to record and convey through the Speakers is beautiful.

Finally, the Artists were right in saying that the Installation evokes a spiritual/emotional aspect. This aspect is shown through the Music itself and no doubt it is much more pronounced in person.

Here is their website, this specific work, the video, works, and their about section.

Project-04: String-Art

My Project

//allows for rotation
var rot = 0;

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

function draw() {
    background(220);
    lineSpread(400, 0, 0, 400, 10, 0, 0);
    lineSpread(0, 300, 0, 400, 10, 0, 0);
    lineSpread(0, 0, 0, 400, 10, 0, 0);
    lineSpread()
    fill(220);
    rect(300, 20, 80, 80);
    circle(75, 225, 75);
    if ((mouseX > 300 & mouseX < 380) && (mouseY < 100 && mouseY > 20) ){
        background(220);
        line(150, 100, 250, 100);
        line(150, 200, 250, 200);
        line(150, 100, 150, 200);
        line(250, 100, 250, 200);
        lineSpread(200, 0, 150, 250, 10, 0, 100);
        lineSpread(200, 300, 150, 250, 10, 0, 200);
        lineSpread(0, 150, 100, 200, 10, 150, 0);
        lineSpread(400, 150, 100, 200, 10, 250, 0);
        line(0, 150, 200, 0);
        line(200, 0, 400, 150);
        line(200, 300, 400, 150);
        line(0, 150, 200, 300);
    }
    else if (dist(mouseX, mouseY, 75, 225) < 40){
         background(220);
         fill(220);
         lineSpread(200, 150, 0, 300, 5, 112.5, 0);
         lineSpread(200, 150, 0, 300, 5, 287.5, 0);
         for (var i = 0; i < 300; i += 5){
              line(0, i, 112.5, i);
              line(287.5, i, 400, i);
         }
         stroke(20);
         circle(75, 225, 75);
         circle(75, 75, 75);
         circle(325, 75, 75);
         circle(325, 225, 75);
         lineSpread(200, 0, 150, 250, 10, 0, 60);
         lineSpread(200, 300, 150, 250, 10, 0, 240);
         lineSpread(200, 150, 150, 250, 10, 0, 60);
         lineSpread(200, 150, 150, 250, 10, 0, 240);
         push();
         translate(75, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(75, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();

         rot = rot += 2;

    }
    else {
        background(220);
        lineSpread(400, 0, 0, 400, 10, 0, 0);
        lineSpread(0, 300, 0, 400, 10, 0, 0);
        lineSpread(0, 0, 0, 400, 10, 0, 0);
        fill(220);
        rect(300, 20, 80, 80);
        circle(75, 225, 75);
    }

    
}

function lineSpread(x1, y1, startDegree, endDegree, lineSpace, sXNum, sYNum){
    if (sXNum == 0 & sYNum == 0){
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, degree);
    }
    }
    else if (sXNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, sXNum, degree);
    }
    }
    else if (sYNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, sYNum);
    }
}

}

I initially tried to do something more complex, but I settled for simpler things. I had fun writing the Function I used.

String Art

class= “p5-embed” data-width = “400” data-height= “300” href= “https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/09/sketch-180.js”>sketch Download

I really struggled with this project because I couldn’t visually where would the lines be drawn thus I used very simple drawing tactics to create overlapping rhombuses to create a star with CMU’s plaid effect.

conniek – Project-04: String Art

conniek – 04 -project Download

During my process in making this project, I wanted to have symmetry in my project, so I used the same color lines and similar code to make the symmetrical feeling in the piece. I made my project have triangles, kites, parallelograms, and other smaller shapes around the piece.

conniek – 04 – LO

I think Ryoji Ikeda’s The Planck Universe is a project I admire because of the vivid contrasting colors of white, black, grey, and red. The number of details in this imposing large-scale audiovisual installation is phenomenal. The small blood-red pixels help make an emphasis to the audience about the concept of Plank length. The piece makes the person looking at it seem like a part or fragment of the cosmos in the monochromatic background filled with abstract red speckled pixels. Using code and sound, he creates visual abstract motions to release his artistic point of view and ideas that avoid a philosophical perspective so that the audience is able to have their own opinions and experience.

“Composition is the most important element”: Ryoji Ikeda in Taipei