Medien Wiki - User contributions [en]

IFD:All Hail The Pixels/ResearchPixelProjects

2014-11-21T13:27:25Z

Ciye0361: /* Fernando Millan */

== 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]

* Dutch Cycling roads
[http://www.dw.de/how-the-dutch-love-of-cycling-is-glowing-in-the-dark-to-inspire-innovation/a-18077820]

==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 [https://www.youtube.com/watch?v=BpWM0FNPZSs]

*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]

==Gideon Bielewski==

*Mortal Engine by Chunky Move [https://www.youtube.com/watch?v=sbjOMualLVs]

*Wind - Interactive art wall by Daan Roosegaarde [http://www.youtube.com/watch?v=xMcQhjXFcNA]

*FUTURE SELF | Project Film [http://vimeo.com/41699285]

*Hexi - responsive wall [http://vimeo.com/86905477]

==Luanbo Zhang ==
*Fine Pixel Art by John O'Hearn [http://www.finepixelart.com/home.html]

*The Glitch Chamber by Protopixel [http://www.protopixel.net/#projects?proj_glitch-5]

*You Fade to Light : Concept by rAndom International for Philips Lumiblade. Software developed by Chris O’Shea. [https://vimeo.com/4282941]

*Game Frame by Jeremy Williams [https://www.kickstarter.com/projects/jerware/game-frame-the-art-of-pixels]

==Xianzhi Zhang==
===Beautiful Chemistry===
*Beautiful Chemistry is a new collaboration between the Institute of Advanced Technology at the University of Science and Technology of China and Tsinghua University Press. The goal of this project is to bring the beauty of chemistry to the general public through digital media and technology.[http://beautifulchemistry.net/structures.html]

IFD:All Hail The Pixels/Patterns

2014-11-14T11:25:31Z

Ciye0361:

==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/designs

2014-11-14T11:23:50Z

Ciye0361:

==Group A==

==Group B==

==Group C==

==Group D==

=Maria Estel=

[[File:Maria.jpg|350px|thumb|]]

void setup () {
size(displayWidth, displayHeight);
}

void draw () {
if (mousePressed) {
background(255,120,0);

pushMatrix();
translate(1600,700);
for (int i=10; i<width; i+=1){
rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(20,20,20);
stroke(0);
}
}
else {
background(20,20,20);

pushMatrix();
translate(250,250);
for (int i=10; i<width; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(255,120,0);
stroke(0);
}
}
popMatrix();
}

=Carina Weiß=

[[File:Carina.jpg|350px|thumb|]]

void setup () {
size(displayWidth, displayHeight);
}

void draw () {
background(0);

pushMatrix();
translate(1500,500);
for (int i=10; i<width; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255,215,0);
}
popMatrix();

pushMatrix();
translate(450,250);
for (int i=10; i<150; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255);
}
popMatrix();

pushMatrix();
translate(250,650);
for (int i=10; i<150; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255);
}
popMatrix();

pushMatrix();
translate(1000,400);
for (int i=10; i<100; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255);
}
popMatrix();

pushMatrix();
translate(800,600);
for (int i=10; i<100; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255);
}
popMatrix();

pushMatrix();
translate(1100,700);
for (int i=10; i<100; i+=1){

rectMode(CENTER);
rotate(mouseY);
rect(i,i,20,20);
fill(0);
stroke(255);
}
popMatrix();
}

==Fernando Millan==
[[File:Millan_HW_2.jpg|600px|thumb|]]

void setup () {
size(2000, 1000);
}
void draw () {
background(20, 20, 20);
float Mouse = 5+(mouseX/100);
float Distance = mouseX;
float MY = mouseY*.90;

if (mousePressed) {
noStroke();
} else {
stroke(0);
}
pushMatrix();
translate(666, height*0.5);
for (int i=30; i<MY; i+=5) {
for (int F=0; F<Mouse; F+=1) {
if ( i % 2 == 0) {
fill(100, 50);
} else {
fill(255, 0, 0, 50);
}
rectMode(CENTER);
rotate(radians(F));
rect(i, i, 30, 30);
}
}
popMatrix();
//println (mouseY);
//println (mouseX);
}

==Group E==

[[Category:== ASSIGNMENT 2 ==]]

IFD:All Hail The Pixels/ResearchPixelProjects

2014-11-13T22:15:25Z

Ciye0361:

IFD:All Hail The Pixels/Patterns

2014-11-13T21:58:21Z

Ciye0361: /* Fernando Millan */

==ASSIGNMENT 2==

==Fernando Millan==
[[File:Millan_HW_2.jpg|600px|thumb|]]

void setup () {
size(2000, 1000);
}
void draw () {
background(20, 20, 20);
float Mouse = 5+(mouseX/100);
float Distance = mouseX;
float MY = mouseY*.90;

if (mousePressed) {
noStroke();
} else {
stroke(0);
}
pushMatrix();
translate(666, height*0.5);
for (int i=30; i<MY; i+=5) {
for (int F=0; F<Mouse; F+=1) {
if ( i % 2 == 0) {
fill(100, 50);
} else {
fill(255, 0, 0, 50);
}
rectMode(CENTER);
rotate(radians(F));
rect(i, i, 30, 30);
}
}
popMatrix();
//println (mouseY);
//println (mouseX);
}

==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-13T21:55:04Z

Ciye0361: /* Fernando Millan */

==ASSIGNMENT 2==

==Fernando Millan==
[[Image:Millan HW 2.JPG]]

void setup () {
size(2000, 1000);
}
void draw () {
background(20, 20, 20);
float Mouse = 5+(mouseX/100);
float Distance = mouseX;
float MY = mouseY*.90;

if (mousePressed) {
noStroke();
} else {
stroke(0);
}
pushMatrix();
translate(666, height*0.5);
for (int i=30; i<MY; i+=5) {
for (int F=0; F<Mouse; F+=1) {
if ( i % 2 == 0) {
fill(100, 50);
} else {
fill(255, 0, 0, 50);
}
rectMode(CENTER);
rotate(radians(F));
rect(i, i, 30, 30);
}
}
popMatrix();
//println (mouseY);
//println (mouseX);
}

==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-13T21:54:13Z

Ciye0361: /* Fernando Millan */

==ASSIGNMENT 2==

==Fernando Millan==
[[Image:MILLAN HW 2.JPG]]

void setup () {
size(2000, 1000);
}
void draw () {
background(20, 20, 20);
float Mouse = 5+(mouseX/100);
float Distance = mouseX;
float MY = mouseY*.90;

if (mousePressed) {
noStroke();
} else {
stroke(0);
}
pushMatrix();
translate(666, height*0.5);
for (int i=30; i<MY; i+=5) {
for (int F=0; F<Mouse; F+=1) {
if ( i % 2 == 0) {
fill(100, 50);
} else {
fill(255, 0, 0, 50);
}
rectMode(CENTER);
rotate(radians(F));
rect(i, i, 30, 30);
}
}
popMatrix();
//println (mouseY);
//println (mouseX);
}

==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-13T21:52:13Z

Ciye0361:

==ASSIGNMENT 2==

==Fernando Millan==
[[Image:MILLAN_HW_2.JPG]]

void setup () {
size(2000, 1000);
}
void draw () {
background(20, 20, 20);
float Mouse = 5+(mouseX/100);
float Distance = mouseX;
float MY = mouseY*.90;

if (mousePressed) {
noStroke();
} else {
stroke(0);
}
pushMatrix();
translate(666, height*0.5);
for (int i=30; i<MY; i+=5) {
for (int F=0; F<Mouse; F+=1) {
if ( i % 2 == 0) {
fill(100, 50);
} else {
fill(255, 0, 0, 50);
}
rectMode(CENTER);
rotate(radians(F));
rect(i, i, 30, 30);
}
}
popMatrix();
//println (mouseY);
//println (mouseX);
}

==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);

}

}

File:Millan HW 2.jpg

2014-11-13T21:49:06Z

Ciye0361:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:All Hail The Pixels/Patterns

2014-11-05T23:07:37Z

Ciye0361: /* 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

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();
}

IFD:All Hail The Pixels/Patterns

2014-11-05T23:01:35Z

Ciye0361: /* 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

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);
}

IFD:All Hail The Pixels

2014-11-05T22:36:46Z

Ciye0361: /* 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
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|}

{| class="wikitable"
|+Group B
! Name
! Email
|-
| Isil Onursal
| isil.onursal@uni-weimar.de
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
| Your name
| Your email
|-
|
| Your email
|}

{| 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
|-
| Rika Tarigan
| rika.saumi.tarigan@uni-weimar.de
|-
| 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]]