Medien Wiki - User contributions [en]

IFD:All Hail The Pixels/ResearchPixelProjects

2014-11-18T19:10:33Z

Carlosaoa: /* Hain-Ruey Chan */

== Introduction Presentation ==

* MECHANICAL MIRRORS by Daniel Rozin

* WIND DRIVEN FACADES by Ned Kahn Studios

* 3D DISPLAY CUBE by James Clar

* BLINKENLIGHTS by CCC

* BIX SPOTS by REALITIES:UNITED

* KINETIC SCULPTURES by ART+COM

* BIT.FALL by Julius Popp

* FERROFLUID SCULPTURES by Sachiko Kodama

* HYPERMATRIX by Jonpasang

* CLOUD by Troika

* PIXEL TRACK by Berg

* PAPER PIXELS by Aram Bartholl

* LEGO PIXELS - FELL IN LOVE WITH A GIRL by Michel Gondry

* LUMINOUS SCULPTURE by FELD

== Nielek ==

* SIX-FORTY BY FOUR-EIGHTY (Zigelbaum+Coehlo) [http://fluid.media.mit.edu/projects/six-forty-four-eighty]

* PIXELBOTS (Disney Research) [http://www.disneyresearch.com/project/pixelbots/]

* FLYFIRE (MIT Senseable City Lab) [http://senseable.mit.edu/flyfire/]

* SPAXELS (Ars Electronica Future Lab) [http://www.aec.at/aeblog/en/2013/12/17/lichtmalereien-mit-spaxels/]

==Carina Weiß==

* Pixels, Carlton Melbourne (Studio 505) [http://www.studio505.com.au/work/project/pixel/8]

* Pixel Surfaces (Giles Miller) [http://gilesmiller.com/]

* Pixel, Pomp und Prosperität (Za Bor) [http://www.designlines.de/projekte/Pixel,-Pomp-und-Prosperitt_10316105.html]

==Maria Estel==

* Museum Brandhorst, München (Sauerbruch Hutto) [http://www.museum-brandhorst.de/de/gebaeude/architektur.html] [http://www.muenchen.de/sehenswuerdigkeiten/orte/119302.html#/]

* Mäandernde Pixel, Oslo (MVRDV) [http://www.baunetz.de/meldungen/Meldungen-Buerokomplex_von_MVRDV_in_Oslo_3035381.html]

* Twilight, Englang/Germany (Helen Evans and Heiko Hansen) [http://www.electrohype.org/electrohype2002/artist/evans_hansen.html]

== Jorgelina ==

* PLAY THE HOUSE by Håkan Lidbo [http://playthehouse.com/]

== Afroditi ==

* SMSlingshot by VR/Urban (pixelated splat) [http://www.vrurban.org/smslingshot.html]

* LED Throwies by Graffiti Research Lab [http://www.graffitiresearchlab.com/blog/projects/led-throwies/#video] [https://www.youtube.com/watch?v=TrnLF04qmsM]

* Prototyping Urban Interfaces by Marius Hoggenmüller (interactive firework) [http://vimeo.com/81270931]

* Van Gogh-Roosegaarde cycle path by Studio Roosegaarde and Heijmans [http://www.heijmans.nl/en/] [https://www.studioroosegaarde.net/project/van-gogh-bicycle-path/]

== Isil Onursal ==

* Puzzle Facade by Javier LLoret [http://interactive.javierlloret.com/puzzlefacade/]

* BILDER mEINER AUSSTELLUNG by Christoph Cech [http://www.eye-candy.tv/2011/05/26/bilder-meiner-ausstellung/]

* LA VITRINE by Moment Factory [http://www.momentfactory.com/en/project/street/La_Vitrine/_/_/_]

* Pixels film by Patrick Jean [http://patrick-jean.allo-infopc.com/archives/portfolio/pixels-7]

== Dhora Tego ==

* Kinetic Sculpture - Fisher Technical Services, Inc.[https://www.youtube.com/watch?v=5tCxMLjOCgc]

* EXPO2012: GS Caltex Pavilion[https://www.youtube.com/watch?v=uPqAhWRiUf0]

* GreenPix - Dynamic Architecture[https://www.youtube.com/watch?v=J_tjLUUW4So]

== Dima Meiqari ==

* Spanish Pavilion Expo AICHI 2005
[http://europaconcorsi.com/projects/272168-FOA-Alejandro-Zaera-Polo-Farshid-Moussavi-Spanish-Pavilion]

* Ravensbourne College by Foreign Office Architects
[http://www.dezeen.com/2010/09/13/ravensbourne-college-by-foreign-office-architects/]

* Contemporary Art Center – FRAC / Kengo Kuma & Associates
[http://www.archdaily.com/425028/contemporary-art-center-frac-kengo-kuma-and-associates/]

== Fernando Millan ==
* PIXEL DROP INSTALLATION SAINT ETIENNE
[https://www.youtube.com/watch?v=2Q-biRXMNoU]
[http://www.dts-lighting.com/media/files/4d01684ee8_418_0517m056.gb.pdf]

* Pixel Mapping Montreal 2011
[https://www.youtube.com/watch?v=lf5WYqzhgYA]

==Hain-Ruey Chan==
* Trash Mirror (2001) by Daniel Rozin [http://www.smoothware.com/danny/newtrashmirror.html]

* "Deadline" Post-it Stop Motion Animation (2009) by Bang-Yao Liu [http://bangyaoliu.com/projects/deadline/]

*LINZ 2012 / KLANGWOLKE by Spaxels [http://www.aec.at/spaxels/shows/linz-klangwolke-2012/]

*Dynamic Media Façade renews Confederation of Danish Industry in the Heart of Copenhagen [https://www.youtube.com/watch?v=v-MHAISEjw4]

==Carlos Abraham Ornelas==

* Make Out (2009) Rafael Lozano-Hemmer [http://www.youtube.com/watch?v=C994iLzY52U]

* Urban Darkness [http://dariacasciani.net/2012/05/15/urban-darkness-reflections-on-metal-pixels-mosaics-and-microsurfaces/]

* The Pixel Pavilion, by Mass Studies [http://www.domusweb.it/en/architecture/2010/05/14/the-pixel-pavilion-by-mass-studies.html]

File:Pattern.Ornelas.03a.jpg

2014-11-13T19:49:29Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.02a.jpg

2014-11-13T19:48:57Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.01a.jpg

2014-11-13T19:48:25Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

IFD:All Hail The Pixels/Patterns

2014-11-13T19:46:01Z

Carlosaoa: /* Carlos Abraham Ornelas */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

==EMIR GENC==

* Pattern Hexagon

[[File:Hexagonpattern_emir genc.png]]

void setup(){

size(500,500);
background(255);

}

void draw(){

for(int x=0; x<500; x+=60+60*sin(PI/6)){
for(int y=0; y<500; y+=60*cos(PI/6)){

drawHexagon(x, y, 30);
drawHexagon(x+30+30*sin(PI/6), y+30*cos(PI/6), 30);

}
}
}

void drawHexagon(float x, float y, float radius) {
pushMatrix();
translate(x, y);
beginShape();
for (int i = 0; i < 6; i++) {
pushMatrix();
float angle = PI*i/3;
vertex(cos(angle) * radius, sin(angle) * radius);
popMatrix();
}
endShape(CLOSE);
popMatrix();
}

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Carlos Abraham Ornelas ==

[[File:Pattern.Ornelas.01a.jpg]]

[[File:Pattern.Ornelas.02a.jpg]]

[[File:Pattern.Ornelas.03a.jpg]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

IFD:All Hail The Pixels/Patterns

2014-11-13T19:42:53Z

Carlosaoa: /* Carlos Abraham Ornelas */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

==EMIR GENC==

* Pattern Hexagon

[[File:Hexagonpattern_emir genc.png]]

void setup(){

size(500,500);
background(255);

}

void draw(){

for(int x=0; x<500; x+=60+60*sin(PI/6)){
for(int y=0; y<500; y+=60*cos(PI/6)){

drawHexagon(x, y, 30);
drawHexagon(x+30+30*sin(PI/6), y+30*cos(PI/6), 30);

}
}
}

void drawHexagon(float x, float y, float radius) {
pushMatrix();
translate(x, y);
beginShape();
for (int i = 0; i < 6; i++) {
pushMatrix();
float angle = PI*i/3;
vertex(cos(angle) * radius, sin(angle) * radius);
popMatrix();
}
endShape(CLOSE);
popMatrix();
}

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Carlos Abraham Ornelas ==

[[File:Pattern.Ornelas.01.jpg]]

[[File:Pattern.Ornelas.02.jpg]]

[[File:Pattern.Ornelas.03.jpg]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

IFD:All Hail The Pixels/Patterns

2014-11-13T19:42:09Z

Carlosaoa: /* Carlos Abraham Ornelas */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

==EMIR GENC==

* Pattern Hexagon

[[File:Hexagonpattern_emir genc.png]]

void setup(){

size(500,500);
background(255);

}

void draw(){

for(int x=0; x<500; x+=60+60*sin(PI/6)){
for(int y=0; y<500; y+=60*cos(PI/6)){

drawHexagon(x, y, 30);
drawHexagon(x+30+30*sin(PI/6), y+30*cos(PI/6), 30);

}
}
}

void drawHexagon(float x, float y, float radius) {
pushMatrix();
translate(x, y);
beginShape();
for (int i = 0; i < 6; i++) {
pushMatrix();
float angle = PI*i/3;
vertex(cos(angle) * radius, sin(angle) * radius);
popMatrix();
}
endShape(CLOSE);
popMatrix();
}

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Carlos Abraham Ornelas ==

[[File:Pattern.Ornelas.]]

[[File:Pattern.Ornelas]]

[[File:Pattern.Ornelas.0]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

File:Pattern.Ornelas.03.jpg

2014-11-13T19:40:55Z

Carlosaoa: uploaded a new version of "File:Pattern.Ornelas.03.jpg"

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.02.jpg

2014-11-13T19:40:35Z

Carlosaoa: uploaded a new version of "File:Pattern.Ornelas.02.jpg"

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.01.jpg

2014-11-13T19:39:37Z

Carlosaoa: uploaded a new version of "File:Pattern.Ornelas.01.jpg"

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.01.jpg

2014-11-13T19:38:04Z

Carlosaoa: uploaded a new version of "File:Pattern.Ornelas.01.jpg": Reverted to version as of 11:01, 11 November 2014

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.01.jpg

2014-11-13T19:37:37Z

Carlosaoa: uploaded a new version of "File:Pattern.Ornelas.01.jpg"

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

IFD:All Hail The Pixels/Patterns

2014-11-12T20:13:03Z

Carlosaoa: /* Xianzhi Zhang */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Carlos Abraham Ornelas ==

[[File:Pattern.Ornelas.01.jpg]]

[[File:Pattern.Ornelas.02.jpg]]

[[File:Pattern.Ornelas.03.jpg]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

IFD:All Hail The Pixels/Patterns

2014-11-11T11:09:38Z

Carlosaoa: /* ASSIGNMENT 1 */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

IFD:All Hail The Pixels/Patterns

2014-11-11T11:08:53Z

Carlosaoa: /* ASSIGNMENT 1 */

==ASSIGNMENT 1==

''' '' "Create three different patterns on paper and formulate these in code with properties using processing" '' '''

Please paste your images and processing sketches below:

[[image:Pattern.Ornelas.01]]
[[image:Pattern.Ornelas.02]]
[[image:Pattern.Ornelas.03]]

== Rubab Paracha ==

* Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() {
size(600, 600);
smooth();

}

void draw()
{
background(0,102,102);

stroke (255);
strokeWeight (1.5);

noFill();
rect (30,200, 100,100);

fill (150);
rect (100,220, 100,100);

fill (80, 100);
rect (170,240, 100,100);

fill (255,237, 188);
rect (240,260, 100, 100);

fill (167, 82, 101, 150);
rect (310,280, 100, 100);

fill (254, 190, 126);
rect (380,300, 100,100);

fill (254, 190, 126, 120);
rect (450,320, 100,100);

}

* Pattern B

//The speed of movement of the mouse determines the size of the squares draw. i used the random function to create different colours of squares.

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

== Fernando Millán ==

* Pattern A
Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
size (1000,1000);
}

void draw () {
background (209);
noStroke ();
fill (155,0,0);

//pushMatrix();
Squares();
//popMatrix();

float ValueX = mouseX;
float ValueY = mouseY;

pushMatrix();
translate(500,500);

rectMode(CENTER);

fill (209);
noStroke ();
rect(0,0,ValueY,ValueY);

rectMode(CORNER);
popMatrix();

}

void Squares(){
rect (400,0,200,100);

rect (300,100,100,100);
rect (600,100,100,100);

rect (200,200,100,100);
rect (400,200,200,100);
rect (700,200,100,100);

rect (100,300,100,100);
rect (300,300,100,100);
rect (600,300,100,100);
rect (800,300,100,100);

rect (000,400,100,200); //both lines at the same time
rect (200,400,100,200);
rect (400,400,200,200);
rect (700,400,100,200);
rect (900,400,100,200);

rect (100,600,100,100);
rect (300,600,100,100);
rect (600,600,100,100);
rect (800,600,100,100);

rect (200,700,100,100);
rect (400,700,200,100);
rect (700,700,100,100);

rect (300,800,100,100);
rect (600,800,100,100);

rect (400,900,200,100);
}

* Pattern B
Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
size(600, 600);
noSmooth();
fill(255,0,0);
background(102);
}

void draw() { //Setting the colors for pattern A
if (mousePressed) {
stroke(255,0,0);
fill(255,0,0);
} else {
stroke(0);
fill(0);
}
//Starting to draw the checkerboard A
RowOdd();

pushMatrix();
translate(0, 50);
RowEven();
popMatrix();

pushMatrix();
translate(0, 100);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 150);
RowEven();
popMatrix();

pushMatrix();
translate(0, 200);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 250);
RowEven();
popMatrix();

pushMatrix();
translate(0, 300);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 350);
RowEven();
popMatrix();

pushMatrix();
translate(0, 400);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 450);
RowEven();
popMatrix();

pushMatrix();
translate(0, 500);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 550);
RowEven();
popMatrix();

if (mousePressed) {
stroke(0);
fill(0);
} else {
stroke(255,0,0);
fill(255,0,0);
}
//Starting to draw the checkerboard B
RowEven();

pushMatrix();
translate(0, 50);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 100);
RowEven();
popMatrix();

pushMatrix();
translate(0, 150);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 200);
RowEven();
popMatrix();

pushMatrix();
translate(0, 250);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 300);
RowEven();
popMatrix();

pushMatrix();
translate(0, 350);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 400);
RowEven();
popMatrix();

pushMatrix();
translate(0, 450);
RowOdd();
popMatrix();

pushMatrix();
translate(0, 500);
RowEven();
popMatrix();

pushMatrix();
translate(0, 550);
RowOdd();
popMatrix();
}

void RowOdd(){
rect(0,0,50,50);
rect(100,0,50,50);
rect(200,0,50,50);
rect(300,0,50,50);
rect(400,0,50,50);
rect(500,0,50,50);
}

void RowEven(){
rect(50,0,50,50);
rect(150,0,50,50);
rect(250,0,50,50);
rect(350,0,50,50);
rect(450,0,50,50);
rect(550,0,50,50);
}

* Pattern C
In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here>
<post ideas here>

void setup () {
size (500,500);
}
void draw () {
background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
}
void Ele1(){
pushMatrix();
rect(0,0,100,100);
popMatrix();
}

void Ele2(){
pushMatrix();
rect(200,0,100,100);
popMatrix();
}

void Ele3(){
// pushMatrix();
// rotate(radians(mouseX));
rect(400,0,100,100);
// popMatrix();
}

==Maria Estel==

*Pattern A

//three objects: one fixed, one moving and one depending to the two

void setup () {
size (1000,600);
}

void draw () {
background (255);

fill (0);
rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

noFill ();
ellipse (750,300,dimension,dimension);

float halfDimension = dimension * 0.5;

//line (500,100,750 - halfDimension,300);
//line (500,400,750 - halfDimension,300);

fill (0);
triangle (500,100,500,400,750-halfDimension,300);
}

Pattern B

//three objects: one fixed, one moving and one depending to the two
//changing on mouseklick

void setup () {
size (1000,600);
}

void draw () {

if (mousePressed) {
background (0,0,0);
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255);
stroke (0);
fill (0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

if (mousePressed) {
stroke (255,0,255);
noFill ();
}
else {
stroke (0);
noFill ();
}

float dimension = mouseX;

ellipse (750,300,dimension,dimension);

if (mousePressed) {
stroke (255,0,255);
fill (0,0,0);
}
else {
stroke (0);
fill (0);
}

float halfDimension = dimension * 0.5;

triangle (500,100,500,400,750-halfDimension,300);
}

*Pattern C

//two objects visible and one moving
//one object gets revealed by expanding the other while klicking the mouse

void setup () {
size (1000,600);
}

void draw () {

float dimensions = mouseY;

if (mousePressed) {
background (0,0,0);
rect (100,200,dimensions,dimensions); //can't get rid of the not moving rectangular
stroke (255,0,255);
fill (0,0,0);
}
else {
background (255); //if i put the command in here it's not filled anymore
stroke (0,0,0);
fill (0,0,0);
}

rect (100,200,300,300);

stroke (0);
line (100,200,200,100);
line (400,200,500,100);
line (400,500,500,400);

line (200,100,500,100);
line (500,100,500,400);

float dimension = mouseX;

if (mousePressed) {
ellipse (750,300,300,300);
stroke (255,0,255);
fill (255);
}
else {
ellipse (750,300,dimension,dimension);
stroke (0);
fill (255);
}
}

== Xianzhi Zhang ==

[[File:Pixels_1_1_Pic.jpg]]
[[File:Pixels_1_1.jpg]]

[[File:Pixels_1_2_Pic.jpg]]
[[File:Pixels_1_2.jpg]]

[[File:Pixels_1_3_Pic.jpg]]
[[File:Pixels_1_3.jpg]]

== Andre Faupel ==

i wanted to create some simple algorithmic pixeldancing reminiscent of audiovisual performances.
click anywhere and adjust the refreshrate with UP/DOWN

http://pastebin.com/91y8jZ53

== Jorgelina Garcia ==

GRID I

[[Image:grid1_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=10; y<590; y= y+5){
for( int x=10; x<590; x= x+5){
line(x, 0, x, height );
line(0, y, width, y);
}

}
}

GRID II

[[Image:grid2_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for(int y=0; y<height; y= y+20){
for( int x=0; x< width; x= x+20){

stroke(0);
line(x, 0, x, height );
line(0, y, width, y);
}

}
for(int i=0; i<height; i= i+50){
for(int s=0; s<width; s= s+50){
noFill();

//stroke(random(255), random(255), random(255));
stroke(0,200,200);
rectMode(CENTER);
rect(i,s,100,100);

}
}
}

GRID III

[[Image:grid3_yor.JPG‎ ]]

void setup(){

size(600,600);
background(255);
}

void draw(){

for ( int w = width; w > 0 ; w-=10) {
stroke(200,200,2);
noFill();
rectMode(CENTER);
rect(width/2,height/2,w,w);

}

}

File:Pattern.Ornelas.03.jpg

2014-11-11T11:04:04Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.02.jpg

2014-11-11T11:03:23Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

File:Pattern.Ornelas.01.jpg

2014-11-11T11:01:30Z

Carlosaoa:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|Cc-zero}}
== Source: ==

IFD:All Hail The Pixels

2014-11-07T15:43:11Z

Carlosaoa: /* Workgroups */

Werkmodul/Fachmodul/[[:Category:Fachmodul|Fachmodul]][[:Category:Werkmodul|Werkmodul]] 
''Lecturer(s):'' [[Martin Schied]],[[Frederic Gmeiner]] 
''Credits:'' 6 [[ECTS]], 4 [[SWS]] 
''Date:'' Every Second Friday (Schedule TBA), 13:30 until 20:30 h  
''Venue:'' [[Marienstraße 7b]], Room 105 
''First meeting:'' 17.10.2014

==Description==

'''All hail the Pixels!'''

Square pixels, round pixels, megapixels, microcropixels. Pixel clowds
and pixel clowns. Hot pixels, cold pixels, dead pixels and their funerals.

The pixelized physical computing course focuses on all kind of elements
that can be used or seen as pixels - be it in Architecture on facades,
interior design elements, street lighths or in an experimental display.
The course focuses on the prototyping of content displayable on pixels
and the realization aspect of pixel based systems.

the course is divided into 4 megapixels:

1. Grids and Pixels - What is a single pixel capable of and how are
pixels perceived in larger formations? What can be used as a pixel?
Generative Design of Patterns and repeating structures. Experimental
systems are done using the well known "Processing" environment.

2. Choreography - What can be done with the developed Systems? How can
you represent movements and patterns in a digital system? Concepts to
animate the structures and systems are developed.

3. Spacial aspects and realizations. How to transfer digitally
prototyped concepts to a real object, e.g. a Building's Facade.

4. Technical Prototype. How does an individual (Pix)Element work in
detail? Build one element as a physical working prototype. We will use
the Arduino environment and popular electromechanical components to make
them.

The class is held by Frederic Gmeiner from Design Studio FELD and Martin Schied.

===German description===

Pixelbasiertes Gestalten und Grundlagen des Physical Computings.
Im Laufe des Semesters werden wir 4 Projektphasen durchlaufen:

1. Raster: Was kann ein einzelnes Modul/Pixel/Baustein? Wie verhalten
sich viele im Zusammenspiel?
- Entwurf von generativen visuellen Mustern und repetitiven Strukturen
mit der Programmierungsumgebung "Processing"

2. Choreographie: Was kann mit den einzelnen Systemen dargestellt werden?
- Formulierung von Bewegungsabläufen (Choreographien) und Ausprobieren
unterschiedlicher Strategien für die Animation der entwickelten Muster
und Strukturen.

3. Räumliche Umsetzung: Wie lassen sich die skizzierten Entwürfe in den
realen Raum transferieren?
- Konzepte zur Übersetzung der Anordnung und der Bewegungsprinzipien in
eine räumlich-physische Umgebung (z.B. Hausfassade).

4. Technischer Prototyp: Wie funktioniert ein einzelner Baustein im
Detail?
- Prototypenhafte Entwicklung einzelner Mechanik- und Elektronikbausteine welche von einem Mikrokontroller angesteuert werden.

==Topics==
* [[/tba1/]]
* [[/tba2/]]

==Admission requirements==
k.A.

==Registration procedure==
Please send your application by email with the Subject ''{{PAGENAME}}'' to: martin.schied@uni-weimar.de
* Name, Surname
* program and semester (Studienprogramm und Fachsemester)
* matriculation number (Matrikelnummer)
* Angabe der geltenden Prüfungsordnung
* Valid email address @uni-weimar.de (no other mailing addresses will be accepted) [[SCC-Services#E-Mail|Why?]]
Sollte es mehr als 15 Bewerber geben, entscheidet die Reihenfolge der Anmeldungen über die Aufnahme in den Kurs

==Evaluation==
Active participation, presentation, documentation.

==Eligible participants==
Graduates enrolled in the Faculties of Media, Gestaltung and in the MediaArchitecture program

== Email List ==

Register for the [http://mg.medien.uni-weimar.de/mailman/listinfo/pixels pixels mailinglist]

== Participants ==

=== Workgroups ===

Please sign up for a workgroup by replacing "Your name" and "Your email" with your name and mail address. Each group should not exceed five members.

{| class="wikitable"
|+Group A
! Name
! Email
|-
| Gideon Bielewski
| gideon.bielewski@uni-weimar.de
|-
| Jonas Jülch
| jonas.juelch@uni-weimar.de
|-
| Andre Faupel
| andre.faupel@uni-weimar.de
|-
| Sorayya Akbaritakhtmeshloo
| sorayya.akbaritakhtmeshloo@uni-weimar.de
|-
| Hesam Jannesarsheykh Marjan
| jannesar.hesam@gmail.com
|}

{| class="wikitable"
|+Group B
! Name
! Email
|-
| Isil Onursal
| isil.onursal@uni-weimar.de
|-
| Emir Genc
| emir.genc@uni-weimar.de
|-
| Afroditi Manari
| afroditi.manari@uni-weimar.de
|-
| Dhora tego
| dhoratego@gmail.com
|-
| Majd Murad
| majdm@icloud.com
|}

{| class="wikitable"
|+Group C
! Name
! Email
|-
| Luanbo Zhang
| luanbo.zhang@uni-weimar.de
|-
| Xianzhi Zhang
| xianzhi.zhang@uni-weimar.de
|-
| Hain-Ruey Chan
| hain-ruey.chan@uni-weimar.de
|-
| Your name
| Your email
|-
| Your name
| Your email
|}

{| class="wikitable"
|+Group D
! Name
! Email
|-
| Maria Estel
| maria.estel@uni-weimar.de
|-
| Carina Weiß
| carina.weiss@uni-weimar.de
|-
| Fernando Millán
| fernando.millan@uni-weimar.de
|-
| Rubab Paracha
| rubab.paracha@uni-weimar.de
|-
| Christoph Drews
| drews-christoph@web.de
|}

{| class="wikitable"
|+Group E
! Name
! Email
|-
| Carlos Ornelas
| carlos_aoa@hotmail.com
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|}

{| class="wikitable"
|+Group F
! Name
! Email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|}

==Syllabus==

The classes will be held every second Week, detailed Schedule will be listed below soon:

=== 17.10. - INTRODUCTION MEETING ===

* Introduction
** Short self introduction
** Examples of different pixel projects
** What? Why? How?
** What you will learn in this class
* Questionnaire: What (technical) knowledge and experience do you have about programming and electronics? What do you want to learn?
* Installing Processing
* Mailingliste, Wiki, etc.
* Reading list & (online) resources
* Processing Introduction
** P01 ShapesAndRelations
** P02 CustomFunctions

=== 07.11. - PIXELS, PATTERNS, RULES ===

''What is a single pixel capable of and how are pixels perceived in larger formations? What can be used as a pixel? Generative Design of Patterns and repeating structures. Experimental systems are done using the well known "Processing" environment.''

* Review of Assignment I

=== 14.11. - GRID, LAYOUT, DISTRIBUTION, STRUCTURE ===

* Possible strategies:
** Formulate a (static) grid system
** Generate structures by dynamic parameters
** Using external images or structured data

=== 28.11. - MOTION, CHOREOGRAPHY, STORIES ===

''What can be done with the developed Systems? How can you represent movements and patterns in a digital system? Concepts to animate the structures and systems are developed.''

* Principle: Using software to prototype motion and behaviour and use the very same system (or parts thereof) to control the movement of the physical installation (authoring system)

Strategies: * Create animations by parameters * Environments / Systems (physics simulations, particle systems) * Using images / video as source

=== 12.12. - GETTING PHYSICAL ===

* Methods and strategies to transfer the digital prototyped concepts to a real object / mechanism
* What to translate and how?
* Electronics introduction and Arduino
* Developing simple mechanical structures and principles

=== 9.1. - PROTOTYPING ===

=== 23.1. - PROTOTYPING, FINALIZING ===

=== 6.2. - PRESENTATION & DOCUMENTATION ===

== Research on existing "Pixel" Projects ==

Upload your findings with a short description and a link to this page:

'''[[/ResearchPixelProjects/]]'''

== Processing Code Examples ==

All code examples which were demonstrated during the class meetings are listed on this subpage:

'''[[/ProcessingSketches/]]'''

== Assignments ==

=== ASSIGNMENT 1 - 17.10.2014 ===
''' ''"Create three different patterns on paper and formulate these in code with properties using processing "'' '''

Upload your image and code sketches to the wiki here: '''[[/Patterns/]]'''

==Literature==

* Joshua Noble: Programming Interactivity, O’Reilly, ISBN 978-0596154141
* Casey Reas und Ben Fry: Processing, Mit Press, ISBN 978-0262182621

==Links==

tba.

[[Category:Frederic Gmeiner]]
[[Category:Martin Schied]]
[[Category:Physical Computing]]
[[Category:Processing]]
[[Category:Programming]]
[[Category:WS14]]
[[Category:Werkmodul]]
[[Category:Fachmodul]]
[[Category:Interface Design]]
[[Category:Frederic Gmeiner]]
[[Category:Martin Schied]]
[[Category:Physical Computing]]
[[Category:Processing]]
[[Category:Programming]]
[[Category:WS14]]
[[Category:Werkmodul]]
[[Category:Fachmodul]]
[[Category:Interface Design]]