Month: September 2018

Hannah Cai—Looking Outwards—03

3D-printed shells
close-up
example pattern 1
example pattern 2

fdecomite on flickr’s work caught my eye, first because the shells seemed so realistic, and secondly because all the computation and experimentation that had to have gone into the this level of biomimicry is extremely impressive. Imagining going back to the spiral exercise we did in lab last week and creating a 3d plane out of it blows my mind. Although there weren’t any details provided for the reasons behind this project (I suspect it was just done out of curiosity/for fun), I can easily see how this kind of prototyping would be useful in scientific research. The possibility of adding a variation aspect, like we did in project 2, basically means that an infinite amount of shell models could be created, and the addition of 3d printing using calcium or other more realistic materials would provide an quick and environmentally friendly way of studying, for example, how calcium in seashells is affected by rising levels of acidity in the ocean.

Project-03-Dynamic-Drawing

My initial idea was a sort of a compass or star that would rotate to always face the mouse. This was easiest as having the circle be in set positions, but grow when the mouse hovers close. I then had the idea to incorporate the “getting warmer” scheme, so that the circles would transition from one color to another as the mouse comes closer. Having 12 circles, this required extensive use of loops and arrays.

sketch

var centerx = 640/2;
var centery = 480/2;
var radius = 175;

var d = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var angles = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];

var largest = 0;
var trianglewidth = 50;

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

function draw() {
	background('white');
	noStroke();

	for(i = 0; i < d.length; i++){
		d[i] = (255 - dist(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, mouseX, mouseY)) / 3;

		if (d[i] < 0){
			d[i] = 0;
		}

		if (d[i] > d[largest]){
			largest = i;
		}

		fill(255 - d[i]*3, 0, d[i]*3);
		ellipse(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, d[i], d[i]);
	
	}
	var linecolor = dist(centerx, centery, mouseX, mouseY);
	if(linecolor > 255){
		linecolor = 255;
	}
	stroke(linecolor);
	strokeWeight(4);
	line(centerx, centery, centerx + cos(angles[largest])*(radius - d[largest]/2), centery + sin(angles[largest])*(radius - d[largest]/2));

}

Xiaoying-Looking Outward03

Silk Pavilion is a project created by the MIT media lab. They studied the movements of silkworm and created a pavilion with the paths. This project combined technology with biology. From studying animals around us, we can learn a lot more about nature. And technology such as 3D printing allows us to mimic the behaviors of animal better. The silk pavilion is an amazing piece of architecture because it cannot be built manually. It is created only because of the existence of technology. By combining technology and biology, we can create more amazing pieces of architecture like the silk pavilion. Not only architecture, perhaps clothing, everyday objects, and art. The potential is endless.

Jason Zhu-Project-03-Dynamic-Drawing

sketch

/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Assignment-03
*/

// This code demonstrates the Sunset!

// Easing Variables
var easing = .05
var x = 1;
var y = 1;

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

function draw() {
    // Max Min Function
    noStroke();
    var mX = max(min(mouseX, 640), 0);
    var mY = max(min(mouseY, 480), 0);

    // Background Change
    var g = (480-mY)*(.309)+85;
    var g2 = (480-mY)*(.309)+85;
    background(255,g,100);
    
    // Ease Sun Function
    var tarY = mY;
    var dy = tarY - y;
    y += dy * easing;

    // Sun Shadow Large
    fill (360,g-20,140)
    ellipse(x + width / 2,y,mouseY / .35 +20,mouseY / .35 +20);
    if (y> 395) {
        y=395
    }

    // Sun Shadow Medium
    fill (330,g-20,100)
    ellipse(x + width / 2,y,mouseY / .55 +20,mouseY / .55 +20);
    if (y> 395) {
        y=395
    }

    // Sun Shadow Small
    fill (270,g-20,60)
    ellipse(x + width / 2,y,mouseY / .9 +20,mouseY / .9 +20);
    if (y> 395) {
        y=395
    }

    // Sun  
    fill (250,g-40,40)
    ellipse(x + width / 2,y,100,100);
    if (y> 395) {
        y=395
    }

    // Grass 
    var g2 = (480-mY)*(.309)+85;
    fill(135,g2,100);
    rect(0,410,640,120)

    // Right Shade
    fill(0);
    rect(640, 0, -.815*y, 480);

    // Left Shade
    fill(0);
    rect(0, 0, .815*y, 480);

}

This project was incredibly hard but rewarding. For me, thins project is when concepts really came together. It was a struggle to figure out how various variables interacted, but I eventually was able to resolve most issues. I had a particularly hard time with rotations and angles. I eventually figured out how to troubleshoot some of these issues, though a few questions linger. Overall, I am fairly satisfied.

Jason Zhu-LookingOutwards-03


This image is a computer’s take on a mushroom!

This project was created by Joel Lehman, an assistant professor at the IT University of Copenhagen. The work is untitled, but it was created in 2016. Link: https://www.popsci.com/creative-ai-learns-to-sculpt-3d-printable-objects.

I really liked this project because I thought it did a good job of incorporating a human touch to a rigid process. In fact, the algorithm mimicked the human learning process via deep neural networks.

From what I can tell through the use of image recognition, the computer can get fairly close to something that resembles an object. Though not perfect, this is something unique. The computer is in essence drawing an object in its own style. In a way the algorithm is generating objects at random and through many many repetitions is able to produce something close to the object it has been trying to draw.

The artistic sensibilities are manifested in the creation algorithm. While the algorithm is random, the process in which it is generated (better versions serve as starting points for future generations) helps to determine the style of the content being produced. In fact, one can tell that all the final images were created by the same algorithm.

John Legelis – Project-03: Dynamic Drawing

houndstooth

// John Legelis
// Section D
// jlegelis@andrew.cmu.edu
// Project-03

// Canvas dimensions
var w
w = 480
var h
h = 640

// Houndstooth color variables
var dark
dark = 0
var light
light = 255

// Houndstooth square dimensions
var hsW
hsW = 70
var hsH
hsH = 70

// Create Canvas
function setup() {
    createCanvas(w, h);
    background(255);
}

function draw() {
    // Vary color based on mouse Y coordinate
    // Middle of canvas Y = all grey
    dark  = min(mouseY/h * 255, 255)

    // Rotate pattern based on mouse X coordinate
    rotate(mouseX/w * PI/2)

    // Translate pattern based on mouse Y coordinate
    translate(0, (mouseY/w * 100))

    // Draw rows and colomns of houndstooth squares
    //draw houndstooth pattern much larger than canvas so rotation doesnt make pattern leave
    for(hsY = hsH/2 - 2000; hsY < 2000; hsY = (hsY + hsH)) {
        for(hsX = hsW/2 - 2000; hsX < 2000; hsX = (hsX + hsW)) {
    
            hTooth(hsX, hsY)
        }
    }
    console.log(mouseX)
}

// When mouse is pressed down the color of the top left quadrant changes from standard to a greyscale value based on mouse X
function colordark() {
    if (mouseIsPressed){
        return( (min(255,(max(100, mouseY)))) )
    }
    else {
        return(dark)
    }
}


// function that takes Center X and Center Y and draws one houndstooth square
function hTooth(cX, cY) {

//TOP LEFT QUADRANT--------------------------------------------------------------
    // Larger section of pattern
    fill(colordark());
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 6
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 7
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 8
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 9
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 3
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 4
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 6
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 7
    vertex((cX - (36/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM LEFT QUADRANT ------------------------------------------------------------

    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(dark)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);

// TOP RIGHT QUADRANT
    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
 
    fill(dark)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM RIGHT QUADRANT-------------------------------------------------------

    // Larger section of pattern
    fill(dark);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);
}

This project was open ended in a creative sense and after looking at a few examples, I was drawn to the idea of varying a pattern. One of my favorite patterns is houndstooth as it uses negative and positive space interchangeably. I broke the pattern into the smallest replicable modules and then iterated it onto the canvas in rows and columns. I then added user inputs to vary the gradient, rotation, translation by mouse position, and click to toggle the color of a segment of the pattern.

Jennifer DeLuna- Looking Outwards-03

I’m most interested in art that engages with its audience in some way, Marc Fornes’ architectural work, Minima | Maxima does this.  This is somewhat due to the fact that these works are structures that allow people to interact by walking through, and also because the futuristic appeal lends itself to a type of wonder for onlookers to experience. This work is made as a way to remove ourselves from the life around us, and experience something  we hadn’t before. Not much is said about the algorithms used to create this work, as the bigger feat is the thinness of the material and the height of the structure. It is the tallest structure to be made out of materials( aluminum) as thin as a coin.

Astana_TheVeryMany_©NAARO-42.jpg

Image to show height and shape of Minima | Maxima

https://theverymany.com/world-expo-17-astana-kz-1

Jessica Timczyk – Project 03 Dynamic Drawing

space

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-03-Dynamic Drawing

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

function draw() {
    background(7, 9, 76);

    var mX = max(min(mouseX, 640), 0); // keeps mouseX between 0 - 640

    var size = mX * 3 / 640

    var colorR = max(min(mouseX, 244), 90);
    var colorG = max(min(mouseX, 70), 1);
    var colorB = max(min(mouseX, 100), 60);

    mX = 640 - mX;
    
    // shooting star
    fill(248, 246, 100);
    stroke(255);
    strokeWeight(4);
    quad(290 + 15/2, mX - 120, 290 + 8, mX - 123, 330, mX - 150, 340, mX - 135); // star tail
    quad(290, mX - 100, 305, mX - 120, 290, mX - 140, 275, mX - 120); // star shape

    mX = max(min(mouseX, 640), 0);

    // spaceship shape setup
    noFill(); // glass dome
    stroke(255);
    ellipse(mouseX, height * 2/3 - 30, 85, 120);


     // alien colors
    fill(9, 172, 20);
    stroke(9, 172, 20);
    rect(mouseX - 2.5, height * 2/3 - 60, 5, 7); // neck

    stroke(18, 111, 25);
    triangle(mouseX, height * 2/3 - 10, mouseX - 15, height * 2/3 - 50, mouseX + 15, height * 2/3 - 50); // torso

    triangle(mouseX - 3/2, height * 2/3 - 74, mouseX, height * 2/3 - 80, mouseX + 3/2, height * 2/3 - 74); // antena

    ellipse(mouseX, height * 2/3 - 65, 22, 15); // head

    fill(0);
    stroke(255);
    strokeWeight(3);
    ellipse(mouseX - 5, height * 2/3 - 65, 7, 6); // left eye ball

    ellipse(mouseX + 5, height * 2/3 - 65, 7, 6); // right eye ball

    fill(142, 142, 144); // spaceship body
    stroke(0);
    strokeWeight(3);
    ellipse(mouseX, height * 2/3, 200, 75);

    // seam on space ship
    strokeCap(ROUND);
    stroke(0);
    fill(0);
    rectMode(CENTER);
    rect(mouseX, height * 2/3, 160, 1);

    // Planet 1
    fill(219, 34, 47);
    noStroke();
    ellipse(125, 125, 100  * size, 100 * size);

    size = 3 - size; // reverse size for second planet

    // Planet 2
    fill(255, 187, 3);
    ellipse(450, 200, 80 * size, 80 * size); // planet
    fill(colorR, colorG, colorB); // color of ring changes with mouse
    ellipse(450, 200, 130 * size, 10 * size); // ring

    // stars
    var starX = mouseX;

    fill(249, 215, 81);
    noStroke();
    push(); // star 1
    translate(100, 400);
    rotate(starX / width * mX); // star rotates around itself as mouse moves
    rectMode(CENTER);
    rect(0, 0, 7, 12);
    pop();

    push(); // star 2
    translate(20, 300);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 10, 15);
    pop();    

    push(); // star 3
    translate(260, 30);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 20, 15);
    pop();

    push(); // star 4
    translate(500, 70);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 5, 7);
    pop();

    push(); // star 5
    translate(600, 430);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 40, 40);
    pop();

    push(); // star 6
    translate(210, 200);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 15, 20);
    pop();

    push(); // star 7
    translate(450, 400);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 10, 15);
    pop();
}

When writing this code I found it easy to come up with ideas of how and what I wanted to move but writing the code to implement such ideas was more difficult, and I thus had to simplify my ideas in certain areas. I am happy with how the drawing came out, looking very cartoonish how all of the variables move in conjunction to each other.

Looking Outwards-03

Vespers III
Vespers III is a project (a collection of masks exploring what it means to design with life). It explores ancient typology with technology. It points towards an imminent future where wearable interfaces and building skins are customized to not only fit a particular shape but a specific material. I really admire how this work takes a stab at how technology/ computation can play a role in visualizing natural topics/ ideas. Computational design is matched with additive manufacturing and synthetic biology  to digitally fabricate objects. 3D printable bioactive materials are used to template the biological response.



 

 

https://www.media.mit.edu/projects/vespers-iii/overview/

Xiaoying Meng-Project-03-Dynamic-Drawing

sketch

var redlineend= -20;
var redlinestart= 0;
var R=[237,247,193,176];
var G=[194,240,204,196];
var B=[200,220,221,177];
var index = 0;
var angle = 0;
var R1=[198,237,159,134];
var G1 =[143,220,173,168];
var B1 =[151,173,196,136];
var a =4;



function setup(){
    createCanvas(640,480);
    background(R[index],G[index],B[index]);
}


function mousePressed(){
    //if click mouse inside canvas
    if (mouseY < height & mouseY >0 && mouseX < width && mouseX > 0 && redlinestart >= 0){
        //in first quater
        if(mouseX < width/2 && mouseY < height/2) {
            //line gap 35
            redlineend = redlineend +35;
            redlinestart = redlinestart + 35;
        } 
        //in second quater
        if (mouseX > width/2 & mouseY < height/2) { 
            //line gap 20
            redlinestart = redlinestart + 20;
            redlineend = redlineend +20;
        }
        //in third quater
        if(mouseX < width/2 & mouseY > height/2) { 
           //line and background color change
            index = index - 1; 
            if (index <= 0 ){
               index = 0;
            }
            // heavier strokeweight 
            a = a+1;
            if (a >= 6 ){
               a = 6;
            }
        }
        //in fourth quater
        if(mouseX > width/2 & mouseY > height/2) { 
            //line and background color change
            index = index + 1; 
            if (index ===4){
               index = 0;
            }
            // lighter strokeweight
            a = a-1
            if ( a <= 1 ){
               a = 1;
            } 
        }
    }
}

function draw(){
    stroke(R1[index],G1[index],B1[index]);
    strokeWeight(a);

    redlineend = redlineend+1;
    redlinestart = redlinestart+1;
   //restart line 
   if (redlineend >= 641){
        redlineend = -20;
        background(R[index],G[index],B[index]);   
        
    }
    if (redlinestart >= 661){
        redlinestart = 0;
        background(R[index],G[index],B[index]);
    }
    //rotating canvas
       push();
       translate(width/2,height/2);
       rotate(radians(angle));
       line(redlineend,height/5,redlinestart,height/5);
       pop();
       angle = angle+15;  
       
}

I created a line drawing controlled by the clicking of the mouse. The mouse can control the following:

1. line gap 35/20 (1st quarter/2nd quarter)
2. color of line and background (3rd quarter/4th quarter)
3. line weight (3rd quarter/4th quarter)