luyaox@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Crystal-Xue-Project-07

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_07


var nPoints = 100;
function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);
    translate(width/2, height/2);
    drawEpitrochoid2();
    drawHeart();
    drawEpitrochoid();
}


function drawEpitrochoid2() {

    //geometry rotation
    rotate(map(mouseX, height, 0, TWO_PI, 0));

    //color gradiant
    var from = color(208, 16, 76);
    var to = color(0, 137, 167);
    var cH = lerpColor(from, to, map(mouseY, 0, width, 0 , 1));
    stroke(255);
    strokeWeight(0.2);
    fill(cH);

    //geometry parameters
	var a = map(mouseX, 0 , width, 50, 200);
    var b = a/30;
    var h = map(mouseY,0, height, 100, 0);

    //plotting geometry
	beginShape();
	for (var i = -1; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI);
        x = (a+b)*cos(t)-h*cos(((a+b)/b)*t);
        y = (a+b)*sin(t)-h*sin(((a+b)/b)*t);
		vertex(x, y)
	}
	endShape();
}

function drawHeart(){

    //stop heart shapes from rotation
    rotate(map(mouseX, height, 0, 0, TWO_PI));
    push();
    noStroke();
    fill(255,50);

    //size
    var h = map(mouseY, 0, height, 0, 5);

    //for how many layers of heart shapes
    for (var z = 1; z < 8; z++) {

        //plotting geometry
        beginShape();
        for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI);
            //heart equation
            x = 16 * pow(sin(t),3);
            y = -13 * cos(t)+ 5 * cos(2 * t) + 2 * cos(3 * t) + cos(4 * t);
            vertex(x*z*h,y*z*h);
        }
        endShape(CLOSE);
    }
}

function drawEpitrochoid() {

    //geometry rotation
    rotate(map(mouseY, 0, height, 0, TWO_PI));

    //color gradiant
    var from = color(178, 43, 206);
    var to = color(247, 217, 76);
    var cH = lerpColor(from, to, map(mouseX, 0, width, 0 , 1),100);
    stroke(cH);
    strokeWeight(1);
    noFill();

    //geometry parameters
    var a = map(mouseX, 0 , width, 50, 200);
    var b = a/20;
    var h = map(mouseY,0, height, 50, 200);

    //plotting the geometry
	beginShape();
	for (var i = -1; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI);
        x = (a+b)*cos(t)-h*cos(((a+b)/b)*t);
        y = (a+b)*sin(t)-h*sin(((a+b)/b)*t);
		vertex(x, y)
	}
	endShape();
}

This project is very intriguing to me because I got to explore the artistic value of math and geometry in a larger span.

Crystal Xue-LookingOutwards-07

Wind Map

“The wind map is a living portrait of the wind currents over the U.S. “

Martin Wattenberg co-leads the People + AI Research initiative at Google. And he produced a lot of data visualization work.

The real-time wind map showed the tracery of wind flowing over the US delicately. The direction, intensity of the wind can be captured just at a glimpse of the map that can even be zoomed in.

Images from Hurricane Isaac (September 2012)

It is such a successful project to me is that it achieved the purpose of visualizing complex data artistically for people not in the academic field. Mentioned by Martin, “bird watchers have tracked migration patterns, bicyclists have planned their trips and conspiracy theorists use it to track mysterious chemicals in the air. ” Mostly using the simplest and strongest visual language, data visualization workers can produce complex but legible work.

Crystal-Xue-Project-06

sketch-54.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_06


var eyeballSize = 180;
var eyeChange = 20;

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

function draw() {
    background(230, 194, 152);
    frameRate(600);
    var h = hour();
    var m = minute();
    var s = second();
    var eyeWidth = 150;

    //eyebag
    translate(120, 400)
    fill(210, 180, 152);
    noStroke();
    beginShape();
    for (var i = - 1; i < 12; i++) {
         curveVertex(0.1 * PI * eyeWidth * i - 50, sin(0.1 * i * PI) * (110 + m) - 50);
    }
    endShape();

    //drawing the eye shape
    translate(-50, - 100);
    stroke(0);
    strokeWeight(10);
    fill(255);

    //drawing upper half of the eye
    beginShape();
    for (var i = -1; i < 12; i++) {
         curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI) * (110 + m));
    }
    endShape();

    //drawing lower half of the eye
    fill(255);
    beginShape();
    for (var i = - 1; i < 12; i++) {
         curveVertex(0.1 * PI * eyeWidth * i, sin(0.1 * i * PI) * (110 + m));
    }
    endShape();

    //change of eyeball colors
    var r1 = 200 + 25 * sin(millis() / 100.0 );
    var g1 = 200 + 25 * sin(millis() / 100.0 + HALF_PI);
    var b1 = 200 + 25 * sin(millis() / 100.0 - HALF_PI);
    var eyeballX = 5 * h;
    var eyeballY = 0;
    x = sin(frameCount / 10) * eyeChange;
    y = cos(frameCount / 10) * eyeChange;

    //drawing eyeball
    translate(200, 0);
    noStroke();
    fill(r1, g1, b1);
    ellipse(eyeballX, eyeballY, eyeballSize + x,  eyeballSize + y);
    if (s % 2 == 0) {
        fill(0);
        ellipse(eyeballX, eyeballY, 100, 100);
        fill(255);
        ellipse(eyeballX + 20, eyeballY - 20, 10, 10);
    }else {
        fill(0);
        ellipse(eyeballX, eyeballY, 130, 130);
        fill(255);
        ellipse(eyeballX + 20, eyeballY -20, 15, 15);
    }

    //closing lid and eye bag when tired
    if (h < 8) {
        translate(-200,0);
        fill(230, 194, 152);
        stroke(0);
        strokeWeight(10);
        beginShape();
        for (var i = -1; i < 12; i++) {
             curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI)* (110 + m));
        }
        endShape();
    }

}

This is a project represent a normal student eye in a day. The pupil is changing its size every second, and the eye size is increasing based on minutes. And the entire eyeball is moving from left to right based on hours. during sleeping hours (12:00 – 8:00 am) the top eyelid is closed because of fatigues.

Crystal Xue-LookingOutwards-06

The text-like black and white visualization is a mapping of a ‘Register and Taps” random number generator in action. Rami Hammour is an architect graduated from RISD. Utilizing three integers in the script, Rami Hammour is able to show randomness with limited input values

The definition of randomness is known as “a non-repeating, non-biased, non-patterned sequence of values” . And randomness in computational art is finding a tool to record the irregular pattern.

I think in any form of randomness art. There should be logical representation used to project the randomness. Otherwise, the randomness will just be unable to read and lost its meaning.

Crystal-Xue-Project-05

sketch-379.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-05

var vA = 10; //vertical coordinate change of shorter edge
var hA = 17.32;//horizontal coordinate change of the shorter edge = √3 * vA
var vB = 40; //vertical coordinate change of the longer edge
var hB = 69.28;//vertical coordinate change of the longer edge = √3 * vB

function setup() {
    createCanvas(375, 600);
}

function draw() {
    background(0);
    noStroke();
    scale(0.7);

    for (var x = 0; x < 600 ; x +=  hB + 2 * hA) {
        for (var y = 0; y < 1200 ; y += 2 * vB + 4 * vA) {
            if (x % (2 * (hB + 2 * hA)) == 0) {

                push();
                translate(-85, 0);
                fill(200);

                //top side
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                // right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();

            }
            else {

                push();
                translate(-85, -vB - 2 * vA);

                //top side
                fill(200);
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();
            }

        }

    }




}

Using trigonometry of 30-degree triangles, I dissected this single unit piece into two sizes of triangles. I nested the units with each other and created this interlocking pattern.

Crystal Xue-LookingOutwards-05

Alexey Kashpersky is a visual artist originally from Poltava, Ukraine. He has created a series of work for fantasies world and medical use. He has a youtube channel dedicated to all the 3D generated art and microbiology videos.

This cancer cell microenvironment video is particularly interesting to me. He presented the cells in such a delicate fantasy way that has unrealistic lightings and colors. We always depict that cancer is evil. However, through his 3D video visualization, it becomes a whole another world.

On the other hand, I wish the videos produced can be more educational instead of being purely aesthetic pleasing.

Crystal-Xue-Project-04

sketch-298.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-04

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

function draw() {
    background(0);
    stroke(255);

    //set constrain to the mouse location
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    //set up color gradient palette
    let from = color(102, 153, 161);
    let to = color(180, 129, 187);
    let interA = lerpColor(from, to, 0.15);
    let interB = lerpColor(from, to, 0.3);
    let interC = lerpColor(from, to, 0.45);
    let interD = lerpColor(from, to, 0.6);
    let interE = lerpColor(from, to, 0.75);

    //draw string geometries
    for (var i = 0; i <= width; i = i + 5 ) {

        //background dynamic grid change along mouse indicator
        stroke(from);
        strokeWeight(0.7);
        line(i, 3 / 4 * i, i, y);
        stroke(interA);
        line(i, 3 / 4 * i, x, 3 / 4 * i);

        //first pair of curves controlled by mouse location
        stroke(interB);
        line(i, 3 / 4 * i, width - i, y);
        stroke(interC);
        line(i, 3 / 4 * i, x, height - 3 / 4 * i);

        //second pair of curves opposite of the first pair
        stroke(interD);
        line(i, height - 3 / 4 * i, width - i, y);
        stroke(interE);
        line(i, height - 3 / 4 * i, x, 3 / 4 * i);

        //drawing the mouse indicator
        stroke(to);
        strokeWeight(2);
        line(x, y, width - i, y);
        stroke(to);
        strokeWeight(2);
        line(x, y, x, height - 3 / 4 * i);

     }
}

For this project, I was trying to mimic the abstract motion of the weaving process. The mouse indicator is the shuttle of a loom which shows the x and y coordinate positions. The background grid is the unwoven warp yarn showing the parallel lines. And the curves are the woven pieces. I also experimented with the gradient colors in p5js.

Crystal Xue-LookingOutwards-04

Carsten Nicolai is an artist and musician based in Berlin who is famous for presenting the scientific quality of sound in unique artistic ways. In the contemporary ages, art is not merely 2 dimensional. It can be interpreted and perceived in all different senses. And Carsten is dedicating his life working on visualizing sound in the most minimalistic installations.

This is one of his recent work -Reflektor Distortion, as the video and the photos shown progressively further away, the installation is conceived as a rotating basin filled with water. The contrast of the black and white used here is perfect for showing the distortion nuance of the sound changing in its frequency.

As we gradually stepping outwards, the installation is fairly simple, straightforward and effect-maximized. I really appreciate the aesthetics and simplest medium that Carsten chose here – “water”, as opposed to complex technology devices.

Crystal Xue-LookingOutwards-03

LACE by Jenny Wu is an individual brand that focuses on 3D printing jewelry design. Jenny Wu and her husband are architects who are still practicing in the field. With an architectural background, all different kinds of digital fabrication technologies are learned and experimented pretty throughly. With more than 15 years of 3D printing experiences, designer and architect Jenny Wu had incorporated architectural elements into jewelry design and created her collection of 3D printing wearable line – LACE.

“Stria” – fully 3D printed from a strong yet flexible nylon-based polymer

I am really impressed by how delicate these pieces are done. All the jewelry pieces are modeled parametrically. Applying that concept into a new design field is already an innovative move. Taking a step further, 3D printing technology gave her the opportunity to turn the intricate and creative interdisciplinary artwork into practice.

Crystal-Xue-Project-03

sketch-194.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-03

var lengthInner = 130; //distance of p5js logo center to the outter edge
var edgeFlat = 50; //length of the outter edge of the p5js logo
var p5jsR = 237;
var p5jsG = 34;
var p5jsB = 93;
var backgroundR = 0;
var backgroundG = 0;
var backgroundB = 0;
var spin = 0;
var unit = 80;


function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {
	background(backgroundR, backgroundG, backgroundB);
    backgroundR = 255 - mouseY / 4 - 50;
    backgroundG = 170;
    backgroundB = 200;

    //dynamic circle background
    radius1 = dist(mouseX, mouseY, 0, 0); 
    radius2 = dist(mouseX, mouseY, 0, unit);
    radius3 = dist(mouseX, mouseY, 0, unit * 2);
    radius4 = dist(mouseX, mouseY, 0, unit * 3);
    radius5 = dist(mouseX, mouseY, 0, unit * 4);
    radius6 = dist(mouseX, mouseY, 0, unit * 5);
    radius7 = dist(mouseX, mouseY, 0, unit * 6);
    radius8 = dist(mouseX, mouseY, 0, unit * 7);
    radius9 = dist(mouseX, mouseY, 0, unit * 8);
    radius10 = dist(mouseX, mouseY, unit , 0);
    radius11 = dist(mouseX, mouseY, unit , unit);
    radius12 = dist(mouseX, mouseY, unit, unit * 2);
    radius13 = dist(mouseX, mouseY, unit, unit * 3);
    radius14 = dist(mouseX, mouseY, unit, unit * 4);
    radius15 = dist(mouseX, mouseY, unit, unit * 5);
    radius16 = dist(mouseX, mouseY, unit, unit * 6);
    radius17 = dist(mouseX, mouseY, unit, unit * 7);
    radius18 = dist(mouseX, mouseY, unit, unit * 8);
    radius19 = dist(mouseX, mouseY, unit * 2, 0);
    radius20 = dist(mouseX, mouseY, unit * 2, unit);
    radius21 = dist(mouseX, mouseY, unit * 2, unit * 2);
    radius22 = dist(mouseX, mouseY, unit * 2, unit * 3);
    radius23 = dist(mouseX, mouseY, unit * 2, unit * 4);
    radius24 = dist(mouseX, mouseY, unit * 2, unit * 5);
    radius25 = dist(mouseX, mouseY, unit * 2, unit * 6);
    radius26 = dist(mouseX, mouseY, unit * 2, unit * 7);
    radius27 = dist(mouseX, mouseY, unit * 2, unit * 8);
    radius28 = dist(mouseX, mouseY, unit * 3, 0);
    radius29 = dist(mouseX, mouseY, unit * 3, unit);
    radius30 = dist(mouseX, mouseY, unit * 3, unit * 2);
    radius31 = dist(mouseX, mouseY, unit * 3, unit * 3);
    radius32 = dist(mouseX, mouseY, unit * 3, unit * 4);
    radius33 = dist(mouseX, mouseY, unit * 3, unit * 5);
    radius34 = dist(mouseX, mouseY, unit * 3, unit * 6);
    radius35 = dist(mouseX, mouseY, unit * 3, unit * 7);
    radius36 = dist(mouseX, mouseY, unit * 3, unit * 8);
    radius37 = dist(mouseX, mouseY, unit * 4, 0);
    radius38 = dist(mouseX, mouseY, unit * 4, unit);
    radius39 = dist(mouseX, mouseY, unit * 4, unit * 2);
    radius40 = dist(mouseX, mouseY, unit * 4, unit * 3);
    radius41 = dist(mouseX, mouseY, unit * 4, unit * 4);
    radius42 = dist(mouseX, mouseY, unit * 4, unit * 5);
    radius43 = dist(mouseX, mouseY, unit * 4, unit * 6);
    radius44 = dist(mouseX, mouseY, unit * 4, unit * 7);
    radius45 = dist(mouseX, mouseY, unit * 4, unit * 8);
    radius46 = dist(mouseX, mouseY, unit * 5, 0);
    radius47 = dist(mouseX, mouseY, unit * 5, unit);
    radius48 = dist(mouseX, mouseY, unit * 5, unit * 2);
    radius49 = dist(mouseX, mouseY, unit * 5, unit * 3);
    radius50 = dist(mouseX, mouseY, unit * 5, unit * 4);
    radius51 = dist(mouseX, mouseY, unit * 5, unit * 5);
    radius52 = dist(mouseX, mouseY, unit * 5, unit * 6);
    radius53 = dist(mouseX, mouseY, unit * 5, unit * 7);
    radius54 = dist(mouseX, mouseY, unit * 5, unit * 8);
    radius55 = dist(mouseX, mouseY, unit * 6, 0);
    radius56 = dist(mouseX, mouseY, unit * 6, unit);
    radius57 = dist(mouseX, mouseY, unit * 6, unit * 2);
    radius58 = dist(mouseX, mouseY, unit * 6, unit * 3);
    radius59 = dist(mouseX, mouseY, unit * 6, unit * 4);
    radius60 = dist(mouseX, mouseY, unit * 6, unit * 5);
    radius61 = dist(mouseX, mouseY, unit * 6, unit * 6);
    radius62 = dist(mouseX, mouseY, unit * 6, unit * 7);
    radius63 = dist(mouseX, mouseY, unit * 6, unit * 8);

    fill(255);
    ellipse(0, 0, pow(radius1, 3/4), pow(radius1, 3/4));
    ellipse(0, unit, pow(radius2, 3/4), pow(radius2, 3/4));
    ellipse(0, unit * 2, pow(radius3, 3/4), pow(radius3, 3/4));
    ellipse(0, unit * 3, pow(radius4, 3/4), pow(radius4, 3/4));
    ellipse(0, unit * 4, pow(radius5, 3/4), pow(radius5, 3/4));
    ellipse(0, unit * 5, pow(radius6, 3/4), pow(radius6, 3/4));
    ellipse(0, unit * 6, pow(radius7, 3/4), pow(radius7, 3/4));
    ellipse(0, unit * 7, pow(radius8, 3/4), pow(radius8, 3/4));
    ellipse(0, unit * 8, pow(radius9, 3/4), pow(radius9, 3/4));
    ellipse(unit, 0, pow(radius10, 3/4), pow(radius10, 3/4));
    ellipse(unit, unit, pow(radius11, 3/4), pow(radius11, 3/4));
    ellipse(unit, unit * 2, pow(radius12, 3/4), pow(radius12, 3/4));
    ellipse(unit, unit * 3, pow(radius13, 3/4), pow(radius13, 3/4));
    ellipse(unit, unit * 4, pow(radius14, 3/4), pow(radius14, 3/4));
    ellipse(unit, unit * 5, pow(radius15, 3/4), pow(radius15, 3/4));
    ellipse(unit, unit * 6, pow(radius16, 3/4), pow(radius16, 3/4));
    ellipse(unit, unit * 7, pow(radius17, 3/4), pow(radius17, 3/4));
    ellipse(unit, unit * 8, pow(radius18, 3/4), pow(radius18, 3/4));
    ellipse(unit * 2, 0, pow(radius19, 3/4), pow(radius19, 3/4));
    ellipse(unit * 2, unit, pow(radius20, 3/4), pow(radius20, 3/4));
    ellipse(unit * 2, unit * 2, pow(radius21, 3/4), pow(radius21, 3/4));
    ellipse(unit * 2, unit * 3, pow(radius22, 3/4), pow(radius22, 3/4));
    ellipse(unit * 2, unit * 4, pow(radius23, 3/4), pow(radius23, 3/4));
    ellipse(unit * 2, unit * 5, pow(radius24, 3/4), pow(radius24, 3/4));
    ellipse(unit * 2, unit * 6, pow(radius25, 3/4), pow(radius25, 3/4));
    ellipse(unit * 2, unit * 7, pow(radius26, 3/4), pow(radius26, 3/4));
    ellipse(unit * 2, unit * 8, pow(radius27, 3/4), pow(radius27, 3/4));
    ellipse(unit * 3, 0, pow(radius28, 3/4), pow(radius28, 3/4));
    ellipse(unit * 3, unit, pow(radius29, 3/4), pow(radius29, 3/4));
    ellipse(unit * 3, unit * 2, pow(radius30, 3/4), pow(radius30, 3/4));
    ellipse(unit * 3, unit * 3, pow(radius31, 3/4), pow(radius31, 3/4));
    ellipse(unit * 3, unit * 4, pow(radius32, 3/4), pow(radius32, 3/4));
    ellipse(unit * 3, unit * 5, pow(radius33, 3/4), pow(radius33, 3/4));
    ellipse(unit * 3, unit * 6, pow(radius34, 3/4), pow(radius34, 3/4));
    ellipse(unit * 3, unit * 7, pow(radius35, 3/4), pow(radius35, 3/4));
    ellipse(unit * 3, unit * 8, pow(radius36, 3/4), pow(radius36, 3/4));
    ellipse(unit * 4, 0, pow(radius37, 3/4), pow(radius37, 3/4));
    ellipse(unit * 4, unit, pow(radius38, 3/4), pow(radius38, 3/4));
    ellipse(unit * 4, unit * 2, pow(radius39, 3/4), pow(radius39, 3/4));
    ellipse(unit * 4, unit * 3, pow(radius40, 3/4), pow(radius40, 3/4));
    ellipse(unit * 4, unit * 4, pow(radius41, 3/4), pow(radius41, 3/4));
    ellipse(unit * 4, unit * 5, pow(radius42, 3/4), pow(radius42, 3/4));
    ellipse(unit * 4, unit * 6, pow(radius43, 3/4), pow(radius43, 3/4));
    ellipse(unit * 4, unit * 7, pow(radius44, 3/4), pow(radius44, 3/4));
    ellipse(unit * 4, unit * 8, pow(radius45, 3/4), pow(radius45, 3/4));
    ellipse(unit * 5, 0, pow(radius46, 3/4), pow(radius46, 3/4));
    ellipse(unit * 5, unit, pow(radius47, 3/4), pow(radius47, 3/4));
    ellipse(unit * 5, unit * 2, pow(radius48, 3/4), pow(radius48, 3/4));
    ellipse(unit * 5, unit * 3, pow(radius49, 3/4), pow(radius49, 3/4));
    ellipse(unit * 5, unit * 4, pow(radius50, 3/4), pow(radius50, 3/4));
    ellipse(unit * 5, unit * 5, pow(radius51, 3/4), pow(radius51, 3/4));
    ellipse(unit * 5, unit * 6, pow(radius52, 3/4), pow(radius52, 3/4));
    ellipse(unit * 5, unit * 7, pow(radius53, 3/4), pow(radius53, 3/4));
    ellipse(unit * 5, unit * 8, pow(radius54, 3/4), pow(radius54, 3/4));
    ellipse(unit * 6, 0, pow(radius55, 3/4), pow(radius55, 3/4));
    ellipse(unit * 6, unit, pow(radius56, 3/4), pow(radius56, 3/4));
    ellipse(unit * 6, unit * 2, pow(radius57, 3/4), pow(radius57, 3/4));
    ellipse(unit * 6, unit * 3, pow(radius58, 3/4), pow(radius58, 3/4));
    ellipse(unit * 6, unit * 4, pow(radius59, 3/4), pow(radius59, 3/4));
    ellipse(unit * 6, unit * 5, pow(radius60, 3/4), pow(radius60, 3/4));
    ellipse(unit * 6, unit * 6, pow(radius61, 3/4), pow(radius61, 3/4));
    ellipse(unit * 6, unit * 7, pow(radius62, 3/4), pow(radius62, 3/4));
    ellipse(unit * 6, unit * 8, pow(radius63, 3/4), pow(radius63, 3/4));


    //p5js logo

    //color changes
    p5jsR = 220;
    p5jsG = mouseY / 4 + 10; 
    p5jsB = mouseY / 4 + 40;
    
    translate(mouseX, mouseY);

    //size of the logo changes
    lengthInner = dist(mouseX, mouseY, width / 2, height / 2);
    edgeFlat = dist(mouseX, mouseY, width / 2, height / 2) / 2;

    //logo spins
    spin = pow(mouseY, 1.05);

    //drawing the logo
    //top part
    noStroke();
    rotate(spin);
    fill(p5jsR, p5jsG, p5jsB);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //upper right part
    rotate(72);
    noStroke();
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower right part
     rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);
    
    //upper left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

 }

I created this dynamic drawing inspired by the geometry of p5js logo. Not only the geometry is responsive to the position of the mouse, but the circle background. I also tried to create a color contrast between the main logo and the background.