Project 06 – clock – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Hi friends!! For those that don’t know me very well, I spend a lot of time talking about astrology. Instead of making a clock that tells the time per say, I made a clock that tells the current astrological sign in the ascendant, which changes every two hours. I know it’s not exactly the same goal as the project but look at my symbols for each sign! I spent so long making them!!
sketch Download
//To quickly explain, I'm making a clock for astrological rising signs in the Libra season (right now)
//Rising signs change every 2 hours
var x;
var y;
var h;

function setup() {
    createCanvas(100, 650);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

//symbols for eahc of the signs
function aries(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 10, y - 16);
	curveVertex(x + 25, y + 32);
	curveVertex(x + 40, y - 16);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
}

function taurus(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 25, y + 16);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
	noFill();
	circle(x + 25, y + 32, 32);
}

function gemini(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	line(x + 15, y, x + 15, y + 40);
	line(x + 35, y, x + 35, y + 40);
	line(x, y + 40, x + 50, y + 40);
}

function cancer(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 25, y - 5);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
	beginShape();
	curveVertex(x, y + 35);
	curveVertex(x, y + 35);
	curveVertex(x + 25, y + 40);
	curveVertex(x + 50, y + 35);
	curveVertex(x + 50, y + 35);
	endShape();
	circle(x + 10, y + 7, 20);
	circle(x + 40, y + 28, 20);
}

function leo(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x - 10, y - 20);
	curveVertex(x + 10, y - 24);
	curveVertex(x + 20, y - 20);
	curveVertex(x + 10, y + 20);
	curveVertex(x + 20, y + 18);
	curveVertex(x + 20, y + 18);
	endShape();
	circle(x - 10, y, 20);
}

function virgo(x, y){
	strokeWeight(3);
	line(x, y, x, y + 40);
	beginShape();
	curveVertex(x, y + 5);
	curveVertex(x, y + 5);
	curveVertex(x + 10, y);
	curveVertex(x + 10, y + 40);
	curveVertex(x + 10, y + 40);
	endShape();
	beginShape();
	curveVertex(x + 10, y + 5);
	curveVertex(x + 10, y + 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 40);
	curveVertex(x + 25, y + 45);
	curveVertex(x + 25, y + 45);
	endShape();
	beginShape();
	curveVertex(x + 20, y + 15);
	curveVertex(x + 20, y + 15);
	curveVertex(x + 35, y + 10);
	curveVertex(x + 15, y + 45);
	curveVertex(x + 15, y + 45);
	endShape();
}

function libra(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	beginShape();
	curveVertex(x, y - 10);
	curveVertex(x, y - 10);
	curveVertex(x + 15, y - 10);
	curveVertex(x + 10, y - 30);
	curveVertex(x + 25, y - 40);
	curveVertex(x + 40, y - 30);
	curveVertex(x + 35, y - 10);
	curveVertex(x + 50, y - 10);
	curveVertex(x + 50, y - 10);
	endShape();
}

function scorpio(x, y) {
	strokeWeight(3);
	line(x, y, x, y + 40);
	beginShape();
	curveVertex(x, y + 5);
	curveVertex(x, y + 5);
	curveVertex(x + 10, y);
	curveVertex(x + 10, y + 40);
	curveVertex(x + 10, y + 40);
	endShape();
	beginShape();
	curveVertex(x + 10, y + 5);
	curveVertex(x + 10, y + 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 40);
	curveVertex(x + 25, y + 45);
	curveVertex(x + 30, y + 40);
	curveVertex(x + 30, y + 40);
	endShape();
	triangle(x + 28, y + 38, x + 32, y + 42, x + 31, y + 36);
}

function sag(x, y) {
	strokeWeight(3);
	line(x, y, x + 30, y - 40);
	line(x + 5, y - 30, x + 30, y - 10);
	line(x + 15, y - 40, x + 30, y - 40);
	line(x + 30, y - 40, x + 40, y - 25);
}

function cap(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 5, y + 20);
	curveVertex(x + 10, y);
	curveVertex(x + 15, y - 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 35);
	curveVertex(x + 15, y + 40);
	curveVertex(x + 15, y + 40);
	endShape();
	circle(x + 30, y + 30, 20);
}

function aqua(x, y) {
	strokeWeight(3);
	line(x, y, x + 10, y - 5);
	line(x + 10, y - 5, x + 15, y);
	line(x + 15, y, x + 25, y - 5);
	line(x + 25, y - 5, x + 30, y);
	line(x + 30, y, x + 40, y - 5);
	line(x + 40, y - 5, x + 45, y);
	line(x, y + 20, x + 10, y + 15);
	line(x + 10, y + 15, x + 15, y + 20);
	line(x + 15, y + 20, x + 25, y + 15);
	line(x + 25, y + 15, x + 30, y + 20);
	line(x + 30, y + 20, x + 40, y + 15);
	line(x + 40, y + 15, x + 45, y + 20);
}

function pisces(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	beginShape();
	curveVertex(x, y - 20);
	curveVertex(x, y - 20);
	curveVertex(x + 15, y);
	curveVertex(x, y + 20);
	curveVertex(x, y + 20);
	endShape();
	beginShape();
	curveVertex(x + 50, y - 20);
	curveVertex(x + 50, y - 20);
	curveVertex(x + 35, y);
	curveVertex(x + 50, y + 20);
	curveVertex(x + 50, y + 20);
	endShape();
}

function draw() {
	//aries(25, 18);
	//taurus(25, 50);
	//gemini(25, 105);
	//cancer(25, 160);
	//leo(50, 235);
	//virgo(33, 260);
	//libra(25, 350);
	//scorpio(35, 360);
	//sag(33, 460);
	//cap(35, 470);
	//aqua(27, 530);
	//pisces(25, 580);
	//when we are in the range of this ascendant, the color of the symbol and the background reflects the element of that sign
	h = hour();
	if (h >= 0 & h < 2) {
		background(255, 54, 54);
		stroke(175, 0, 0); //fire is red
		leo(50, 235);
	} else if (h >= 2 & h < 4) {
		background(54, 255, 54);
		stroke(0, 175, 0); //earth is green
		virgo(33, 260);
	} else if (h >= 4 & h < 6) {
		background(150, 255, 255);
		stroke(0, 222, 222); //air is crystal blue
		libra(25, 350);
	} else if (h >= 6 & h < 8) {
		background(107, 107, 255);
		stroke(0, 0, 212); //water is royal blue
		scorpio(35, 360);
	} else if (h >= 8 & h < 10) {
		background(255, 54, 54);
		stroke(175, 0, 0);
		sag(33, 460);
	} else if (h >= 10 & h < 12) {
		background(54, 255, 54);
		stroke(0, 175, 0);
		cap(35, 470);
	} else if (h >= 12 & h < 14) {
		background(150, 255, 255);
		stroke(0, 222, 222);
		aqua(27, 530);
	} else if (h >= 14 & h < 16) {
		background(107, 107, 255);
		stroke(0, 0, 212);
		pisces(25, 580);
	} else if (h >= 16 & h < 18) {
		background(255, 54, 54);
		stroke(175, 0, 0);
		aries(25, 18);
	} else if (h >= 18 & h < 20) {
		background(54, 255, 54);
		stroke(0, 175, 0);
		taurus(25, 50);
	} else if (h >= 20 & h < 22) {
		background(150, 255, 255);
		stroke(0, 222, 222);
		gemini(25, 105);
	} else {
		background(107, 107, 255);
		stroke(0, 0, 212);
		cancer(25, 160);
	}
}
Leave a Reply Cancel reply
