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

LO11:Societal Impacts of Digital Art

Oscar — Sat, 19 Nov 2022 23:19:49 +0000

In this week’s looking outward, I read the article about NFT and copyright.

NFTs and Copyright

In this reading, the author mainly talks about the newly appeared NFT(Non Fungible Token), as well as its unique features. NFT, as a special token, gives a person more connection to the artwork he buys, and an “ownership” of the artwork. Yet the ownership is tricky because it doesn’t mean that the buyer has full control of the artwork, as the copyright and the right to print on other places without creator’s permission. In the condition that NFT is so expensive, this copyright problem is something that people need to think about.

Also, the definition of NFT determines that there are some sort of copyright problems coming up. As the original artist that create the NFT is allowed to create derivative works from the NFT already sold, there might be NFTs that are similar, or maybe the buyer will not be happy. Yet the original artist has the right to do so, therefore, the buyer could not sue the artist, which makes the situation hard to explain.

LO9:A Focus on Women and Non-binary Practitioners in Computational Art

Oscar — Sat, 12 Nov 2022 19:03:25 +0000

In this week’s Looking Outward, I picked Eva Schindling’s work called Liquid Sound Collision.

In this work project, Eva shows a simulation of sound wave’s collision with the property of water waves. She initials the simulation with a cylinder, and the on the two ends of the cylinder, she started to implement sound on the surface. These sound waves expands like actual waves, and as they collide in the middle, the whole shape of the cyliner start to twist and change. There are a lot of uncertainty in the shape of the cylinder, as the sound waves have various shapes. Eva refers these shapes as a tension resulted from confrontations of body and mind, chaos and order, and simplicity and complexity. She uses this simulation into sculptures and other art works.

I think this is a very useful and meaningful exploration in visualizing abstract ideas. We usually talk about conflict, confrontation, and tension between relationships, but it’s very hard to actually see these ideas. But this simulation makes people feel these confrontations.

Eva is a female artist that explores technology, computation, and design. She visualizes a lot of abstract ideas such as higher dimensions into something that we can feel and understand.

http://www.evsc.net/home/liquid-sound-collision

Project 06: Abstract Clock

Oscar — Sun, 09 Oct 2022 00:13:15 +0000

sketch

var x=[]
var y=[]
var w=[] //height of rects at background
var a=[-50,0,150,250,300]
var b=[]
var l=[100,200,100,250,100]
var dx=[]
var dy=[]
var r
var spd
var theta
var sunposX
var sunposY

function setup(){
    createCanvas(480,300);
    background(220);
    for(var i=0;i<20;i++){          //setting up array for background gradiant
        y[i]=7.5*i;
        w[i]=height-15*i;
    }
    for(var n=0;n<5;n++){           //setting up the changes in x,y for reflection
        dx[n]=l[n]/20;          //the change in x
        dy[n]=l[n]/3*20;            //the change in y
        b[n]=200; 
    }
    r=height/2-20;
    //spd=1;
    //theta=90;



}

function draw(){
    BackColor();                                //draw backgrounds

    let Sec = map(second(), 0, 60, 0, radians(360)) - radians(90);
    let Min = map(minute() + norm(second(), 0, 60), 0, 60, 0, radians(360)) - radians(90);
    let Hour= map(hour(),0,24,0,radians(360))-radians(90);       // inspired by code here: https://p5js.org/examples/input-clock.html

    push();
    translate(width/2,height/2);
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(251,114,39);       //glowing effect
    sunposX=r*cos(Hour);
    sunposY=r*sin(Hour);                           //polar coordinates
    fill(244,116,95);
    Sun(sunposX,sunposY); 
                          //draw sun
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(255); 
    fill(238,243,196);
    Moon(sunposX,sunposY);                      //draw moon
    pop();



    Mountain();                                 //draw mountains
    WaterColor();

    ReflectionMount();
    

}

function Mountain(){            //draw mountain
    noStroke();
    fill(40);                   //color dark grey 
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]-l[n]/3,a[n]+l[n],b[n]);
    }                   
}

function ReflectionMount(){
    noStroke();
    fill(140);                   //color dark grey
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]+l[n]/6,a[n]+l[n],b[n]);
    }
    
}



function Sun(x,y){
    ellipse(-x,-y,40,40);
}

function Moon(x,y){
    ellipse(x,y,40,40);
}


function BackColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,y[i],width,w[i]);
        }
    }

}

function WaterColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,200,width,w[i]/2);
        }
    }

}

The abstract I created has four different scenes: sunrise, daytime, sunset, and night time; I want to create a reflection of the mountain and the sky; and the sun and moon goes with the current time, rising from left and falls from right.

LO6: Random Computational Art

Oscar — Sun, 09 Oct 2022 00:09:37 +0000

the computational art using randomness that i’m interested in is Wired0513 by deskriptiv.
In this work, the artist uses random lines and curves to form unique patterns that look like weaving wires. Inside those random wires, we can recognize the “0513” texts formed by the wires.

This is very interesting because the artist uses randomness in exploring the uncertainty of how a line will go and where it’s going, but also controlling them by creating a text from it. I think the author first define the text that occupies a certain part of the space in the whole canvas, and then when the line goes by, it just goes around the text rather than across it. This is similar to some kind of ant marching movement, so I think part of the inspiration comes from the nature as well.

This artwork using randomness is also inspiring for architecture work. We usually deal with different landscapes, so this randomness can help us generate different complicated contours and lanscapes, so that we can find some parts where we can build houses.

link here

Project 5: Wallpaper

Oscar — Sat, 01 Oct 2022 16:35:46 +0000

sketch

In this project I tried to create a set of repetitive diamond geometry and also a glowing effect that makes it look like it’s in 3D.

sketch


var r=50

function setup() {
    createCanvas(800,600);
    background(220);
}

function draw() {
    drawingContext.shadowBlur=20;
    drawingContext.shadowColor=color(20);   //glowing effect and black shadow
    noStroke();

    //first set of geometries
    for(var col=0;col<4;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //second set of geometries
    for(var col=4;col<8;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }

    //third set of geometries
    for(var col=8;col<12;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //fourth set of geometries
    for(var col=12;col<16;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }    
    

}


//first type of diamond
function diamondOne(){
    quad(0,0,r,r,r,2*r,0,r);
}


//second set of diamond
function diamondTwo(){
    quad(0,r,r,0,r,r,0,2*r);

}


//coloring the diamonds
function diamondColor(row){
    if(row%8==0){
        fill(22,76,122);
    }else if(row%8==1){
        fill(254,252,204);
    }else if(row%8==2){
        fill(255,190,14);
    }else if(row%8==3){
        fill(226,92,3);
    }else if(row%8==4){
        fill(119,147,172);
    }else if(row%8==5){
        fill(1,24,66);
    }else if(row%8==6){
        fill(224,28,1);
    }else if(row%8==7){
        fill(255,141,6);
    }
}

LO5: 3D Computer Graphics

Oscar — Sat, 01 Oct 2022 16:34:10 +0000

In this week’s looking outward practice, I’m very interested in a 3D graphic art, Forest Diorama, designed by Roman Klčo. This piece of art portraits a forest scene with possibly 3D rendering methods. In general, the art creates a axonometric view of a certain part of land, putting trees, rocks and mountain slopes onto it, also simplifying it in more cartoonish shapes. These kind of art could be done with renderers like Blender, which is very interesting in making small scenes that tell stories.

https://dribbble.com/shots/5455348-Forest-Diorama

Project 04: String Art

Oscar — Sat, 24 Sep 2022 17:37:20 +0000

sketch

in this project, I tried to use different colors and combinations of strings to compose a gradually changing geometry that goes from edge to the center.

    var dx1;
    var dy1;
    var dx2;
    var dy2;
    var dx3;
    var dy3;
    var dx4;
    var dy4;
    var numLines = 50;
    var c;


function setup() {
    createCanvas(400, 300);
    background(0);
    
    //base set of lines #1
    /*line(width/4,0,0,height/3);
    line(0,height/3,width/2,height/3);*/

    /*line(1,300,2,1);
    line(2,1,200,150);
    line(200,150,398,299);
    line(398,299,399,1);*/

    dx1=(2-1)/numLines;
    dy1=(1-300)/numLines;
    dx2=(200-2)/numLines;
    dy2=(150-1)/numLines;
    dx3=(398-200)/numLines;
    dy3=(299-150)/numLines;
    dx4=(399-398)/numLines;
    dy4=(1-299)/numLines;

    //define the change of x, y variables
    /*dx1 = (0-width/4)/numLines;
    dy1 = (height/3-0)/numLines;
    dx2 = (width/2-0)/numLines;
    dy2 = (height/3-height/3)/numLines;*/
}
    
    //draw first set of strings
function draw() {

        var x1 = 1;
        var y1 = 300;
        var x2 = 2;
        var y2 = 1;
        var x3 = 200;
        var y3 = 150;
        var x4 = 398;
        var y4 = 299;

        stroke(0,255,0);
        //in a for loop, when a increases, x1+= a*dx1)
        //for(var e=0;e<=5;e+=1){
            //dx2=e*dx2;
            /*x1 += e*dx1;
            y1 += e*dy1;
            x2 += e*dx2;
            y2 += e*dy2;
            x3 += e*dx3;
            y3 += e*dy3;
            x4 += e*dx4;
            y4 += e*dy4;*/
        
            for (var i = 0; i <= numLines; i += 1) {
                line(x1, y1, x2, y2);
                line(x3,y3,x4,y4);
                x1 += dx1;
                y1 += dy1;
                x2 += dx2;
                y2 += dy2;
                x3 += dx3;
                y3 += dy3;
                x4 += dx4;
                y4 += dy4;
}
                
                string02();
                string03();
                string04();
                noLoop();
}
        //second set of strings
    function string02(){


        var x5 = 2;
        var y5 = 1;
        var x6 = 399;
        var y6 = 50;
        var x7 = 1;
        var y7 = 250;
        var x8 = 399;
        var y8 = 300;

        stroke(255);
       
            for (var e =0; e <= 20; e += 1) {
                line(x5, y5, x6, y6);
                line(x7,y7,x8,y8);
                x5 += dx1;
                y5 -= dy1;
                x6 += dx2;
                y6 -= dy2;
                x7 -= dx3;
                y7 += dy3;
                x8 -= dx4;
                y8 += dy4;
    }
    }

    //third set of strings
    function string03(){

        var x9 = 2;
        var y9 = 1;
        var x10 = 399;
        var y10 = 100;
        var x11 = 1;
        var y11 = 200;
        var x12 = 399;
        var y12 = 300;

        stroke(195,255,195);
       
            for (var l =0; l <= 25; l += 1) {
                line(x9, y9, x10, y10);
                line(x11,y11,x12,y12);
                x9 += dx1;
                y9 -= dy1;
                x10 += dx2;
                y10 -= dy2;
                x11 -= dx3;
                y11 += dy3;
                x12 -= dx4;
                y12 += dy4;
    }  
    }

    //fourth set of strings
    function string04(){

        var a = 2;
        var b = 1;
        var c = 399;
        var d = 200;
        var e = 1;
        var f = 100;
        var g = 399;
        var h = 300;

        stroke(90,255,90);
       
            for (var l =0; l <= 28; l += 1) {
                line(a, b, c, d);
                line(e,f,g,h);
                a += dx1;
                b -= dy1;
                c += dx2;
                d -= dy2;
                e -= dx3;
                f += dy3;
                g -= dx4;
                h += dy4;
    }  
    }
    //}
       //noLoop();



    //devide the lines
    //connect different parts on each line
    //define a function for different lines and variable

LO4: Sound Art

Oscar — Sat, 24 Sep 2022 17:34:34 +0000

The artwork that i’m interested is Senseless Drawing Bot by So Kanno & Takahiro Yamaguchi. The robot is a 4-wheeled graffiti machine, with a pendulum arm, arduino and spray cans to create random strokes as it moves up and down the gallery space. The movements of the pendulum arm creates drawings that are free and random, so that audiences can’t really expect what comes next. This randomness makes the artwork very interesting.
Moreover, this combination of technology and art creates a lot of possibilities in the future, combining AI with art and a lot of other creative aspects.
Thinking of the algorithm, I think the settings makes use of the physical characteristics of free arm pendulum, which goes through random movements while it starts rotating. So the program sets when the robot starts drawing, when it starts rotating the arm and what the storkeweight is.

link here

Project 03: Dynamic Drawing

Oscar — Sat, 17 Sep 2022 19:31:04 +0000

sketch

var j=25
var l=15
var x=0
var y=0
var state=0
function setup() {
    createCanvas(600,450);
    background(0);
   
}

function draw() {
    //draw square according to the distance to the mosue
    /*if(mouseXheight/2){
                fill(r4,r4+100,r4+200);
            }else if(mouseX>width/2 & mouseYwidth/2 & mouseY>height/2){
                fill(r3,r3+100,r3+200);
            }*/

            //color test 02
            /*if(mouseXheight/2){
                fill(r4,255-r,255-r+200);
            }else if(mouseX>width/2 & mouseYwidth/2 & mouseY>height/2){
                fill(r3,255-r,255-r+200);
            }*/

            //color test 03
            /*if(mouseXwidth/2 & mouseY>height/2){
                fill(255-(r+10),255-(150-r),r-200);
            }else if(mouseX>width/2 & mouseYheight/2){
                fill(255-r,r+100,r+200);
            }*/
            
            var l=(dist(mouseX,mouseY,x,y)/20+7)
            
                if(state==0){
                    rect(x,y,l,l);
                }else if(state==1){
                    circle(x+l/2,y+l/2,l);
                }else if (state==2){
                    triangle(x,y,x+l,y,x+l/2,y+l);
                    triangle(x,y+l,x+l,y+l,x+l/2,y);
                }
            
            }
            fill(255);
            text('press mouse please :)',10,15);
    }
    
    }
    function mousePressed(){
        state+=1;
        if(state>=3){
            state=0;
        }
}

LO3:Computational Fabrication

Oscar — Sat, 17 Sep 2022 19:29:11 +0000

The project that I find inspiring is Jeremy Ficca’s: Fabricating Customization Seminar;

This is a very interesting project that associates robotic research and AI with architecture design. Through coding and generating patterns, we can cut out patterns on paper or other materials that helps us build special shapes that we want. This is helpful in generating facades and textures in Architecture design.
I think the algorithm behind the project is to first generating random patterns and shapes through different functions and programs, controlling the size of the patterns and some parametric calculation process. Then with the help of robots and laser cutters, these programs could be successfully transformed into pieces of shapes ready for use. Also the programs calculate which piece fits in which position, so that people can put these pieces together and form a complete design.

link here