Month: September 2019

YouieCho-Project-05-Wallpaper

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-05-Wallpaper*/

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

function draw() {
    background(0);
    drawPattern();
}

function drawPattern() {
    var diam = 5; // dots
    var r = 0;
    var b = 0;
    var ratioC = 0; //increase for circle
    var ratioR = 0; //increase for rectangle
    var increment = 25;
    for (var y = increment; y < height; y += increment) {
        for (var x = increment; x < width; x+= increment) {
            //color gradient
            r = map(y, 0, height, 255, 0);
            b = map(x, 0, height, 0, 255);
            fill(r, 100, b);
            //dot
            ellipse(x, y, diam, diam);
            //outer circle increases from bottom to top
            noFill();
            stroke(r, 100, b);
            strokeWeight(0.5);
            ratioC = map(y, 0, height, 110, 0);
            ellipse(x, y, diam + ratioC, diam + ratioC);
                //inner circle increases from bottom to middle
                if(y < width / 2) {
                    strokeWeight(0.3);
                    ellipse(x, y, diam + ratioC / 2, diam + ratioC / 2);
                //squares decrease from bottom to middle
                } else {
                    rectMode(CENTER);
                    ratioR = map(y, height, 0, 60, 0);
                    rect(x, y, diam + ratioR, diam + ratioR);
                }
        }
    }
    noLoop();
}

During this project, it was fun to experiment with mapping color, scale, and shapes along vertical and horizontal axes. The pattern shapes are composed of: 1. dot + inner circle + outer circle, and 2. dot + inner circle + square.

Initial layout with pattern shapes

Janet Peng Project 05 –Wallpaper

jjpeng project 5

var type;
var color;
var bigness;

function setup() {
    createCanvas(600, 480);
    background('#BFDDDA');
    noStroke();
}

function draw() {
    for (var c = 0; c < 12; c ++) {
        for (var r = 0; r < 8; r ++) {
            type = random([1, 2, 3]);
            color = random(['#92B2C0', '#79A594', '#467E9B'])
            bigness = random(20, 80)
            pattern (c * 60, r * 70, bigness, type, color);
        }
    }
    for (var col = 0; col < 8; col ++) {
        for (var row = 0; row < 6; row ++) {
            // draw grapes
            var wide = random(7, 12);
            var high = random(10, 14);
            if (((col + row) % 2) === 0){
                grapes(col * 85, row * 90, wide, high, '#FF5061');
            } else {
                grapes(col * 85, row * 90, wide, high, '#FF6A4D');
            }
        }
    }
    noLoop();
}

function grapes(x, y, h, w, color) {
    // leaf and stem
    fill('#4B4F4E');
    push();
    translate(x + w / 2, y - h * 1.5)
    rotate(radians(15));
    rect(0, 0, h / 3, w / 1.5);
    pop();

    fill('#F7CD62');
    push();
    translate(x, y - h)
    rotate(radians(300));
    ellipse(0, 0, h / 1.5, w);
    pop();

    // grape
    fill(color);
    for (var i = 0; i < 4; i++) {
        // first and third row
        if ((i === 0) || (i === 2)){
            for (var j = 0; j < 2; j++) {
                ellipse(x + w * j, y + h * i, w, h);
            }
        } else if (i === 1) {
            for (var j = 0; j < 3; j++) {
                ellipse(x + w * (j - 0.5), y + h * i, w, h);
            }
        } else {
            ellipse(x + w * 0.5, y + h * i, w, h);
        }
    }
}

function pattern(x, y, s, type, color) {
    fill(color);
    // oval
    if (type === 1) {
        ellipse(x, y, s * 1.3, s);
    // arc
    } else if (type === 2) {
        arc(x, y, s * 2, s, QUARTER_PI, PI + QUARTER_PI, CHORD);
    // other arc
    } else {
        arc(x, y, s, s, PI + QUARTER_PI, PI * 2 + QUARTER_PI, CHORD);
    }
}

some process coming up with the wall paper design

I started by thinking of a theme. I decided I wanted to do fruit and make it feel playful. Then I came up with some ideas for foreground designs and some abstract shapes for background designs. When making the fruit, the raspberries looked like grapes so I made them grapes instead.

Looking Outwards – 05

In my sophomore year of high school, I was introduced to the program SketchUp, a tool used for rending 3d environments in a 2d view. The program was built for the use of architecture and design, in fact, when I first learned of it my assignment was to build a playground using the 3d shapes found in SketchUp. It allows the user to create both basic and complex shapes on multiple axes. Initially published by Trimble Inc, SketchUp has a variety of different versions for different audiences, with the most extensive being used with actual design projects. The one I am more familiar with, is the free version, which still boasts an impressive number of tools suitable for creating complex 3d spaces.

Mari Kubota- Project- 05- Wallpaper

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 5
*/

var spacing= 100; //space bewtween elements

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

//draws wallpaper
function draw(){
    background (150,200,200);
    Wallpaper();

}

//function that creates patterns
function Wallpaper(){ 

//cactus
    for (var x = 50; x<=width; x += spacing) {
        for (var y = 50; y <= height; y+=spacing) {
            stroke (154,205,50);
            fill(152,181,104);
            ellipse(x,y,20,20);
            ellipse(x+15, y+15, 20, 20);
            ellipse(x,y+15, 20, 20);
            ellipse(x+15,y, 20, 20);

//sparkles
    for (var a = 100; a<width; a += spacing) {
        for (var b = 100; b < height; b+=spacing) {
            stroke(204,204,0);
            fill("yellow");
            quad(a-10, b, a, b+15, a+10, b, a, b-15);
        }
    }

}
}
}

In this project I made a wallpaper with cactus and diamonds on a turquoise background. By relying on nested loops, I was able to create orderly rows of the pattern interchangeably. The challenge of this project was creating a function called Wallpaper which contained the pattern that had to be called in a draw function without looping repeatedly.

Jai Sawkar Project 05 – Wallpaper

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-04 


function setup() {
    createCanvas(400, 600); 
    background('#b3b1aa')
    noLoop()

}

function draw() { 
   
  for (var x = 0; x < width; x += 4){ //Background Sky
    for (var y = 0; y < 45; y += 5){
        
        fill('#bcc0c4')
        noStroke()

        fill('#0a293d')
        ellipse(x * 2, y * 2, 10, 10)

        push()
        fill('#071e2c')
        translate(0, 50)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0a293d')
        translate(0, 100)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0c354e')
        translate(0, 150)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0f405f')
        translate(0, 200)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#124c70')
        translate(0, 250)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#155781')
        translate(0, 300)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#176392')
        translate(0, 350)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1a6ea2')
        translate(0, 400)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1d7ab3')
        translate(0, 450)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1f85c4')
        translate(0, 500)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#2291d5')
        translate(0, 550)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        
    }
 } 

fill('#deddd5') //moon color
noStroke()
ellipse(width/2, 50, 100) //moon

for (var x = 0; x < 500; x += 40){ //mountains
        
        var mountainColor = random(80, 94)
        var top4 = random(200, 250)

        fill(mountainColor) //darker tree color
        triangle(x - 60, height, x + 60, height, x, height - top4) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 3
        
        var top3 = random(90, 100)

        fill('#142414') //darker tree color
        triangle(x+10, height-60, x+40, height - 60, x + 25, height - top3) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 2
        
        var top2 = random(80, 95)

        fill('#1b361b') //darker tree color
        triangle(x-10, height-40, x+30, height - 40, x + 10, height - top2) // Second Row of Trees
}
fill(0,0,0, 150); //blackish
rect(0, height-30, width, height); //darkness beneath trees
    
for (var x = 0; x < 500; x += 20){ //tree front
    for (var y = 0; y < 1; y += 1){
        
        var T = sqrt(3)/2
        var top = random(75,90)
        
        fill('#422d1c') //brown
        rect(x + 10, height - 45, 10, 45) //tree stumps
        fill("#244024"); //tree color
        triangle(x, height-30, x + 30, height - 30, x + 15, height - top) //trees
        stroke('#1c2e1c');
        line(x -1 , height - 31, x + 15, (height - top) + 1); //line for tree depth

        noStroke()
}
}
}

When beginning this project, I had no clue what I wanted my wallpaper to be. I turned to my friend and noticed a landscape as the background of his. I enjoyed its aesthetic and decided to portray the Pacific Northwest in Wallpaper-format.

Initial Concept Sketch

Gretchen Kupferschmid-Project 05- Wallpaper

sketch

var x;
var y;

function setup() {
    createCanvas(480,480);
}
 function draw (){
    background(247, 173, 209);
    drawGrid();
 }
 function drawGrid(){
     //create tile through looping x and y values no more than height and width of canvas
     for (y= -6; y<height; y+=94){
         for(x=-6; x<width ; x+=94){
             //translate the grid to the new x/y position each loop
             push();
             translate(x,y);
             drawShadowPink();
             drawWhites();
             drawShadowEgg();
             drawYolk();
             pop();
         }
     }
 }
//create egg white shape
function drawWhites(){
    fill(255);
    strokeWeight(3);
    beginShape();
    curveVertex(41.77, 38.02);
    curveVertex(82.95, 38.2);
    curveVertex(96.47, 39.8);
    curveVertex(101.98, 41.56);
    curveVertex(103.88, 46.61);
    curveVertex(97.46, 51.37);
    curveVertex(96.27, 59.94);
    curveVertex(92.47, 67.03);
    curveVertex(88.92, 66.25);
    curveVertex(72.82, 68.51);
    curveVertex(55.28, 73.71);
    curveVertex(47, 71.42);
    curveVertex(42.5, 67.12);
    curveVertex(40.78, 63.32);
    curveVertex(21.58, 53.57);
    curveVertex(20.22, 51.85);
    curveVertex(24.11, 47.02);
    curveVertex(30.22, 44.07);
    curveVertex(31.38, 41.25);
    curveVertex(35.3, 38.36);
    curveVertex(41.93, 38.2);
    curveVertex(41.77, 38.02); 
    endShape();
}
//create yolk shape
function drawYolk(){
    fill(250, 212, 25);
    strokeWeight(1);
    beginShape();
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    curveVertex(68.59, 23.89);
    curveVertex(79.61, 31.47);
    curveVertex(82.02, 35.39);
    curveVertex(82.61, 40.38);
    curveVertex(71.89, 47.39);
    curveVertex(57.46, 48.21);
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    endShape();
}
//shadow underneath whites
function drawShadowPink(){
    fill(224, 112, 168);
    strokeWeight(0);
    ellipse(66.77, 60.15, 82.86, 37.3);
}
//shadow underneath egg yolk
function drawShadowEgg(){
    fill(219, 150, 0);
    strokeWeight(0);
    ellipse(65.05, 43.14, 47.3, 18.7);
}

I used the pattern of an egg, which is a little doodle/drawing I constantly draw. I even named my website eggontoast.store because of the eggs I draw

I used this simple egg drawing and added some shadows to give it dimension and a more interesting factor.

Rachel Shin – LO 5

The haunting and eerie image, Golden Skull, was created by CG director and environment artist Hirokazu Yokohara within 5 days. The article states that the project was created with Blender add-on Graswald, EEVEE, and Cinema 4D. I admired this particular project because it incorporates a variety of lighting, shading, and layering abilities to create such a realistic image to be 3D printed. Such techniques are crucial when it comes to CG projects in movies. The realistic aspect of such meticulously designed items in movies give the wow factor to audience members. I suppose that the image was created by a variety of layering skills with shading and lighting changes implemented to create the realistic factor. The creator’s artistic sensibilities are manifested in the final form by using all his techniques and abilities to produce a realistic CG. As someone who is interested in film producing, I appreciate all the CG artists out there who take the time to give life to inanimate images.

Xiaoyu Kang – Project 05 – Wallpaper


sketch


//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-05

var s1 = 20;
var s2 = 15;
var s3 = 10;
function setup(){
createCanvas(620, 620);
    noStroke();
}
 
function draw() {
    background(172,198,253);

//lines
    for (var a = 0; a < 620; a += 80){
    	fill(235,226,158);
        rect(a + 65,0,10,620);
    }
   
    //clouds
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill("white");
            ellipse(y * s1 + (s1 / 20) + 30, x * s1 + (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 15, x * s1+ (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 35, x * s1 + (s1 / 20) + 35,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 38,s2,s2);
            ellipse(y * s1 + (s1 / 20) + 45, x * s1 + (s1 / 20) + 32,s2,s2);
        }   
    }
    
    //yellow stars
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill(243,246,202);
        	quad(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 66, y * s1 + (s1 / 20) + 33, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 78)
        }
    }
}

For this project, I was inspired by the wallpaper in my bedroom when I was young. I remembered that it consists of many white clouds printed over a blue canvas. So I tried to recreate that with some additional decorations to make the drawing look more diverse.

 

Gretchen Kupferschmid-Looking Outward-05

https://timrodenbroeker.de/projects/redrawing-images/

A series of 3d generative portraits were created by artist Tim Rodenbroeker in which he utilizes portraits taken by photographer Ivana Marija Hope to create digital artwork and animation of the portraits. The size and z-position of each object is based on the brightness values of images files. I love the fact that this artwork is heavily based on the portrait style of the 1900s, yet is so contemporary in its generative and coding based digital aspect. Rodenbroeker’s work is based heavily on using open-source technology like Processing and even p5js. He also creates this images by combining the algorithm and code he creates with lots of research and experimentation.

Though the art is based off of photography art that had already been created, Rodenbroeker manages to create new artwork that celebrates the new computational style that computers allow us to create and to combine it with the human form.

Project 05 – Ilona Altman – Section A

sketch

var step = 0

function setup() {
    createCanvas(400, 500);
}

function draw() {

    background(255, 255, 255);


    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(250,180,112,40);
            ellipse(x, y, 200, 200);
            stroke(255,50,50);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(255,240,240);
            ellipse(x, y, 10, 10);
            stroke(150,70,75);
        }
    }

    for (var y = 0; y < height+25; y += 50) {
        for (var x = 0; x < width+25; x += 100) {
            fill(230,255,255);
            ellipse(x, y, 5, 5);
            stroke(60,110,100);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 50) {
            fill(0,0,0);
            line(x, y, x+50, y+50);
            stroke(204, 102, 0);
        }
    }
}

lil sketch

I am really interested in how a simple shape like a circle can become incredibly complex, through the repetition of its form repeating. I have always loved the idea of intersections, and transparency. I wanted to experiment with these ideas, the transparency of color and harshness of the outlines.