(Oh hi, I didn't the first assignment correctly so if you wanted to view it in it's proper form [webpage and all], you can go here: http://melodyloveless.neocities.org/1.html Sorry for messing up the first time.)
The assignment this week was to create something aesthetically pleasing/interesting using loops or elaborate on the project that we worked on last week. Although I do like my project from last week, I wanted to go a different route this time.
There's an interactive element to what I created - you should click on it! You can view Assignment #2 here.
For the loops, I used two of them for the background - the squares and circles. I tried figuring out how to create a loop for the rows of squares since their position on the y-axis is consistantly spaced apart but I had a difficult time. However, the way that I did it, I was able to easily create variation in color between the different rows and I like that effect.
Asthetically, I knew that I wanted to work with a square background and overlay circles at some point. In another class, we were working on setting off triggers by key clicks so I wanted to use something similar here but with a mouse click. When you click the mouse over the screen, color of the squares and circles in the background change. The fill for the brain [rgb(255,174 ,185)] is the base for the fill of the squares and circles. I based all of the colors of those shapes off of that color. When I added the random element into the equation, this base color from the brain kept the colors in the same sort of palette.
I'm pretty happy with the results.Source Code:
var ypos = 0; var xpos = 0; // xstep = px apart on the x-plane var xstep= 15; var changeMe; // picked these proportions from the golden ratio var golden=40; var a =24.721; var b =15.278;
function setup() { createCanvas(400,400); }function draw() { background(255); fill(50); noStroke();
//loop-di-loop! wooooowwwww! for (var i=0; i<30; i++){ // changing color squares fill(255, 182-i, changeMe + (i*1.5)); rect(xpos + xstep * i,ypos, golden+(i*10),golden); fill(255, 50+(i*5.5), changeMe); rect(xpos + xstep * i, golden, golden+(i*10),golden); fill(50+(i*5.5), changeMe, 193); rect(xpos + xstep * i, 80,golden+(i*10),golden); fill(changeMe+(i*.5), 182, 193); rect(xpos + xstep * i, 120,golden+(i*10),golden); fill(255, changeMe, 70+(i*5.5)); rect(xpos + xstep * i, 160,golden+(i*10),golden); fill(changeMe, 182, 70+(i*5.5)); rect(xpos + xstep * i, 200,golden+(i*10),golden); fill(255, 182, 70+(i*changeMe)); rect(xpos + xstep * i, 240,golden+(i*10),golden); fill(255, changeMe, 70+(i*1.5)); rect(xpos + xstep * i, 280,golden+(i*10),golden); fill(changeMe, 182, golden+(i*b)); rect(xpos + xstep * i, 320,golden+(i*10),golden); fill(changeMe, 182, 70+(i*1.5)); rect(xpos + xstep * i, 360,golden+(i*10),golden);
// This was a mistake but I thought it looked really cool // so I kept it // I meant to only put a stroke with the ellipse // which I could have down by putting noStroke(); // before the rect stroke(255,182,193);
for (var z=0; z<20; z++){ // circles fill(255, 50+(i*5.5), changeMe); ellipse(xstep+(z*b),ypos+(i*a),b,b); } }
//head fill(50); ellipse(200, 200, 200, 240); //brain fill(255,174,185); stroke(255,182,193); ellipse(200, 110, 50, 50); ellipse(200, 123, 50, 50); ellipse(170, 122, 50, 50); ellipse(160, 125, 43, 43); ellipse(230, 122, 50, 50); ellipse(240, 125, 43, 43); }
function mousePressed() { changeMe = random(255); //changeMe is the same random number // for all formulas so it creates // consistancy between variation console.log(changeMe); }