Sonia – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project – 09: Portrait

Sonia — Tue, 08 Nov 2022 08:53:55 +0000

Using pointillism for different shapes. Before, I was trying to use different lines, but I wasn’t able to get it to work sadly.

sketch

After 1 minute

After 2 minutes

After 5 minutes

var sonia;
var smallPoint, largePoint;

function preload() {
    sonia = loadImage("https://i.imgur.com/3h0u1wQ.jpeg");
}
function setup() {
    createCanvas(480, 480);
    //creating variables for the smallPoint size and the largePoint size
    smallPoint = 4;
    largePoint = 20;
    noStroke();
    background(220);
    rectMode(CENTER)
}

function draw() {
    //created 6 x and y variables to hold different sizes of widths and heights based on the corresponding variable
    var x1 = floor(random(sonia.width));
    var y1 = floor(random(sonia.height));
    //-10 and +10 so that it would always draw a shorter line, so when I used get, it would get a color closer to the point.
    var x2 = floor(random(x1 - 10, x1 + 10));
    var y2 = floor(random(y1 -10, y1 + 10));
    var x = floor(random(sonia.width));
    var y = floor(random(sonia.height));
    var lineLength = ((y2 - y1) / (x2 - x1)) / 10;
    createMultipleLines(x1,y1, x2,y2);
    createMultipleRectangles(x,y);
    createMultiplePoints(x,y);
}

function createMultipleLines(x1, y1, x2, y2) {
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    //gets color
    var pix = sonia.get(x1,y1);
    var pix1 = sonia.get(x2,y2);
    stroke(pix);
    //random strokeWeight
    strokeWeight(random(0.1, pointillize));
    line(x1,y1,x2,y2);
}

function createMultipleRectangles(x,y) {
    //creates multiple rectangles using same method
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    print(sonia.width);
    print(sonia.height)
    var pix = sonia.get(x,y);
    fill(pix);
    noStroke();
    rect(x,y, pointillize, pointillize);
}

function createMultiplePoints(x,y) {
    //creates multiple circular points using same method.
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    print(sonia.width);
    print(sonia.height)
    var pix = sonia.get(x,y);
    fill(pix);
    noStroke();
    ellipse(x,y, pointillize, pointillize);
}
    


// function createTinyLines(x1,y1,x2,y2, lineLength) {
//     var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
//     for (var i = 0; i< lineLength; i ++) {
//         var pix = sonia.get(x1,y1);
//         var pix1 = sonia.get(x2,y2);
//         stroke(pix);
//         line(x1,y1,x2,y2);
//         var slopeY = y2 - y1;
//         var slopeX = x2 - x1;
//         x1 = x2;
//         y1 = y2;
//         x2 += slopeX;
//         y2 += slopeY;
//     }
// }

// function createOneLine(x1,y1,x2,y2, lineLength) {
//     //var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
//     var pix = sonia.get(x1,y1);
//     var pix1 = sonia.get(x2,y2);
//     stroke(pix);
//     for (var i = 0; i< 20; i ++) {
//         line(x1,y1,x2,y2);
//         var slopeY = y2 - y1;
//         var slopeX = x2 - x1;
//         x1 == x2;
//         y1 == y2;
//         x2 += slopeX;
//         y2 += slopeY;
    
//     }
    
// }

Looking Outwords:09

Sonia — Mon, 07 Nov 2022 02:55:36 +0000

The Horticultural Spa is a spa for plants and people. It is part greenhouse and part “pneumatic bubble”. The purpose it to create a place for people to breathe and connect. I chose Rachel Wingfield as she has experience with large-scale architecture which is something I am also interested in. In this space, she transforms this public garden in order to tell her story about water scarcity and how innovative technologies can start to be redeveloped to reduce consumption. Meditative practices are also used in the spa and certain soundtracks generate music as well. I like how she tries to merge biological and technological futures through her work especially at an urban scale.

Horticultural Spa

link

Looking Outwards – 08

Sonia — Mon, 31 Oct 2022 00:57:17 +0000

Deray Mckesson and Samuel Sinyangwe start their talk talking about police violence. Before Twitter, no one was really aware of the police violence in America, and even if they were aware, there was lack of information as to where the police violence was happening as well as how the police were targeting certain individuals. These graphs and collective information wasn’t available to the public and when Twitter came out, certain protesters including Deray Mckesson and Samuel Sinyangwe started to use this to this platform to their advantage and answer these questions using “crowd – sourced” data. They start talking about how there is a strategy to convince people there’s a crisis is different than the strategy to solve the crisis. There is also a difference between being awoke and staying awoke. They called that the Prepared to Win. I admire their awareness on the issue and how they continue trying to fight for what they believe in. Their short quotes begin to help me understand the issue at a small scale but begin to understand what they are really trying to say.

Link to Website (Deray Mckesson)

Link to Website (Samuel Sinyangwe)

Project 07: Curves

Sonia — Sat, 15 Oct 2022 23:46:06 +0000

For this project, if you move your mouse left and right it changes the size of the left and right petals. If you move your mouse up and down it changes the size of the rose curve and the top and bottom inner petals.

sketch

//num of lines(rose) & size for bifoliate
var nPoints = 100;


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

function draw() {
    background(0);

    push();
    //moves origin to center of canvas
    translate(width/2, height/2);
    //inner petals
    draw4BifoliateCurve();
    //outer curves
    drawRoseCurve();
    pop();
}

//creating one singular bifoliate curve
function drawBifoliateCurve() {
    var x;
    var y; 
    var r;

    //conforming a (which controls the size of the bifoliate) to mouseX
    var a = constrain(mouseX - 200, -100, 100); 
    //opaque purple
    fill(200, 162, 230, 100); 
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI); 
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            print("Value" + a);

            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);

}

//creating one bifoliate curve in y-direction
function drawmouseYbifoliateCurve() {
    var x;
    var y; 
    var r;

    var a = constrain(mouseY-200, -120, 120);

    fill(200, 162, 200, 100);
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            //print("Value" + a);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);
 
}
 
//creating 4 Curves (Outer/Inner Petals)   
function draw4BifoliateCurve() {
    push();
    //2 Petals (Top and Bottom)
    rotate(PI/5);
    drawmouseYbifoliateCurve();
    rotate(PI)
    drawmouseYbifoliateCurve();
    pop();
    //2 Petals (Left and Right)
    drawBifoliateCurve();
    push();
    rotate(PI);
    drawBifoliateCurve();
    pop();
}

//draws rose curve
function drawRoseCurve() {
    var x;
    var y; 
    var r;
    var a = 1500;
    //mouse Y controls how many lines
    var n = constrain(mouseY/20, 0, 400/20);

    stroke(255, 255, 255, 150);
    strokeWeight(0.5);
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);

            //rose equation
            r = a*sin(n*t);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape();

}

Looking Outwards 07: Information Visualization

Sonia — Sat, 15 Oct 2022 23:37:53 +0000

Stefanie Posavec created art at the Papworth Hospital, which was an Inpatients Ward. She was commissioned to create artwork that considered the human body and was human-scaled. Most importantly, she wanted it to be calming to patients who had just come out of surgery. I admire her work as she chose to show important computational information through understanding of the heartbeat, breath and lungs, and the blood and blood vessels that connect the two. Then, by incorporating “calming” nature she focused on aesthetics which showed waveforms (which is shown in ocean waves and heartbeats), branching (which is shown in the lungs and trees) etc. This ended up fulfilling the needs of both the patients and the staff as if offered patient privacy as well as a clear line – of-sight for nurses and staff. It was also really cool how she mapped data to concept showing how “medical data relevant to either the heart, lungs, or blood” was used as a ‘seed’ for that floor’s specific artwork.

Link

Stefanie’s Wavelike Art showing the connection between nature and the human body

Looking Outward – 06

Sonia — Sat, 08 Oct 2022 23:28:26 +0000

John Cage had this exhibition in Cambridge. He was known for his different kinds of music and his 1952 composition in which his music was so random. He also used randomness in his hard and it determined his entire exhibition from which stones were chosen to what would be painted around the stones. He also used computer generated coordinates to determine the heights and positions of the pictures while also using a random process to add and remove different pieces during the exhibition as well!

This is important because it starts talking about how certain artists can afford to give up control so he uses computation as a way to make “no mistakes”. Everything has a purpose even if its randomness.

Sometimes randomization also came from solutions. This stained glass window was actually created as a solution to a Sudoku puzzle. So, broken down by row and column, it’s solutions defined the color and types of the stained window.

https://understandinguncertainty.org/node/1066

Project 06: Abstract-Clock

Sonia — Sat, 08 Oct 2022 22:55:23 +0000

For this project, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the “sun” show the different minutes, and the pink background shows the number of hours in the day!

sketch

function setup() {
    createCanvas(350, 350);
    background(173, 216, 230);
}

function draw() {
    background(173, 216, 230);
    hoursBackground();
    minutesCircle();
    secondsCircle();
}

function hoursBackground() { //creates pink rectangles every hour
    push();
    for(var i = 0; i < hour(); i++) {
        strokeWeight(0.1);
        fill(243, 196, 207);
        rect(0,0, width/24, height);
        translate(width/24,0);
    }
    pop();
}

function minutesCircle() { //every minute, a new ray appears coming out of the inner circle
    push();
    strokeWeight(11);
    translate(width/2, height/2);
    for (var i = 0; i < minute(); i ++) {
        angleMode(DEGREES);
        if(i % 2 == 0) { //if i mod 2 is 0, then a short yellow line is drawn
            stroke(253, 253, 150, 200);
            line(0,0, 0, -100);
            rotate(6);
        }else{ // else a long orange line is drawn
            stroke(255, 179, 71, 200);
            line(0,0, 0, -125);
            rotate(6);
        }   
    }
    pop();
}

function secondsCircle() {
        fill(173, 216, 230); //creates inner blue circle
        strokeWeight(0.1);
        circle(width/2, height/2, 40);

        strokeWeight(10); //creates outer white circle that counts 60 seconds in a minute
        stroke(255);
        noFill();
        arc(width/2, height/2, 250, 250, 270, 270 + second()*6);

        strokeWeight(1); // creates inner circle that visually shows every second
        fill(255);
        arc(width/2, height/2, 30, 30, 270, 270 + millis()*0.36);
}

Project -05: Wallpaper

Sonia — Sat, 01 Oct 2022 15:40:56 +0000

I wanted my wallpaper to look 3D and look like if the light was shining from the top left side!

sketch

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

function draw() {
    rotateGrid(-50,0); //rotate's final grid
}

function drawTriangleOne(x,y) { //draws Triangle 1
    strokeWeight(0.1);
    fill(150); //Triangle 1
    triangle(x, y, x + 50, y, x + 25, y + (sqrt(1875))/2);
    fill(80)
    triangle(x + 50, y, x + 25, y + sqrt(1875), x + 25, y + (sqrt(1875))/2);
    fill(230)
    triangle(0, 0, x + 25, y + (sqrt(1875))/2, x + 25, y + sqrt(1875));
}

function drawTriangleTwo(x,y) { //draws Triangle 2
    fill(200); //Triangle 2
    triangle(x + 50, y, x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2); 
    fill(150);
    triangle(x + 50, y, x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
    fill(80);
    triangle(x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
}

function drawFlipTriangleOne(x,y) { //Draws Triangle 3 
    push();
    translate(-25, sqrt(1875));
    drawTriangleTwo(x,y);
    pop();
}

function drawFlipTriangleTwo(x,y) { //Draws Triangle 4
    push();
    translate(25, sqrt(1875));
    drawTriangleOne(x,y);
    pop();
}

function drawSingleRowTriangles(x,y) { //Draws First Row of Triangles
    for (var i = 0; i < 8; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        translate(50,0);
    }
    
}

function drawFourStartingTriangles(x,y) { //Groups First Four Starting Triangles
    for (var i = 0; i < 9; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        drawFlipTriangleOne(x,y);
        drawFlipTriangleTwo(x,y);
    }
}

function drawTwoRowTriangles(x,y) { //Draws First 2 Rows of Triangles
    push();
    for (var i = 0; i < 11; i++) {
        drawFourStartingTriangles(x,y);
        translate(50,0);
    }
    drawTriangleOne(x,y);
    drawFlipTriangleOne(x,y);
    pop();
}

function drawTriangleGrid(x,y) { //Uses for loops to create entire Triangle Grid
    push();
    for (var i = 0; i < 6; i++) {
        drawTwoRowTriangles(x,y);
        translate(0, 2*sqrt(1875));
    }
    drawSingleRowTriangles(x,y);
    drawTriangleOne(x,y);
    drawTriangleTwo(x,y);
    pop();
}

function rotateGrid(x,y) {
    angleMode(DEGREES);
    rotate(30);
    translate(0,-200);
    drawTriangleGrid(x,y);
}

Looking Outwards – 05: 3D Computer Graphics

Sonia — Sat, 01 Oct 2022 15:03:40 +0000

Softbody & Materiality Study

Roman Bratschi is the owner and creative director of his 3D designs made in Switzerland. He is also an experienced animation director, and has experienced his career as a graphic designer. His work is inspired by natural shapes, forms, and patterns. His techniques are expert in exposing their natural simplicity in the final piece. One thing I enjoy about his work is how all of his work reminds me of MacBook Wallpaper. Also, I love how organic some of his work is. Some of them resemble fruits and other vegetables, but they all have the same theme.

https://romanbratschi.com/projects

Looking Outwards – 04

Sonia — Sat, 24 Sep 2022 21:31:07 +0000

Sole is an artificial sun by Quiet Ensemble. The purpose of this project is to create a 360 degree video – mapping to simulate the movement of the sun around the inside of a space. Their project used the space of the Salone degli Incanti in Trieste.

Using artificial shadows and lights, the user is able to experience an unreal simulation of a space at any real or unreal context showing imaginary as well as possible paths, “broadening our horizons”. I like the combination between light and technology in order to make a replication of possibilities or non-possibilities.

LINK HERE