![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
project-05-wallpaper
/*
Lauren Kenny
lkenny
Section A
This program draws a repeating geometric pattern.
*/
var x;
var y;
var circleX;
var circleY;
var circleX2;
var circleY2;
function setup() {
noLoop();
createCanvas(600, 600);
background(0);
noStroke();
x=50;
y=50;
w=100;
h=100;
circleX=20;
circleY=20;
circleX2=80;
circleY2=80;
}
function draw() {
drawGrid();
}
//////////////////////////////
// THIS CREATES THE CIRCLES
/////////////////////////////
function drawBottomLeft() {
fill(255, 0, 0);
arc(x, y, w, h, HALF_PI, PI);
fill(255, 255, 0);
arc(x, y, w-50, h-50, HALF_PI, PI);
}
function drawBottomRight() {
fill(0, 255, 0);
arc(x, y, w, h, 0, HALF_PI);
fill(0, 0, 255);
arc(x, y, w-50, h-50, 0, HALF_PI);
}
function drawTopLeft() {
fill(0, 0, 255);
arc(x, y, w, h, PI, PI+HALF_PI);
fill(0, 255, 0);
arc(x, y, w-50, h-50, PI, PI+HALF_PI);
}
function drawTopRight() {
fill(255, 255, 0);
arc(x, y, w, h, PI+HALF_PI, 0);
fill(255, 0, 0);
arc(x, y, w-50, h-50, PI+HALF_PI, 0);
}
//////////////////////////////
// THIS CREATES THE TINY DOTS
/////////////////////////////
function drawTopCircles() {
fill(0, 255, 0);
circle(circleX, circleY, 5);
circle(circleX+5, circleY-5, 5);
circle(circleX-5, circleY+5, 5);
}
function drawBottomCircles() {
fill(0, 0, 255);
circle(circleX2, circleY2, 5);
circle(circleX2+5, circleY2-5, 5);
circle(circleX2-5, circleY2+5, 5);
}
//////////////////////////////
// THIS DRAWS THE REPEATING PATTERN
/////////////////////////////
function drawGrid() {
//PURPLE DOTS IN BACKGROUND
var d=5;
var e=5;
for (var o=0; o<width; o+=10) {
for (var p=0; p<height; p+=10) {
fill(80, 0, 195);
ellipse(d, e, 8);
e+=10;
}
e=5;
d+=10;
}
//LARGE CIRCLES
for (var i=0; i<width; i+=100) {
for (var j=0; j<height; j+=100) {
drawBottomRight();
drawBottomLeft();
drawTopLeft();
drawTopRight();
y+=100;
}
y=50;
x+=100;
}
//WHITE OUTLINED CIRCLES IN FRONT
var f=5;
var g=5;
for (var q=0; q<width; q+=10) {
for (var r=0; r<height; r+=10) {
noFill();
stroke(255);
strokeWeight(.35);
ellipse(f, g, 10);
g+=10;
}
g=5;
f+=10;
}
//TINY GREEN DOTS
var greenCounter=0;
for (var k=0; k<width; k+=100) {
greenCounter+=1;
if (greenCounter%2==0) {
circleY=120;
}
else {
circleY=20;
}
for (var l=0; l<height; l+=200) {
drawTopCircles();
circleY+=200;
}
circleX+=100;
}
//TINY BLUE DOTS
var blueCounter=0;
for (var m=0; m<width; m+=100) {
blueCounter+=1;
if (blueCounter%2==0) {
circleY2=80;
}
else {
circleY2=180;
}
for (var n=0; n<height; n+=200) {
drawBottomCircles();
circleY2+=200;
}
circleX2+=100;
}
}
I wanted to experiment with a geometric pattern and the arc() function we learned this week. I’ve been trying to get myself back up to speed with the unit circle, so I challenged myself to try and get the angles right on the first try rather than trial and error like I normally do. I found that when I really thought through the math and logic first, it was easier to write the program. I also wanted to experiment with some conditionals in my loops. After making my intended pattern, I added some extra loops just to give the visual more dimension.
