3D · Blender · Dicas & Tutoriais

Fazendo parafusos e porcas no Blender | Fácil e Rápido

Uma dica rápida e bem útil aqui, de um recurso do Blender que eu não conhecia.

Há um add-on, que já vem embutido com o Blender (porém desativado) chamado BoltFactory.

Com ele, é muito fácil fazer e modelar porcas e parafusos, evitando toda a complicação que é usar o Modifier Screw do Blender. Continue reading “Fazendo parafusos e porcas no Blender | Fácil e Rápido”

Desenvolvimento · Dicas & Tutoriais

Desenvolvendo em linguagem C no Linux com Visual Studio Code – fácil e rápido

Recentemente voltei a estudar a linguagem C com o intuito de melhorar minha relação com o Arduino (que usa C).

No entanto, como uso Linux Mint, não tenho à mão as mesmas IDEs que estão disponíveis no Windows. E também não queria recorrer à uma das ótimas IDEs pagas/trials, como a CLion, uma vez que minha finalidade era apenas para estudos – nada pesado. Então experimentei usar o Visual Studio Code.

Aqui explico como preparar o Code para essa finalidade, de um jeito prático e rápido. Estou enfocando aqui em distros baseadas no Debian (Ubuntu, Mint, etc). Para outras distros o diferencial será a instalação de dependências (uma vez que o apt está disponível em distros baseadas no Debian). Continue reading “Desenvolvendo em linguagem C no Linux com Visual Studio Code – fácil e rápido”

Blog · Dicas & Tutoriais · Javascript · Web

Obtendo as teclas que estão sendo pressionadas ao mesmo tempo com Javascript e jQuery

Quem trabalha com desenvolvimento Web pode ter se deparado com a situação de precisar implementar algum comando via teclado, em estilo teclas de atalho, seja para recurso de acessibilidade ou para uma simples aplicação Web. Isso é possível, é fácil e basta algumas linhas de código Javascript.

Experimentando pela primeira vez o CodePen, resolvi escrever um tutorial simples a fim de explicar como implementar essa funcionalidade, com algumas poucas linhas de código. No exemplo uso a bilbioteca jQuery, além do JavaScript. Continue reading “Obtendo as teclas que estão sendo pressionadas ao mesmo tempo com Javascript e jQuery”

Dicas & Tutoriais · Linux · Software

Turbinando seu Ubuntu Linux: dicas de como melhorar sua experiência com o sistema

Este post vai parecer um tanto contraditório. Mas a verdade é que, devido a um problema recente no meu Windows 10 que estava resultando em superaquecimento (a temperatura da minha CPU passava dos 70º C sem eu fazer nada…) e a consequente reinicialização da máquina, eu tive que dar um tempo e voltar a usar o Linux Mint que já havia no PC.

No entanto, passado tanto tempo usando só Windows eu fiquei incomodado com algumas diferenças. A oferta de programas deixa a desejar, o aspecto gráfico não é tão bom, etc. etc…

Daí dediquei algum tempo tentando melhorar minha experiência no sistema do pinguim nesses pontos. Vou listar aqui alguns links que considero úteis e dicas. Alguns artigos em inglês, outros em português. Os artigos focam a família Debian / Ubuntu / Mint, que são os sistemas mais usados em desktop (e a usada atualmente por este escriba, inclusive). A seguir: Continue reading “Turbinando seu Ubuntu Linux: dicas de como melhorar sua experiência com o sistema”

Blender

Usando o Blender como um Level Editor simples – Tutorial

O Blender 3D é um software cheio de defeitos. Dentre estes poderíamos citar sua interface pouco amigável e curva de aprendizado longa. Mas em compensação há pontos fortes, como o fato de ser de uso gratuito, multi-plataforma e, na minha opinião, um dos mais interessantes: sua extensibilidade. Continue reading “Usando o Blender como um Level Editor simples – Tutorial”

ActionScript · Flash

Usando Box2D no Flash / ActionScript 3.0 – tutorial básico

Garimpei muito na Web buscando um tutorial simples para o uso da biblioteca de física Box2D e que funcionasse no Flash. Encontrei códigos com formato antigo, que rodam em versões anteriores da biblioteca (ou em Flash Player anteriores), e principalmente pouco interessantes

Foi então que resolvi experimentar usar por conta própria o manual do Box2D, que tem um tutorial que, apesar de estar em C/C++, é muito didático. Adaptei o código para o Actionscript 3.0 e funcionou.

Para ver o programa funcionando usei a as3isolib, para geração de gráficos isométricos – a intenção é tornar visível o funcionamento. Porém, você pode usar o próprio trace() do Flash para exibir a posição da caixa que cai sobre um piso e dá uma leve quicada. Mais detalhes sobre o código veja no tutorial do manual.

[as3]
package{
import flash.display.*;
import flash.events.*;
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;

public class Main extends Sprite{

public var world:b2World;
public var groundBodyDef, bodyDef:b2BodyDef;
public var body, groundBody:b2Body;
public var groundBox:b2PolygonShape = new b2PolygonShape();
public var dynamicBox:b2PolygonShape = new b2PolygonShape();
public var fixtureDef:b2FixtureDef = new b2FixtureDef();
public var timeStep:Number = Number(1 / 60);
public var velocityIterations:Number = 6;
public var positionIterations:Number = 2;

/*objetos as3isolib – se não quiser baixar a biblioteca você pode usar o trace() para exibir a posição da caixa*/
public var scene:IsoScene = new IsoScene();
public var groundIso:IsoBox = new IsoBox();
public var bodyIso:IsoBox = new IsoBox();

public function Main() {
stage.scaleMode = StageScaleMode.NO_SCALE;

// função que fará tudo se mover
stage.addEventListener(Event.ENTER_FRAME, update);

/* CÓDIGO BOX2D */
// criação do ambiente
world = new b2World(new b2Vec2(0, -10), true);

// criação do chão, onde a caixa irá cair
groundBodyDef = new b2BodyDef();
groundBodyDef.position.Set(250, -50);

// adicionando o corpo ao ambiente
groundBody = world.CreateBody(groundBodyDef);

groundBox.SetAsBox(50, 10);

groundBody.CreateFixture2(groundBox);

// a caixa que cairá
bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(250, 50);

body = world.CreateBody(bodyDef);

dynamicBox.SetAsBox(1, 1);

fixtureDef.shape = dynamicBox;
fixtureDef.density = 1;
fixtureDef.friction = 0.3;
fixtureDef.restitution = 0.1;

body.CreateFixture(fixtureDef);
// -X-

/* CÓDIGO AS3ISOLIB – NÃO ESSENCIAL */
// gráficos do chão
groundIso.setSize(50, 50, 10);

bodyIso.width = 10;
bodyIso.length = 10;
bodyIso.height = 10;

scene.hostContainer = this;
scene.addChild(bodyIso);
scene.addChild(groundIso);
// -X-
}

public function update(evt:Event):void {
// executando a ação física
world.Step(timeStep, velocityIterations, positionIterations);
world.ClearForces();

groundIso.x = groundBody.GetPosition().x;
groundIso.z = groundBody.GetPosition().y;

/* CÓDIGO AS3ISOLIB – NÃO ESSENCIAL */
bodyIso.x = body.GetPosition().x;
bodyIso.z = body.GetPosition().y;

scene.render();
// -x-
}
}
}
[/as3]

ActionScript · Dicas & Tutoriais · Flash

Detectando quais teclas estão pressionadas em ActionScript 3

É simples você saber qual tecla foi pressionada em ActionScript. Um pouco mais complicado é saber qual conjunto de teclas estão sendo pressionadas simultaneamente. Isto pode ser necessário em caso de games, como num de corrida, em que o usuário pressionará várias teclas ao mesmo tempo, como um botão para acelerar, outro para direcionar o carro, e assim vai.

Algumas bibliotecas oferecem esse recurso, como o CASALib. No entanto basta um código simples para isso. A seguir, segue um exemplo em que são mostradas num campo de texto as teclas que estão sendo pressionadas num momento. No campo de texto será exibido os valores keyCode (a representação da tecla em número da tabela ASCII) das teclas.

[as3]
// campo de texto informativo
var output:TextField = new TextField();

// as teclas pressionadas
var arr_teclas:Array = new Array();

// listeners que detectarão o pressionamento de teclas
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

// tamanho do texto e adicionando ao stage
output.text = “Teclas pressionadas: “;
output.scaleY = output.scaleX = 2;
output.width = 300;
addChild(output);

function keyDown(evt:KeyboardEvent):void {
/* se não houver nenhuma tecla na array que
* corresponda à tecla pressionada,
* adiciona a atual à array */

if (arr_teclas.indexOf(evt.keyCode) < 0) { arr_teclas.push(evt.keyCode); } // exibe as teclas pressionadas atualmente output.text = "Teclas pressionadas: " + arr_teclas.join(); }function keyUp(evt:KeyboardEvent):void { /* Se a tecla deixou de ser pressionada, * busca ela na array e a remove */ if (arr_teclas.indexOf(evt.keyCode) >= 0) {
arr_teclas = arr_teclas.splice(0, arr_teclas.indexOf(evt.keyCode));
}

// exibe as teclas pressionadas atualmente
output.text = “Teclas pressionadas: ” + arr_teclas.join();
}
[/as3]

Veja o resultado a seguir, pressionando teclas (dê foco ao SWF clicando no quadro abaixo):

ActionScript · Dicas & Tutoriais

Criando um sistema de partículas simples com ActionScript 3.0

Há várias maneiras de como se criar partículas em Flash. Há desde bibliotecas que facilitam o trabalho e permitem criar efeitos excelentes (é o caso da Tweensy e a sua parte – ainda em beta – FX) até os tutoriais dificílimos disponíveis na Web, que geralmente envolvem muita matemática – e que são muito bons -, de sites como o Flash & Math.

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

[as3]
package
{
import flash.display.*;
import flash.events.*;
import com.greensock.*;

/**
* …
* @author Francisco Prado
*/
public class Main extends MovieClip
{
private var volume:int = 0;
private var particulas:Array = new Array();

public function Main():void
{
// inicia (ou desenha mais) “partículas”
desenharParticula();
}

private function desenharParticula():void {
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
mc.graphics.drawCircle(0, 0, 5);
mc.graphics.endFill();

mc.x = 200;
mc.y = 300;

addChild(mc);

// fazendo as “partículas” subirem e desaparecerem
TweenMax.to(mc, Math.random() + 1,
{ bezier: [
{ x: mc.x, y: mc.y },
{ x: (Math.random() * 50) + mc.x, y: 250 },
{ x: (Math.random() * -50) + mc.x, y: 180 },
{ x: mc.x, y: 80 }],
orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
onComplete: function removendo():void {
removeChild(mc);
mc = null;
}
});

// chama o método para adicionar novas partículas à cena
TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
}
}
}
[/as3]

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” 🙂 ) e eficiência é sempre fundamental.

ActionScript

Flupie – usando ActionScript para animação de texto

A postagem é curta, mas é de coração e é isso que importa. Recebi a dica de um colega sobre uma biblioteca chamada Flupie, destinada a facilitar a criação de efeitos para textos em Flash.

Ainda não tive condições de experimentar, mas pelos exemplos ela é uma mão na roda para gerar efeitos sofisticados de uma maneira bem simples. No site dela você encontra exemplos e tutoriais.

Dicas & Tutoriais · Padrões Web

Usando jQuery para manipular arquivos SVG

Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

[javascript]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG – o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
// Ao ser carregado, chamará a função draw…
$(‘#svgbasics’).svg({onLoad: draw});
});

function draw (svg) {
// Desenhando um círculo…
svg.circle(75, 75, 50, {fill: ‘none’, stroke: ‘red’, ‘stroke-width’: 3});

// Criando um grupo com duas linhas…
var g = svg.group({stroke: ‘black’, ‘stroke-width’: 2});
svg.line(g, 15, 75, 135, 75);
svg.line(g, 75, 15, 75, 135);

// Desenhando um retângulo que, quando clicado, chama o método alert
svg.rect(g, 150, 100, 200, 100, 10, 10,
{fill: ‘yellow’, stroke: ‘navy’, strokeWidth: 5, onclick:"alert(‘Você clicou!’)"});
}

</script>
</head>
<body>
<h1>jQuery SVG – O Básico</h1>
<p>Página de exemplo</p>
<div id="svgbasics"></div>
</body>
</html>
[/javascript]