Category: SectionC

Project 05: Wallpaper

project 5 sketch copy


function setup() {
    createCanvas(400, 400);
    background(204, 229, 255);
}

function draw() {
  //criss cross line background
  for (y = 0; y < height + 25; y += 50) {
        for (x = 0; x < width + 25; x += 50) {
            var llength = 25;
            strokeWeight(4);
            stroke(102, 178, 255);
            line(x - llength, y - llength, x + llength, y + llength);
            line(x - llength, y + llength, x + llength, y - llength);
        }
    }
    //ice cream cones
    noStroke();
    for(var a = 25; a < width; a += 50) {
        for(var b = 25; b < width; b += 100) {
            drawcone(a, b);
        }
    }
    //rasberry ice cream scoops
    for(var c = 25; c < width; c += 50) {
        for(var d = 30; d < height; d += 100) {
            rasberryscoop(c,d);
        }
    //chocolate ice cream scoops
     for(var e = 75; e < width; e += 100) {
        for(var f = 30; f < height; f += 100) {
            chocolatescoop(e,f);
        }
     }
     
    //white dots 
      for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 6; x++) {
            fill(255);
            circle(x * 100 + 50, y *100 + 50, 7);
            noLoop();
      }
    }
  }
}

function drawcone(a, b) {
    fill(255, 204, 153);
    triangle(a - 7, b + 10, a, b + 30, a + 7, b + 10);
}

function rasberryscoop(c, d) {
    fill(255, 102, 178);
    circle(c, d, 18);
}

function chocolatescoop(e, f) {
    fill(102, 51, 0);
    circle(e, f, 18);
}

When I began thinking of a design to create, I was pretty hungry so naturally I had my main pattern be a dessert. Originally my background was going to be vertical straight lines but I ended up making them diagonal to create a criss-cross look. I knew I wanted to incorporate alternating color scoops, and since we have had a good amount of practice with this it wasn’t hard to code. I thought having dots at some of the intersections of the blue lines would be nice, so I added that.

Paper sketch of wallpaper

Looking Outwards 05: 3D Computer Graphics


Project Title: WarNymph

Year of Creation: 2020

Artists: Dylan Kowalski

The digital persona is Grimes’ “de-aged clone.”

I admire how the project allows Grimes to have a digital version of herself because I feel like the virtual world is the exact place where people can be who they “truly are” without the confinements of real world expectations or circumstances. Though the character is kind of scary, I admire how genuinely eerie the 3D baby looks because it aligns well with the grim messages it speaks (in some videos, WarNymph talks of the end of the world). I know that Kowalski did the 3D sculpting partly on his “home desktop” and with ZBrush (digital sculpting application), but I can’t find much else on the algorithms or mechanisms that generated the work. Kowalski’s artistic focus lies in making incredibly detailed 3D characters, which is clearly exemplified by the baby’s intricate wings and leg tattoo, which accurately matches Grimes’ tattoo.

Project 5: Wallpaper

sketch


//i was inspired by beaches and shells that found there cause i am from Socal

var wValue= []; 
var e = 100;
var j = e;

function setup() {
  var canvas = createCanvas(600, 220);  
 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      var object = {};
      
      //colors
      object.r = random(0, 255);
      object.g = random(0,255);
      object.b = random(0, 255);
      //sizes
      object.s = random(40, 50);
      
            wValue.push(object);
    }
  }
}

function draw() {
  pattern();
}

function pattern() {

  background(0, 0, 0);


  var counter = 0; 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      //colors
      let val = wValue[counter];
      counter++; // count to next object for next loop
      
      let r = val.r;
      let g = val.g;
      let b = val.b

      //sizes
      let s = val.s;

      push();
      scale(0.4);
      translate(x, y + 80);
      stroke(r, g, b);
      strokeWeight(5);
      noFill();
      for (let i = 0; i < 10; i++) {
        fill(255);
        ellipse(9, 20, s, s); //shell
        rotate(PI / 4);
      }
      pop();
      
       
    }
  }
}

Looking Outwards 05: 3D Graphics

A piece of 3D computer art that I find inspiring is Synchronism by artist Andreas Wannerstedt. This piece is a set of three looping videos that show the synchronization between moving elements. I am familiar with Wannerstedts work, and what I love about all of his videos is that they create a very short yet satisfying loop that is visually beautiful. Each element is perfectly timed, and the pieces are so dynamic that you have to watch the loop a few times to really understand all of the parts. A lot of his graphics are also extremely photo representational and seem like they could really be sculptures or installations. From the look of the video, it seems like a 3d computer software was used to create these pieces. In his process, you can also see that he sticks to a certain graphic style that mixes bright colors with textures from nature or more industrial materials.

Piece: Synchronism
Link: https://andreaswannerstedt.se/synchronism

Project 05: Wallpaper

sketch

I thought this project was pretty fun! I approached it almost like making a singular tile and then repeating that to create the pattern.

//Jacky Lococo
//jlococo
//section C
function setup() {
    createCanvas(500, 500);
    background(220);
    rectMode(CENTER) 
}

function draw() {
    for(var y = 125/4; y <= height-25; y += 62.5){  //columns made from tile function
        for (var x = 125/4; x <= width-25; x += 62.5){ //rows for tile fuction
        tile (x, y)
    } 
    }

}

function tile (x,y){
    push();
    translate(x,y)

    //main square for the tile -- contains quarter arcs that will make a semi cirlce when repeated
    strokeWeight(0)
    fill(255, 247, 243)
    rect(x, y, 125, 125)

    //black circle within the horizontal cirlce
    strokeWeight(0)
    fill(0)
    ellipse(x+25, y+10, 23, 23)

    //horizontal arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x+25, y+10, 75, 75, 0, PI+ TWO_PI, CHORD)


    //3 lines coming from the horizontal arc
    strokeWeight(1)
    line(x + 25, y+10, x-25, y-62.5)
    line(x - 12.5, y+10, x-61, y-62.5)
    line(x + 5, y+10, x -43, y-62.5)

    //bottom left quarter arc to make verticle arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x-24, y+62.5, 75, 75, PI, PI*3/2, PIE)

    //top left quarter arc to make verticle arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x-24, y-62.5, 75, 75, PI/2, PI, PIE)

    //single left to right line
    strokeWeight(1)
    line(x-24, y+50, x+62.5, y-62.5)

    //small black arc in the middle of the verticle arc -- only shown half of ellipse 
    strokeWeight(0)
    fill(0)
    ellipse(x-24, y+62.5, 25, 25)

    //tan colored arc at the top right of the tile
    strokeWeight(0);
    fill(255, 247, 243)
    arc(x-24, y-62.5, 25, 25, PI/2, PI, PIE)

    //two small dots on top of each other -- sitting below horizontal arc
    strokeWeight(0);
    fill(0)
    ellipse(x+25, y+55, 5, 5)
    strokeWeight(0);
    fill(0)
    ellipse(x+25, y-55, 5, 5)

    pop()
}

Project-05: Wallpaper

I applied the same coding structure I used in my assignment A to this project. Then, I changed the repeated shapes from Hexagon to my designed shapes 1 and 2. Because of the assignment A, it is relatively easy to create this wallpaper pattern.

project05: wallpaperDownload
var x;
var y;
var a=20;
var b=20;



function setup() {
    createCanvas(400, 300);
    background( 240,230,140);
}

//shape in the first column
function shape1(){
    push();
    translate(a,b);
    noStroke();
    x=0;
    y=0;
    var s = 10;
    if(color==1){
        fill(255);
        circle(x,y,s);
        fill(175,238,238);
        circle(x,y+5,s);
        color+=1;
    }
    else{
        fill(175,238,238);
        circle(x,y,s);
        fill(255);
        circle(x,y+5,s);
        color=1;
    }
    
    pop();
}
//shape in the second column
function shape2(){
    push();
    translate(a,b);

    x=0;
    y=0;
    var d=5;
    strokeWeight(2);
    stroke(139,69,19);
    line(x-d,y,x,y-10);
    line(x+d,y,x,y-10);
    noStroke();
    fill(255,69,0);
    circle(x-d,y,10);
    circle(x+d,y,10);
    pop();
}

function draw() {
    //two circles
    for(b=20; b<=400; b +=50){
        for(a=20; a<=500; a+=50){
            shape1();
        }
    }

    //cherry shape
    
    for(b=50; b<=250; b +=50){
        for(a=45; a<=350; a+=50){
            shape2();
        }
    }


}

LO 05: Man Mask

LO 5

Man Mask

By Rachel Rossin

“Man Mask” is a VR piece by Rachel Rossin in which the viewer inhabits (literally is placed inside) a call of duty avatar. The piece takes the viewer on “a guided meditation through landscapes taken from the game Call of Duty: Black Ops, drained of violence and transformed into an ethereal dream world”. I think that the idea of taking assets and environments from a video game and recontextualizing them for a completely different effect is pretty interesting. It allows for commentary on the particular piece of media, but also the freedom to depart from it. This piece was created in part as a reaction to the artist’s own experience playing first person shooters and taking on a male avatar online in search for neutrality. I also think it is interesting how it places the viewer visibly inside the avatar, so you are more immersed in the character than in a third person view, but not really looking through the character’s eyes, rather from behind them.

http://rossin.co/

clip from installation

Project 05 Wallpaper

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-05-Wallpaper


//controls the spacing of the pattern
var cellSize;
//controls the width of the eyes
var eyeWidth;
//controls the height of the eyes
var eyeHeight;
//controls the x position of the patten elements
var x;
//controls the y position of the pattern elements
var y;

function setup() {
    createCanvas(600, 600);
    background(255);
    cellSize = width / 4
}


//tileA draws everything to do with the eyes

function tileA(x, y, cellSize) {

    eyeHeight = cellSize / 7;
    eyeWidth = cellSize / 4;

    //clown makeup
    
    stroke(248, 24, 148);
    fill(255, 204, 239);
    strokeWeight(4);
    bezier(x + eyeWidth / 4, y + eyeHeight + 5, x, y + eyeHeight + 5, x, y + eyeHeight + 5, x, y + cellSize / 2 - 10);
    bezier(x - eyeWidth / 4, y + eyeHeight + 5, x, y + eyeHeight + 5, x, y + eyeHeight + 5, x, y + cellSize / 2 - 10);
    bezier(x + eyeWidth / 4, y - eyeHeight - 5, x, y - eyeHeight - 5, x, y - eyeHeight - 5, x, y - cellSize / 2 + 10);
    bezier(x - eyeWidth / 4, y - eyeHeight - 5, x, y - eyeHeight - 5, x, y - eyeHeight - 5, x, y - cellSize / 2 + 10);
    //eye shadow
    for (i = 0; i < 20; i += 1) {
        noFill();
        strokeWeight(.5);
        stroke(248, map(i, 0, 20, 24, 255), map(i, 0, 20, 148, 255));
        ellipse(x, y, eyeWidth + i, eyeHeight + i);
    }

    // eye
    fill(255);
    strokeWeight(3);
    stroke(245, 230, 0);
    ellipse(x, y, eyeWidth, eyeHeight);
    fill(0, 0, 255);
    ellipse(x, y, 20, eyeHeight);
    fill(255);
    noStroke();
    arc(x, y, 20, eyeHeight, radians(220), radians(250))

}

//tileB draws the mouth
function tileB(x, y, cellSize) {
    noFill();
    strokeWeight(5);
    stroke(248, 24, 148);
    arc(x, y, cellSize / 3, cellSize / 10 + 10, radians(0), radians(180));
    arc(x, y, cellSize / 3, cellSize / 10, radians(0), radians(180));
}

//tileC draws the nose
function tileC(x, y, cellSize) {
    fill(248, 24, 148);
    noStroke();
    ellipse(x, y - cellSize / 4, cellSize / 4, cellSize / 4);
    fill(255, 204, 239);
    ellipse(x, y - cellSize / 4, cellSize / 5, cellSize / 5);
}

function draw() {
    for (x = cellSize / 2; x < width; x += cellSize){
        for (y = cellSize / 2; y < height; y += cellSize){
            tileA(x, y, cellSize);
        }
    }
    for (x = cellSize; x < width; x += cellSize){
        for (y = cellSize; y < height; y += cellSize){
            tileB(x, y, cellSize);
            tileC(x, y, cellSize);

        }
    }
    noLoop();

}

I made a clown face wallpaper. The walls have eyes, and they’re clowning you.

LO: 3D Computer Graphics

Andreas Wannerstedt’s 3-dimensional, motion-based works present such oddly satisfying feeling to audience.

Andreas Wannerstedt’s unique 3D sculptures show mesmerizing looping animations using playful and simple geometric shapes in balanced compositions. Along with motion, Wannerstedt applies organic textures as well as peaceful color palettes to display the various geometric shapes onto the 3D environment, creating a sense of “hypnotizing“ illusion. I found his synchronized animations with harmonizing tones really satisfying and relaxing to watch. I really admire how the behaviors of his animations differ from that of real world, defying gravity and friction. Such natural aspects of his motions entertains and aesthetically pleases the viewers with a touch of clean and tranquil feeling. Wannerstedt’s artistic sensibility surfaces. When he established his own, new atmosphere with the geometric shapes through motion and texture.   

Reference: https://andreaswannerstedt.se/

Project-05: Wallpaper

sketchDownload
//Yeon Lee, Section C
//Project 5: Wallpaper


function setup() {
    createCanvas(500, 500);
    background(220);
    backgroundColor = color(255,251,241);
    cloudColor = color(255, 145, 179); //pink
    cloud_2Color = color(111, 220, 191); //green
    balloonColor = color(255, 141, 102); //orange
    balloon_2Color = color(255, 218, 102); //yellow
    noLoop();
}

function draw() {
    background(backgroundColor);

    //clouds
    for (var a = -30; a < width; a += 150) {
        for (var b = 0; b < height; b += 200) {
            push();
            translate(a, b);
            cloud();
            pop();
        }
    }

    //clouds #2
    for (var c = 50; c < width; c += 150) {
        for (var d = 100; d < height; d += 200) {
            push();
            translate(c, d);
            cloud_2();
            pop();
        }
    }

    //balloon
    for (var e = -20;  e < width; e += 150) {
        for (var f = 50; f < height; f += 200) {
            push();
            translate(e, f);
            balloon();
            pop();
        }
    }

    //balloon #2
    for (var g = 55;  g < width; g += 150) {
        for (var h = 160; h < height; h += 200) {
            push();
            translate(g, h);
            balloon_2();
            pop();
        }
    }
}

function cloud() { //draw cloud 
    fill(cloudColor);
    noStroke();
    ellipse(30, 60, 15, 15);
    ellipse(40, 50, 20, 20);
    ellipse(60, 40, 30, 30);
    ellipse(80, 50, 20, 20);
    ellipse(90, 60, 15, 15);
    rect(30, 50.5, 58, 17);
}

function cloud_2() { //draw cloud again with different color
    fill(cloud_2Color);
    noStroke();
    ellipse(30, 60, 15, 15);
    ellipse(40, 50, 20, 20);
    ellipse(60, 40, 30, 30);
    ellipse(80, 50, 20, 20);
    ellipse(90, 60, 15, 15);
    rect(30, 50.5, 58, 17);
}

function balloon() { //draw balloon
    fill(balloonColor);
    noStroke();
    ellipse(50, 55, 45, 48);
    triangle(45, 84, 50, 50, 55, 84);
    fill(116,71,0);
    rect(50, 84, 1, 30);
}

function balloon_2() { //draw balloon with different color
    fill(balloon_2Color);
    noStroke();
    ellipse(50, 55, 45, 48);
    triangle(45, 84, 50, 50, 55, 84);
    fill(116,71,0);
    rect(50, 84, 1, 30);
}

My favorite part of this project was creating shapes like the cloud and balloons, and playing around with colors for better visualization. At first, I tried to illustrate the sky with flying balloons, but later I decided to make it entirely abstract with different colors of clouds just to resemble like a wallpaper on a kid’s room.