int nvezes = 50;int espaco = 500/ nvezes; int pvezes = 50;int space = 600 / pvezes; boolean draw_large = false; float mx = 0;float my = 0; float rot = 0; float inc = 0.001; float rand = 0; … Continuar a ler Processing — Exercício III

void setup() {size (500, 500);background (#FFFFFF);} void draw() {//padrãoframeRate(4);fill (random(100),random(100),random(255));noStroke ();int n = 27;int spacing = width / n; int j = 0; {while (j < n) {int i = 0;while (i < n) {circle (13 + (i* spacing), 13 … Continuar a ler PROCESSING III

3º exercício Animação da experiências do módulo anterior. Segunda experimentação:«Nós (não) somos transitórios» [ OP1 / / OP2 ] Continuar a ler PROCESSING [MOD. III]

3º exercício Animação da experiências do módulo anterior. Primeira experimentação:«Uma tautologia / sempre na expectativa de uma heterologia» Continuar a ler PROCESSING [MOD. III]

size (500, 500);background (#FFFFFF); fill (#000000);noStroke (); int n = 27;int spacing = width / n; int j = 0;while (j < n) {int i = 0;while (i < n) {circle (13 + (ispacing), 13 + (jspacing), 20);i = i + 1;}j = j + 1;} PFont title_font = createFont (“Avenir Next Rounded Std”, 30); fill (#000000);noStroke ();rectMode (CENTER);rect(width/2,height/2 – 80, 300, 150); fill (#FFFFFF);textAlign (CENTER);textFont (title_font);textSize (100);text(“sobre”, 250, 200); fill (#FFFFFF);noStroke ();textSize (125);text (“tudo”, 258, 290); Continuar a ler PROCESSING II

float tamanho = 52; boolean on = true; void setup() { size (600,600); smooth (); } void draw() { if (mousePressed) { background (#f7941d); if(frameCount% 5== 0) { if(on) stroke (255); else stroke (#c10b11); on = !on; } PFont font … Continuar a ler Processing 3

//DYNAMIC TYPE float rot = 0; void setup() { size (700, 700); background (0, 0, 255); } void draw () { rot = rot + (PI /100); float tamanho = 50; float cir = 100; fill (0, 255, 0); stroke(255, … Continuar a ler DynamicType (Processing)

3 Exercício – Composição e texto Animação da composição realizada no último exercício com inspiração na Pop Art. Continuar a ler Processing III

Interatividade: cores di texto em randoms azuis e ao clicar no rato o rosto muda de expressão. void setup () {size (500, 500);background (#FCDB7D);//quadradinhos fundoint n = 10;int spacing = width / n; int j = 0;while (j < n) {int i = 0;while (i < n) {fill (#F492F5);stroke (#F492F5);square (10 + (i* spacing), 10 + ( j * spacing), 30);i = i +1;}j = j + 1;}} void draw () { frameRate(4);//textoPFont title_font = loadFont (“AvenirNextCondensed-BoldItalic-48.vlw”);textFont(title_font);textAlign (CENTER);fill (random(100),random(100),random(255));textAlign(CENTER);text(“PROOOCESSING”, 250, 200);text(“PROOOCESSING”, 250, 260);text(“PROOOCESSING”, 250, 320); //rostinhonoStroke();fill (#7703FF);ellipse(250, 400, 50, 50); //boca felizfill(#FCDB7D);arc (250, 408, 15, 15, 0, PI); //olhocircle(240,395,7);circle(260,395,7); if(mousePressed){ … Continuar a ler Processing III

Com recurso à composição do módulo anterior, foi criada uma animação do background e incorporado a sua interação com o mouse e as teclas “+” e “-“, que podem ser usados alternadamente e assim controlar o movimento dos quadrados. Código: Continuar a ler Processing – Módulo III

Composição retro gaming com influências vintage dos anos ’80 do século passado. Código: Continuar a ler Processing – Módulo II

Para o exercício de composição tipográfica utilizando Processing, busquei inspiração, muito livremente, no design construtivista soviético. Código size(600,600);background(255); PFont title_font = createFont(“Cousine”, 32); int x = 1;int y = 100;int size_c = 30;int n = 64; int spacing = width … Continuar a ler Processing II · Composição Tipográfica

Software Criativo III: Animação e Interação Exercício 3 Animação da composição tipográfica realizada no exercício anterior. Para tal, a nova composição apresenta algumas alterações e adaptações. Código int nvezes = 20; int espaco = 400/ nvezes; int pvezes = 20; … Continuar a ler EX3 – Software Criativo

Terceiro exercício de processing que consiste em aproveitar o sketch anterior e criar uma animação e interação. Foi criada uma rotação do texto e elementos triangulares que compõem letras. Ao clicar com o botão esquerdo do rato, as letras em … Continuar a ler Processing [3]

Código: size (350,200); background (209,13,13); line(50,50,30,150); line(30,150,85,150); line(85,150,90,130); line(90,130,55,130); line(55,130,72,50); line(50,50,72,50); line(35,150,90,150); line(90,150,95,130); line(95,130,60,130); line(60,130,77,50); line(55,50,77,50); noFill(); quad(93,150,143,150,167,50,117,50); quad(132,65,145,65,129,135,116,135); noStroke(); fill(0,0,0); triangle(151,150,221,150,232,100); triangle(175,50,162,100,245,50); stroke(0); line(162,100,232,100); noFill(); beginShape(); vertex(251,50); vertex(323,50); vertex(318,70); vertex(293,70); vertex(275,150); vertex(255,150); vertex(273,70); vertex(245,70); endShape(CLOSE); beginShape(); vertex(256,55); vertex(316,55); vertex(313,65); … Continuar a ler Processing – Módulo I

2 Exercício – Composição e texto Para a realização do exercício houve uma inspiração na Pop Art Código Continuar a ler Processing II

size (600,600); background (#c10b11); PFont font = createFont (“Helvetica”, 12); for (int i= 15; i < 600; i = i+ 30) { for (int j= 15; j < 600 ; j = j + 30) { fill (#f7941d); textAlign (CENTER, … Continuar a ler Processing 2

Segunda experimentação com o Processing: size (500, 500);background (#FCDB7D); int n = 10;int spacing = width / n; int j = 0;while (j < n) {int i = 0;while (i < n) {fill (#F492F5);stroke (#F492F5);square (10 + (i* spacing), 10 + ( j * spacing), 30);i = i +1;}j = j + 1;} PFont title_font = loadFont (“AvenirNextCondensed-BoldItalic-48.vlw”);textFont(title_font);textAlign (CENTER);fill (#7703FF);textAlign(CENTER);text(“PROOOCESSING”, 250, 200);text(“PROOOCESSING”, 250, 260);text(“PROOOCESSING”, 250, 320); noStroke();fill (#7703FF);circle(250,400,50); fill(#FCDB7D); rectMode(CENTER);rect(250,408,15,4); circle(240,395,7);circle(260,395,7); Suzana Mendonça MPTEC 2020 Continuar a ler Processing II

size (500, 500); background (0,0, 255); float tamanho = 100; fill (0, 255, 0); stroke(255,0,0); strokeWeight (2); circle (width/2, height/2, tamanho * 4.25); circle (width/2, height/2, tamanho * 4); circle (width/2, height/2, tamanho * 3.75); circle (width/2, height/2, tamanho * 3.5); circle (width/2, height/2, tamanho * 3.25); circle (width/2, height/2, tamanho * 3); circle (width/2, height/2, tamanho * 2.75); circle (width/2, height/2, tamanho * 2.5); circle (width/2, height/2, tamanho * 2.25); circle (width/2, height/2, tamanho * 2); circle (width/2, height/2, tamanho * 1.75); circle (width/2, height/2, tamanho * 1.5); circle (width/2, height/2, tamanho * 1.25); circle (width/2, height/2, tamanho); circle … Continuar a ler TypeCanvas (Processing)

Exercício 2 de experimentação em processing, que consiste em fazer uma composição tipográfica utilizando o código de cálculo e load font. O Código completo: size(800, 480);background (150,150,100); float tamanho = 120; int x = 0;int y = 0;int n = … Continuar a ler Processing [2]

Módulo II Composição & Desenho e Manipulação de Texto Repetição e Texto Código: size (2275,500); background (255,255,150); noFill (); stroke(255,0,0); PFont title_font = loadFont(“Avenir-Black-50.vlw”); // TEXTO push (); fill (255,0,0); textAlign (CENTER); textLeading (2); textFont(title_font); text (“MINIMUM”, width/2 , 470); … Continuar a ler Módulo II — Processing (2/2)

Módulo II Composição & Desenho e Manipulação de Texto Repetição e Rotação Código: size (320,400); background (255,255,150); noFill (); stroke(0,0,155); int x = 50; int y = 50; int n = 0; while (n < 100) { circle (x , … Continuar a ler Módulo II — Processing (1/2)

2º exercício Segunda experimentação:«Uma tautologia / sempre na expectativa de uma heterologia» Continuar a ler PROCESSING [MOD. II]

2º exercício Primeira experimentação:«Nós (não) somos transitórios» [ OP1 / / OP2 ] size(200, 600); background(0); //String[] fontList = PFont.list(); //printArray(fontList); //OP1 //PFont Main = loadFont(“BebasNeueBold-80.vlw”); //fill(225); //textFont(Main); //textLeading(85); //text(“NÓS”, 45, 80); //textAlign(RIGHT); //text(“SO\nMOS”, 170, 160); //textAlign(LEFT); //text(“TRA\nNSI\nTÓR\nIOS”, 45, 330); … Continuar a ler PROCESSING [MOD. II]

Módulo I Exploração Tipográfica através das funções de desenho do Programa Formas Poligonais Código: size (1360,360); background (#F2DCDE); //T fill (#C98C21); noStroke(); beginShape(); vertex (80,80); vertex (80,120); vertex (120,120); vertex (120,280); vertex (160,280); vertex (160,280); vertex (160,120); vertex (200,120); vertex … Continuar a ler Módulo I —Processing (3/3)

Módulo I Exploração Tipográfica através das funções de desenho do Programa Pontos e Linhas Código: size(760,520); background(#C98C21); strokeWeight(10); stroke (#121888); //E line(80,160,80,360); line(100,160,100,360); line(120,160,120,360); line(140,160,140,200); line(160,160,160,200); line(180,160,180,200); line(200,160,200,200); line(140,240,140,280); line(160,240,160,280); line(180,240,180,280); line(200,240,200,280); line(140,320,140,360); line(160,320,160,360); line(180,320,180,360); line(200,320,200,360); //D line(240,160,240,360); line(260,160,260,360); line(280,160,280,360); … Continuar a ler Módulo I — Processing (2/3)

Módulo I Exploração Tipográfica através das funções de desenho do Programa Formas Simples Código: size (600,520); background (#121888); fill(#F2DCDE); rect (80,240,40,200); square (120,200,40); rect (160,120,40,80); square (200,80,40); rect (240,120,40,80); rect (280,200,40,120); rect (320,120,40,80); square (360,80,40); rect (400,120,40,80); square (440,200,40); rect … Continuar a ler Módulo I — Processing (1/3)

Animação simples de composição tipográfica em processing. Fiz uso da função translate e da interação «if (keyPressed)». Código utilizado: float x = 0;float y = 0;float size = height/10; void setup() {size(600,600);smooth();background(255);} void draw() { PFont title_font = createFont(“Cousine”, 32); … Continuar a ler Processing III · Animação

1º exercício Segunda experiência com processing«Nós não estamos algures» size(600,400); background (0); //fill(20);noStroke();rect(22,50,78,200);rect(105,50,78,200);rect(188,50,78,200); //fill(25);noStroke();rect(27,100,50,280);rect(78,100,50,280);rect(129,100,50,280); fill(40); //N noStroke(); rect(27,57,24,186); quad(32,57,54,57,91,243,71,243); rect(71,57,24,186); //fill(25); //rect(110,55,80,190); fill(40); //O arc(136,81,52,52,PI,PI+PI/2); arc(136,219,52,52,PI/2,PI); arc(152,81,52,52,PI+PI/2,PI*2); arc(152,219,52,52,0,PI/2); rect(110,81,24,138); rect(154,81,24,138); rect(134,55,20,190); fill(0); //meio O arc(142,88,20,24,PI,PI+PI/2); arc(142,213,20,24,PI/2,PI); arc(146,88,20,24,PI+PI/2,PI*2); arc(146,213,20,24,0,PI/2); rect(132,88,24,127); rect(140,76,8,12); … Continuar a ler PROCESSING [MOD. I]

Código da primeira experimentação com processing: size (1070,530); background(68, 181,154); //1noStroke ();fill (0);rect (30,30,260,50);fill (255);rect (45,30,50,100);fill (248,173,77);circle (70,105,50); //2noStroke ();fill (0);square (30,180,200);fill (255);circle (130,280,200);fill (248,173,77);circle (130,280,100);fill (0);rect (30,450,200,50);fill (255);rect (30,380,50,120);fill (68, 181,154);rect (30,280,50,100); //3noStroke ();fill (0);rect (570,180,200,50);fill (255);rect (720,180,50,120);fill (0);square … Continuar a ler Processing

Código da composição size (600,600); background (#ccc9b2); //T noStroke (); fill (#67f4cb); rect (160,165,100,30); fill (0); rect (210,195,50,100); //Y noStroke (); rect (360,165,50,130); fill (#67f4cb); triangle (360,165,360,235,310,165); //P noStroke (); fill (0); rect (160,325,50,130); fill (#67f4cb); circle (220,364,80); //E noStroke … Continuar a ler Processing 1

Software Criativo I: DesenhoObjetivo: Desenhar um ou mais caracteres usando as funções de desenho do Processing. Primeiras Experiências Tipográficas size (650,500);background (#000000); //Letra Efill (#ffffff);rect (50,48,60,17);rect (30,65,20,50);rect (50,115,40,15);rect (30,130,20,50);rect (50,180,60,17); //Letra Rfill (#ffffff);rect (150,98,50,17);rect (130,115,20,83);rect (200,115,20,30); //Letra R2fill (#ffffff);rect (260,98,50,17);rect … Continuar a ler PROCESSING I

Primeira exploração de formas tipográficas em Processing. Código da composição size(600,600);background(#00458A); //«C»fill(#B396DB);noStroke();circle(180,200,200);fill(#00458A);rectMode(CENTER);square (280,200,200); //«A»stroke(#34FF6D);strokeWeight(4);beginShape();noFill();vertex(100,100);vertex(50,200);vertex(100,100);vertex(150,200);endShape();beginShape();noFill();vertex(80,140);vertex(120,140);endShape(); //«A»fill(#B396DB);noStroke();triangle(300,300,220,420,380,420); //«S»stroke(#34FF6D);strokeWeight(1);strokeCap(SQUARE); line(450,400,500,320);line(450,420,500,340);line(450,440,500,360);line(450,450,520,450);line(520,460,460,540);line(520,480,460,560);line(520,500,460,580); //«O»stroke(#34FF6D);strokeWeight(5);noFill();ellipseMode(CENTER);circle(400,100,140); Continuar a ler Processing

Primeira experiência em Processing nas funcionalidades de desenho com criação de tipografia.   Código // size(500, 390); background(#C10CA0); stroke(#EDBE13); strokeWeight(12); strokeCap(2); //letra C line(50, 80, 73, 80); line(50, 80, 35, 120); line(40, 120, 62, 120); //letra H line(92, 80, 80, … Continuar a ler Processing – Módulo I

Primeiro exercício: criação de 1 ou mais caracteres através da utilização das funções de desenho do Processing. size (500, 650); background (255, 0, 0); fill (0, 0, 0); //Y strokeWeight (5); triangle (150, 100, 200, 100, 175, 150); line (175, 150, 175, 200); //T strokeWeight (5); strokeJoin (ROUND); line (50, 50, 100, 50); line (75, 50, 75, 120); //P circle (300, 50, 50); line (275, 150, 275, 25); // i strokeWeight (5); strokeCap (ROUND); line (130, 250, 130, 350 ); //A triangle (250, 550, 275, 500, 300, 550); line (250, 550, 225, 600); line (300, 550, 325, 600); //D line … Continuar a ler LetterForm (Processing)

Software Criativo I: Desenho Exercício 1: Primeiras experiências e criação de caracteres através da utilização das funções de desenho do Processing.   Código: size(400,300); background(#f7b0be); //smile_cara noStroke(); fill(#ef3c23); circle(315,150,100); //olhos_smile fill(#f7b0be); circle(330,135,10); circle(300,135,10); //sorriso fill(#f7b0be); rect(290,156,50,5); rect(290,150,6,7); rect(334,150,6,7); //letra H … Continuar a ler Processing

Desenvolvimento de uma composição tipográfica Continuar a ler Processing

Primeira experimentação com processing: background(#FCD385);size(180,200); stroke(#FF6105);strokeWeight(5);line(50,80,70,120);line(50,80,30,120);line(40,100,60,100); line(90,80,90,120);line(120,80,120,120);line(90,100,120,100); line(140,80,140,120); strokeWeight(5);fill(#FF6105);circle(140,130,2); Continuar a ler Processing

1º exercício Primeira experiência com processing «Processing type» [ código disponível no fim do artigo ] size (500,300);background (20); //PnoStroke();fill(200);rect(20,10,7,140);rect(20,10,30,120);//RstrokeWeight (7);strokeCap (BEVEL);stroke (200);line(60,120,84,148);noStroke();fill(200);rect(55,10,7,140);rect(55,10,30,120);//Orect(90,10,30,140);//Crect(125,10,7,140);rect(125,10,30,80);rect(125,130,30,20);//Erect(160,10,7,140);rect(160,10,30,80);rect(160,110,30,10);rect(160,130,30,20); //Srect(195,10,7,110);rect(195,10,30,80);rect(202,110,23,40);rect(195,130,7,20);//Srect(230,10,7,110);rect(230,10,30,80);rect(237,110,23,40);rect(230,130,7,20);//Irect(265,10,7,140);//Nrect(277,10,7,140);rect(277,10,20,100);rect(287,110,20,40);rect(300,10,7,140);//Grect(312,10,7,140);rect(312,10,30,80);rect(312,130,30,20);rect(332,110,20,40);//…rect(357,110,30,40);rect(392,120,30,30);rect(427,130,30,20); //typenoFill();stroke(255);arc(110, 250, 100, 80, 0, PI / 2.0); // lower quarter circlerect(160,70,1,177);line(90,160,263,110);arc(200, 175, 50, 50, 0, … Continuar a ler PROCESSING [MOD. I]