Category: SectionC

Project 06 Abstract Clock

For my abstract clock, I was having a creative block and had trouble approaching what to make. I thought since most of my other projects have been pretty literal, I would make this one more abstract with a focus on shapes and how they can change based on hours, minutes, and seconds. I was thinking about how time is focused around growing, until it restarts and how that concept could be reflected into my clock. I decided to have “bubbles” that represent hours, minutes, and seconds organized in columns. I wanted these bubbles to slowly grow based on each of the timings. I also made it so the bubble slowly goes from transparent to opaque as seconds, minutes, and hours increase. Originally, I was thinking I wanted a shape inside the bubbles that would turn based on the time, but decided on a line to draw a better connection to a clock. I gave each bubble a line in the center that rotates based on the timing.

project6
//Rachel Legg / rlegg / section C

var col;

function setup() {
    createCanvas(480, 480);
}

function draw() {
    //background color changes every hour
    background(0);
    frameRate(15);

    //variables for time
    var sec = second();
    var min = minute();
    var hr = hour();

    strokeWeight(2);

    //Have Bubbles expand with each increment
    //line on each bubble to mimic a clock based on hr, min, sec
    //Hr Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have hr be yellow
        fill(255, 255, 0, 30 + hr);                  //have opacity grow with time
        stroke(255, 255, 0);
        ellipse(width/6, height/8 + col, 2 * hr);
        //have line in center that moves with change in hr
        push();
        translate(width/6, height/8 + col);
        rotate(radians(-90 + (hr * 15)));                     // 360/24 = 15
        line(0, 0, 10, 10);
        pop();
    }


    //Min Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have min be pink
        fill(255, 0, 255, 30 + min);                 //have opacity grow with time
        stroke(255, 0, 255);
        ellipse(width/2, height/8 + col, 2 * min);
        //have line in center that moves with change in min
        push();
        translate(width/2, height/8 + col);
        rotate(radians(-90 + (min * 6)));                    // 360/60 = 6
        line(0, 0, 10, 10);
        pop();
    }

    //Sec Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have sec be blue
        fill(0, 255, 255, 30 + sec);                 //have opacity grow with time
        stroke(0, 255, 255);
        ellipse(5/6 * width, height/8 + col, 2 * sec);
        //have line in center that moves with change in sec
        push();
        translate(5/6 * width, height/8 + col);
        rotate(radians(-90 + (sec * 6)));                   // 360/60 = 6
        line(0, 0, 10, 10);
        pop();
    }

}

Looking Outward – 06

“Small Scale – Fidenza #545” by Tyler Hobbs

Tyler Hobbs is a visual artist who develops and works with algorithms and plotters. Hobbs’ style represents the stiff structure of a computer and the messy chaos of nature, striking an interesting balance in his work. He created “Fidenza” which is a generative algorithm that creates random, generative art. He describes the algorithm as “highly flexible”, and it continuously produces interesting results. It was so fun to scroll through all the artwork produced by the same algorithm as they all go very different directions, yet hold similar underlying charcteristics. “Fidenza” is a flow field algorithm that creates random, organic curves. With these curves, Hobbs shares that there is variety in scale, turbulence, stroke style, shape segments, sharp edges, sprials, collision, margins, and color which leads to infite possibilties of “Fidenza”. In color palettes alone, there are 14 possible color palettes that each have different probabilities for the colors being used.

Title: Fidenza
Artist: Tyler Hobbs
Link: https://tylerxhobbs.com/fidenza

Randomness in Sound

The Click::RAND by Paul Dunham (2019-2020) is fascinating to watch. Dunham used a series of electric relays and random numbers to generate clicking noises that become sonic beats. He used the RAND’s 1955 book “A Million Random Digits with 100,000 Normal Deviates” as a database of random numbers to feed into the electric relays. The book is a giant table of a million random digits that contain small but statistically significant biases. The largest bias the table had while running tests was about 2%. Dunham fed the digits to a computer that converted every number into binary, which told the relays when to open and close. The result is a very fun and cool syncopation of clicks and metallic rings. Sometimes there are patterns that appear in the clicks, but they quickly dissolve into something else. I admire the simplicity of the installation, as well as the results it produces. The clicking pauses, breaks, quickens, slows, just like the rhythms of everyday life do as well. He will sometimes add more than one panel of relays to create even more poly-rhythms. There are no algorithms in his work, only randomness and relays. His artistic vision of giving the book a voice, and having the audience listen to randomness, is a highly effective one that definitely manifested in the final form.

Dunham’s other work is also very interesting and I highly recommend viewing his Click::TWEET project from 2020. In that project, he transcribed tweets into morse code using multiple telegraph machines to highlight how ‘loud’ social media is these days.

Click::RAND from Atticus Finch on Vimeo.

anabelle’s project 05

here’s my project : D

sketch
// anabelle lee .-.
// section c
// kaylalee
// project 5

let firstSpiralX = [];
let firstSpiralY = [];

let secondSpiralX = [];
let secondSpiralY = [];

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

function draw() {
    background(185, 70, 44);

    leftHalf();
    rightHalf();

    push();
    translate(450, 0);
    leftHalf();
    rightHalf();
    pop();

    push();
    translate(450, 0);
    leftHalf();
    rightHalf();
    pop();

    // for bouquets
    setBouquet();
    setOtherBouquet();

    noLoop();

}

/* my functions */
function setBouquet(x, y) {
    for (var centerX = 145; centerX < (width + 50); centerX += 460) {
        for (var centerY = 175; centerY < height; centerY += 350) {
            push(); 
            bigGlaze(centerX, centerY);
            pop();
        }
    }
}

function setOtherBouquet() {
for (var centerX = 380; centerX < width + 50; centerX += 460) {
        for (var centerY = 20; centerY < height; centerY += 350) {
            push(); 
            bigGlaze(centerX, centerY);
            pop();
        }
    }
}

function leftHalf() {
    for (var theta = 0; theta < height + 50; theta += 10) {
        glazeBud(-20 + 80*cos(radians(theta)), theta) ;
    }

    for (var theta = 0; theta < height + 50; theta += 30) {
        push(); 
        glazeLily(60 + 60*cos(radians(theta)), theta);
        pop();
    }

    for (var theta = 0; theta < height + 50; theta += 80) {
        push(); 
        glazeLinesLoop(30 + 60*cos(radians(theta)), theta);
        pop();
    }
}

function rightHalf() {
    for (var theta = 0; theta < height; theta += 10) {
        glazeBud(330 + -80*cos(radians(theta)), theta) ;
    }

    for (var theta = 0; theta < height; theta += 30) {
        push(); 
        glazeLily(250 + -60*cos(radians(theta)), theta);
        pop();
    }

    for (var theta = 0; theta < height; theta += 80) {
        push(); 
        glazeLinesLoop(280 + -60*cos(radians(theta)), theta);
        pop();
    }
}

function glazeLily(x, y) {

    // large petals
    push();
    translate(x, y);
    for(var i = 0; i <= 5; i += 1) {
        push();
        rotate(radians(36 + i*-72));
        largePetal(7, 25);
        pop();
    }

    // small petals
    for(var i = 0; i <= 5; i += 1) {
        push();
        rotate(radians(i*-72));
        smallPetal(5, 12.5);
        pop();
    } 
    fill(239, 233, 193);
    noStroke();
    circle(0, 0, 12.5)

    pop();
}

function smallPetal(w, h) {

    fill(232, 234, 238);
    stroke(232, 234, 238);

    beginShape(); // left half of smaller petal
    vertex(0, -h);
    bezierVertex(0 - w/10, -9*h/10, -2*w, -h/2, -2*w/3, 0);
    endShape();

    beginShape(); // right half of smaller petal
    vertex(0, -h);
    bezierVertex(0 + w/10, -9*h/10, 2*w, -h/2, 2*w/3, 0);
    endShape();

    triangle(-0.65*w, 0, 0, -h, 0.65*w, 0); // fill the smaller petal
}

function largePetal(w, h) {

    fill(114, 181, 223);
    stroke(148, 162, 228);

    beginShape(); //left half
    vertex(0, -h);
    bezierVertex(0 - w/9, -9*h/10, -1.5*w, -h/2, -w/3, 0);
    endShape();

    beginShape(); // right half
    vertex(0, -h);
    bezierVertex(0 + w/9, -9*h/10, 1.5*w, -h/2, w/3, 0);
    endShape();

    triangle(-w/3, 0, 0, -h, w/3, 0); // fill the smaller petal
}

function glazeBud(x, y) { 
    push();
    translate(x, y);
    for(var i = 0; i < 5; i += 1) {
        push();
        rotate(radians(i*72));
        glazeFragment(7, 7);
        pop();
    } pop();
}

function glazeFragment(w, h) { // only draws 1/5th of glazeBud

    // big circle
    fill(148, 162, 228);
    stroke(148, 162, 228);
    point(0, 0);
    arc(0, 0, 2*w, -2*h, radians(225), radians(315));

    // point arcs
    // left
    stroke(201, 208, 231);
    noFill();
    beginShape();
    vertex(0, -2*h/3);
    bezierVertex(-w/50, -4*h/8, -w/10, -3*h/8, -w/4, -h/3);
    endShape();

    // right
    beginShape();
    vertex(0, -2*h/3);
    bezierVertex(w/50, -4*h/8, w/10, -3*h/8, w/4, -h/3);
    endShape();

    fill(201, 208, 231);
    arc(0, 0, 4*w/5, 4*w/5, radians(225), radians(315));
    triangle(w/9, -h/4, 0, -2*h/3, -w/9, -h/4);

    // stamen
    stroke(130, 150, 255);
    fill(148, 162, 228);
    circle(-2*w/5,-h/2, w/8);
    circle(2*w/5, -h/2, w/8);
    line(-2*w/5, -h/2, 0, 0);
    line(2*w/5, -h/2, 0, 0);
}

function glazeLinesLoop(x, y) {
    push();
    translate(x, y);
    for (var i = 0; i <= 5; i += 1) {
        push();
        rotate(radians(i*72));
        glazeLines(10, 25);
        pop();
    } pop();
}

function glazeLines(w, h) {
    noFill();
    stroke(248, 237, 122);

    beginShape(); // left half of smaller petal
    vertex(0, -h);
    bezierVertex(0 - w/10, -9*h/10, -2*w, -h/2, -2*w/3, 0);
    endShape();

    beginShape(); // right half of smaller petal
    vertex(0, -h);
    bezierVertex(0 + w/10, -9*h/10, 2*w, -h/2, 2*w/3, 0);
    endShape();
}

function bigGlaze(x, y) {

    // large petals
    push();
    translate(x, y);
    for(var i = 0; i <= 5; i += 1) {
        push();
        rotate(radians(36 + i*-72));
        bigLargePetal(30, 50);
        pop();
    }

    // small petals
    for(var i = 0; i <= 5; i += 1) {
        push();
        rotate(radians(i*-72));
        bigSmallPetal(15, 40);
        pop();
    } 

    fill(239, 233, 193);
    noStroke();
    circle(0, 0, 25)

    pop();
}

function bigSmallPetal(w, h) {

    fill(117, 162, 191);
    stroke(200, 190, 255);

    beginShape(); // left half of smaller petal
    vertex(-30, -h);
    bezierVertex(-30 - w/10, -9*h/10, -2*w, -h/2, -2*w/3, 0);
    endShape();

    beginShape(); // right half of smaller petal
    vertex(-30, -h);
    bezierVertex(-30 + w/10, -9*h/10, 2*w, -h/2, 2*w/3, 0);
    endShape();

    triangle(-0.65*w, 0, 0, -h, 0.65*w, 0); // fill the smaller petal
}

function bigLargePetal(w, h) {

    fill(47, 95, 138);
    stroke(0, 51, 102);

    beginShape(); //left half
    vertex(-20, -h);
    bezierVertex(-20 - w/9, -9*h/10, -1.5*w, -h/2, -w/3, 0);
    endShape();

    beginShape(); // right half
    vertex(-20, -h);
    bezierVertex(0 + w/9, -9*h/10, 1.5*w, -h/2, w/3, 0);
    endShape();

    triangle(-w/3, 0, 0, -h, w/3, 0); // fill the smaller petal
}

Project 05 – Wallpaper

I wanted to make a wallpaper that looked like a stitched flower quilt pattern.

sketch

//SRISHTY BHAVSAR
//15-104 PROJECT 05 
//SECTION C



// COLORS
var w = 255 // white
var lbrown = (196, 164, 132); // light brown

// lengths

var s = 50 //sqare



function setup() {
    createCanvas(200, 20);
    background(194,197,201);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    createCanvas(600,600);
    background(194,197,201); //light blue


    // RED DIAMOND LOOP
    push();
    translate(300,-300);
    rotate(radians(45)); // rotates squares to be diamonds
    for( var x = 0; x < 1200; x+= s/2) {
        for( var y = 0; y < 1200; y+= s/2){
            reddiamonds(x,y);
        } 
    }

    // FLOWER DIAMOND LOOP
    pop();
    push();
    translate(265,-300);
    rotate(radians(45));
    noFill();
    for( var i = 0; i < 2000; i+= s) {
        for( var j = 0; j < 2000; j+=s) {
            flowerdiamonds(i,j);
            //square(i,j,s);
        } 
    }

    pop();

}

function reddiamonds(x,y) {
    translate(x,y); // origin moves along row
    push();
    stroke(183, 113, 121, 70); // light red
    strokeWeight(2);
    noFill();
    square(x,y,50);
    pop();
    translate(-x,-y); // origin moves along row
}

function flowerdiamonds(i,j) {
    // lacy white dot rim of elipses that trace the diamond
    noFill();
    stroke(w);
    strokeWeight(1);
    translate(i,j);
    // create 4 lacy rims that create a square
    push();
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }
    rotate(radians(90));
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }

    translate(0, -50);
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }
    translate(50,50);
    rotate(radians(-90));
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }

    pop();

    //FLOWER STEM
    push()
    translate(-4,-30);
    rotate(radians(-40))
    noFill();
    stroke(w);
    strokeWeight(1)
    curve(6, 30, 59, 50, 60, 80, 40, 40);
    pop()


    //FLOWER PETALS
    push()
    strokeWeight(1);
    fill(196, 164, 132); // dark blue
    translate(6,6);
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(6,-30);
    ellipse(10,18,13,9);
    translate(-1,-67);
    rotate(radians(72));
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(-23,-71);
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(-8,-77);
    ellipse(10,18,13,9);
    pop()
    translate(-i,-j);

}

Project-05 Wall Paper

I want to create textile patterns inspired by traditional Chinese symbols

sketch
//Michael Li
//Section C 
var radi = 30
function setup() {
    createCanvas(755, 630);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220);

}

function draw() {
    background(30, 28, 27);

    var color = 0; //set variable color
    //create a line with the for loop
    for (var x = 0; x <= width+80; x += 4.2*radi){
        color += 1; // increment color by 1
            if (color % 2 == 1){ // test color 
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
        //create a grid
        for(var y = 0; y<= height+80; y += 4.2*radi){
            color += 1;
            //test for color
            if (color % 2 == 1){
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
            //two if statements in each for loop creates the alternating color pattern
            pattern1(x, y); // call to draw function pattern 1
            print(color.toString());
            
        }
    }
    //draw a grid of pattern two
    //reposition x and y initial position
    for (var x = 63; x <= width + 80; x += 4.2*radi){
        for(var y = 0; y <= height + 80; y += 4.2*radi){

        pattern2(x, y); //draw pattern 2
    }
    }
   
    noLoop();//draw once
}
    var flip1 = 1; //set varibales for  flip
    var flip2 = 1;

function pattern1(x, y){
    strokeWeight(2); 
    noFill();
    //only stroke no fill

    push();

    translate(x, y); // translate object to input x and y

    //top and bottom semi circle
    arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
    arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
    //middle long line
    line(0-radi/1.3, 0, 0+radi/1.3, 0);

    var xSpaing = 3.5;//set a uniformed spacing

    //draw the same line 4 time
    for (var i = 0; i<= 4; i += 1){
        //test which loop number it is to flip the drawing
        if (i == 1 || i == 3){
            flip1 = -flip1; //on first and third loop, flip the x position
        } else if (i == 2){
            flip2 = -flip2; //on the second loop, flip the y position
        }
        line(0-flip1*radi/1.1, 0-(flip2*6), 
        0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.1), 
        0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.8), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
        line(0+(flip1*20), 0+(flip2*radi/2.5), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
    }

    //middle line top and bottom
    line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
    line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle

    //four small arcs
    arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
    arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
    pop();

    push();
    translate(x, y); //translate to input x and y
    rotate(radians(45)); // rotate around x, y by 45 degrees
    rectMode(CENTER); //draw rect around origin
    //draw rectangle to frame the pattern
    rect(0, 0, radi*3, radi*3);
        //draw 4 times
        for(var i = 0; i<=4; i +=1){
        //test for which loop increment
        if (i == 1 || i == 3){ //first and third flip the x position
            flip1 = -flip1;
        } else if (i == 2){ //second loop flip the y position
            flip2 = -flip2;
        }
        //draw 3 small squares by the corner of the big square
        //repeat for each corner using the for loop
        rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
        rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
   }
   pop()
}


//second pattern, new arguments g and h
function pattern2 (g, h){
    push();
    translate(g, h); // translate origin to g, h
    rotate(radians(45)); //rotate around origin by 45 degrees
    rectMode(CENTER); // set rectMode
    strokeWeight(2);
    stroke(255, 204, 51, 100); // grey line color
    fill(182, 156, 129, 100); // lower transparency
    rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
    pop();

    push();
    translate(g, h);
    stroke(182, 156, 129);
    rectMode(CENTER);

    rect(0, 2.1*radi, radi/3, radi/3); // small square inside

    line(0, 0,  0, height); //verticle lines
    pop();
}

Looking Outwards 05: 3D Computer Graphics

An artist named Gleb Kuznetsov created a piece called Crystal Clear. It depicts hard materials interacting with light. The crystal is a translucent sphere with cracks that create individual pieces. The size of the piece changes and as it does so, the reflection of light in the background also changes. I found this artwork very interesting because of how it depicted the way light interacts with an object to create reflections and refractions. A Lot of other works created by this artist are centered around how different objects interact with light. Many of their works feature translucent objects to really emphasize refractions. This kind of 3d art can be useful for designers when they are testing to see how buildings/ objects interact with the environment, which is something that is important to consider during the design stage. In order to do this and make the light refractions accurate, the artist must have had to use Snell’s law formula and various other formulas that are derived from the study of nature.

https://dribbble.com/shots/18483709-Crystal-clear

Project-05-Wallpaper

Wallpaper

sketch
//Brody Ploeger
//jploeger
//Section C

function setup() {
    createCanvas(600, 600);
    background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}
var x=0;
var y=0;


function draw() {
background(200);
//loop 
for(var i = 0; i<=width; i+=100){
    for(var j = 0; j<=height; j+=200){
   Pattern(x+i,y+j,100); 
}
}
//offset loop
for(var i = -50; i<=width; i+=100){
    for(var j = 100; j<=height; j+=200){
   Pattern(x+i,y+j,100); 
}
}


}

function Pattern(x,y,w){

//base square
strokeWeight(2);
fill('tan');
square(x,y,w);

//pruple lines
strokeWeight(3);
stroke('purple');
line(w/8+x,0+y,w/8+x,w+y);

strokeWeight(3);
stroke('purple');
line(w/8+w/2+x,0+y,w/8+w/2+x,w+y);

//black line
stroke(0);
strokeWeight(2);
line(0+x,w/2+w/4+y,w+x,w/2+w/4+y);

noStroke()
//shape 1 
fill(200,10,0);
beginShape();
vertex(w/4+w/2+x,0+y);
vertex(w/4+w/2+x, w/8+y);
vertex(w/8+w/4+x, w/8+y);
vertex(0+x,w/2+y);
vertex(0+x,w/4+w/2+y);
vertex(w/8+w/4+x, w/8+w/4+y);
vertex(w+x,w/4+w/8+y);
vertex(w+x,0+y);
vertex(w/4+w/2+x,0+y);
endShape();


//shape 2 shadow
fill(0,99);
rect(w/4+w/16+x,0+y,w/4,w);

//shape 2
fill(200,10,0);
rect(w/4+x,0+y,w/4,w);



//shape 3 shadow
fill(0,99);
rect(x,w/2+y,w/16,w/2);

//shape 1 shadow
fill(0,99);
rect(x,y,w/16,w/4+w/8);
//shape 3
fill(200,10,0);
rect(w/4+w/2+x,w/2+y,w/4,w/2);
}

Looking Outwards-05

This week, I am looking at the work of Eric Wong. Wong is an architect, designer, and illustrator. In 2021, Wong designed the digital world of U from the movie Belle. The architecture of the world is modular based. The images of the world were produced by arraying simple 3D sculptures or architectures. These elements are simple, but as they multiply, they produce an image of a world. I believe the work is completed with a 3D modeling software such as Rhino. The arraying could possibly be done with code using Grasshopper scripts. I really like Wong’s work as it shows other fields that architecture can start to fall into as well as the world building aspects of architecture.

https://deadline.com/2021/12/eric-wong-belle-gkids-art-of-craft-concept-artist-animation-1234887044/#comments
http://www.ericwong.co.uk/
https://www.instagram.com/ericwong_folio/?hl=en