function setup() {
createCanvas(480, 480);
background(41, 90, 141);
angleMode(DEGREES);
noLoop();
}
function draw() {
for (var x = 0; x < 480; x += 96){
for (var y = 0; y < 480; y += 96){
push();
translate(x, y);
pattern();
pop();
}
}
}
function pattern(){
var radius = 20;
var centerX = 40;
var centerY = 40;
//main piece
strokeWeight(1.5);
stroke(0);
fill(214, 151, 0);
arc(centerX, centerY, radius * 2 + 10, radius * 2 + 10, 0, 315); //edge
fill(243, 210, 132);
arc(centerX, centerY, radius * 2, radius * 2, 0, 315); //inside
//separate piece
push();
rotate(-45);
strokeWeight(1.5);
stroke(0);
fill(214, 151, 0);
arc(centerX - 25, centerY + 22, radius * 2 + 10, radius * 2 + 10, 0, 45); //edge
fill(243, 210, 132);
arc(centerX - 25, centerY + 22, radius * 2, radius * 2, 0, 45); //inside
pop();
//toppings
strokeWeight(1/2);
fill(238, 97, 69);
ellipse(centerX, centerY - 8, 6, 6);
ellipse(centerX - 3, centerY + 5, 6, 6);
ellipse(centerX - 10, centerY - 3, 6, 6);
ellipse(centerX - 10, centerY - 13, 6, 6);
ellipse(centerX + 8, centerY - 13, 6, 6);
ellipse(centerX - 18, centerY + 3, 6, 6);
ellipse(centerX - 12, centerY + 9, 6, 6);
ellipse(centerX - 3, centerY + 13, 6, 6);
ellipse(centerX + 7, centerY + 9, 6, 6);
ellipse(centerX + 17, centerY + 4, 6, 6);
ellipse(centerX + 27, centerY - 11, 6, 6);
//division
for (i = 0; i < 360; i += 45){
strokeWeight(1);
line(40, 40, centerX + cos(i) * (radius + 5), centerY + sin(i) * (radius + 5));
}
}For this project, I wanted to make the wallpaper fun and cute (as always). I thought food that’s partially bitten is very cute. I thought of lollipops, popsicles, donuts, and finally decided to go with pizza because I really wanted to have pizza. I tried creating my own function for the pizza pattern. Then I used for loop to repeat the pattern. I was actually amazed at how easily I could create only one single for loop and put the function inside rather than writing multiple loops for each element.
]]>//
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
//
// Cherry Blossoms: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.
var w = 400;
var h = 400;
// Global Variable
var PLANT;
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;
// Recursively generates a plant model
var max_i = 7; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth
///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
this.x = x;
this.y = y;
}
// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
this.x = x;
this.y = y;
this.x0 = this.x;
this.y0 = this.y;
this.child = [];
this.x1 = null;
this.y1 = null;
}
// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
// Using the golden ratio, plant's branch size is a geometric sequence
l = segment_l * (common_ratio ** (cur_i))
// Randomly generate the next node via reducing
// distance from plant ro sun
do {
angleMode(DEGREES);
if (cur_i == 0) {
angle = 5;
theta = random(-90 - angle, -90 + angle);
} else {
theta = random(0, 360);
}
plant.x1 = plant.x0 + (l * cos(theta));
plant.y1 = plant.y0 + (l * sin(theta));
d_new = dist(plant.x1, plant.y1, food.x, food.y)
d_old = dist(plant.x0, plant.y0, food.x, food.y)
}
// Keep generating until the new distance is less than the current one
while (d_new > d_old)
plant.child = [];
// Randomly decide how many children(branches) a node should have
for (var x = 0; x < random(1, 4); x++) {
plant.child.push(new create_plant_node(plant.x1, plant.y1));
}
}
// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
// Break Base
if (cur_i == max_i) {
return
// Continue case
} else {
grow(PLANT, cur_i);
cur_i++;
for (i in PLANT.child) {
generate_plant(PLANT.child[i], cur_i, max_i)
}
}
}
///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
DRAW_i++; // Increases DRAW's Depth counter
stroke(255 * .3);
strokeCap(SQUARE);
strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
// Break case: Flowers
// If node has no children; draw leaf.
if (plant.child.length == 0) {
fill(255, 255, 255);
ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
return
} // If node has chldren; draw branches
else {
r = r ** common_ratio;
for (i in plant.child) {
line(plant.x, plant.y,
plant.child[i].x, plant.child[i].y)
draw_PLANT(plant.child[i], DRAW_i);
}
}
}
///// SETUP /////
function setup() {
createCanvas(w, h);
background("#a5d3e5");
food = new food_create();
// Row Cols Controller
num_tree = 3;
num_row = 3;
y_pos = 0;
// Translates Row and Col of Trees
push();
translate((w / num_tree) * .5, (h / num_row)*.825);
// Rows
for (var x = 0; x < num_row; x++) {
y_pos = x * (h / num_row);
// Cols
for (var i = 0; i < num_tree; i++) {
PLANT = new create_plant_node(i * (w / num_tree), y_pos);
generate_plant(PLANT, cur_i, max_i);
draw_PLANT(PLANT, DRAW_i);
}
}
pop();
textAlign(RIGHT);
textSize(10);
fill(255 * .3);
text("Please click to regnerate",w*.975,h*.985)
print("Final:", PLANT);
}
function mouseClicked() {
setup()
}Using a Lindenmayer system, each plant grows towards the sun. Every plant starts with a seed, and randomly generates branches to reduce its distance towards the sun at (width/2, -height*2) for a maximum recursion depth of 7. A number of sub-branches (children) each branch (node) generates is random between 1-4.
]]>/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 05: Wallpaper Art*/
var SIZE = 25;
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
drawGrid();
drawPetal1();
drawPetal2();
drawPetal3();
drawPetal4();
drawMiddle();
drawSquare();
noLoop();
}
function drawGrid() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill('lightblue');
ellipse(x,y,SIZE, SIZE);
}
}
}
function drawPetal1() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x+5,y,7,7);
}
}
}
function drawPetal2() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x-5,y,7,7);
}
}
}
function drawPetal3() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x,y+5,7,7);
}
}
}
function drawPetal4() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x,y-5,7,7);
}
}
}
function drawMiddle() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255);
rectMode(CENTER);
rect(x,y,4,4);
}
}
}
function drawSquare() {
for (var y = 0; y < height + SIZE; y += 50) {
for (var x = 0; x < width + SIZE; x += 50) {
fill(178);
rectMode(CENTER);
rect(x,y,SIZE,height);
}
}
}
For my design, I wanted something simple and to the point. So as I was looking for inspiration, I noticed a lot of wall designs with stripes and such. To add a bit more, I added in flowers into the design as well.
]]>
function setup() {
createCanvas(480, 480);
noLoop();
}
function draw() {
background(22, 79, 119);
noStroke();
//rain
for (var y = 0; y < 480; y += 5){
for (var x = 0; x < 480; x += 5){
fill(30, 190, 177);
ellipse(x, y, 1, 1);
}
}
for (var x = 0; x < 480; x += 96){
for (var y = 0; y< 480; y+= 96){
push();
translate(x,y);
drawTile();
pop();
}
}
}
function drawTile(){
//umbrella
fill(60, 56, 68);
quad(18, 66, 42, 34, 45, 35, 21, 67);
rect(18, 66, 7, 3, 20);
fill(151, 17, 55);
triangle(24, 30, 60, 12, 36, 36);
fill(151, 59, 86);
triangle(36, 36, 60, 12, 48, 51);
fill(151, 17, 55);
triangle(48, 51, 60, 12, 54, 54);
fill(243, 207, 118);
triangle(60, 10, 64, 9, 63, 13);
triangle(60, 10, 57, 12, 55, 8);
triangle(58, 10, 55, 16, 63, 13);
triangle(59, 14, 66, 16, 63, 12);
fill(108, 13, 40);
ellipse(60, 12, 3.5);
}I wanted to make a cute wallpaper with umbrellas to signify my deep seated hope that maybe Pittsburgh will start cooling down for Fall and stop cooking us alive at 80 – 90 degrees. Let the rain fall.
Coding the loop was pretty simple, coding the shapes is still the most finicky part. However, using graph paper to sketch out things first helps.
//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-05
function setup() {
createCanvas(500, 500);
noLoop();
}
function draw() {
background(254,218,0);
noStroke();
for (var x = 0; x <= 500; x += 50){
for (var y=0;y<=500;y+=50){
fill(0);
ellipse(x,y,2,4);
}
}
//yellow background with black seed grid (spacing 50,50)
for (var x = 0; x < 500; x += 200){
for (var y = 0; y< 500; y+= 100){
push();
translate(x,y);
drawTile();
pop();
}
}
//half watermellon concave spacing 200
for (var x = 100; x < 500; x += 200){
for (var y = 0; y< 500; y+= 100){
push();
translate(x,y);
drawTile2();
pop();
}
}
//eaten half watermellon convex spacing 200
}
function drawTile(){
fill(2,130,115)
arc(50,50,70,70,0,PI,CHORD);
fill(255);
arc(50,50,60,60,0,PI,CHORD);
fill(255,64,108);
arc(50,50,50,50,0,PI,CHORD);
fill(0);
ellipse(60,60,3,6);
ellipse(40,65,3,6);
ellipse(45,55,3,6);
}
//half watermellon tile
function drawTile2(){
fill(2,130,115)
arc(50,70,70,70,PI,0,CHORD);
fill(255);
arc(50,70,60,60,PI,0,CHORD);
fill(255,64,108);
arc(50,70,50,50,PI,0,CHORD);
fill(0);
ellipse(60,65,3,6);
ellipse(40,55,3,6);
ellipse(45,65,3,6);
fill(254,218,0);
ellipse(65,70,20,20);
ellipse(55,70,15,15);
}
//helf watermeelon with bite tile
For this project, I started with two different types of tile, one with half watermelon and the other with eaten watermelon. And I created pattern with two tiles with yellow background with seed pattern.
//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-05
function setup() {
createCanvas(590, 390);
noStroke();
}
function draw() {
background(224, 206, 163);
drawGrid();
noLoop();
}
function drawGrid() {
//ears
for (var y = 50; y < height + 50; y += 100) {
for (var x = 50; x < width + 50; x += 100) {
var r = map(y, 0, 400, 100, 200);
var g = map(x, 0, 600, 200, 100);
strokeWeight(5);
stroke(r, g, 8);
fill(224, 206, 163);
//left ear
triangle(x-30, y, x-40, y-45, x-10, y-20);
//right ear
triangle(x+10, y, x+20, y-45, x-10, y-20);
}
}
//drop shadow
for (var y = 50; y < height + 50; y += 100) {
for (var x = 50; x < width + 50; x += 100) {
//gradates color using mapping
var r = map(y, 0, 400, 200, 100);
var g = map(x, 0, 600, 200, 100);
noStroke();
fill(r, g, 200);
ellipse(x, y, 70, 70);
}
}
//face
for (var y = 50; y < height + 50; y += 100) {
for (var x = 50; x < width + 50; x += 100) {
var r = map(y, 0, 400, 100, 200);
var g = map(x, 0, 600, 200, 100);
fill(r, g, 8);
ellipse(x-10, y-10, 70, 70);
}
}
//left eye
for (var y = 50; y < height + 50; y += 100) {
for (var x = 50; x < width + 50; x += 100) {
var r = map(y, 0, 400, 100, 200);
var g = map(x, 0, 600, 100, 200);
fill(0);
ellipse(x-20, y-10, 10, 10);
//pupil
fill(255);
ellipse(x-21, y-12, 2, 2);
//right eye
fill(0);
ellipse(x, y-10, 10, 10);
//pupil
fill(255);
ellipse(x-1, y-12, 2, 2);
}
}
//nose
for (var y = 50; y < height + 50; y += 100) {
for (var x = 50; x < width + 50; x += 100) {
fill(0);
arc(x-10, y, 5, 5, 0, PI, PIE);
}
}
}
This project was kind of fun for me but not really because I dont really enjoy making pattern-based work, but it got me even more familiar with loops which I still seem to be struggling with.
]]>//Fon Euchukanonchai
//15-104 SECTION A
//keuchuka@andrew.cmu.edu
function setup() {
createCanvas(480, 480);
background(255);
var angle1 = 0;
var angle2 = 2;
// setting up for loops for x and y values
for (var y = 0; y < 5; y++) {
for (var x = 0; x < 6; x++) {
// if the row is even then angle of arc, the circle poxition changes
if (x % 2 == 0){
angle1 = 3;
angle2 = 5;
pop=60
arcStroke=(50);
circleX = -30
// conditions if row is odd
} else {
angle1 = 0;
angle2 = 2;
arcStroke=(0);
circleX =0
}
// array of arcs
stroke(255, arcStroke, 255);
strokeWeight(5);
noFill();
arc(90+x*60, 50+ y*120, 80, 80, angle1, angle2);
// array of circles with gradient
var circstrokeMap = map(x, pop+90+x*105, width, 230, 255);
stroke(255, circstrokeMap, 0);
strokeWeight(4);
ellipse(x*90+190, y*120+circleX+30, 50, 50);
// array of rectangles with gradient
var rectstrokeMap = map(x, x*100+240, width, 220, 230);
strokeWeight(6);
stroke(0, rectstrokeMap, 255);
rect(x*100+240, y*94+80, 50, 30, 3);
}
}
noLoop();
}
function draw() {
// draw is not called due to noLoop() in setup()
}
I wanted to experiment with how different arrays of shapes interacting with each other would look with different colors and gradients in a minimal setting.
]]>// Robert Managad
// Section E
// rmanagad@andrew.cmu.edu
// Project-05-Wallpaper
//colors
var petalGR = 47;
petalGG = 168;
petalGB = 144;
var petalRR = 239;
petalRG = 119;
petalRB = 99;
var petalXL = 15; // left petal X-co
petalYLR = 21.5; // left petal Y-Co; right petal Y-Co
petalXM = 21.5; // middle petals X-Co
petalYMT = 15.5; // top middle petal Y-co
petalYMB = 27.5; // bottom middle petal Y-co
petalXR = 27; // right petal X-co
//size of petals
var petalW = 4.6
var petalH = 12.3
var spacingX = 30; // x-displacement between row elements
spacingY = 30; // y-displacement between row elements
function setup() {
createCanvas(300, 300);
background(252, 241, 235);
noLoop();
}
function draw() {
for (var y = 0; y < 12; y++) { // 12 iterations of rows
for (var x = 0; x < 12; x++) { // 12 iterations of columns
if (y % 2 == 0 & x % 2 == 0) { // only the even rows of this variant are drawn
var Lpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
var Tpy = (petalYMT + y * spacingY) * (sqrt(3)/2);
var Bpy = (petalYMB + y * spacingY) * (sqrt(3)/2);
var Rpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
var Lpx = (petalXL + x * spacingX) - 5;
var Tpx = (petalXM + x * spacingX) - 5;
var Bpx = (petalXM + x * spacingX) - 5;
var Rpx = (petalXR + x * spacingX) - 5;
var petalRR = 239;
var petalRG = 119;
var petalRB = 99;
}
else if (y % 2 == 1 & x % 2 == 1) { // only the odd rows of this variant are drawn
var Lpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
var Tpy = ((petalYMT + y * spacingY) * (sqrt(3)/2));
var Bpy = ((petalYMB + y * spacingY) * (sqrt(3)/2));
var Rpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
var Lpx = ((petalXL + x * spacingX) - 5);
var Tpx = ((petalXM + x * spacingX) - 5);
var Bpx = ((petalXM + x * spacingX) - 5);
var Rpx = ((petalXR + x * spacingX) - 5);
var petalRR = 47;
var petalRG = 168;
var petalRB = 144;
}
noStroke();
fill(petalRR, petalRG, petalRB);
ellipse(Lpx, Lpy, petalH, petalW); //left petal
ellipse(Tpx, Tpy, petalW, petalH); // top petal
ellipse(Bpx, Bpy, petalW, petalH); // bottom petal
ellipse(Rpx, Rpy, petalH, petalW); // right petal
}
}
}
I played with several ideas for my background — from merit badges to patchwork — before settling on my final concept: clover petals. I wanted to explore using nested loops and if/else statements to control where elements would appear, and how they can be controlled to do just that. I used Illustrator to plan out my composition beforehand, in addition to primary sketches.
//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Assigment-05-B
var len = 30;
var d = 5;
var offset = 5;
var spacingX = 140;
var spacingY = 70;
function setup() {
createCanvas(560, 560);
}
function draw() {
background(155);
stroke(255, 220, 205);
noLoop();
noFill();
//forloop for the diamond shape; even number lines are shifted
for (var y = 0; y < 9; y++) {
stroke(212, 211, 201)
if ((y+1) % 2 == 0) {
for (var x = 0; x < 4; x++) {
diamond(x*spacingX+70, y*spacingY);
}
} else {
for (var x = 0; x < 5; x++) {
diamond(x*spacingX, y*spacingY);
}
}
}
//forloop for the curve shape; even number lines are shifted
for (var y = 0; y < 9; y ++)
if ((y+1) % 2 == 0) {
for (var x = 0; x < 5; x ++) {
push();
translate(x*spacingX, y*spacingY);
stroke(255, 215, 188);
symbol(0, 0);
angleMode(DEGREES);
rotate(90);
symbol(0, 0);
rotate(90);
symbol(0, 0);
rotate(90);
symbol(0, 0);
pop();
}
} else {
for (var x = 0; x < 4; x ++) {
push();
translate(x*spacingX+70, y*spacingY);
stroke(255, 215, 188);
symbol(0, 0);
angleMode(DEGREES);
rotate(90);
symbol(0, 0);
rotate(90);
symbol(0, 0);
rotate(90);
symbol(0, 0);
pop();
}
}
}
function symbol (x,y) {
push();
translate(x, y);
strokeWeight(3);
beginShape();
curveVertex(-len-offset*2, -offset);
curveVertex((-len+offset)/2, -offset);
curveVertex((-len+offset)/2, -len+offset*2);
curveVertex(-len+offset*2, -len+offset*2);
curveVertex(-len+offset*2, (-len+offset)/2);
curveVertex(-len, (-len+offset)/2);
curveVertex(-len, -len);
curveVertex(-offset/2, -len);
curveVertex(-offset/2, -offset);
endShape();
pop();
}
function diamond (x, y) {
push();
translate(x, y);
rectMode(CENTER);
strokeWeight(0.5);
line(0, -3*len, 0, 3*len);
line(-3*len, 0, 3*len, 0);
strokeWeight(3);
angleMode(DEGREES);
rotate(45);
quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
rotate(90);
quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
rotate(90);
quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
rotate(90);
quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
pop();
}
For the wallpaper project, I wanted to use two shapes that are iterated alternatively. Modulus was used to call out even number lines to shift them to create the final product. Instead of creating the shape under the for loop, I created a separate function for each shape to simplify code. First the diamond shape laid out the grid for me to work with. Then, I was inspired by traditional Korean shape to create the curve shape. In comparison with the Korean traditional pattern, I made the shape with curveVertex to give a fun element. In emphasizing that, I used toned down color for the background and the diamond shape while adding a pop of color for the curve one.
]]>//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Project-05
function setup(){
createCanvas(480,480); //background sizing
}
function draw(){
background(255);
for(var y = 4; y< height; y+=10){
strokeWeight(2);
stroke(255, 188, 0);
line(0, y, width, y); //background horizontal lines
}
for (var a = 7.5; a<width; a+= 100){
for (var b = 10; b<height; b+= 100){
fill(0, 152, 255, 190); //using transparencies to show overlaps in shapes
noStroke();
rect(a,b,50,50) //creating the blue coloured squares
}
}
for (var s = 16.5; s<width; s+= 100){
for (var t = 19; t<height; t+= 100){
fill(255, 0, 0, 150 );
noStroke();
rect(s,t,50,50) //creating the red coloured squares
}
}
for (var c = 50.5; c<width; c+= 100){
for (var d = 1; d<height; d+= 100){
fill(155, 4, 148, 120);
noStroke();
rect(c,d,25,25) //creating the smaller purple coloured squares
}
}
for (var e = 14.5; e<width; e+= 100){
for (var f = 66; f<height; f+= 100){
fill(0, 255, 230, 120);
noStroke();
ellipse(e,f,25,25) //creating the larger cyan circles
}
}
for (var g = 20.5; g<width; g+= 100){
for (var h = 86; h<height; h+= 100){
fill(0, 255, 0, 120);
noStroke();
ellipse(g,h,10,10) //creating the smaller green circles
}
}
noLoop();
}For this project I wanted to play with the overlapping of colours and shapes and lines to see what new objects were created. To do this I started off with the idea of the sketch you can see but decided to change some elements because the whole wallpaper ended up coming out to be too symmetrical. I played with the alpha levels of all the colours to allow the overlaps between the shapes to create new colours and additional spaces.
