Alice – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 11

This week I read about NFT and Copyright, discussing what is NFT, why they are valuable and the issue of its copyright. NFT(Non-fungible Token) means digital and unique token. NFT can give artists a potential revenue stream when they are selling their own art. Everyone can easily access other creators’ NFT, while this raises another question that spammers can also steal it for money. Thus, copyright issues seem to be more critical: NFT auction sites created DMCA processes to prevent the spread of unauthorized NFT, but it’s not effective enough. In this article, the author also mentions that block-chain might be the perfect tool for solving copyright problems, but it still brings new privacy concerns. In a nutshell, NFT itself needs to be scarce if it wants to create artificial scarcity. There is still a long way to go.

https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/

Project-09

I tried to use random quadrangles and words to construct a self portrait. And the words I use are the place I was born, grown up and the place i’m staying.

sketch

var img;
var words = ['Beijing', 'Kunming', 'Pittsburgh','Alice']
var number = 1;

//preload image
function preload() {
    img = loadImage('https://i.imgur.com/QwF6omd.jpeg');
}

function setup() {
    createCanvas(400, 480);
    //resize image to fit canvas
    img.resize(width, height);
    frameRate(400);

    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
}

//draw image
function draw() {
    if(number==1) {
        drawWord();
    } else {
        drawPolygon(); 
    }
  
} 

function drawPolygon() {
    var x = floor(random(img.width));
    var y = floor(random(img.height));

    //picking color
    var pix = img.get(x, y);
    fill(pix, 128);

    //draw the random shape
    beginShape();
    vertex(x,y);
    vertex(x-(random(4,7)), y+(random(10, 25)));
    vertex(x-(random(4,7)), y+(random(25, 40)));
    vertex(x,y+(random(40, 60)));
    vertex(x+(random(4,7)), y+(random(25, 40)));
    vertex(x+(random(4,7)), y+(random(10, 25)));
    endShape();
    
}

function drawWord() {
    var x = floor(random(img.width));
    var y = floor(random(img.height));

    var pix = img.get(x, y);
    fill(pix, 128);
    textSize(random(3,15))

    //randomly pick words to draw
    text(words[int(random(0,4))], x, y)
}

function mousePressed() {
    //changing between two options
    number++;
    if(number > 2) {
      number = 1
    }
    background(255)
}

Looking Outwards-09

One work I found really inspirational this week is Anouk Wipprecht’s fashion design. She focuses on “Fashion-Tech”, which is a combination of fashion design with engineering and computational technology. And one interesting point about her work is that fashion is not only providing a visual and tactile experience to people, her work embedded artificial intelligence and projected as a ‘host’ system on the human body. Her design has body sensors that check the user’s stress levels and comfort levels.

I specifically admire her “Spider Dress” design. This project successfully connects the human body with technology. Some part of the collar extrudes out just like a spider, and the body part design uses plastic as materials, creating a futuristic weave pattern that cannot be achieved by traditional fashion techniques. Besides, there are sensors and moveable arms to create a boundary of personal space. These embedded sensors might play an important role in future technology development, creating an exciting transformation in how people communicate with others and with the environment.

link to her website: http://www.anoukwipprecht.nl/#intro-1

Looking Outwards-08

The artist I choose is Helena Sarin, a visual artist and software engineer. She is not only skilled with computing and software design, but also moonlighted in applied arts like fashion design. Her core art work with GANs (Generative Adversarial Networks), which provides her probability to create and try new model and new data, also giving unpredictability inspirations.

Her artwork has am interesting art philosophy, that seeing the world in a different way. The research GAN in her project firstly record the object without any emotional stuff, than the art GAN get rid of useless details in the recording and guide people to the essence by training data. And algorithm complexity, data ownership and idea all play important roles in her process of creating art.

The aesthetic value of GAN art is also need to be notice. Her work usually contains collaging different things together, fracturing images and recombining elements through algorithms to form new scene structure.

Link to her own website: https://aiartists.org/helena-sarin

Link to her speech: https://vimeo.com/354276365

Project 07

this is my project.

sketch

var nPoints = 400;

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


function draw() {
    background(0);
    
    // draw the curve
    push();
    translate(width/2, height/2);
    drawEpitrochoidCurve();
    pop();

    push();
    translate(width/2, height/2-20)
    drawCardioidCurve();
    pop();
}

//--------------------------------------------------
function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    noFill();
    strokeWeight(1);

    //change color 
    if (mouseX< width/2) {
        stroke(0, 50, 233);
    } else {
        stroke(81, 211, 255);
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //draw Epicycloid
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);
    
}


//--------------------------------------------------
function drawCardioidCurve() {
    //Cardioid
    // https://mathworld.wolfram.com/Cardioid.html
    push();
    translate(x, y);
    rotate(radians(-90))
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 20, 80);
    var b = a/2;
   
    //change color
    if (mouseY > height/2) {
        fill(233, 50, 50, 200);
    } else {
        fill(169, 22, 22, 200);
    }

    //draw cardioid
    strokeWeight(1)
    stroke(244, 82, 255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a*cos(t)*(1-cos(t));
        y = a*sin(t)*(1-cos(t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

Looking Outwards-07

I really admired Patricio González Vivo and Jen Lowe’s map “Guayupia”, which is created for their son, and it’s a great example for discovering about data visualization. They think beyond typical standard and restrictions in creating a map: they want to use this map to tell their son where he comes from and the unlikely fact of his existence. So this is a map exploring about culture and history rather than simple numerical information. They explore South America and Argentina history from different aspects, and there are many different components in this map. The thing I found is interesting is that they also make their map become a symbol of culture: they combine stars with human, creatures and god, and they even incorporates the mass migrations of the Tupi-Guarani people.

Lowe uses basic lines and shading to construct this map. They use lines to show star, land and coastline based on history research, shading is used to show migrations. I like the color of this map and how they use uniformed ways to represent different things.

link: http://themapisnot.com/issue-iv-patricio-gonzalez-vivo-jen-lowe

Project-06

This is my abstract clock:

In the sunflower I draw, I use its stem to represent the hour, that as time goes, the sunflower will gradually be taller; I use the petal of the flower to represent the minute; I use the color change of the leaf and the text to represent the second.

sketch


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



function draw() {

    noStroke();
    background(242, 226, 204);

    //background leaf -- represent second
    if (second()%2 == 0) {
        fill(123, 142, 31);
    } else {
        fill(230, 143, 89)
    }

    push();
    translate(140, 200);
    rotate(radians(30))
    ellipse(-10, 0, 50, 15);
    rotate(radians(-60));
    ellipse(10, 30, 40, 10);
    pop();
    
    //base-flowerpot
    var pX = 150;
    var pY = 250
    var pHeight = 8;
    
    fill(187, 160, 133);
    beginShape();
    vertex(pX-50, pY);
    vertex(pX-60, pY+pHeight);
    vertex(pX-50, pY+2*pHeight);
    vertex(pX+50, pY+2*pHeight);
    vertex(pX+60, pY+pHeight);
    vertex(pX+50, pY)
    endShape();

    fill(170,119, 98)
    beginShape();
    vertex(pX-50, pY+2*pHeight);
    vertex(pX-30, pY+10*pHeight);
    vertex(pX+30, pY+10*pHeight);
    vertex(pX+50, pY+2*pHeight);
    endShape();


    //flower stem -- represents hour
    var sWidth = 10
    var sHeight= 50
    sHeight += hour();
    fill(123, 142, 31)
    beginShape();
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth/2, pY-sHeight);
    curveVertex(pX-sWidth*2, pY-2*sHeight);
    curveVertex(pX-sWidth, pY-2*sHeight);
    curveVertex(pX+sWidth/2, pY-sHeight);
    curveVertex(pX, pY);
    curveVertex(pX, pY);
    endShape();

    //sunflower petal -- represent minute
    push();
    translate(pX-sWidth, pY-2*sHeight);
    noStroke();
    for (var i=0; i<minute(); i++) {
        rotate(radians(6));
        fill(252, 171, 1);
        ellipse(0, 20, 5, 65);
        fill(228, 121, 1);
        ellipse(0, 20, 3, 35);
    }

    //seeds
    fill(41, 5, 2);
    circle(0, 0, 60);
    fill(37, 22, 1);
    circle(0, 0, 30);
    fill(34, 28, 0);
    circle(0, 0, 20);
    pop();
    
    //Text -- represent second
    if (second() %2 == 0) {
        textSize(25);
        fill(254, 203, 1, 220);
        text('Have A Good Day!', 40, 40);
    } 
   
}

Looking Outwards-06

The project I found this week is Aaron Tobey’s “Visualizing Randomness”, which would be an excellent example of using randomness in the computation of art. The two pictures I’m specifically interested in are ‘Graphic random number generator run matrix(1min)’ and ‘Graphic random number generator run matrix process’. When the generator starts working, the random white lines that appear on the black background begin to create a spatial feeling and balance of density. Abstractness shown in the lines creates visual artistry and there are many possibilities for future development in this drawing.

Another interesting point of randomness art is that computers could satisfy the need for surprise in the artwork. If the Visualizing Randomness is created by hand, though a good artist can also achieve great hierarchy and order in the drawing, there would be details that the artist hasn’t considered. With the incorporation of digital tools, the content can be more subconscious and balanced.

here is the link to more information:

https://aarontobey.com/Visualizing-Randomness

Project 05

this is my wallpaper:

sketch

var x
var y
function setup() {
    createCanvas(600, 600);
    background(236, 233, 216);
}
 
function draw() {
    //background
    backgroundLine();

    //blue triangle
    for (var y = 50; y < height-20; y += 100) {
        for (var x = 50; x < width-20; x += 50) {
            BlineTriangle(x, y)
        }
    }  

    //pink triangle
    for (var y = 50; y < height-20; y += 100) {
        for (var x = 50; x < width-20; x += 50) {
            PlineTriangle(x, y)
        }
    } 

    //brown circles
    noStroke();
    for (var b = 50; b < height-20; b += 100) {
        for (var a = 50; a < width-20; a += 50) {
          circle(a, b, 7); 
          fill(167, 105, 54, 170) 
        }
    } 

    
}

function BlineTriangle(x, y) {
    var dist = 4
    for (var i = 0; i<=20; i += 2) {
        stroke(90, 135, 145);
        strokeWeight(0.75)
        dist += 4*sqrt(3)/2;
        line((x-i), (y+dist), (x+i), (y+dist))
    }
}

function PlineTriangle(x, y) {
    var dist = 4
    for (var i = 0; i<=20; i += 2) {
        stroke(232, 163, 147);
        strokeWeight(0.75)
        dist += 4*sqrt(3)/2;
        line((x+i), (y-dist), (x-i), (y-dist))
    }
}

function backgroundLine() {
    noStroke();
    fill(240, 70);
    for(var i = 0; i <= 750; i += 50) {
        rect(0, i, 750, 10);
    }
}

Looking Outwards-05

The project I choose this time is a video on YouTube uploaded by verklagekasper, and it’s part of his Jelly Trip Experience. This video artwork is created by 3D computer art, showing various shape, color, and sound in perpetual jelly motion. While this video is uploaded about 10 years ago, the content is still amazing when I watch it. The colors are futuristic and change with a fluid feeling, which makes people see a glimpse of the color of the universe. And this variety of color changing makes the audience completely attracted by the video’s visual impact. Besides the color, the render makes the surface has transparency and refraction.

Here is a link to the video: https://www.youtube.com/watch?v=btVGCqpIoyk