Processing: Deslocamento e Tempo

Foi pedido que modificasse um simulador que mostrasse em quanto tempo um corpo à 30m/s percorria uma distancia de 800 metros.
As modificações feitas foram: Aumentar o tamanho da tela no eixo X para 900 metros, assim seria visível o momento que o objeto passaria pelo ponto de 800 metros. Demarcar com linhas espaçadas de 100 em 100 metros para uma melhor visualização. E com o uso da ferramenta "text" apresentar na tela os valores de tempo e distância percorrida pelo objeto.
O objeto alcançará a distância de 800 metros em aproximadamente 28 segundos.

Código:

int d;
int v = 30;
int t = 0;

void setup() {
  background(0);
  size(900, 600);  
  frameRate(1);  
}

void draw() {
  background(0);
  for(int i = 0; i < 9; i++){
  line(i * 100, 0, i * 100, 900);
  stroke(45);
  fill(255);
 }
  println(t, 20,20);
  moveBolaMRU();
  t++;
  text("Tempo: " + t + " seg", 20, 20);
  text("Distância: " + d + " m", 20, 35);
}

void moveBolaMRU() {
  d = v * t;
  println(d);
  ellipse(d, 300, 10, 10);
}

Resultado:

Processing: Exercício de Funções(Flor)

Foram criadas duas funções dentro do programa. A primeira, função, circulo(int x, int y, int r), desenha um círculo qualquer na tela e era chamada na segunda função, flor2(int x, int y, int r), onde, sempre que o mouse for pressionado, são desenhados cinco círculos agrumados em formato de flor, com as pétalas dispostas em diagonal em relação ao centro do desenho, tendo o círculo central gerado no ponto onde o cursor do mouse for pressionado, e com cores aleatórias modificadas à cada clique.

Código:

void setup(){
  size(300,300);
  noStroke();
  background(0);
  frameRate(10);
  }

void circulo(int x,int y, int r){
 
  ellipse(x,y,2*r,2*r);
}

void flor2(int x, int y, int r){
  fill(random(255),random(255),random(255));
  circulo(x,y,r);
 fill(random(255),random(255),random(255));
  circulo(x-(r+(r/2)),y+(r+(r/2)),r);
  circulo(x+(r+(r/2)),y-(r+(r/2)),r);
  circulo(x-(r+(r/2)),y-(r+(r/2)),r);
  circulo(x+(r+(r/2)),y+(r+(r/2)),r);

}

void draw(){
  if(mousePressed == true){
  background(0);
      flor2(mouseX,mouseY, 30);
  }
 
 }

Resultado:

Processing: Exibindo valores na tela

O código seguinte gera uma simulação de lançamento balístico e exibe na tela, com o uso da ferramenta "text", os valores das variáveis envolvidas na simulação.

Código:

float dx;
float dy = 600;
float t = 0;
float v0x = 30;
float v0y = 100;
float ax = 0;
float ay = -10;
float vx;
float vy;
float v;

void setup() {
  size(600,600);
  background(0);
  frameRate(1);
  }  
}

void draw() {
  background(0);
  moveBolaMRUV();
  t++;
  text("Tempo:" + t, 20, 20);
  text("Veloc.:" + v, 20, 35);
  text("D.Hori.:" + dx, 20, 50);
  text("D.Vert.:" + dy, 20, 65);
}

void moveBolaMRUV() {
  dx = (v0x*t) + ax*(t*t)/2;
  dy = (v0y*t) + (ay*(t*t))/2;
  vy = v0y + ay*t;
  v = (v0x+v0y)/2;
  ellipse (dx, height - dy, 20, 20);
}

Resultado:

Processing: Exemplo

Neste exemplo do site https://processing.org/examples vemos um código que gera linhas horizontais e verticais que se entrelaçam formando uma malha na tela. A partir do código dado modifiquei o tamanho da tela, os valores de espaçamento entre as linhas e as cores de background edas linhas geradas.

Código original:

void setup() {

  size(640, 360);
}

void draw() {
  background(127);
  noStroke();
  for (int i = 0; i < height; i += 20) {
    fill(129, 206, 15);
    rect(0, i, width, 10);
    fill(255);
    rect(i, 0, 10, height);
  }
}

Resultado:

Código alterado:

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

void draw() {
  background(0);
  noStroke();
  for (int i = 0; i < height; i += 50) {
    fill(0, 193, 56);
    rect(0, i, width, 10);
    fill(59, 84, 165);
    rect(i, 0, 10, height);
  }
}

Resultado:

Hello World! Processing

O documentário é bem interessante, pois apresenta conceitos de programação criativa de uma maneira que quem não é programador pode compreender e se interessar mais pelo seu uso. Usa exemplos de vários tipos de sistemas diferentes, que se comportam e se desenvolvem de maneiras imprevisíveis. Após isso ele apresenta a linguagem do Processing, que por sua simplicidade e semelhança com conceitos de design (como a elaboração em sketchs/esboços) é uma alternativa para Designers aprenderem a programar de maneira simples. Ele também apresenta trechos de diversas obras e projetos como Unnamed Soundsculpture, de Daniel Franke e Cedric Kiefer, Substrate, de Jared Tarbell, They Rule, de Josh On, além dos trabalhos de um dos criadores do Processing, Casey Reas.

Link para o documentário: https://vimeo.com/60735314
Legendas PT-BR: http://www.7luas.com.br/downloads/hello_world_processing-pt_subtitles.srt

Exercício de Geração de Identidade Visual

Criar uma marca, com exemplo de cartão de visita, para um artista freelancer.

Definição de público-alvo:

Empresas de jogos indies e quadrinhos.

Definição da direção de design da marca:

Divergente – Oferecer uma opção diferente.

Definir 5 qualidades da empresa:

- Compromisso

- Agilidade

- Criatividade

- Acessibilidade

- Parceria

Definir 5 diferenças:

- Inovação

- Simplicidade

- Funcionalidade

- Individualidade

- Preço

Definir e justificar movimento artístico ou escola de design guia:

Optei pelo Surrealismo por proporcionar maior liberdade de criação, na minha visão.

Brainstorming (10 formas):

Algumas formas simplificadas de como poderia ficar a marca e possíveis posições onde seria inserido o nome.

Nome da empresa:

Indien’art - referindo-se a arte indie(ou independente).

Escolher harmonia cromática:

Azul(#0072bc), Vermelho(#ee1c24) e Branco(#ffffff) - Quis fazer uma referencia as cores básicas comuns de uniformes de super-hérois de HQs.

Escolher 1 forma e refina-la:

Defini a forma como sendo um olho simplificado com uma pena desenhando-o.

Repertorio de tipografia (estudar 5 possíveis fontes):

Indien’art -  adobe  fan heiti std b

Indien’art – adobe gothic std b

Indien’art – Berlim Sans FB

Indien’art -  Bauhaus 93

Indien’art – Kaufmann BT

Cartão

Repertório (pesquisar 5 bons exemplos de cartões):

Definição de conteúdo:

Defini que o cartão apresentaria somente a marca e o nome da empresa na frente e os dados do artista no verso.

Refinamento da melhor opção:

Por fim optei por um cartão simples e de menor custo. No verso coloquei os dados na fonte Trebuchet MS, por ela ser "funcional e eficiente, neutra e passiva".

Análize semiotica do filme "Sherlock Holmes":

O filme “Sherlock Holmes” teve como principal objetivo passar o máximo de clima de mistério, devido à natureza do personagem e de seus contos. Para isso uma serie de características foram adaptadas a este tipo de enredo.

Foi utilizado um esquema de fotografia onde prevalecem os tons frios, em principal o cinza, para manter um ambiente sombrio e misterioso. Como o personagem principal se trata de um detetive muitos símbolos aparecem no decorrer do filme, seja em forma de pistas, emblemas e brasões.

A história se passa na era moderna a caracterização dos personagens condiz com as roupas daquela época, vemos o uso de ternos, chapéus, bengalas, nas mulheres vestidos longos, espartilhos. As músicas são em sua maioria orquestras, até mesmo em cenas de muita ação, como a explosão de um galpão no decorrer do filme, é acompanhada por uma orquestra de violinos.