Forked from carlybrown18/TextileDesignProjectCarlyBrown.js
Created
February 27, 2019 17:36
-
-
Save lizzybrooks/896239fdd92accfee81694d3687033a2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Title: Marching Elephants | |
Imagined, Designed, and Programmed by: Carly Brown | |
Date: October 16, 2017 | |
Description: Textile Design Project | |
*/ | |
function setup() { | |
createCanvas(10000, 10000); | |
pattern(10000, 10000); //establishing the pattern underneath the tesselation of elephants and squares | |
for (var row = 0; row <= 6; row++) { //calling 7 rows of elephants and squares | |
push(); //save state of canvas | |
if (row%2==0){ | |
translate(255, 0); //offset of even rows by 255 in the x-direction | |
} | |
for (var col = 0; col <= 4; col++) { //calling 5 columns of elephants and squares | |
//calling composite of elephant outline | |
patternedShape(); | |
//white squares that hide the pattern between elephants | |
noStroke(); | |
fill(255, 255, 255); | |
rect(105, -25, 255, 255); | |
translate(510, 0); //translate in X (left-right) | |
} | |
pop(); //restore state of canvas before the y translations | |
translate(0, 255); //translate 255 in the Y-direction | |
} | |
} | |
function draw() { | |
} | |
//masks part of pattern that are not within the shape | |
function shapeCutOut() { | |
//creates white square around outline of elephant | |
fill(255); | |
noStroke(); | |
beginShape(); | |
vertex(100, 225); | |
vertex(100, 490); | |
vertex(365, 490); | |
vertex(365, 225); | |
vertex(110, 225); | |
//clockwise drawing of elephant | |
beginContour(); | |
//ear | |
vertex(175, 255); | |
bezierVertex(205, 235, 235, 265, 215, 280); | |
//curve on back, down to back leg | |
vertex(215, 280); | |
bezierVertex(235, 315, 315, 250, 335, 335); | |
vertex(335, 335); | |
vertex(345, 460); | |
//back leg | |
bezierVertex(345, 475, 340, 470, 330, 472); | |
vertex(285, 470); | |
bezierVertex(275, 465, 275, 460, 275, 455); | |
vertex(270, 390); | |
vertex(245, 390); | |
//front leg | |
vertex(235, 460); | |
bezierVertex(235, 475, 230, 465, 220, 472); | |
vertex(190, 470); | |
bezierVertex(180, 465, 180, 460, 180, 455); | |
bezierVertex(185, 455, 170, 380, 175, 365); | |
vertex(155, 365) | |
//trunk | |
bezierVertex(110, 455, 155, 450, 160, 410); | |
vertex(170, 415); | |
bezierVertex(175, 485, 80, 470, 130, 330); | |
//head | |
bezierVertex(110, 255, 170, 250, 175, 255); | |
endContour(); | |
endShape(); | |
fill(0); | |
ellipse(150, 285, 5, 10) | |
} | |
//identical function to above, without "counter" in order to outline elephant | |
function outline() { | |
noFill(); | |
stroke(0); | |
//clockwise drawing of elephant | |
beginShape(); | |
//ear | |
vertex(175, 255); | |
bezierVertex(205, 235, 235, 265, 215, 280); | |
//curve on back, down to back leg | |
vertex(215, 280); | |
bezierVertex(235, 315, 315, 250, 335, 335); | |
vertex(335, 335); | |
vertex(345, 460); | |
//back leg | |
bezierVertex(345, 475, 340, 470, 330, 472); | |
vertex(285, 470); | |
bezierVertex(275, 465, 275, 460, 275, 455); | |
vertex(270, 390); | |
vertex(245, 390); | |
//front leg | |
vertex(235, 460); | |
bezierVertex(235, 475, 230, 465, 220, 472); | |
vertex(190, 470); | |
bezierVertex(180, 465, 180, 460, 180, 455); | |
bezierVertex(185, 455, 170, 380, 175, 365); | |
vertex(155, 365) | |
//trunk | |
bezierVertex(110, 455, 155, 450, 160, 410); | |
vertex(170, 415); | |
bezierVertex(175, 485, 80, 470, 130, 330); | |
//head | |
bezierVertex(110, 255, 170, 250, 175, 255); | |
//eye | |
endShape(); | |
fill(0); | |
ellipse(150, 285, 5, 10) | |
} | |
//composite of both the pattern masking and outline drawing functions | |
function patternedShape() { | |
shapeCutOut(); | |
outline(); | |
} | |
var color3=[191, 87, 87] | |
function pattern(w, h) { | |
scale(.5); | |
push(); | |
for (var row = 0; row <= h/80; row++) { | |
push(); //save state of canvas | |
if (row%2==0){ | |
translate(75, 0); | |
} | |
for (var col = 0; col <= w/80; col++) { //calling 6 columns | |
//individual pattern being translated | |
fill(color3); | |
quad(100, 80, 140, 40, 180, 80, 140, 120); | |
noFill(); | |
strokeWeight(2); | |
quad(89, 80, 140, 29, 191, 80, 140, 131); | |
translate(150, 0); //translate in X direction | |
} | |
pop(); //restore state of canvas before the x translations | |
translate(0, 50); //translate in Y direction | |
} | |
pop(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment