Month: October 2022

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

Blog – 05

I am most inspired by the work of Thomas Mangold. He is an artist from Dortmund, Germany that uses variations of shape, colors and dimensions in all of his work. He works with various mediums but most recently he has experimented with computational art. He makes all sorts of 3D art, but my favorite is his animal combinations where he combines two or more animals to create a very interesting and memorable final product. For example, he has combined a shark and a panda called Bluefin Tuna, and an elephant with a mouse called Mosquitofant. Mangold’s work is so unique that companies like WWF, Syfy channel, and Playstation reached out and partnered with him. He was also recently named on a list of the 30 best 3D digital artists of 2022. Although I am not familiar with the methods he used to create the artwork, I know that the overall concepts and levels of detail are very impressive.

By: Katie Makarska

Project 05- Pacman Wallpaper

Initially, I wanted to make a wallpaper that resembled Pacman. I approached the assignment by using for loops to create 2 sets of grids, the first was the dots that Pacman eats, and the second is the grid for the blue squares.

asu_sketch

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  


function setup() {
  createCanvas(450,590);
  background('Black');

}

function dotGrid() {
  var PADDING = 20;
  var ROWS =19;
  var COLUMNS =13;
  var CELL_COLOR = 'Blue'


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*34);
      var top = PADDING+(row*34.3);
      fill(random(255),random(255),random(255))
      circle(left,top,10);
    }
  }
}

function blueBaracades() {

  var PADDING = 40;
  var ROWS = 4;
  var COLUMNS = 3;
  var CELL_SIZE = 140;
  var CELL_COLOR = 'Blue'


  fill(0);
  stroke('Blue')
  strokeWeight(3);


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*CELL_SIZE);
      var top = PADDING+(row*CELL_SIZE);
      var size = CELL_SIZE - 50;
      rect(left,top,size,size);
    }
  }
}

function pacmans(){
  
  fill('yellow');
  noStroke();

    push()
    translate(width/5,height/4+7);
    rotate(radians(310));
    arc(0,0,35,35,radians(80),radians(35)/2);
    pop();

    push();
    translate(width/3*2,height/2);
    rotate(radians(140));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();
   
    push();
    translate(width/3+4,height-height/6);
    rotate(radians(230));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

    push();
    translate(width-width/7,height-20);
    rotate(radians(140));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

    push();
    translate(width-20,height/26);
    rotate(radians(45));
    arc(0,0,35,35,radians(80),radians(20)/2);
    pop();

}



function draw(){
  dotGrid();
  blueBaracades();
  pacmans();
  noLoop();
}

Looking Outwards 05

The artwork I came across while looking into 3D computer graphics was a series of pieces created by the studio Nervous System. The studio takes research from the body and cells. The creators based there computational systems on the ways that cells divide, and subdivide into parts that produce a wrinkle-like blob. Through this, the artists at Nervous System takes the generations from the rules following theses biological systems, they 3D print these very elegant objects at all types of scales. The inwards and outwards folds though may seem random, are a result of a fairly simple set of rules. Additionally, I found it quite interesting to see how such a overlooked concept of the human body, is scaled both up and down into a piece of art that can be held and experienced in different ways. It many ways, it gives a new perspective on the connotations or understandings we already have of existing forms in nature and in our everyday lives.

Studio Website: https://n-e-r-v-o-u-s.com/

Project 5 – Wallpaper

I had a really hard time doing this one, the array functions were giving me difficulty and at one point I created a file that just crashed the html file permanantly so I kept having to make more files but I figured them out in the end and ended there.

sketchDownload
var s = [10,15,20,25,20,15];
var x=20;
var y=20;
var c=0;
function setup(){
    createCanvas(600, 600);
    background(255);
}

function draw() {
fill(0); 
for(var l = 0;l <= 5;l += 1){
    y = 20
    for(var h = 0; h <= 5;h += 1){
    x = 20+c;
     for(var i = 0;i < 6;i ++){

        circle(x,y,s[i]);
        x += 15;
        y += 15;
     }
     y += 5;
    }
    c += 90;
}
noLoop();
}

Looking Outwards: 05

I came across a project of a house model in Russia that looked really cool — looking at houses in general is really fun when you take out the burden of having to pay for it. This project on Behance, by Red Avenue Studio, is one of many by the company, which creates architectural visualizations. Their work consists of a lot of modern architecture, and its buildings are often very big and expansive. The software listed here consists of a lot of 3D rendering programs, along with Photoshop. I assume that their work consisted of less coding and relies heavily on using these programs to create models. I suppose there’s also an intial sketch that’s created, as well. Constructing a reality on a computer is such a cool aspect of today’s technology, as one can actually imagine themselves in a house or establishment long before the project is even completed in person. It also allows for more efficient changes that might be time-consuming when done on paper.

art deco ish?

i struggled quite a bit with keeping my variables in check without rotating absolutely everything chaotically. to deal with this, I ended up hard-coding too many numbers…

sketch
// jaden luscher
// jluscher
// section a
// project 05

// this program draws an art deco-influenced wallpaper

// initializing variables
var tileSize = 30;

// random color variables
var stemColor;
var budColor;
var frondColor;

function setup() {
    createCanvas(450, 650);
    background("#7F246B");    // fuschia
    angleMode(DEGREES);
    rectMode(CENTER);
    noLoop();

    stemColor = "#E09D00";  // ochre
    budColor = "#FFD470";   //light yellow
    frondColor = "#033B63";   // dark blue
}

function draw() {
  for(var i = 0; i < 5; i++) {
    drawBand();
    translate(-3.21*tileSize, 3*tileSize);
  }
}


function drawBand() {
  translate(tileSize, 3*tileSize);   // temporary, just to see tile in center
  for(var k = 0; k < height/(3*tileSize); k++) {
    for(var j = 0; j < width/(tileSize); j++) {
      oneTile();
      rotate(180);
      translate (2.15*tileSize, tileSize/10);
      // I cant figure out why the row slants if i dont move it
      // vertically by the arbitrary number tileSize/10 :-(
    }
    translate(-3.21*tileSize, tileSize);
    rotate(180);
  }
  print(height/ (6*tileSize));
}


function oneTile() {
  flowerStem();
  push();
  noStroke();
  // draw 2 fronds
  translate(0,-tileSize/10);  //bottom of fronds align to triangle edge
  rotate(-90);
  frond(tileSize);  // right frond
  rotate(-90);
  frond(tileSize);  //left frond

  fill(budColor);
  ellipse(0, 0, tileSize/3, tileSize*1.5)
  pop();
}


function flowerStem() {
  // rotate(180);
  fill(stemColor);
  stroke(stemColor);
  triangle(0, -tileSize, -tileSize, 0, tileSize, 0);    // triangle base
  arc(0, -1.5*tileSize, tileSize, tileSize, -135, -45, PIE);    // flower base
  strokeWeight(2);
  line(0, -tileSize, 0, -1.5*tileSize); // stem


  // stamen
  push();
  translate(0, -1.5*tileSize);
  rotate(45);   // align stamen lines with base of flower arc
  fill(budColor);
  var numStamen = tileSize/2;
  var angle = 90/numStamen;
  for(var i=0; i <= numStamen; i++) {
    strokeWeight(0.5);
    line (0, 0, 0, -tileSize);
    push();
    noStroke();
    ellipse(0, -tileSize, tileSize/12); // flower buds
    pop();
    rotate(-angle);
  }
  pop();


}

function frond(tileSize) {
  fill(frondColor);
  push();
  var x = 0;
  var y = 0;
  var leafSize = tileSize/7;  // width of leaf. /6 creates woven pattern, /8 is more leaf-like
  var numLeaves = leafSize*2;
  // left half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, -y, x+leafSize, -y);
    rotate(90/numLeaves);
    x += leafSize;
    y += leafSize;
  }
  pop();

  // right half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, y, x+leafSize, y);
    rotate(90/numLeaves);
    x -= leafSize;
    y -= leafSize;
  }
  pop();
}

LO 5: first 3D animation

video shows a 3D animation of a hand and face

The first 3D animation was created in 1972 by Edwin Catmull and Frederic Parke, students(!) at the University of Utah. The film shows the process of creating a mold of a hand, tracing the mold with precise polygons, and translating this data via an analog computer.

I admire the commitment and precision of this tedious process because we now take for granted the power of 3D computation for countless purposes. These techniques may seem dated, but they are the process upon which our sophisticated 3D animation is based now (Edwin Catmull is a co-founder of Pixar…)

This is more of a “Looking Backwards” report, but I feel it essential to learn about the backstory of the tools we depend on and to understand how absolutely mathematical and physics-based it is.

Project 05-Wallpaper

A wallpaper design inspired by Marimekko Unikko!

sketch
//Angela Yang
//Section C

function setup() {
  createCanvas(600, 700);
  noLoop();
  //frameRate(1);
}

function draw() {
  background("#ddd9c8");
  scale(0.6);
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 6; j++) {
      switch (parseInt(random(3))) {
        case 0:
          mikkoflower1(190 * j, 215 * i, color(36, 28, 85));
          break;
        case 1:
          mikkoflower2(190 * j, 215 * i, color(36, random(100), 85));
          break;
        case 2:
          scale(1);
          mikkoflower3(190 * j, 215 * i, color(36, random(100), 85));
          break;
      }
    }
  }

  //Flower 1
  function mikkoflower1(x, y, fillcolor) {
    push();

    // petals
    fill("#b8172a");
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(15, 10, 90, 5);
      // ellipse(0, 50, 30, 60);
      ellipse(0, 0, 20, 90);
      scale(1.02);
      rotate(radians(60));
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    rect(-8, -10, 25, 25);

    pop();
  }

  //Flower 2
  function mikkoflower2(x, y, fillcolor) {
    push();

    // petals
    fill(fillcolor);
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(0, 8, 70, 10);
      ellipse(20, 50, 40, 90);
      ellipse(0, 0, 20, 100);
      rotate(radians(150));
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    ellipse(2, 5, 25, 40);

    // // stem
    // rotate(radians(80));
    // strokeWeight(10);
    // stroke(fillcolor);
    // line(30, 90, 55, 150);
    pop();
  }

  //Flower 3
  function mikkoflower3(x, y, fillcolor) {
    push();

    // petals
    fill(fillcolor);
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(15, 10, 100, 80);
      ellipse(0, 50, 40, 90);
      ellipse(20, 0, 20, 100);
      rotate(radians(230));
      scale(1.01);
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    ellipse(2, 5, 30, 40);

    //     // // stem
    //     rotate(radians(80));
    //     strokeWeight(15);
    //     stroke(fillcolor);
    //     line(30, 90, 55, 150);
    pop();
  }
}