Author: Max

Project 03: Dynamic Drawing

dynamic drawing

//Max Stockdale, Section D

var R = 50; //color   
var G = 100;
var B = 255;

var angle = 0; 

var xs = 15; //scale
var ys = 20;

var circlesize = 80;

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


function draw() {

    if (mouseX < (width / 2) & mouseY < (height / 2)){   //background changes color in different quadrants 
        background(251,215,90);
    } else if (mouseX < (width / 2) & mouseY > (height / 2)){
        background(156,158,251);
    } else if (mouseX > (width / 2) & mouseY < (height / 2)){
        background(198,149,198);
    } else {
        background(36,110,237);
    }

    noStroke();


    var m = max(min(mouseX, 600), 0);  //maintaing size of ellipses
    var size = m * 300 / 600;


    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2); //ellipses
    ellipse(width / 2, height / 2, size, size);

    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);

    fill(R + mouseY / 2, G + mouseY, B + mouseX / 2);
    ellipse(550, 225, size * 0.1 , size * 0.1);

    fill(R + mouseY /2, G + mouseY, B + mouseX /2);
    ellipse(30, 225, size * 0.1, size * 0.1);
    
    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 1


    //side circle_1
    translate(-150, + 100);
    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);//ellipses
    ellipse(width / 2, height / 2, size, size);

    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);


    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
    
    fill(255);
    rect(mouseX , mouseY, 50, 50); //x, y position square 2
    
    


    //side circle_2
    translate(+300, -200);
    //ellipse 1
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size, size);

    //ellipse 2
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    //ellipse 3
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    //ellipse 4
    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);


    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 3


    fill(36,110,237); //spinning square(blue)
    push();
    translate(-75,+175);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    fill(251,215,90); //spinning square(yellow)
    push();
    translate(+375,+475);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    
    angle = angle + 0.5;  
    xs = width - (0.5 * mouseX); //scale based on x
    ys = height - (0.5 * mouseY); //scale based on y

}

For this project, I wanted to play around with the scale of circles and the gradient of the colors. I also wanted to include a background that changes color based on the mouse position, with spinning squares on the corners.

Looking Outwards 03: Computational Fabrication

One project I found really interesting was John Edmark’s work. He creates these 3D printed sculptures that use the fibonacci sequence to create these cool optical illusions. His series is called, “Blooming Zoetrope Sculptures,” and these pieces work when they are spun and lit by a strobe light. From what I know about the code, each of the pedals are placed at a different distance from the center and if you follow a single pedal, it looks like it works down and out of the sculpture. Knowing the basics of the fibonacci sequence, it works using the golden ratio where each number in the sequence is the sum of the two numbers that precede it. Something I really admire about it, is that these pieces resemble nature and can be represented using a mathematical equation. Overall, his work inspires me to learn more about coding and learn how to make these really unique patterns. 

Link: https://www.instructables.com/Blooming-Zoetrope-Sculptures/

Project 02: Variable Faces

variable faces 

var eyeSize = 100;   //Max Stockdale, section D
var faceWidth = 350;
var faceHeight = 250;
var mouth = 50;
var tooth=40;
var nose=60;
var eyeHighlight=20;
var body=400
var arms=100

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

 
function draw() {
    background(91,161,191);  //blue
    strokeWeight(0);
    fill(47,213,102);
    circle(width/2, height/1.2, body); //body shape
    fill(255,255,255);
    strokeWeight(0);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face
    var eyeLX = width / 2 - faceWidth * 0.5;
    var eyeRX = width / 2 + faceWidth * 0.5;
    strokeWeight(1);
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  //right eye
    fill(255,255,255);
    circle(eyeLX + 5, height / 2, eyeHighlight);  //eye highlight
    circle(eyeRX + 5, height / 2, eyeHighlight);  //eye highlight
    fill(48,56,65); 
    rect(width/2, height/2, mouth, mouth);  //mouth
    fill(255,255,255);
    triangle(320,240, 330,250, 340,240);  //tooth
    fill(72,3,31);
    ellipse(width/2, height/2.25, nose, 20); //noser
    strokeWeight(0);
    fill(153,155,250);
    circle(width/4.75, height/1.3, arms);  //left arm
    circle(width/1.25, height/1.3, arms);  //right arm
    fill(255,255,255);

    




}
 
function mousePressed() {
    faceWidth = random(50, 600);
    faceHeight = random(150, 300);
    eyeSize = random(20, 60);
    mouth = random(10, 40);
    ears = random(5,15);
    nose = random(15,45);
    body =random(400,500);
    arms = random(80,120);
}

LO: My inspiration(02)

Link: http://www.lumicon.de/wp

One artist I was really drawn to was Holger Lippman. I found his work really interesting because he was able to use coding to create these pieces that replicated a style similar to post-impressionism. Generating these images that are unique each time is something pretty incredible. Being able to replicate paint strokes really creates this cool effect. One piece of his in particular, “noise warp” reminds me a lot of Van Gogh’s style and specifically Starry Night. In some of the other series you can see inspiration from Monet and other famous artists. I also really liked another one of his pieces called, “ripple” using the curveVertex function. I experimented with that function in my project and it’s cool to see how complex it can actually get to create these really complex shapes and patterns. Overall and through creating one of these projects myself, it takes some problem solving and trial and error to find what you’re looking for. On my project I was actually surprised at what I found by mistake and it influenced some of my design ideas.

LO: My inspiration

Body Metrics

Some technological design I have been really fascinated with is The Tech Museum of Innovation in San Jose, California. They have created these experiences for the visitors where they are able to interact with the exhibits through wearable technology that allows them to create a meaningful connection to their surroundings. These wearable devices track the physical and emotional reactions of the visitors and at the end of their visit they are able to reflect on their experience. I’m a design student currently studying environments and these are the types of interactions we are currently exploring. I really admire this project because they were able to combine coding and design which lifts the interaction from the screen and puts it in the physical world, creating a unique experience each time. In the future, I would like to create more of these interactions to create more of a bridge between the digital and physical world. 

Self Portrait

max-self portrait

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

function draw() {
    strokeWeight(0); //background color
    fill(199,216,199);
    rect(0,0,350,450);

    fill(243,185,143);       //face shape
    ellipse(175,225,180,220);
    fill(243,185,143);
    circle(175,150,180);

    fill(46,38,34);         //eyebrows
    ellipse(130,140,50,15);
    ellipse(108,147,15,20);
    ellipse(220,140,50,15);
    ellipse(240,147,15,20);


    stroke(243,234,185);
    strokeWeight(3);
    fill(64,63,65);    //glasses
    circle(130,175,65);
    fill(64,63,65);
    circle(220,175,65); 

    stroke(243,234,185);  //glasses bridge
    strokeWeight(3);
    point(165,175);
    point(170,172.5);
    point(175,172);
    point(180,172.5);
    point(185,175);


    strokeWeight(0);
    fill(243,185,143);    //ears
    ellipse(75,195,45,80);
    fill(243,185,143);
    ellipse(277,195,45,80);


    fill(46,38,34);
    rect(90,50,170,50); //hair
    circle(100,80,50);
    circle(100,95,40);
    ellipse(85,135,20,50);
    circle(90,100,30);
    circle(85,102,20);
    circle(135,95,50);
    circle(100,75,60);
    circle(120,70,60); 
    circle(150,60,70);
    circle(160,55,50);
    circle(175,60,70);
    circle(180,70,70);
    circle(190,60,60);
    circle(200,75,50);
    circle(210,70,60);
    circle(215,80,50);
    circle(225,70,60);
    circle(240,70,50);
    circle(225,52,50);
    circle(245,70,45);
    circle(245,65,50);
    circle(250,75,40);
    circle(250,85,30);
    circle(255,90,40);
    ellipse(265,120,20,50);
    circle(265,140,20);
    circle(265,145,15);
    circle(265,155,10);
    circle(265,120,30);
    circle(85,160,10);
    circle(85,120,30);
    circle(85,135,23);


    fill(46,38,34);
    ellipse(85,200,8,100);  //beard
    ellipse(265,200,8,100);
    circle(87,245,10);
    circle(87,247,13);
    circle(87,250,15);
    circle(85,240,10);
    circle(89,255,17);
    circle(91,260,18);
    circle(94,270,20);
    circle(95,275,22);
    circle(96,280,24);
    circle(98,285,26);
    circle(100,290,27);
    circle(101,295,27);
    circle(102,300,28);
    circle(105,305,28);
    circle(110,310,28);
    circle(112,315,29);
    circle(115,318,29);
    circle(120,322,30);
    circle(125,328,31);
    circle(128,335,31);
    circle(135,337,32);
    circle(140,338,32);
    circle(145,339,32);
    circle(150,340,33);
    circle(160,341,34);
    circle(165,342,34);
    circle(170,341,34);
    circle(175,341,33);
    circle(180,340,33);
    circle(185,339,33);
    circle(190,338,33);
    circle(195,336,32);
    circle(200,335,32);
    circle(205,332,32);
    circle(210,330,32);
    circle(215,328,32);
    circle(220,325,31);
    circle(225,320,31);
    circle(230,315,31);
    circle(235,310,34);
    circle(240,305,30);
    circle(235,300,28);
    circle(240,295,28);
    circle(245,290,28);
    circle(245,285,27);
    circle(246,280,27);
    circle(247,275,26);
    circle(248,270,24);
    circle(249,265,23);
    circle(250,260,22);
    circle(252,265,22);
    circle(253,260,22);
    circle(254,255,20);
    circle(255,250,19);
    circle(260,245,15);
    circle(258,240,15);
    circle(258,235,14);
    circle(259,230,12);
    circle(262,225,10);

    ellipse(145,260,40,13); //mustache
    ellipse(200,260,40,13);
    circle(159,258,13);
    circle(185,258,13);
    ellipse(127,268,10,20);
    ellipse(218,268,10,20);
    ellipse(172,300,8,20);
    circle(172,290,10);



    





















    
    

    






}

For this project, I spent a lot of time using trial and error to figure out how I wanted to create the hair. Overall, I’m happy with how it turned out, and I went for a more simplistic look.