Programming for Design

A simple pattern using HTML5 canvas. Here’s the code:

window.onload = function() {

var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(‘2d’);

context.translate(canvas.width/2, canvas.height/2);

context.beginPath();

for(var i = 0; i < 50; i++) {

context.lineTo(canvas.width/2, canvas.height/2);

context.lineTo(0, 0);

context.rotate(Math.PI * 2 * i-1);

}

context.strokeStyle = “#666”;

context.lineWidth = 2;

context.stroke();

context.beginPath();

for (var i = 0; i < 150; i+=5) {

context.arc(0, 0, 20+i, 0, 2 * Math.PI);

}

context.lineWidth = 2;

context.strokeStyle = “rgba(255, 170, 0, 0.5)”;

//context.fillStyle = “rgba(255, 100, 0, 0.5)”;

//context.fill();

context.stroke();

context.closePath();

}

</script>

1 month ago 1 note View high resolution

Created by E. Reyes. Paris, Apr, 2012

Rigth-click = adds node

Drag node to rearrange

Perhaps it’s useful to teach how networks are created.

Based on the exercice 2, p 58 by K. Terzidis

float [] px = new float[0];

float [] py = new float[0];

void setup() {

size(600, 400);

smooth();

}

void draw() {

background(230);

stroke(250, 150, 0, 150);

beginShape();

for (int i = 1; i < px.length; i++) {

for (int j = 0; j < px.length-1; j++) {

vertex(px[i], py[i]);

vertex(px[j], py[j]);

}

endShape();

for (int i = 0; i < px.length; i++) {

stroke(125);

fill(200);

ellipse(px[i], py[i], 10, 10);

}

void mousePressed() {

if (mouseButton == RIGHT) {

px = append(px, mouseX);

py = append(py, mouseY);

}

void mouseDragged() {

for (int i = 0; i < px.length; i++) {

if(dist(mouseX, mouseY, px[i], py[i]) < 20) {

px[i] += (mouseX - pmouseX);

py[i] += (mouseY - pmouseY);

px[i] = constrain(px[i], 5, width-5);

py[i] = constrain(py[i], 5, height-5);

}

1 month ago 3 notes View high resolution

$ActionScript 3.0: bitmap class This sample introduces some uses of the classes bitmap and bitmapData. The result is a simple paint app. Thanks to Joe Mondragón for this intervention. import flash.display.Bitmap; import flash.display.BitmapData; var bmp:Bitmap = new Bitmap(); var bdata:BitmapData = new BitmapData(300, 300, false, 0xFFFFFF); bmp.bitmapData = bdata; addChild(bmp); bmp.x = 100; var picker:Bitmap = new Bitmap( new Imagen() ); var colorToPaint:uint; addChild(picker); this.addEventListener(Event.ENTER_FRAME, render); stage.addEventListener(MouseEvent.CLICK, clickMe); function render (e:Event) { var bx:int = mouseX; var by:int = mouseY; bdata.setPixel (bx - bmp.x, by - bmp.y, colorToPaint); bdata.setPixel (bx - bmp.x-1, by - bmp.y-1, colorToPaint); bdata.setPixel (bx - bmp.x, by - bmp.y-1, colorToPaint); bdata.setPixel (bx - bmp.x+1, by - bmp.y-1, colorToPaint); bdata.setPixel (bx - bmp.x-1, by - bmp.y, colorToPaint); bdata.setPixel (bx - bmp.x+1, by - bmp.y, colorToPaint); bdata.setPixel (bx - bmp.x-1, by - bmp.y+1, colorToPaint); bdata.setPixel (bx - bmp.x-1, by - bmp.y+1, colorToPaint); bdata.setPixel (bx - bmp.x, by - bmp.y+1, colorToPaint); } function clickMe(e:MouseEvent) { if (picker.hitTestPoint(mouseX, mouseY)) { colorToPaint = picker.bitmapData.getPixel(mouseX, mouseY); } } See SWF in action$

ActionScript 3.0: bitmap class

This sample introduces some uses of the classes bitmap and bitmapData. The result is a simple paint app. Thanks to Joe Mondragón for this intervention.


import flash.display.Bitmap;
import flash.display.BitmapData;

var bmp:Bitmap = new Bitmap();
var bdata:BitmapData = new BitmapData(300, 300, false, 0xFFFFFF);
bmp.bitmapData = bdata;
addChild(bmp);
bmp.x = 100;

var picker:Bitmap = new Bitmap( new Imagen() );
var colorToPaint:uint;
addChild(picker);

this.addEventListener(Event.ENTER_FRAME, render);

stage.addEventListener(MouseEvent.CLICK, clickMe);

function render (e:Event) {
	var bx:int = mouseX;
	var by:int = mouseY;
	
	bdata.setPixel (bx - bmp.x, by - bmp.y, colorToPaint);
	bdata.setPixel (bx - bmp.x-1, by - bmp.y-1, colorToPaint);
	bdata.setPixel (bx - bmp.x, by - bmp.y-1, colorToPaint);
	bdata.setPixel (bx - bmp.x+1, by - bmp.y-1, colorToPaint);
	bdata.setPixel (bx - bmp.x-1, by - bmp.y, colorToPaint);
	bdata.setPixel (bx - bmp.x+1, by - bmp.y, colorToPaint);
	bdata.setPixel (bx - bmp.x-1, by - bmp.y+1, colorToPaint);
	bdata.setPixel (bx - bmp.x-1, by - bmp.y+1, colorToPaint);
	bdata.setPixel (bx - bmp.x, by - bmp.y+1, colorToPaint);
}

function clickMe(e:MouseEvent) {
	if (picker.hitTestPoint(mouseX, mouseY)) {
		colorToPaint = picker.bitmapData.getPixel(mouseX, mouseY);
	}
}

See SWF in action

1 year ago 9 notes View high resolution

ActionScript 3.0: Papervision materials + objects

This sample adds materials to an object, in this case a simple cube.


import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;

import org.papervision3d.core.utils.*;
import org.papervision3d.core.utils.virtualmouse.VirtualMouse;

var viewport:Viewport3D = new Viewport3D(0,0,true,true);
addChild(viewport);
viewport.buttonMode = true;
var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
camera.zoom = 5;
camera.focus = 100;

var mm:MovieMaterial = new MovieMaterial(cara01);
mm.interactive = true;
mm.animated = true;
mm.smooth = true;

var mm2:MovieMaterial = new MovieMaterial(cara02);
mm2.interactive = true;
mm2.animated = true;
mm2.smooth = true;

var mm3:MovieMaterial = new MovieMaterial(cara03);
mm3.interactive = true;
mm3.animated = true;
mm3.smooth = true;

var mm4:MovieMaterial = new MovieMaterial(cara04);
mm4.interactive = true;
mm4.animated = true;
mm4.smooth = true;

var mm5:MovieMaterial = new MovieMaterial(cara05);
mm5.interactive = true;
mm5.animated = true;
mm5.smooth = true;

var mm6:MovieMaterial = new MovieMaterial(cara06);
mm6.interactive = true;
mm6.animated = true;
mm6.smooth = true;


var cube:Cube = new Cube(new MaterialsList({front:mm, left:mm2, right:mm3, top:mm4, bottom:mm5, back:mm6}),
    200, 200, 200, 10, 10, 10);


scene.addChild(cube);

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void {

	var xDist:Number = mouseX - stage.stageWidth * 0.5;
	var yDist:Number = mouseY - stage.stageHeight * 0.5;
	cube.rotationY +=  xDist * 0.05;
	cube.rotationX +=  yDist * 0.05;
	renderer.renderScene(scene, camera, viewport);
}

See SWF in action

1 year ago 1 note

ActionScript 3.0: Papervision framework

This example introduces basic concepts to implement Papervision.

Some resources online:


package {

	import flash.display.Sprite;
	import flash.events.Event;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.view.BasicView;

	public class Main extends BasicView {

		private var plane:Plane;

		public function Main() {

			super();

			var material:ColorMaterial = new ColorMaterial();
			material.doubleSided = true;
			material.fillColor = 0x990099;
			material.fillAlpha = 1.0;

			plane = new Plane(material, 450, 400);
			scene.addChild( plane );

			stage.addEventListener(Event.ENTER_FRAME, render);

		}

		private function render(event:Event):void {

			plane.rotationX +=  1.0;
			plane.rotationY +=  2.0;
			plane.rotationZ +=  3.0;

			singleRender();

		}

	}

}

See Main.as

See SWF in action

1 year ago

ActionScript 3.0: interactive mask

This sample introduces how to use a programmatic mask. It also uses 5 ActionScrip Files linked each other.

These are the AS files required:

See SWF in action [ wait a bit for the images to load ]

1 year ago 1 note

ActionScript 3.0: Loader + URLRequest

This exercise uses the classes Loader and URLRequest to show a simple image gallery. The user clicks anywhere to change the image. Once all the images have passed, they start again.

This the Fotos.as code


package {

	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;

	public class Fotos extends MovieClip {
		
		public var place:Loader = new Loader();
		public var imgReq:URLRequest;
		public var imageName:String;
		public var numImages:Number = 2;
		public var currImg:Number = 0;
		
		function Fotos() {
			buttonMode = true;
			getImage();
			addChild(place);
			addEventListener(MouseEvent.CLICK, onClick);
		}
		
		public function onClick(event:MouseEvent):void {
			currImg ++;
			if(currImg == numImages) {
				currImg = 0;
			}
			getImage();
		}
		
		public function getImage():void	{
			imageName = "pix/image" + currImg + ".png";
			imgReq = new URLRequest(imageName);
			place.load(imgReq);
		}
		
	}
	
}

See SWF in action

1 year ago 9 notes

ActionScript 3.0: HYPE framework object pool

This sample uses HYPE’s object pool function. This implies to render instances of a movie clip accordingly to a given shape (which is also another movie clip).


import hype.extended.color.ColorPool;
import hype.extended.layout.ShapeLayout;
import hype.framework.core.ObjectPool;

forma.visible = false;

var pool:ObjectPool = new ObjectPool(Figura, 300);
var layout:ShapeLayout = new ShapeLayout(forma);

var color:ColorPool = new ColorPool(0xFF00FF, 0xFFFF00, 0x00FFFF);

pool.onRequestObject = function(clip) {
	clip.scaleX = clip.scaleY = (Math.random() * 0.75) + 0.25;
	
	layout.applyLayout(clip);
	color.colorChildren(clip);
	
	addChild(clip);
}

pool.requestAll();

See SWF in action

1 year ago 1 note

ActionScript 3.0: HYPE framework

This exercise employs the HYPE framework, a very cool library to generate animation and visual effects.


import hype.extended.behavior.MouseFollowSpring;
import hype.framework.display.BitmapCanvas;
import hype.extended.rhythm.FilterRhythm;
import hype.framework.core.TimeType;

var rastro:Sprite = new Sprite();
var figura:MovieClip = new Figura();
rastro.addChild(figura);
addChild(rastro);

var sigueme:MouseFollowSpring = new MouseFollowSpring(figura, 0.5, 0.2);

sigueme.start();

var escenario:BitmapCanvas = new BitmapCanvas(600, 300);
escenario.startCapture(rastro, true);
addChild(escenario);

var blur:BlurFilter = new BlurFilter(7, 5, 3);
var blurRhythm:FilterRhythm = new FilterRhythm([blur], escenario.bitmap.bitmapData);
blurRhythm.start(TimeType.ENTER_FRAME, 3);

See the SWF in action

1 year ago View high resolution

$ActionScript 3.0: extending animations and packages to simulate particles This sample extends the types of programmatic animations by means of packages. Simply implent the following. Escenario FLA Dos clases movie clip. Crea un diseño de figuras atractivas visualmente. Clase: ParticleDemo package { import flash.display.Sprite; import flash.events.Event; public class ParticleDemo extends Sprite { private var emitterX:Number = stage.stageWidth/2; private var emitterY:Number = stage.stageHeight/2; public function ParticleDemo() { stage.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true); } private function onLoop(evt:Event):void { var p:Particle = new Particle(emitterX, emitterY, Math.random()*11 - 6, Math.random()*-20, 1, Math.random()*0xFFFFFF); addChild(p); } } } Clase: Particle package { import flash.display.*; import flash.geom.*; import flash.events.Event; public class Particle extends Sprite { private var _xpos:Number; private var _ypos:Number; private var _xvel:Number; private var _yvel:Number; private var _grav:Number; public function Particle(xp:Number, yp:Number, xvel:Number, yvel:Number, grav:Number, col:uint) { _xpos = xp; _ypos = yp; _xvel = xvel; _yvel = yvel; _grav = grav; var ball:Sprite = new Ball(); addChild(ball); x = _xpos; y = _ypos; alpha = .8; scaleX = scaleY = Math.random() * 1.9 + .1; var colorInfo:ColorTransform = ball.transform.colorTransform; colorInfo.color = uint(col); ball.transform.colorTransform = colorInfo; addEventListener(Event.ENTER_FRAME, onRun, false, 0, true); } private function onRun(evt:Event):void { _yvel += _grav; _xpos += _xvel; _ypos += _yvel; x = _xpos; y = _ypos; if (_xpos < 0 || _ypos < 0 || _xpos > stage.stageWidth || _ypos > stage.stageHeight) { removeEventListener(Event.ENTER_FRAME, onRun); parent.removeChild(this); } } } } See the SWF in action$

ActionScript 3.0: extending animations and packages to simulate particles

This sample extends the types of programmatic animations by means of packages. Simply implent the following.


Escenario FLA

Dos clases movie clip. Crea un diseño de figuras atractivas visualmente.


Clase: ParticleDemo

package {
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class ParticleDemo extends Sprite {
		private var emitterX:Number = stage.stageWidth/2;
		private var emitterY:Number = stage.stageHeight/2;
		
		public function ParticleDemo() {
			stage.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
		}

		private function onLoop(evt:Event):void {
		var p:Particle = new Particle(emitterX, emitterY, Math.random()*11 - 6, Math.random()*-20, 1, Math.random()*0xFFFFFF);
		addChild(p);
		}
	}
}


Clase: Particle

package {
	import flash.display.*;
	import flash.geom.*;
	import flash.events.Event;
	public class Particle extends Sprite {
		private var _xpos:Number;
		private var _ypos:Number;
		private var _xvel:Number;
		private var _yvel:Number;
		private var _grav:Number;
		public function Particle(xp:Number, yp:Number, xvel:Number, yvel:Number, grav:Number, col:uint) {
			_xpos = xp;
			_ypos = yp;
			_xvel = xvel;
			_yvel = yvel;
			_grav = grav;

			var ball:Sprite = new Ball();
			addChild(ball);
			x = _xpos;
			y = _ypos;
			alpha = .8;
			scaleX = scaleY = Math.random() * 1.9 + .1;
			
			var colorInfo:ColorTransform = ball.transform.colorTransform;
			colorInfo.color = uint(col);
			ball.transform.colorTransform = colorInfo;
			addEventListener(Event.ENTER_FRAME, onRun, false, 0, true);
			}
		private function onRun(evt:Event):void {
			_yvel +=  _grav;
			_xpos +=  _xvel;
			_ypos +=  _yvel;
			x = _xpos;
			y = _ypos;
			if (_xpos < 0 || _ypos < 0 || _xpos > stage.stageWidth || _ypos > stage.stageHeight) {
				removeEventListener(Event.ENTER_FRAME, onRun);
				parent.removeChild(this);
			}
		}
	}
}

See the SWF in action

1 year ago View high resolution

ActionScript 3.0: bitmap class

ActionScript 3.0: Papervision materials + objects

ActionScript 3.0: Papervision framework

ActionScript 3.0: interactive mask

ActionScript 3.0: Loader + URLRequest

ActionScript 3.0: HYPE framework object pool

ActionScript 3.0: HYPE framework

ActionScript 3.0: extending animations and packages to simulate particles

ActionScript 3.0: bitmap class

ActionScript 3.0: Papervision materials + objects

ActionScript 3.0: Papervision framework

ActionScript 3.0: interactive mask

ActionScript 3.0: Loader + URLRequest

ActionScript 3.0: HYPE framework object pool

ActionScript 3.0: HYPE framework

ActionScript 3.0: extending animations and packages to simulate particles

Programming for Design

About:

Search:

Following: