nfg_Day10

Day 10
<< main | course director notes

code ArrayList bobs;
 * 8. ArrayList**

void setup { size(640, 480); bobs = new ArrayList; }

void draw { noStroke; fill(0,80); rect(0,0,width,height); for (int i=0;i<bobs.size;i++) { Bob bob = (Bob) bobs.get(i); if(mousePressed){ stroke(40,40,255,random(100)+50); line(mouseX,mouseY,bob.posX,bob.posY); }   bob.update; } }

void mousePressed { bobs.add(new Bob(mouseX, mouseY)); }

class Bob {

float posX, posY; float ease = 100;

//this is the "constructor" Bob(float _pX, float _pY) { posX = _pX; posY = _pY; }

void update { if(mousePressed){ posX = tween(posX,mouseX,ease+random(ease/2)); posY = tween(posY,mouseY,ease+random(ease/2)); }else{ posX = tween(posX,random(width),ease+random(ease/2)); posY = tween(posY,random(height),ease+random(ease/2)); }   drawBob; }

void drawBob { ellipseMode(CENTER); noStroke; fill(255, 0, 0, 100); ellipse(posX, posY, 40, 40); }

float tween(float v1, float v2, float e) { v1 += (v2-v1)/e; return v1; } }

code

code import processing.opengl.*;
 * 7. Classes in Processing**

int sW = 640; //width int sH = 480; //height int sD = 600; //sD

int numSpheres = 10; Bob[] bob = new Bob[numSpheres];

void setup { size(sW, sH, OPENGL); for (int i=0;i sD/2) { speed *= -1; }   posZ += speed; if(mousePressed){ posX = tween(posX,mouseX,ease); posY = tween(posY,mouseY,ease); }   drawBob; }

void drawBob { pushMatrix; translate(posX, posY, posZ); noStroke; sphere(20); popMatrix; }

float tween(float v1, float v2, float e) { v1 += (v2-v1)/e; return v1; }

}

code

code import processing.opengl.*;
 * 6. 3D and Processing**

int numSpheres = 100; float[] posX = new float[numSpheres]; float[] posY = new float[numSpheres]; float[] posZ = new float[numSpheres]; float[] speed = new float[numSpheres];

void setup { size(640, 480, OPENGL); ellipseMode(CENTER); for (int i=0;i 300) { speed[i] *= -1; }   posZ[i] += speed[i];

pushMatrix; translate(posX[i], posY[i], posZ[i]); noStroke; sphere(20); popMatrix; } } code

code <!doctype html>
 * 5. Processing.js review**

 body{ background:black; }

width:700px; height:700px; position:relative; margin:auto; background:#555577; border:1px solid red; }
 * 1) container{

width:600px; height:600px; position:absolute; left:100px; top:100px; } 
 * 1) canvas1{



code

code <!doctype html>
 * 4. Processing.js and jQuery**

 #container{ width:640px; height:480px; position:relative; margin:auto; border:1px solid black; }

#foo{ width:100px; height:100px; position:absolute; left:270px; top:190px; border:2px solid red; }

  



var foo;

function setup{ foo = $("#foo"); foo.draggable; }

$(setup);



code

code <!doctype html>
 * 3. jquery, ids, and classes**

 #container{ width:640px; height:480px; position:relative; margin:auto; border:1px solid black; }

.box{ width:100px; height:100px; position:absolute; }

#foo1{ background:red; left:0px; top:0px; }

#foo2{ background:blue; left:20px; top:20px; }

#foo3{ background:green; left:40px; top:40px; }

  



function setup{ $(".box").draggable; $("#foo1").click(foo1Handler); }

function foo1Handler{ $("#foo1").css({background:"blue",width:400}); }

$(setup);

code

code <!doctype html>
 * 2. jquery example**

<style type="text/css"> #container{ width:640px; height:480px; position:relative; margin:auto; border:1px solid black; }

#foo{ width:100px; height:100px; position:absolute; background:red; }

<script src="http://fox-gieg.com/js/jquery.min.js" type="text/javascript"> <script src="http://fox-gieg.com/js/jquery-ui.min.js" type="text/javascript"> <script src="http://fox-gieg.com/js/processing-1.3.6.min.js" type="text/javascript">

<script type="text/javascript"> var foo; var switcher = false;

function setup{ foo = $("#foo"); foo.click(fooHandler); }

function fooHandler{ switcher = !switcher; if(!switcher){ foo.css({background:"blue"}); foo.animate({left:100,opacity:0.1},300); }else{ foo.css({background:"red"}); foo.animate({left:0,opacity:1},300); }       }

$(setup);

code

code <!doctype html>
 * 1. "vanilla" JavaScript example**

<style type="text/css"> width:100px; height:100px; position:absolute; background:red; } background:yellow; } <script type="text/javascript"> var foo; var posX = 0; var speed = 5;
 * 1) foo{
 * foo:hover{

function setup{ foo = document.getElementById("foo"); foo.onmousedown = fooHandler; draw; }

function draw{ if(posX<0 || posX>640){ speed *= -1; } posX += speed;

foo.style.left = posX+"px"; setTimeout(draw,(1/60)*1000); }

function fooHandler{ posX += 100; foo.innerHTML = '<img src="test.png">' }

window.onload = setup;

code