Author: Luke

Abstract Clock

You can tell the time and date with this abstract clock. From inside out each hexagon tells seconds, minutes, hours, days, months, respectively. The red line indicates the start of a category. An interesting thing about using hexagons is that it is easy to use to approximate what time it is since it has 6 sides, and units of time are easily divided by 6.

project-06-clock
//Luke Mattson
//section A
var today = new Date();
var now = [today.getSeconds(), today.getMinutes()+(today.getSeconds()/60), today.getHours()+(today.getMinutes()/60),today.getDate()+(today.getHours()/24),today.getMonth()+(today.getDate()/30)] 
var highest = [60, 60, 24, 30, 12] 
var angle = []
var rate = [360/60, 360/60/60, 360/60/60/24, 360/60/60/24/30,360/60/60/24/30/12]
var size = [47,94,141,188,235]

function setup(){
    frameRate(1)
	createCanvas(480, 480);
    angleMode(DEGREES)

    for (i=0; i<=6; i++) {          
        angle[i] = (now[i]/highest[i])*360
    }
    
}


function draw(){
    background(255,179,71)
    fill(255,0,0)
    rect(240,239,240,2)
    translate(240,240)
    for (i=0; i<=4; i++) {
        push()
        rotate(angle[i])
        angle[i] += rate[i]
        hexagon(size[i])
        pop()
    }
    print(rate)
}

function hexagon(s){
    noFill()
    beginShape()
    vertex(s,0)
    vertex(s/2,s*sqrt(3)/2)
    vertex(-s/2,s*sqrt(3)/2)
    vertex(-s,0)
    vertex(-s/2,-s*sqrt(3)/2)
    vertex(s/2,-s*sqrt(3)/2)
    endShape(CLOSE)
    fill(130,200,200)
    ellipse(s,0,s/5)
}

Project-05

I started with some shapes and it turned into something pretty cool.

Project-05
//Luke Mattson
//section A





function setup(){
	createCanvas(600, 600);
    background(224, 201, 166)
}


function draw() {
    //drawing the hexagons
   for (x = 40; x < 600; x += 87) {
        for (y = 55; y < 600; y+=160) {
            hexagon(x,y,30)
            hexagon(x,y,40)
        }
    }
    for (x = -5; x < 700; x += 87) {
        for (y = -25; y < 700; y+=160) {
            hexagon(x,y,30)
            hexagon(x,y,40)
        }
    }

    //drawing the triangles in between the hexagons
    for (x = -3.5; x < 700; x += 87) {
        for (y = 53; y < 700; y+=160) {
            trianglePair(x,y)
        }
    }
    for (x = 39; x < 700; x += 87) {
        for (y = -27; y < 700; y+=160) {
            trianglePair(x,y)
        }
    }

    //drawing pumkins inside the hexagons
    for (x = 41; x < 700; x += 87) {
        for (y = 57; y < 700; y+=160) {
            pumpkin(x,y)
        }
    }
    for (x = -5; x < 700; x += 87) {
        for (y = 137; y < 700; y+=160) {
            pumpkin(x,y)
        }
    }
    noLoop()
}

function hexagon(x,y,s) {
    stroke(210,83,73)
    strokeWeight(.5)
    noFill()
    beginShape()
    vertex(x+s,y)
    vertex(x+s/2,y+s*sqrt(3)/2)
    vertex(x-s/2,y+s*sqrt(3)/2)
    vertex(x-s,y)
    vertex(x-s/2,y-s*sqrt(3)/2)
    vertex(x+s/2,y-s*sqrt(3)/2)
    endShape(CLOSE)
}

function trianglePair(x,y) {
    fill(210,83,73)
    triangle(x,y,x-23,y-40,x+23,y-40)
    triangle(x,y+4,x-23,y+44,x+23,y+44)
}

function pumpkin(x,y) {
  pHeight = 30
  pWidth = 40 

  //stem
  strokeWeight(2)
  stroke(0, 150, 0);
  line(x, y-pHeight/2, x-pWidth/4, y - pHeight*.75);
 
  //pumpkin
  strokeWeight(1);
  fill(230, 100, 0);
  stroke(120, 60, 0);
  ellipse(x,y, pWidth, pHeight);
  ellipse(x,y, pWidth*.75, pHeight);
  ellipse(x,y, pWidth*.5, pHeight);
  ellipse(x,y, pWidth*.25, pHeight);
}

LO-05

Ramen by Laura Keuk


I chose to look at Laura Keuk’s 3D art piece which is called “Ramen.” Laura Keuk used shading and lighting to create a dreamy and peaceful atmosphere. She used Blender’s cloth simulation for the noodles, doing one noodle and then duplicating it. We can tie this into for loops, which we are learning about, but at a much more intricate and detailed scale. I admire this because I really enjoy food, and as a college student I eat a lot of ramen. I think it is interesting that the author decided to make art work revolving around food because she believes food is what brings people together.

Laura Keuk’s artwork titled “ramen”

LO-04

FORMS – STRING QUARTET


I chose to discuss the project FORMS – String Quartet. Created by Playmodes, ‘FORMS – String Quartet’ is a live multimedia performance for a string quartet, electronic music and panoramic visuals, in the field of visual sonification. The project originates from a real-time visual music score generator created by Playmodes, that is designed with a set of rules using graphic generation, driven by randomness and probability. The algorithm takes the resulting graphics which are transformed into sound using spectral synthesis algorithms. I think this project is very interesting due to the fact that my sister played in many string quartets as a violinist.

An example of a string quartet

lmattson-project-03

lmattson-03-project
//Luke Mattson
//section A


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

function draw() {
// draw a face in the background
    background(173,216,230)
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);
    stroke(0);                  
    fill(223,180,130);      
    ellipse(300,250,230,320);
    fill(250,231,218);          
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);
    fill(250,231,218);          
    ellipse(300,300,230,320);
    fill(245,245,245);         
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);
    line(300,260,310,300);      
    line(310, 300,290, 295);
    fill(255,160,160);          
    ellipse(300,350,25,35);
    line(310,230,350,215);      
    line(290,230,250,215);
    stroke(255,160,160,40);      
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);
    noFill();                    
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);
    stroke(255,255,255);        
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

// the text "Hi" comes onto the canvas when the mouse is on the right side
     text("Hi", 1175 - mouseX, mouseY)

//use for loops to draw the hexagons
    var hexX = 20
    var hexY = 30
    for (let hexX = 0; hexX <= 600; hexX += 20){									
        for(let hexY = -10; hexY <= 500; hexY+= 20){

            // variables to determine each hexagon's color
            var hexR = (dist(hexX, hexY, mouseX, mouseY)/150)*100
            var hexG = (dist(hexX, hexY, mouseX, mouseY)/150)*20
            var hexB = (dist(hexX, hexY, mouseX, mouseY)/150)*120

            // variable to determine each hexagon's size
            var size = constrain((dist(hexX, hexY, mouseX, mouseY)/150),.3,1.5)

            // drawing a hexagon
            fill(hexR,hexG,hexB)
            beginShape()
            vertex(hexX,hexY)
            vertex(hexX-size*10,hexY-size*5)
            vertex(hexX-size*10,hexY-size*15)
            vertex(hexX,hexY-size*20)
            vertex(hexX+size*10,hexY-size*15)
            vertex(hexX+size*10,hexY-size*5)
            endShape(CLOSE)
        }
    }

// angular movement of the circles
    push()
    translate(300,225);

    // positioning and opacity variables
    var circleX = 100;
    var circleY = 100;
    var circleOpacity = mouseX/2

    fill(0,0,0,circleOpacity)

    // rotating the origin based on mouseX positioning
    var rotationrr = radians(mouseX);
    rotate(rotationrr);

    //drawing each circle
    ellipse(circleX,circleY,20);
    ellipse(circleX+50,circleY+50,20)
    ellipse(circleX+100,circleY+100,20)
    ellipse(circleX+150,circleY+150,20)
    ellipse(circleX-50,circleY-50,20)
    ellipse(circleX-100,circleY-100,20)
    ellipse(circleX-150,circleY-150,20)
    ellipse(circleX-200,circleY-200,20)
    ellipse(circleX-250,circleY-250,20)
    ellipse(circleX-300,circleY-300,20)
    ellipse(circleX-350,circleY-350,20)
    
    // returning the origin to the default
    pop()

    
   
}

Wherever the mouse is, the hexagons get smaller, colors change, and circles rotate. put your mouse as far right on the canvas as you can for a surprise!

LO-03

Mediated Matter from MIT

The Mediated Matter group focuses on Nature-inspired design and design-inspired Nature. They create biologically inspired and engineered design fabrication tools and technologies aiming to enhance the relation between natural and man-made environments. I admire this project a lot because I think humans should try to harmonize with nature more. They use algorithms in order to enhance the relation between natural and man-made environments by achieving high degrees of design customization, environmental performance integration, and material efficiency. The work they are doing is very interesting. It is very cool how they are pretty much creating materials that can only be made through a use of an algorithm. An publication by Mediated Matter is titled “Hybrid Living Materials: Digital Design and Fabrication of 3D Multimaterial Structures with Programmable Biohybrid Surfaces.” Even the title alone brings lots of curiosity about what they are creating.

Programmable Water-Based Biocomposites for Digital Design and Fabrication across Scales

lmattson-02-project

lmattson-02-project
//Luke Mattson
//section A

var w= 600
var h= 480
var headradius= w/3
var eyeRadius= headradius/4
var smileSize=.5
var skinR=255
var skinG=255
var skinB=255
var skin=1



function setup() {
    createCanvas(w, h);

}



function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    //hair based on size of face
    stroke(0);                
    fill(223,180,130);      
    ellipse(w/2,h/2-50,headradius,headradius*1.4);


    //ears attached to face with 3 color possibilities
    if (skin==1) {
        fill(255,219,172)
    } else if (skin==2) {
        fill(224,172,105)
    } else {
        fill(241,194,125)
    }        
    ellipse(w/2-headradius/2,230,30,60);
    ellipse(w/2+headradius/2,230,30,60);


   //random size face with 3 color possibilities
   if (skin==1) {
       fill(255,219,172)
   } else if (skin==2) {
       fill(224,172,105)
   } else {
       fill(241,194,125)
   }
    ellipse(w/2,h/2,headradius,headradius*1.4);

    
    //random size eyes
    fill(245,245,245);          
    stroke(0);
    strokeWeight(1.5);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius)
    fill(0,0,200,30);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius/3)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius/3)


    //random size mouth
    stroke(249,21,21)
    strokeWeight(1)
    fill(255,127,127) 
    arc(w/2,headradius/5+h/2,150,80, smileSize, PI, OPEN)

    //nose
    stroke(0)
    strokeWeight(.5)
    line(300,240,290,275);      
    line(310, 280,290, 275);
    //body attached to bottom of face
    var bodyx = w/2     
    var bodyy = h/2 + .5*(headradius*1.4)
    stroke(255,255,255);        
    strokeWeight(1.5)
    line(bodyx,bodyy, bodyx, bodyy+40);
    line(bodyx,bodyy+40,bodyx+10,bodyy+50)
    line(bodyx,bodyy+40,bodyx-10,bodyy+50);
    line(bodyx,bodyy+20,bodyx+10,bodyy+10)
    line(bodyx,bodyy+20,bodyx-10,bodyy+10)
   
}

    //assign random variables
function mousePressed() {       
    headradius= random(.4,.7)*h
    eyeRadius= random(headradius/8,headradius/4)
    skin = int(random(0,3))
    smileSize=random(0,1)
       
}

LO-02: Generative art

Joshua Davis Studios

I chose to take a look at the work of Joshua Davis. I chose to look at his project “the V01D,” which, like my last post, has to do with music. My last post dealt with the autonomous creation of music, however this project was the autonomous creation of an animation that goes along with musicThe V01D is a type of generative art, which means it was created with the use of an autonomous system. Davis used dozens of reactive algorithms in order to turn the music of Kurt Uenala into animation. When paired together (the animation and the music), it is a very cool experience. I admire this project because I enjoy music and enjoy generative art like this, and since it combines the two it is very cool. Davis used 36 different algorithms in order to create these seamless animations, which is a lot more than I thought would need to be used.

The cover of Joshua Davis’s animation

Project 1: My Self Portrait

lukemattsonproject1
// Luke Mattson
// section A


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

function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    stroke(0);                  // hair
    fill(223,180,130);      
    ellipse(300,250,230,320);

    fill(250,231,218);          // ears
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);

    fill(250,231,218);          // face
    ellipse(300,300,230,320);


    fill(245,245,245);          // eyes
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);


    line(300,260,310,300);      // nose
    line(310, 300,290, 295);


    fill(255,160,160);          //  mouth
    ellipse(300,350,25,35);


    line(310,230,350,215);      // eyebrows
    line(290,230,250,215);

    stroke(255,160,160,40);      // blush
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);

    noFill();                    // chin
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);


    stroke(255,255,255);        // body
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

    noLoop();
}