Wanted to create something that reminded me of 1960’s wallpaper in terms of color and style. wallpaper
function setup() {
createCanvas(650, 400);
background(255,255,185);
var tw = 60;
var th = 60;
var oy = 50;
var ox = 50;
var rowCount = 0;
rowCount++;
for (var y = 0; y < 6; y++) {
for (var x = 0; x < 10; x++) {
var py = oy + y * th;
var px = ox + x * tw;
if (y*rowCount%2==0){
fill(64,209,151);
ellipse (px,py,20,20);
fill(255,255,0);
ellipse (px-10,py-10,10,10);
ellipse (px-15,py,10,10);
ellipse (px+15,py,10,10);
ellipse (px+10,py+10,10,10);
}
else {
fill(255);
ellipse(px, py, 20, 20);
}
}
}
noLoop();
}
function draw() {
// draw is not called due to noLoop() in setup()
}I liked the overlapping shapes and the contrast between the colors and the types of shapes used.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<!-- Uncomment the lines below to include extra p5 libraries, or
use template-all or template-all-min:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
-->
<script src="sketch.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//wallpaper
function setup() {
createCanvas(640, 400);
}
function draw (){
for (var x=10; x<width; x+=10) {//creates the overlapping shapes
for (var y=10; y < height; y+=100) {
wallpaper(x,y)
}
}
}
function wallpaper (x,y) {
fill (134, 185, 50)
ellipse (x, y, 50,50)
fill (200,200,255)
rect (x, y, x+5, x+5, 50,50)
}
//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-05-Wallpaper
function setup() {
createCanvas(640,480);
noLoop();
}
function draw(){
background(147,238,255);
//create loops for wallpaper
for (var x = 100; x < width - 50; x = x + 100) {
for (var y = 100; y < height - 50; y = y + 100) {
Wallpaper(x,y);
}
}
}
function Wallpaper(x,y) {
//create center pink ellipse
fill(255,187,245);
ellipse(x,y,25,25);
//create top green triangle
fill(0,255,126);
triangle(x-30,y-25,x,y-50,x+30,y-25);
//create maroon side ellipses
fill(196,41,158);
ellipse(x + 50,y,25,25);
ellipse(x - 50,y,25,25);
//create diagonal ellipses going above the green triangle
fill(0,100,255); //creates blue color
ellipse(x-40,y-25,10,10);
fill(0,100,255);
ellipse(x+40,y-25,10,10);
fill(220); //creates gray color
ellipse(x-35,y-40,5,5);
ellipse(x+35,y-40,5,5);
fill(0);
ellipse(x-38,y-50,2,2);
ellipse(x+38,y-50,2,2);
}
I found this to be a very fun project. I had originally intended to create something more intricate, but I really enjoyed the simplicity of the picture that I sketched below, and so decided to create it instead. I also used the color-experimenting tool that the Week 1 notes linked to and found that I liked how these colors worked together.
function setup() {
createCanvas(600,600);
}
function draw() {
background(51,0,17);
var xOG = 0;
var yOG = 0;
var xBetween = 105;
var yBetween = 90;
var offset = xBetween/2;
for (var y = 0; y < 9; y++){
if(y==2||y==4||y==6||y==8){ //offsets every other two lines up
yOG=yOG-35;
}
if (y%2==0){
for (var x = 0; x < 7; x++){
var py = yOG + y * yBetween;
var px = xOG + x * xBetween;
hexagon(px,py);//call hexagon function
}
}
if (y%2==1){ //offsets every other line to the to the right
for (var x = 0; x < 9; x++){
var py = yOG + y * yBetween;
var px = xOG + x * xBetween+offset;
hexagon(px,py);
}
}
}
var rxOG=-61.7;
var ryOG=70;
var rxBetween=35;
var ryBetween=145;
for (var ry = 0; ry<5; ry++){//draws a series of orange rectangles that covers parts of the hexagon
for(var rx = 0; rx<20; rx++){
var ty = ryOG + ry * ryBetween;
var tx = rxOG + rx * rxBetween;
noStroke();
fill(206,105,16);
if(rx%3==0){
rect(tx,ty,0,0);
}
else{
rect(tx,ty,17.7,45);
}
}
}
var rrxOG=-8.9;
var rryOG=60;
var rrxBetween=105;
var rryBetween=145;
for (var rry = 0; rry<5; rry++){//draws a series of dark maroon rectangles that also covers part of the hexagon
for(var rrx = 0; rrx<10; rrx++){
var tty = rryOG + rry * rryBetween;
var ttx = rrxOG + rrx * rrxBetween;
fill(51,0,17);
rect(ttx,tty,17.7,68);
}
}
}
function hexagon(x,y){ //hexagon function
var r = 30*PI/180;
push();
translate(x,y);
rotate(r);
noStroke();
fill(51,0,17);
polygon(0,0,70,6);//call polygon function
fill(206,105,16);
polygon(0,0,50,6);
fill(51,0,17);
polygon(0,0,30,6);
fill(135,17,58);
polygon(0,0,15,6);
pop();
}
function polygon(x, y, radius, sides) {//can produce polygons with various numbers of sides and various sizes
var angle = TWO_PI / sides;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius;
var sy = y + sin(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}
I was inspired by the imagery of the floor pattern in the movie, “The Shining,” and wanted to recreate it. I learned a lot and this project helped me to reinforce my knowledge of loops.
]]>
//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//project
function setup() {
createCanvas(600, 700);
}
function draw() {
background(240);
//monster
var mx = random(-50,100);//origin x
var my = random(30,100);//origin y
var sy = 200;//y spacing
var sx = 200;//x spacing
for (var y = 0; y<7; y++) {
if (y%2==0) {
for (var x = 0; x<5; x++) {
monster(mx+x*sx, my+y* (sy*sqrt(3)/2));
}
} else {
for (var x = 0; x<5; x++) {
monster(mx+sx/2+x*sx, my+y* (sy*sqrt(3)/2));
}
}
}
noLoop();
//duck
var dx = random(0,50);//origin x
var dy = random(30,50);//origin y
var sy = 150;//y spacing
var sx = 250;//x spacing
for (var y = 0; y<7; y++) {
if (y%2==0) {
for (var x = 0; x<5; x++) {
duck(dx+sx/2+x*sx, dy+y* (sy*sqrt(3)/2));
}
} else {
for (var x = 0; x<5; x++) {
duck(dx+x*sx, dy+y* (sy*sqrt(3)/2));
}
}
}
noLoop();
}
function monster(mx, my) {//draw monster
push();
translate(mx, my);
stroke(137,78,115);
strokeWeight(5);
line(25, -25, 25, 0);//ear1
line(45, -25, 35, 0);//ear2
line(30, 30, 85, 40);//tail
stroke(244,179,220);
strokeWeight(30);
line(10, 0, 50, 0);//monster head
strokeWeight(5);
line(35, 40, 35, 60);//foot1
line(45, 40, 45, 60);//foot2
line(55, 40, 55, 60);//foot3
line(65, 40, 65, 60);//foot4
strokeWeight(50);
line(50, 10, 50, 30);//monster body
fill(255);
noStroke();
ellipse(22, 0, 15, 15);//left eye
ellipse(42, 0, 15, 15);//right eye
fill(0);
noStroke();
ellipse(20, 0, 5, 5);//eyeball1
ellipse(40, 0, 5, 5);//eyeball2
pop();
}
function duck(dx, dy) {//draw duck
push();
translate(dx, dy);
stroke(255, 183, 0);
strokeWeight(5);
line(-15, 60, -15, 85);//foot1
line(-5, 60, -5, 85);//foot2
stroke(154, 231, 217);
strokeWeight(40);
line(0, 0, 0, 30);//neck
strokeWeight(40);
line(-30, 40, 0, 40);//body
strokeWeight(10);
line(-55, 40, -30, 40);//tail
stroke(255, 183, 0);
strokeWeight(7);
line(10, 7, 25, 7);//mouse
line(10, 14, 25, 14);//mouse
fill(255);
noStroke();
ellipse(0, 0, 10, 10);//eye
fill(0);
noStroke();
ellipse(1, 0, 5, 5);
pop();
}
For this wallpaper, I used ‘random’ command to generate a little bit different patterns each time it is opened, and I tried to make the grid hexagon to add some interest to the grid.
I was inspired by Lilly Pulitzer’s famous prints for this project. I spent a few hours looking through her prints and identifying the key aspects in them. They all have a beach theme, use bright colors, and are relatively simple in the patterns. To create the code, I made functions for each of the different elements and then called them within a for loop in the draw function. The only exception was the wave function which I called in the setup so that it would act more like a background than an element in the foreground.
Preliminary Sketch:
//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-05
var spacing = 100;
function setup() {
createCanvas(800,600);
background(150,225,249);
wave(0,100);
wave(0,300);
wave(0,450);
}
function draw() {
for (var i = 0; i<=8; i++){
star(i+ i*spacing+50,190);
palmTree(i+ i*spacing-50,40);
star(i+ i*spacing+50,490);
beachBall(i + i*spacing+10,360);
}
}
function palmTree(x,y){
push();
translate(x,y);
fill(250,9,162);
stroke(135,0,36);
strokeWeight(0);
rect(x,y,25,80);
fill(229,77,174);
strokeWeight(12);
line(x,y-12,x-20,y-16); //first half of lower left palmleaf
line(x-20,y-16,x-45,y); //second half of lower left palmleaf
line(x+25,y-12,x+45,y-16); //first half of lower right palmleaf
line(x+45,y-16,x+70,y); //second half of lower right palmleaf
strokeWeight(0);
ellipse(x+17,y-8,20,20); //leftmost coconut
ellipse(x+25,y+8,20,20); //lowermost coconut
ellipse(x+30,y-5,20,20); //rightmost coconut
strokeWeight(12);
line(x,y-32,x-20,y-36); //first half of upper left palmleaf
line(x-20,y-36,x-45,y-25); //second half of upper left palmleaf
line(x+25,y-32,x+45,y-36); //first half of upper right palmleaf
line(x+45,y-36,x+70,y-25); //second half of upper right palmleaf
pop();
}
function star(x,y){
push();
strokeWeight(0);
fill("Yellow");
ellipse(x,y,20,50); //x = 150, y = 100
push();
translate(x+10,y);
rotate(45);
fill("Yellow");
ellipse(20,0,20,50);
pop();
push();
translate(x+20,y+40);
rotate(15);
fill("Yellow");
ellipse(0,0,20,50);
pop();
push();
translate(x,y+43);
rotate(0);
fill("Yellow");
ellipse(0,0,20,50);
pop();
push();
translate(x-30,y+33);
rotate(225);
fill("Yellow");
ellipse(20,0,20,50);
pop();
push();
translate(x-12,y+35);
rotate(180);
fill("Yellow");
ellipse(0,0,20,50);
pop();
pop();
}
function beachBall(x,y){
fill(253,55,85);
noStroke();
ellipse(x,y,60,60);
}
function wave(x,y){
for (var x = 0; x < width; x = x + 1) {
stroke(11,11,249);
strokeWeight(5);
point(x, y - 50 * sin(radians(x)));
stroke(8,70,117);
strokeWeight(5);
point(x, y - 50 * cos(radians(x)));
}
}
]]>
// Liu Xiangqi xiangqil@andrew.cmu.edu Section A Project-05
function setup() {
createCanvas(600, 600);
background(0);
noLoop();
}
function draw() {
var y = 0;
var x = 0;
for (y = 0; y + 50 < height - 50; y += 100){
for (x = 0; x + 50 < width - 50; x += 100){
//draw the roses
fill(255);
ellipse(50+x, 50+y, 10, 10);
stroke(255, 77, 77);
strokeWeight(6);
noFill();
for(var i = 1; i < 11; i ++){
if (i%4 == 1) {
arc(50+x, 50+y, 4*i + 12.5, 4*i + 12.5, 0, HALF_PI);
}else if (i%4 == 2) {
arc(50+x, 50+y, 4*i + 20, 4*i + 20, HALF_PI, PI);
}else if (i%4 == 3) {
arc(50+x, 50+y, 4*i + 27.5, 4*i + 27.5, PI, PI+HALF_PI);
}else{
noFill();
arc(57+x, 45+y, 4*i + 5, 4*i + 5, PI+HALF_PI, TWO_PI+QUARTER_PI);
}
}
//draw the leaves
fill(204, 255, 153);
noStroke();
beginShape();
vertex(50+x, 80+y);
curveVertex(50+x, 80+y);
curveVertex(80+x, 100+y);
curveVertex(90+x, 120+y);
curveVertex(80+x, 110+y);
curveVertex(50+x, 80+y);
vertex(50+x, 80+y);
endShape();
}
}
}
//Mercedes Reys
//Section C
//mreyes@andrew.cmu.edu
//Project-03
// back pattern variables
var cH1 = 40; // larger circle height
var cW1 = 20; // larger circle width
var cX = 0; // circles x cordinate
var cY = 0; // circles y cordinate
var cH2 = cH1/2; // smaller circle height
var cW2 = cW1/2; // smaller circle height
var spaceingX = cW1*2; // pattern spacing
var spaceingY = cH1; // pattern spacing
// front pattern variables
function setup() {
createCanvas(700, 700);
background(255, 204, 204);
}
function draw() {
// back pattern loop
for (var x = 0; x < height; x += 1){
for (var y = 0; y < width ; y += 1){
backPattern(x,y);
}
}
//front pattern loop
for (var x = 0; x < height; x += 1){
for (var y = 0; y < width ; y += 1){
frontPattern(x,y);
//ghosty effect
push()
translate(5,10)
frontPattern(x,y);
pop()
}
}
noLoop()//draw once
}
function backPattern(x,y){ // circle patern
cX = x * spaceingX; // x spacing between circles
cY = y * spaceingY; // y spacing between circles
//outer circle
strokeWeight(3);
stroke(255, 128, 128);
fill(255, 204, 204);
ellipse(cX,cY,cW1,cH1);
// inner circle
fill(255, 128, 128);
ellipse(cX,cY,cW2,cH2);
noLoop();
}
function frontPattern(x,y){
spaceingX = 200
spaceingY = 200
x = x * spaceingX // x spacing between triangles
y = y * spaceingY // y spacing between
noStroke()
//larger tiangle
fill(128, 191, 255)
triangle(60+x, 160+y, 60+x, 40+y, 160+x, 80+y);
//smaller triangles
push()
translate(10,20)
fill(255,200)
triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
translate(10,20)
fill(255,200)
triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
pop()
noLoop()// draw once
}
Inspired by my old shower curtain, I wanted to combine two patterns that had two separate own there own but, together would create a harmonious rhythm. I was hoping more interesting things would happen with layering the transparent blue over the pink, but the patterns just kinda got confusing so I ended up having the blue triangles solid.
Looks pretty close to the sketch honestly (minus the rat).
]]>//Rhea Nayyar
//rnayyar@andrew.cmu.edu
//Section C
//Project 05-C; Wall Paper
function setup() {
createCanvas(800, 800);
noStroke();
}
function draw() {
background(204, 157, 204);
for (var y = 0; y < height+20; y += 80) {
for (var x = 0; x < width; x += 205) {
fill('SaddleBrown'); //Longer Rows of Paw Prints
ellipse(x+20, y, 10, 15); //Toe 1
ellipse(x+30, y-13, 10, 15); //Toe 2
ellipse(x+45, y-15, 10, 15); //Toe 3
ellipse(x+55, y, 10, 15); //Toe 4
ellipse(x+30,y+17,20,20); //Pad part 1
ellipse(x+45,y+17,20,20); //Pad part 2
ellipse(x+38,y+12,30,15); //Pad part 3 (connects two pads with oval)
}
}
for (var y = 50; y < height-20; y += 100) {
for (var x = 65; x < width; x += 205) {
fill('SaddleBrown'); //Shorter Rows of Paw Prints
ellipse(x+20, y, 10, 15);
ellipse(x+30, y-15, 10, 15);
ellipse(x+45, y-13, 10, 15);
ellipse(x+55, y, 10, 15);
ellipse(x+30,y+17,20,20);
ellipse(x+45,y+17,20,20);
ellipse(x+38,y+12,30,15);
}
}
for (var y = 20; y < height+45; y += 85) {
for (var x = 65; x < width; x += 205) { //Dog bones
push();
rotate(radians(2));
fill('PapayaWhip');
rect(x+95,y-5,45,10);
ellipse(x+90,y-4,15,15);
ellipse(x+91,y+6,15,15);
ellipse(x+140,y-4,15,15);
ellipse(x+141,y+6,15,15);
pop();
}
}
noLoop();
}I love dogs and I miss mine dearly. I find their paw prints to be incredibly precious <3
I made a nifty graphic to commemorate the canine existence!
//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
// Project 5
var flag = false;
function setup() {
createCanvas(600, 600); //setup canvas
background('black');
}
function draw() {
for (var y = 50; y<=550; y+=100){
//iterate loop for rows until hits botton
if (flag == false){
//use a boolean to alternate between two sets of shape
for (var x = 0; x<522; x+=30){ //iterate set A for columns
if (x==0){
//draw a PAC MAN at each beginning of the iteration
fill('yellow');
noStroke();
arc(50, y, 50, 50, QUARTER_PI*0.7, -QUARTER_PI*0.7);
}
noStroke();
fill(random(255), random(255),random(255)); //random color of the dots
ellipse(x+80, y, 8); //draw the PAC-dots
}
flag = true;
//change the state of boolean
}
else{
for (var x = 600; x>78; x-=30){
//to iterate the another set of shape
if (x==600){
//draw a PAC MAN at each beginning of the iteration
fill('yellow');
noStroke();
arc(550, y, 50, 50, PI + QUARTER_PI*0.7, PI -QUARTER_PI*0.7);
}
noStroke();
fill(random(255), random(255),random(255)); //random color of the dots
ellipse(x-80, y, 8); //draw the PAC-dots
}
flag=false;
//change the state of boolean
}
}
noLoop();//Stop all loops, make static wallpaper
}
At first, I wanted random PAC MANs to appear in every row. But later on I decided to make it look more dynamic by putting in the beads along with the Pac Man to make the wallpaper more colorful. This would be a cool wall paper for a kid’s bedroom. 🙂