Author: yoli

Project_06_abstract clock

as_clockDownload
	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var x  ;
var y  ;
var mx ;
var my ;
var hx ;
var hy ;
var bigR = 200 ;
var mbigR = 100;
var hbigR = 50 ;
var size = 10 ;
var theta = 0;
var theta2 = 30;
var theta3 = 60;
var traceX = [];
var traceY = [];





 
function setup() {
    createCanvas(480,480);
    background(180);  
    frameRate(1) ;
}


function draw() {
    background(180);
   

    push();
    translate(240,240);
    fill(0);
    circle(0,0,3);

    fill(150,50,30);  // for the hour circle
    hx = hbigR * cos(radians(theta3));
    hy = hbigR * sin(radians(theta3));
    circle ( hx,hy,30);

    theta3 += 360/60/60;

    fill(240,100,80); // for the minutes circle
    mx = mbigR * cos(radians(theta2));
    my = mbigR * sin(radians(theta2));
    circle(mx,my,20);

    theta2 += 360/60/60;

    print("m"+ theta2);



    
    noStroke();
    fill(240,144,105);  //for the second circle
    x = bigR * cos(radians(theta));
    y = bigR * sin(radians(theta));
    circle(x,y,size);

    theta += 360/60;

    if(bigR <= 200){  // the radius is shortening when time passes
        bigR = bigR - 200/59;
    }
    if(bigR<=0){
        bigR = 200;
    }

    //print(bigR);

    traceX.push(x);  // the doc after the second circle
    traceY.push(y);
    for(var i =0; i < traceX.length; i++ ){
        fill(120,100,30);

        circle(traceX[i],traceY[i],3);    
        


    }

    if (traceX.length > 20){ // the length of the docs
        traceX.shift();
        traceY.shift();
    }


    pop();

    
}

LookingOutward_06_Randomness

For this week’s topic, I would like to talk about Julius Horsthuis. He is a fractal artist with a background in special visual effect.

http://www.julius-horsthuis.com/still-gallery

I would like to talk about his short film – Fractal Time.

I am a concept artist and his work inspired me a lot in the direction of combining technical skill with design ideas. He uses abstract geometric shapes to describe some vague and abstract ideas as time and space. I think I can study his work a bit to find a creative way to use basic shapes as my inspiration to do some sci-fi designs.

I think he uses shape, size, depth, color as randomness to generate the final image. I also think he uses perlin noises frequently in his work.

I can see his sense of visual special effect being expressed a lot in his final film. I think he want to use some undefined shapes and even narrative rhythm to express his understanding of time and space.

I would say he is a really innovative artist in terms of film production.

LO-05-3D Computer Graphics

https://www.martinakis.com/prints/shifted_2_print

Artist Main Site : https://www.martinakis.com/

For this week I would like to talk about digital artist Adam Martinakis.

First I would say, his artwork is amazing in both art taste and expression. His work exceeds his peers in his deep thinking. Even though I can guess all those techniques he applied, I can never come out of something this stunning.

I am not sure about the algorithms he used in the software. I would guess he basically did the model, and adjust the texture with variables like density, spacing, transparency, value and refraction rate. 

In some articles, it says he uses “mixture of post-fantasy futurism and abstract symbolism.”  He also addressed relationships between humans. In his work, we often can see human body/ bodies being displayed in segmented ways. By computer 3D technology, he expressed his thoughts in a very detailed way. Those details made audiences feel close to the artwork in some way and the surrealism idea inside of the artwork made audiences give the reality a deep thought.

His artworks are so powerful that pale all the explanations.



Project-04 stringArt

project-04-stringDownload
	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var gray = 0;



 
function setup() {
    createCanvas(600,450);
    background(100);

    strokeWeight(0.5);
    
}
 
function draw() {
    
    background(100);

    
    gray = mouseX/ 2;
    
    fill(255-gray);
    noStroke();
    circle(width / 2, height / 2, 450);


    

    dist(mouseX , mouseY , width/2, height/2 ) 

    for(var i = 50; i <= 600; i += 50){
        if(dist (mouseX, mouseY, width/2, height/2 ) < 225  ){
        stroke(255);
        line(i, 0, constrain(mouseX, 75, 525), constrain(mouseY,0,450));
        line(constrain(mouseX, 75, 525), constrain(mouseY,0,450), i , height);
    }   else {
        stroke(0);
        line(i, 0, constrain(mouseX, 75, 525), constrain(mouseY,0,450));
        line(constrain(mouseX, 75, 525), constrain(mouseY,0,450), i , height);
    }

    }

    for( var e = 30; e <= 450 ; e += 10){
        line(0,e,mouseX,i);
        line(600,e,mouseX,i);
    }
    
}

LookingOutwards – 04

http://hertzianlandscapes.com/

This project Hertzian Landscapes is created by Richard Vijgen. It reflect the invisible sound in a scientific and visual way.

This project uses a very scientific way to create reliable interaction between human and sound. The project setting is well thought and effective.

Also this project thoughtfully categorizes sound frequencies into familiar sub-groups, so that participants can relate the abstract waves into something daily and understandable.

I guess, the program maybe collect spatial data in certain frequencies then transmit them into program then translate them into graphic patterns. When people move, the spatial data is changing at the same time, which will result in the graphical changes.

I don’t think the aim of this project is to demonstrate the author’s art taste, but the project demonstrates a new way of people interacting with sound.

It is very innovative.




Hertzian Landcape #1 from R Vijgen on Vimeo.

Project-03 Dynamic Drawing

sketch-dynamic – square

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var r = 0;
var g = 0;
var b = 0;
var angle = 0 ;
var w = 0;
var dir = 1;
var clickNumber = 0;

 
function setup() {
    createCanvas(600,450);
    frameRate(15);
    background(100);
    
}
 
function draw() {
    
    fill(r,g,b);
    stroke(0);
    push();

    // make the rectangle rotate around mouse
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rect(mouseX/3, mouseY/3, min(mouseX/2,mouseY/2), min(mouseX/2,mouseY/2));

    //change the color and size of the second rectangle, and make it rotate anticlockwise
    fill(r,g+30,b+w);
    rect(mouseX,mouseY,w,w);
    rotate(radians(-angle));

    pop();
    angle = angle + 10;

if ( clickNumber == 15){
    noloop();
}



   
}


function mousePressed() {

     clickNumber = clickNumber + 1;

    // change red everytime mouse pressed and make it repeatable

    if (r >= 255){
        r = 0;
    } else {
        r = r + 50;
    }
    
   
   // controle the size of the second rectangle and make it change between 0- height/2
   
    if (w >= height/2){
        dir = -1 ;
    } 

    if ( w < 0){ 
        dir = 1 ;
    }

    w = w + dir*20;
    }

In this painting, you can control the circulation center by the position of your mouse and the size of the second square by your click number. You can click 15 times then the code will stop running and you will have your own painting.Enjoy.

week03- Computational Fabrication

This picture is one from Iris Van Herpen’s fashion show.
Here is her website: https://www.irisvanherpen.com/

For a long time, fashion society is talking about modernity. When fine art has gone a long way explaining what is modernity, fashion professionals are still repeating themselves in some way.

Iris’s work and presentation is really eye opening. I doubt she uses a lot computational automation, but I think she uses a lot 3d and 3d printing in her work. Also, as far as I know, she uses a lot new fabrication materials and laser cutting technology.

I can not say for sure how she design her work, whether she did them all in 3d, or she uses automation to generate some basic variations of shapes them cut them into a real clothes piece. If I were her, I would use length, width, curve, size , and rotation to generate basic shapes.

The link I add below is her SS 2020 Haute Couture show. In the recent work, she uses more soft fabrications than, in her middle stage, hard and 3d printing-ish materials. She advances more in her design taste and also at the same time remains her pioneering spirit.

Project-02-Variable-Face

sketch-variable-face
	// Huijun Shen D


	var faceWidthA = 100;
    var faceHeightA = 120;
    var faceWidthB = 100;
    var faceWidthB = 100;
    var faceHeightB = 100;
    var eyeWidth = 30;
    var eyeHeight = 30;
    var mouthWidth = 30;
    var mouthHeight = 30;
    var puffRWidth = 30;
    var puffRHeight = 30;
    var puffLwidth = 30;
    var puffLHeight = 30;
    var r = 10;
    var g = 10;
    var b = 10;

 
function setup() {
    createCanvas(640,480);
}
 
function draw() {
    noStroke();
    //bg
    background(r,g,b);    //randomize bg color
    fill(r+30, g+30, b+30);
    rect(width/2-width/3, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB*2, height/2-height/3, width-width/2-width/3, height -30);
    //fill(r, g, b);

    stroke(0)
    fill(219,153,112);
    fill(50+r,50+g,b+50);  //neckDeco
    rect(width/2 - faceWidthB * 0.25, height/2 + faceHeightB/3, faceWidthB/2, faceHeightB/5);  
    fill(247,216,186);
    ellipse(width/2, height/2, faceWidthB, faceHeightB);  //face    
    var eyeLX = width / 2 - faceWidthB * 0.25;
    var eyeRX = width /2 + faceWidthB * 0.25;
    stroke(255,0,0);
    fill(245,140,203);
    ellipse(width / 2- faceWidthB * 0.25, height/2 + faceHeightB * 0.2, puffLwidth, puffLHeight); //puff
    ellipse(width / 2+ faceWidthB * 0.25, height/2 + faceHeightB * 0.2 , puffRWidth, puffRHeight); //puff

    //change eye white cirlce position
    fill(255);
    if (mouseX < width/2) {
        ellipse(eyeLX, height / 2, eyeWidth+20, eyeHeight+15); //eyeWhitCircle
    }else{
        ellipse(eyeRX, height / 2, eyeWidth+20, eyeHeight+15);
    }

    
    fill(0);
    ellipse (eyeLX, height / 2, eyeWidth, eyeHeight); //eye
    ellipse (eyeRX, height / 2, eyeWidth, eyeHeight); //eye
    stroke(0);
    ellipse(width / 2, height/2 + faceHeightB * 0.25, mouthWidth, mouthHeight) //mouth


    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.5 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.65 ,height / 2 - faceHeightB * 0.65);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill(); //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.25 ,height / 2 - faceHeightB * 0.25);
    bezierVertex(width / 2 + faceWidthB * 0.3, height / 2 - faceHeightB * 0.4, width / 2 + faceWidthB * 0.25, height / 2 + faceHeightB * 0.2, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.4 ,height / 2 - faceHeightB * 0.4);
    bezierVertex(width / 2 + faceWidthB * 0.4, height / 2 - faceHeightB * 0.5, width / 2 + faceWidthB * 0.3, height / 2 + faceHeightB * 0.25, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.6 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 + faceWidthB * 0.2, height / 2 - faceHeightB * 0.7, width / 2 + faceWidthB * 0.5, height / 2 + faceHeightB * 0.8, width / 2 + faceWidthB * 0.5 , height / 2 - faceHeightB * 0.9);
    endShape();
}


    function mousePressed() {
        r = random (0,255);
        g = random (0,255);
        b = random (0,255);
        faceWidthA = random(50, 70);
        faceHeightA = random(30,50);
        faceWidthB = random(150,250);
        faceHeightB = random (150, 300);
        eyeWidth = random(10, 30);
        eyeHeight = random(10, 30);
        mouthWidth = random (8, 15);
        mouthHeight = random (5,10);
        puffRWidth = random (10,30);
        puffRHeight = random (5,15);
        puffLwidth = random(10,30);
        puffLHeight = random(5,15);

    }

I tried some basics first then I tried to decorate the background. I would like to make some funny face so that I tried hard to make some ridiculous hair. Not very successful, I should say. I wanted to add some interaction in it so that I tried if/else. If you click on the left half of the canvas, the white circle of the under the eye is on the left, other wise it is on the right side.

LO-02-GenerativeArt

LO-week02-generative art

I looked at French artist Miguel Chevalier’ work MAGIC CARPET. 

The point which surprises me most is his combination of modern and abstract art with real-time interaction. A lot of the time, modern art seems very indifferent and far away from the audience. Without deep explanation, it would be too hard for the audience to embrace the essence of the artwork.

In Miguel Chevalier’s art, he interprets his artwork as a carpet and also presents it as a carpet. When the audience holds sensors into the place, the carpet can detect its location and change accordingly.

I think he first uses some variables to control how the computer generates similar but different patterns. Then put a trigger for the sensor. When the sensor has been detected, the trigger wakes up some more variables to change the patterns around the sensor’s surroundings. 

I guess he uses some variables to control the direction, size, density and shape of the pixels it generated. 

Miguel CHEVALIER “Magic Carpets 2016” Milton Keynes (UK) from Claude Mossessian on Vimeo.

https://www.vice.com/en_uk/article/gvwekj/chevalier-magic-carpet-in-england

Week01_Self-Portrait

test

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

function draw() {
	strokeWeight(0)

	fill(20,20,20)
	rect(65,300,450,280);

	fill(239,192,136)
	ellipse(300,300,450,500);

	fill(39,25,150)
	triangle(210,210,140,300,360,280)
	triangle(460,210,370,300,500,320)
	triangle(370,300,320,370,360,400)
	fill(0)
	circle(200,280,15)
	circle(450,280,15);

	fill(237,220,191)
	triangle(380,290,370,400,400,400);

	fill(175,125,84)
	ellipse(350,480,30,15);

	fill(16,11,30)
	triangle(230,50,50,310,150,220)
	triangle(230,50,60,280,250,140)
	triangle(230,50,470,60,510,230)
	triangle(260,40,60,110,50,320);

	fill(39,16,103)
	rect(140,350,150,100)
	fill(223,93,194)
	rect(180,330,70,60)
	fill(237,155,207)
	rect(230,320,45,45)
	fill(248,172,240)
	rect(240,330,50,12)
	fill(39,25,150)
	rect(400,360,60,70)
	fill(223,140,220)
	rect(420,350,80,50)
	fill(248,172,250)
	rect(420,330,45,60);

	fill(39,16,80)
	rect(50,230,30,120)
	fill(45,70,50)
	rect(60,200,50,200)
	fill(39,16,90)
	rect(470,100,50,200)
	fill(45,70,50)
	rect(490,120,60,220);

	noloop();



}