Author: Jiayi

LookingOutwards-11 Societal Impacts of Digital Art

The article “Beeple’s digital ‘artwork’ sold for more than any painting by Titian or Raphael. But as art, it’s a great big zero.” by Sophie Davies address the society issue of digital divide, referring to the different between these who can reach the digital world of internet and these who cannot. Sophie argued that People who have no computer skills or a device to access the internet are more likely to receive social exclusion, as more and more people are online. The covid facilitate this process by transferring jobs and works online, and people who could access internet seem to be left behind by the times.

Sophie also discusses how women from certain countries and children from low social & economic status are more likely to not have a device for internet, which leads to an inequality problem. However, almost no solution is mentioned in the article. To me, the only solution in the article that “asking policy makers to help everyone get online for free” seems highly unlikely to happen in reality.

MLA Citation- Spanish art show spotlights ‘hidden’ digital divide in pandemic | Reuters :

Davies, Sophie. “Spanish Art Show Spotlights ‘Hidden’ Digital Divide in Pandemic.” Reuters, Thomson Reuters, 18 Dec. 2020, https://www.reuters.com/article/us-health-coronavirus-tech/spanish-art-show-spotlights-hidden-digital-divide-in-pandemic-idUSKBN28S0IC.

Project 11 – Airplane and parachute

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
//arrays for display
var birds=[];
var clouds=[];
var flyObject =[];

//array for image storage
var birdsImg=[];
var cloudsImg=[];
var flyObjectImg =[];
//array for links
var cloudLinks = [
    "https://i.imgur.com/suIXMup.png",
    "https://i.imgur.com/7ZHCI63.png",
    "https://i.imgur.com/EFb0w3u.png",
    "https://i.imgur.com/PxLKy41.png"];

var birdLinks = [
    "https://i.imgur.com/Gr1VTU5.png",
    "https://i.imgur.com/EmRp42l.png",
    "https://i.imgur.com/vLWSU4h.png",
    "https://i.imgur.com/Y9BecjA.png"];

var flyObjectLink = [
    "https://i.imgur.com/IXz53Lj.png",
    'https://i.imgur.com/UsKzDwg.png'];

//load the images
function preload(){
    airplane = loadImage("https://i.imgur.com/bEPeF8a.png");
    for (var i = 0; i < cloudLinks.length; i++){
        cloudsImg[i] = loadImage(cloudLinks[i]);
    }
    for (var i = 0; i < birdLinks.length; i++){
        birdsImg[i] = loadImage(birdLinks[i]);
    }
    for (var i = 0; i < flyObjectLink.length; i++){
        flyObjectImg[i] = loadImage(flyObjectLink[i]);
    }
}

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    //initial clouds 
    for (var i = 0; i < 3; i++){
        var rc = floor(random(cloudsImg.length));
        clouds[i] = makeCloud(random(width),random(100,300),random(height),cloudsImg[rc]);
    }
    frameRate(10);
}

function draw() {
    background(135,206,235);
    sun()
    updateAndDisplayClouds();
    addNewobjectsWithSomeRandomProbability();
    removeObjectsThatHaveSlippedOutOfView();
    image(airplane,200,constrain(250+random(-5,5),240,260),200,200);
}

function sun(){
    push();
    fill('orange');
    circle(60,60,50);
    fill('red');
    circle(60,60,40);

}
function updateAndDisplayClouds(){
    // Update the clouds's positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
    // Update the birds's positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
    // Update the flyThings's positions, and display them.
    for (var i = 0; i < flyObject.length; i++){
        flyObject[i].move();
        flyObject[i].display();
    }
}

//remove out of sight things
function removeObjectsThatHaveSlippedOutOfView(){
    //remove out of sight clouds
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].size/2 > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds

    //remove out of sight birds
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x + birds[i].size/2 > 0){
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds

    //remove out of sight fly things
    var FlyesToKeep = [];
    for (var i = 0; i < flyObject.length; i++){
        if (flyObject[i].x + flyObject[i].size/2 > 0) {
             FlyesToKeep.push(flyObject[i]);
        }
    }
    flyObject = FlyesToKeep; // remember the surviving fly things
}


function addNewobjectsWithSomeRandomProbability() {
    // With a low probability, add a new clouds to the end.
    var newCloudLikelihood = 0.02; 
    if (random(0,1) < newCloudLikelihood) {
        var rc = floor(random(cloudsImg.length));
        clouds.push(makeCloud(width+75,random(100,150),random(height),cloudsImg[rc]));
    }
    // With a low probability, add a new birds to the end.
    var newbirdLikelihood = 0.03; 
    if (random(0,1) < newbirdLikelihood) {
        var rc = floor(random(birdsImg.length));
        clouds.push(makeBirds(width+30,random(30,60),random(height),floor(random(birdsImg.length))));
    }
    // With a low probability, add a new flying things to the end.
    var newObejctLikelihood = 0.01; 
    if (random(0,1) < newObejctLikelihood) {
        var rc = floor(random(flyObjectImg.length));
        clouds.push(makeFly(width+50,random(50,100),random(0,240),flyObjectImg[rc]));
    }
}

//make clouds as objects
function makeCloud(birthLocationX,cs,ch,cloudCartoon) {
    var cldg = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -1.0,
                cartoon:cloudCartoon,
                move: cloudMove,
                display: cloudDisplay}
    return cldg;
}

function cloudMove() {//move clouds
    this.x += this.speed;
}

function cloudDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}

//make birds as objects
function makeBirds(birthLocationX,cs,ch,birdCartoon) {
    var mb = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -3.0,
                cartoonNumber:birdCartoon,
                move: birdsMove,
                display: birdsDisplay}
    return mb;
}

function birdsMove() {
    if(this.cartoonNumber == 0 || this.cartoonNumber == 1){
        this.x += this.speed/2;    //birds facing to the left are flying slower
        this.y += random(-3,3);    //randomly fly
    }else{
        this.x += this.speed;
        this.y += random(-5,5);    //randomly fly
    }

}

function birdsDisplay(){
    image(birdsImg[this.cartoonNumber], this.x, this.y,this.size, this.size); 
}

//make other flying things as objects
function makeFly(birthLocationX,cs,ch,flyCartoon) {
    var mf = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -2.0,
                cartoon:flyCartoon,
                move: flyMove,
                display: flyDisplay}
    return mf;
}

function flyMove() {//move flying objects
    this.x += this.speed;
    //gravity for things without wings
    this.y -=this.speed/4;
}

function flyDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}

A Day of Steve

Story: One beautiful morning Steve heard there’s birds singing outside, so he went out to check for the birds that hides in the tree. He didn’t notice there is a creeper on top of his house, and the creeper follows Steve to the tree. The Steve realized creeper is behind him, but it’s too late for him to stop creeper from exploding.

Reflection: Though I was asked to use 2-3 seconds sounds for this project, I mostly able to find 4-5 second sounds that I felt fits for my story. Somehow the Audacity also does not work for the sounds I selected, so I have to use these 4-5 seconds sounds files directly. I also don’t know how to find the images that directly blends into the canvas.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

/*Story:
One beautiful morning Steve heard there's birds singing outside,
so he went out to check for the birds that hides in the tree.
He didn't notice there is a creeper on top of his house, and 
the creeper follows Steve to the tree. The Steve realized creeper 
is behind him, but it's too late for him to stop creeper from exploding.  

Reflection:
Though I was asked to use 2-3 seconds sounds for this project, I 
mostly able to find 4-5 second sounds that I felt fits for my story. 
Somehow the Audacity also does not works for the sounds I selected, 
so I have to use these 4-5 seconds sounds files directly.I also don't 
know how to find the images that directly blends into the canvas. 
*/
//Stevemovements
var steve=[]; //array for stevemovement
var idle;
var walk;
var run;
var swordright;
var damaged;
//creeper
var creeperMovement =[]; //array for creeper movement
var creeper;
var glowing;
var exploasion;
//house and bird for tree
var house;
var bird;
//sounds
var walkingsound;
var exploadsound;
var hurt;
var dooropen;
var morningbirds;

// track the time
var frame=0;
var steveX=200;
var CreeperX=300;
var CreeperY=0;
function preload() {
    //images
    house=loadImage("https://i.imgur.com/hAeVVrM.jpeg");
    exploasion=loadImage('https://i.imgur.com/u0RA0C9.png');
    glowing=loadImage('https://i.imgur.com/wpqSTpR.png');
    creeper=loadImage('https://i.imgur.com/oXqwDBa.png');
    damaged=loadImage('https://i.imgur.com/27nSdZi.png');
    swordright=loadImage('https://i.imgur.com/UgtoVei.png');
    run=loadImage('https://i.imgur.com/3JwarD4.png');
    walk=loadImage('https://i.imgur.com/6adTjcs.png');
    idle=loadImage('https://i.imgur.com/bIFUPG3.png');
    bird=loadImage('https://i.imgur.com/Ttx4W2C.png');
    //sounds
    walkingsound = loadSound('http://localhost:8000/walkingsound.wav');
    exploadsound = loadSound('http://localhost:8000/exploadsound.wav');
    hurt = loadSound('http://localhost:8000/hurt.wav');
    dooropen = loadSound('http://localhost:8000/dooropen.wav');
    morningbirds = loadSound('http://localhost:8000/morningbirds.wav');
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(500, 400);
    //======== call the following to use sound =========
    useSound();
    frameRate(1);
    steve[0]=idle;
    steve[1]=walk;
    steve[2]=run;
    steve[3]=swordright;
    steve[4]=damaged;
    //attribute sounds
    creeperMovement[0]=creeper;
    creeperMovement[1]=glowing;
    creeperMovement[2]=exploasion;
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    morningbirds.setVolume(0.3);
    dooropen.setVolume(0.3);
    hurt.setVolume(0.3);
    exploadsound.setVolume(0.3);
    walkingsound.setVolume(0.3)
}


function draw() {
    background('Cyan');
    grassland();
    tree(0,50);
    frame += 1; //track of frames  
    //print("Seconds = " + frame);
    //end the canvas
    if(frame == 28){
        noLoop();
    }
    //house
    image(house, 250, 100, 200, 200);

    steveMoving();

    creeperMoving();

    birdsmoving();

    //start the audio
    if(frame == 4){
        morningbirds.play();//birds chats
    }if(frame==9){
        dooropen.play();//door opens 
    }if(frame==11){
        walkingsound.play();//steve walks
    }if(frame==20){
        exploadsound.play();//creeper exploads
    }if(frame==24){
        hurt.play();//steve cries
    }

}
//build background grassland
function grassland(){
    push();
    fill('lime');
    noStroke();
    rect(0,height/2,width,height/2);
    pop();
}
//build a tree
function tree(x,y){
    push();
    fill('lime');
    noStroke();
    rect(x,y,100,100);
    fill('brown')
    rect(x+25,y+50,50,125);
    pop();
}

function creeperMoving(){//movement of creeper depend on framecount
    var a=0;
    if (frame >= 0 & frame <=11){
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 11 & frame <13){
        CreeperX-=100;
        CreeperY+=25;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 13 & frame <=15){
        CreeperX-=25;
        CreeperY+=50;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 16 & frame <=20){
        a=1;
        CreeperX-=3;
        CreeperY+=3;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 20 & frame <=21){
        a=1;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 22 & frame <26){
        a=2;
        b=50;
        image(creeperMovement[a],CreeperX-b,CreeperY-b,75+b,125+b);//explosion
    }
}

function steveMoving(){
    var a=0;
    if(frame==9 ){
        image(steve[a],steveX,200,75,125);//movement of steve depend on framecount
    }else if(frame>9 & frame<=11){
        steveX -= 10;
        a=1;
        image(steve[a],steveX,200,75,125);
    }else if(frame>11 & frame<16){
        a = 2;
        steveX -=25;
        if(frame==13){
            steveX -=25;
        }else if(frame==15){
            steveX -=50;
        }
        image(steve[a],steveX,200,75,125);
    }else if((frame>=16 & frame<20)){
        a = 0;
        image(steve[a],steveX,200,75,125);
    }else if(frame>=20 & frame <=22){
        a = 3;
        image(steve[a],steveX,200,75,125);
    }else if(frame >=22 & frame<= 25){ //steve hurt by the explosion
        a=4;
        image(steve[a],steveX,200,75,125);
    }else if(frame == 26){
        a=4;
        image(steve[a],steveX,200+50,75,125);
    }else if(frame == 27){
        a=4;
        image(steve[a],steveX,200+100,75,125);
    }
}

function birdsmoving(){
    if(frame>=4 & frame <=11){//birds scared off by steve
        image(bird,0,50,50,50);
    }
}

LookingOutwards-09

The project Lauren developed is p5.js. I admire her development of p5.js, because we probably won’t be able to have this intro-level computing course without p5.js, which “prioritizes access and diversity in learning to code”. Beyond this class, the p5.js also provide a platform to help over 1.5 million other users on their way to learn codes.

Lauren is not only the creator of p5.js, but also an Associate Professor at UCLA Design Media Arts. Lauren got her MFA from UCLA and her BS Computer Science and BS Art and Design from MIT. Her main career is an artist, who examines social relationships on “surveillance, automation, and algorithmic living.”

More specifically, her work has focused on the influence of the internet and media on privacy. Many of her works have receive awards from different organizations. For example, her work “SOMEONE earn SOMEONE was awarded the Ars Electronica Golden Nica and the Japan Media Arts Social Impact Award. Her work LAUREN was awarded the IDFA DocLab Award for Immersive Non-Fiction.”

link to p5.js: home | p5.js (p5js.org)

Link to Biography Page:Info – Lauren Lee McCarthy (lauren-mccarthy.com)

Project 9 – Computational Portrait- Fish and Man

It was pretty challenging to come up with original ideas on what
can be creative for me , while we just using the color of pixels to
create a blurry version of original picture. After all, I decided
fishes are fun to draw, and if I can make them moving, I can generate
the picture very quickly as shown in the canvas.

It’s very laggy to view all the posts, so here is a picture:

Final Work
sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var head;
var fish = [] //array for fish
function preload(){//load the image
    head = loadImage('https://i.imgur.com/VAEIjHv.jpeg');
}

function setup() {
    createCanvas(480, 480); 
    imageMode(CENTER); //exist because I don't know if it's important
    head.loadPixels(); //load pixels
    background(220);
    head.resize(480,480); //resize head size to canvas size
}

function draw(){
    var x =floor(random(0,480));//a random x value
    var y =floor(random(0,480));//a random y value

    fish.push(makeFish(x,y)); //create more fishes

    for (var i = 0; i < fish.length; i++) { //draw all the fishes 
        fish[i].stepFunction();
        fish[i].drawFunction();
    }
    if(fish.length==1000){
        noLoop();
    }
}

function makeFish(fx,fy){
    var f = {x: fx, y: fy,
             stepFunction: stepFishes,
             drawFunction: drawFishes
         }
    return f;
}

//draw fishes according to pixel color
function drawFishes(){ 
    var o=this.x
    var p=this.y    
    push();
    noStroke();
    c= head.get(o,p)
    fill(c);
    ellipse(o,p,20,10);//body
    line(o-2,p-5,o-2,p+5);
    triangle(o+10,p,o+13,p+2,o+13,p-2)//tail
    eyeball(o,p);
    pop();

}


//fishes eye
 function eyeball(x,y){
    stroke('white')
    circle(x-5,y,1)
    ellipse(x-5,y,3,3)
 }

function stepFishes(){ //fishes moving
    this.x = this.x + random(-3,3)
    this.y = this.y + random(-3,3)
}

Looking Outwards 08: Lucianne Walkowicz

As her biography page stated, Lucianne Walkowicz is an astronomer at the Adler Planetarium in Chicago, and the 2017-2018 Baruch S. Blumberg NASA/LOC Chair in Astrobiology. She got her PhD in Astronomy from the University of Washington. Lucianne is a TED Senior Fellow and a practicing artist who works for a variety of media , ranging from performance and sound.

The work I admire about Lucianne is her creation of JustSpace Alliance, a non-profit organization advocating for a more just and inclusive space exploration, because her work attempts to solve threshold problems, relating more ordinary people to space technology. One example of this is when she gives people in the New York Subway the opportunity to ask her questions about astronomy.

One strategy Lucianne used is to tell some jokes about herself to reduce stress from herself and the audience, which, I think, allows her to talk more fluently and casually. She also uses many images to visualize her presentation as she talks about each topic. One thing I learned is that I can add an icebreaker in the beginning to relax myself and the audience when presenting my own work.

Link: Not Not Rocket Science

LookingOutwards-07-UCSF Health Atlas

The UCSF Health Atlas is an online software that visualizes Covid 19 pandemic cases in all the counties in California. I admire its purpose, which is to explore the influence of “socioeconomic and environmental factors” during the pandemics, which means the project is based on census tract at a county level, and it allows us to see the detrimental influence of pandemics with our eyes.

For the Algorithm, I believe that it imports census Datas and data of covid cases into the website. Then the web divides the cases into different data sets on a county level and uses different coloration to represent the severity of the pandemic. The blue the county is on the map, the more covid cases it has, and yellow represents the amount of people who died from the pandemic in that county.

The artistic sensibilities manifest in the final form of a map of blue California that shows the number of the covid cases based on its lightness, because the darker colors mean more cases. I hope it becomes a map of the whole planet in the future, so people all over the world can know when to be cautious about pandemics.

Link: UCSF Health Atlas Author: Collaboration of UCSF School of Medicine Dean’s Office of Population Health and Health Equity led by Debby Oh and Stamen Design Year of Creation: 2020(To my best Knowledge)

Project-06-Abstract-Clock

For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night.

-The position of the car represents every second within a minute, moving from left to right (0-59).

-The position of the Tree represents every minute within an hour, moving from left to right (0-59).

-The Sun and light clouds demonstrate it’s the first 12 hours, while the Moon and the dark clouds demonstrate the 13th-24th hours.

-The amount of day bars (light blue) demonstrates how many hours it’s into the first 12 hours, while the amount of night bars (dark gray) demonstrates how many hours it’s into the 13th to 24th hours. All bars appear from left to right.

-The day bars are background of the sky in the nights, while the night bars are background of the sky in the day.

-The clouds are just dynamic decorations.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var h  //hours
var s  //seconds
var m  //minutes
var dayColor
var nightColor
var boxColor=[]
var cloudAndStarX=[]
var cloudAndStarY=[]
var cloudAndStarL=[]
var cloudAndStarH=[]
function setup() {
    createCanvas(480, 480);
    h = hour();
    s = second();
    m = minute();
    dayColor= color(135,206,250);
    nightColor= color(112,128,144);
    for(var i=0; i<12;i++){
        if(h < 12){
            boxColor[i]=nightColor;   //color of the day
        }else if(h>11){
        boxColor[i]=dayColor; //color of the night
        }
    }

    for(var i=0; i<17;i++){
        cloudAndStarX[i]=random(0,width-240);
        cloudAndStarY[i]=random(0,140);
        cloudAndStarL[i]=random(30,120)
        cloudAndStarH[i]=random(30,100)
    }
}

function draw() {
    //The Sky that represent hours
    //change the number of box to represent hours in night tmie
    h = hour();
    s = second();
    m = minute();
    background('gray');
    push();
    if (h < 12){ 
        for (var i=0; i<h;i++){
            boxColor[i]=dayColor
        }  
    //change the number of box to represent hours in night tmie
    }else if(h >= 12){
        for (var i=0; i<(h-12);i++){
            boxColor[i]=nightColor;
        }

    }

    for (var i=0; i<12;i++){  //Background sky colors changing base on day or night
        fill(boxColor[i])
        rect(i*width/12,0,width/12,height/2);
    }
    pop();

    //grass
    push();
    fill(0,255,127);
    rect(0,240,width,70)
    rect(0,height-65,width,65)
    pop();
    //road
    for (var i=0; i<5;i++){ 
        rect(i*100,350,50,25);
    }

    //The Car represent seconds
    car(s/60*width,360);


    //The Tree Represent minutes
    tree(m/60*width,200);


    //clouds and sun
    push();
    if(h<12){
        fill(255,69,0)   // the colors and shape for sun
        circle(60,60,50)
        for (var i=0; i<5;i++){
            fill(255,255,255,100) //clouds in day
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    //Clouds and a full moon 
    }else if(h>11){
        fill(246, 241, 213)   // the colors and shape for moon
        circle(width-50,60,50)
        for (var i=0; i<5;i++){
            fill(0,0,0,150) // clouds in night
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    }
    pop();

}


function car(cx,cy){
    //car body
    push();
    fill('red')
    rect(cx,cy,100,40);//main body
    rect(cx+25,cy-30,40,30);//middle
    triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);//right
    triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);//left

    //Weels
    fill('gray') //outer weels
    circle(cx+25,cy+40,25);
    circle(cx+75,cy+40,25);
    fill('ivory')//inner weels
    circle(cx+25,cy+40,17);
    circle(cx+75,cy+40,17);

    //windows
    fill('azure');
    rect(cx+28,cy-27,34,24);
    triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);
    triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);

    //lights
    fill('gold');//back lights and sub lights
    rect(cx+80,cy+20,20,5);
    rect(cx,cy+3,10,15);
    fill('yellow');//front light
    rect(cx+90,cy+5,10,12);
    pop();
}


function tree(tx,ty){
    push();
    push();
    fill('green');//leaves
    rect(tx-30,ty,90,50);
    rect(tx-15,ty-30,60,30);
    pop();
    fill(139,69,19);//tree log
    rect(tx,ty+20,30,80);
    pop();
}

Looking Outwards 06 :  Randomness

The work of MARK J. STOCK, the “The Yin and Yang Are Fractal #4” have inspired me with its random, dynamic motion that represents the concept of Yin and Yang in Tai Chi, which is a part of Chinese culture. It’s inspiring to see how the concept of Yin and Yang changing and interacting with each other in various layers and various sizes, and it gave me a sense of special beauty from the dynamic ink painting. The algorithms that generate its randomness also interest me with its simple code that forms the complicated structure and shapes of the art itself. According to Mark, the “color is passed from pixel to pixel in a regular grid using a very specific set of instructions.” The code generates randomness among pixels within a limited range, while it tries to adhere to a general shape, like a circle, at the beginning. Then the pixels randomly interact with nearby pixels in a certain range to create the art we saw. The creator’s artistic sensibilities manifest in the final form of random Yin and Yang interactions in the form of generated ink art, where Yin and Yang seem to be randomly blended together.

Videos: “The Yin and Yang Are Fractal #4” by MARK J. STOCK, produced in 2015

“The Yin and Yang Are Fractal #4” by MARK J. STOCK, produced in 2015
Link: Mark J. Stock (markjstock.com)

Link: Mark J. Stock (markjstock.com)

Project-05-Wallpaper

I tried to draw flowers that’s connected

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(600, 600);
    rectMode(CENTER);
}

function draw() {
    background('gold');

    for (var i=1;i<=6;i++){
        for (var j=1;j<=6;j++){
    repeatingPattern(i*200-150,j*200-50,100);
    repeatingPattern(i*200-50,j*200-150,100);
    repeatingPatternX(i*200-150,j*200-150,100);
    repeatingPatternX(i*200-50,j*200-50,100);
        }
    }
    repeatingPatternY(2*100-50,2*100-50,100);
    repeatingPatternY(2*100-50,6*100-50,100);
    repeatingPatternZ(5*100-50,4*100-50,100);
    repeatingPatternZ(4*100-50,1*100-50,100);
    noLoop();
}

function repeatingPattern(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCircles(x,y,r)
}

function repeatingPatternX(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCircles(x,y,r)
}


function repeatingPatternY(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCirclesY(x,y,r)
}

function repeatingPatternZ(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green');
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCirclesY(x,y,r)
}


function flower(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('crimson');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function flowerX(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('white');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function littleCircles(x,y,r){
    doubleCircle(x-42,y-30,r*0.1);
    doubleCircle(x-30,y-42,r*0.1);
    doubleCircle(x+42,y+30,r*0.1);
    doubleCircle(x+30,y+42,r*0.1);
    doubleCircle(x+42,y-30,r*0.1);
    doubleCircle(x+30,y-42,r*0.1);
    doubleCircle(x-42,y+30,r*0.1);
    doubleCircle(x-30,y+42,r*0.1);
}

function doubleCircle(x,y,r){
    push();
    fill('bisque');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function littleCirclesY(x,y,r){
    doubleCircleY(x-42,y-30,r*0.1);
    doubleCircleY(x-30,y-42,r*0.1);
    doubleCircleY(x+42,y+30,r*0.1);
    doubleCircleY(x+30,y+42,r*0.1);
    doubleCircleY(x+42,y-30,r*0.1);
    doubleCircleY(x+30,y-42,r*0.1);
    doubleCircleY(x-42,y+30,r*0.1);
    doubleCircleY(x-30,y+42,r*0.1);
}

function doubleCircleY(x,y,r){
    push();
    fill('purple');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function fourLines(x,y,r){
    line(x-r/2,y-r/2,x-r*0.25,y-r*0.25);
    line(x+r/2,y+r/2,x+r*0.25,y+r*0.25);
    line(x+r/2,y-r/2,x+r*0.25,y-r*0.25);
    line(x-r/2,y+r/2,x-r*0.25,y+r*0.25);
}