Project-07 – Curves

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-05-Project

function setup() {
    createCanvas(480, 480);
    background(220);
}

function draw() {
	background(250, 190, 200) //pink background
	//calls column with 5 hearts
    for (var x = 40; x <= width; x += 200) {
        for (var y = 40;y <= height; y+= 100) {
        	push()
            translate(x, y)
            drawheart2()
            drawheart()
            pop()
        }
    }
    //cals collumn with 4 hearts
    for (var x = 140; x <= width; x += 200) {
        for (var y = 100;y <= height; y+= 100) {
        	push()
            translate(x, y)
            drawheart2()
            drawheart()
            pop()
        }
    }
}

//draws pink hearts
function drawheart(){
	fill(230, 80, 120)
	strokeWeight(0)
	push()
    beginShape();
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
    	var mx = constrain(mouseX/300, 0.7, 1.2) //multiplier based on mouseX
    	var my = constrain(mouseY/300, 0.7, 1.2) //multiplier based on mouseY
        var x = mx*16*pow(sin(i),3)
        var y = my*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y); 
    }
    endShape(CLOSE);
    pop()
}

//draws white hearts
function drawheart2(){
	var t = constrain(mouseX/3, 50, 80) //transparency based on mouseX
	fill(255, 255, 255, t)
	strokeWeight(0)
	push()
    beginShape()
    scale(2)
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
        var x = 1.2*16*pow(sin(i),3)
        var y = 1.2*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y); 
    }
    endShape(CLOSE);
    pop()
}

For this project, I wanted to create a wallpaper again, but this time with curves. I decided to use hearts for this, in which the size changes with the mouse coordinates. The white hearts in the background also change in transparency depending on the coordinate of the mouse.

Screenshot of my wallpaper

Leave a Reply