I have just begun and I'm already stuck :/

`Ship ship;
PImage img;
void setup() {
  size(800, 800);
  img = loadImage("Ecar.jpg");
  ship = new Ship();
  }

void draw() {
  background(51);
  ship.show();
  ship.move();
}
void keyPressed() {


  if (keyCode == RIGHT) {
    ship.setDir(1);
  } else if (keyCode == LEFT) {
    ship.setDir(-1);
  }
}`


`class Ship {
  float x, xdir;
  PShape car;

  Ship() {
    this.x = width/2-40;
    this.xdir = 0;
    noStroke();
    fill(255,0,0);
    car = createShape(RECT, this.x, height-300, 100, 200);
    car.setTexture(img);
  }

  void show() {
    fill(255);
    rectMode(CENTER);
    shape(car);
    //rect(this.x, height-50, 20, 60);
  }

  void setDir(float dir) {
    this.xdir = dir;
  }

  void move() {
    this.x += this.xdir*5;
  }
}`

` PShape[][] shapes = new PShape[4][4];

var boxCount = 3;
var[] positions = new var [boxCount] ;

var boxSize = 50;
var draggingBox = false;
var boxBeingDragged = 0;
var dragOffset = createVector(0, 0); 

var logo;
var index = 0;
function setup() 
{
   logo = loadImage("thesis_logo.png");
  createCanvas(1920, 1080, P2D); 
  rectMode(CENTER);

  for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
  noStroke();
  fill(#5BC0EB);

  shapes[0][0] = createShape(RECT,1440,450,boxSize,boxSize);
  fill(#000000);
  shapes[0][1] = createShape(RECT,1440,510,boxSize,boxSize);
  shapes[0][2] = createShape(RECT,1440,570,boxSize,boxSize);
  shapes[0][3] = createShape(RECT,1440,630,boxSize,boxSize);

   fill(#5BC0EB);
  shapes[1][0] = createShape(RECT,1350,540,boxSize,boxSize);
  fill(#000000);
  shapes[1][1] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[1][2] = createShape(RECT,1470,540,boxSize,boxSize);
  shapes[1][3] = createShape(RECT,1530,540,boxSize,boxSize);


  fill(#5BC0EB);
  shapes[2][0] = createShape(RECT,1410,510,boxSize,boxSize);
  fill(#000000);
  shapes[2][1] = createShape(RECT,1470,510,boxSize,boxSize);
  shapes[2][2] = createShape(RECT,1410,570,boxSize,boxSize);
  shapes[2][3] = createShape(RECT,1470,570,boxSize,boxSize);

  fill(#5BC0EB);
   shapes[3][0] = createShape(RECT,1410,480,boxSize,boxSize);
   fill(#000000);
  shapes[3][1] = createShape(RECT,1470,480,boxSize,boxSize);
  shapes[3][2] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[3][3] = createShape(RECT,1410,600,boxSize,boxSize);
  patternChange();

}

function draw() 
{ 
  background(255);
  fill(#5BC0EB);
  noStroke();
  rect(480,540,50,50);
  for(var j =0; j < 4;j++){
    fill(0);
   shape(shapes[index][j],50,50,boxSize,boxSize);
  }


    stroke(0);
  strokeWeight(2);
  line(width/2,0,width/2,height);
   for (var j=0; j < boxCount; j++) {
    if (draggingBox && j == boxBeingDragged) {
      stroke(255);  // white
    } else {
      noStroke();
    }
    rect( positions[j].x, positions[j].y, boxSize, boxSize) ;
  }

  patternChange();

image(logo, 50, 50, width/8, height/8);

}

function mousePressed() {
  grabBox();
}

function mouseReleased() {
  draggingBox = false;
}

function mouseDragged() {
  if (draggingBox) {
    positions[boxBeingDragged].x = mouseX + dragOffset.x;
    positions[boxBeingDragged].y = mouseY + dragOffset.y;
  }
}
//
function grabBox() {
  for (var i=0; i < boxCount; i++) {
    // Test if the cursor is over the box
    var left = mouseX > positions[i].x - boxSize/2;
    var right = mouseX < positions[i].x + boxSize/2;
    var top = mouseY > positions[i].y - boxSize/2;
    var bottom = mouseY < positions[i].y + boxSize/2;
    if ( left  && right && top && bottom) {
      prvarln ("mouseover box: "+i);
      boxBeingDragged=i;
      draggingBox = true;
      dragOffset.x = positions[i].x - mouseX;
      dragOffset.y = positions[i].y - mouseY;
      break;
    } else {
      draggingBox = false;
    }
  }
}


function patternChange(){

 if (keyPressed) { //switch statement for changing grid createCanvas
    switch(key){
    case '1':
index = 0;
scramble();
    break;
    case '2':
index = 1;
scramble();
    break;
       case '3':
index = 2;
scramble();
    break;

           case '4':
index = 3;
scramble();
    break;
    }
    }
}

function scramble(){
 for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
}`

here is the code:

  import processing.video.*;
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.*;

PeasyCam cam;
PShader sh;
float count;
Movie mov;
PGraphics p;

void setup (){

size(1440, 900, P3D );
mov = new Movie(this, "osc_noc.mov");
mov.play();
p = createGraphics(width,height);
cam = new PeasyCam(this, 500);
sh = loadShader("basicShaderFrag.glsl", "basicShader.glsl");
}

void movieEvent(Movie m) {
  m.read();
}

void draw(){
background(0);
shader(sh);
count +=0.09;
sh.set("u_time", count);

sphere(100);
p.beginDraw();
p.background(0);
p.image(mov, 0, 0, 200, 200);
p.endDraw();
sh.set("tex",p);
// image(p, 5, 260 ,200, 200);
}

#version 150

uniform mat4 transform;
uniform sampler2D tex;

in vec4 position;
in vec2 texCoord;
in vec3 normal;

out vec2 TexCoord;

void main(){

  TexCoord = texCoord;
  gl_Position = transform * position;
}


#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14

in vec2 TexCoord;
uniform float u_time;
uniform sampler2D tex;

void main(){
  vec2 uv = TexCoord;

  gl_FragColor = vec4(texture(tex, TexCoord));
}

a white screen appears, and next it close. the console just say: "Finished". it may be a bug? i could pass a PImage as a texture. but when i link the fragment and shader program into the sketch folder then crash. ..

import controlP5.*;

ControlP5 cp5;

void setup() {
  size(500, 400);
  cp5 = new ControlP5( this );
  //"c", x position, yposition, størrelse
  cp5.addColorWheel("c", 50, 50, 240)
  .setRGB(color(128, 0, 255));
}

int c = color(100);

void draw() {  
  background(255);
  fill( c );
  stroke(0);
  rectMode(CENTER); 
  rect(400, height/2, 50, 50);
  println(cp5.get(ColorWheel.class, "c").getRGB());
}

I watched a lot of Daniel Shiffman tutorials and wanted to write a piece of code that draws out the path in which a certain color moves across the screen in my video. Lets say if my video were a skateboard, and I did a trick with color wheels on, I'd like to have the program draw the movement by following the colored wheels throughout it's movement.

What I have so far:

// Most of this code I learned how to write thanks to Daniel Shiffman

import processing.video.*;

Movie video;

color trackColor; 
float threshold = 20;
float distThreshold = 75;

ArrayList<Blob> blobs = new ArrayList<Blob>();

void setup() {
  size(1080, 720);
  video = new Movie(this, "sk8.mov");
  video.loop();
  trackColor = color(206, 74, 129);
}

void movieEvent(Movie video) {
  video.read();
}

void keyPressed() {
  if (key == 'a') {
    distThreshold++;
  } else if (key == 'z') {
    distThreshold--;
  }
  println(distThreshold);
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

  blobs.clear();

  threshold = 62;

  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d < threshold*threshold) {

        boolean found = false;
        for (Blob b : blobs) {
          if (b.isNear(x, y)) {
            b.add(x, y);
            found = true;
            break;
          }
        }

        if (!found) {
          Blob b = new Blob(x, y);
          blobs.add(b);
        }
      }
    }
  }

  for (Blob b : blobs) {
    if (b.size() > 500) {
      b.show();
    }
  }
}


float distSq(float x1, float y1, float x2, float y2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1);
  return d;
}

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}
class Blob {
  float minx;
  float miny;
  float maxx;
  float maxy;

  Blob(float x, float y) {
    minx = x;
    miny = y;
    maxx = x;
    maxy = y;
  }

  void show() {
    stroke(0);
    fill(255);
    strokeWeight(2);
    rectMode(CORNERS);
    rect(minx, miny, maxx, maxy);
  }

  void add(float x, float y) {
    minx = min(minx, x);
    miny = min(miny, y);
    maxx = max(maxx, x);
    maxy = max(maxy, y);
  }

  float size() {
    return (maxx-minx)*(maxy-miny); 
  }

  boolean isNear(float x, float y) {
    float cx = (minx + maxx) / 2;
    float cy = (miny + maxy) / 2;

    float d = distSq(cx, cy, x, y);
    if (d < distThreshold*distThreshold) {
      return true;
    } else {
      return false;
    }
  }
}

What this code successfully does is track the color of the wheels on my skateboard, and follows the wheels throughout the clip. However, I am trying to figure out how to make it not just follow the wheels, but draw a line in the path where the wheels were before.

Any help would be greatly appreciated.

Thank you

  fill(237, 26, 55);
  rect(336, 605, 112, 121);

  fill(255);
  ellipse(392, 662, 63, 63);

So, firstly I tried using only rotate(PI/2) before that, but it just disappeared. Then I tried translate, in case that was what was missing, but once again nothing. I thought that maybe rectMode(CENTER) would finally make everything work, but it actually made everything move out of place! I tried putting everything between push and pop matrix but it didn't work. I don't understand what is happening or what I am doing wrong. And the thing is that I moved these objects to the end of the code so it wouldn't interfere with the rest. I searched everywhere but I cannot find anything to help me. Thank you for your time.

what i have already done with processing:

and this is my code:

Say I have the width set at an even number of pixels, 8.

Pixels going across pizel 0, pixel 1... to pixel 7.

I would think initially that to get to the centre, you'd say (8-1)/2 but this would be 3.5, and there's no pixel 3.5, so how would processing resolve this? Round up to pixel 4? And settle for an off-centre pixel?

Or should I say 8/4, instead of minusing 1 for the zero that gets counted?

This code for example:

function setup() {
  createCanvas(300, 300);
  rectMode(CORNERS);
  noLoop();
}

function draw() {
  background(102);
  stroke(0, 0, 0);
  rect(0, 10, 100, 100);

  var c = document.getElementById("defaultCanvas0");
  var ctx = c.getContext('2d');
  ctx.rect(101, 10, 100, 100);
  ctx.stroke();
}

has the p5js rect having a slightly reduced height compared to the canvas API version. Any idea why?

Both ellipse and rectangle plane have same rotation, and ellipse's z index is 1 higher than rectangle's. The wired thing is when the mouse position is below the rectangle's y position, the ellipse will be hidden behind the rectangle.

This trobules me a lot, anyone has a good idea?

Here is the code.

void setup() {
  frameRate(60);
  size(1000, 1000, P3D);
  smooth(6);
}

void draw() {
  background(120);

  pushMatrix();
  pushStyle();
  noStroke();
  translate(width/2, height/2, 0);
  rotateX(1);
  rectMode(CENTER);
  rect(0, 0, 800, 800);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(120);
  text("TEST", 0, 0, 1);
  popStyle();
  popMatrix();

  pushMatrix();
  pushStyle();
  translate(mouseX, mouseY, 1);
  rotateX(1);
  fill(0);
  ellipse(0, 0, 50, 50);
  popStyle();
  popMatrix();

}

Thanks

I have small issue with creating linked beziers in that the link between each bezier is not that smooth. I'm using bezierVertex to draw the connected beziers.

What I'm trying to do is smooth out this join, and from what I understand I need to do the following "In order to make two curves A and B smoothly continuous, the last control point of A, the last point of A, and the first control point of B have to be on a straight line."

So, given two vectors like so;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(255);
    noLoop();

    rectMode(CENTER);


    var v1 = createVector(random(200, 300), random(200, 300));
    var v2 = createVector(random(100, 400), random(300, 400));

    ellipse(v1.x, v1.y, 20, 20);
    ellipse(v2.x, v2.y, 20, 20);


    var angle = p5.Vector.angleBetween(v1, v2);

    console.log(angle, radians(angle));

    ellipse( 200 * sin(angle) , 200 * cos(angle), 30, 30);
}

I want to be able to plot the 3rd, so that I can set the control point of the next bezier in my in a straight line, and smooth the bezier connection point.

Thanks in advance.

First time using p5. I'm converting an old Director project as a learning exercise. The Director version looks like this; https://goo.gl/photos/K6zmabEyPUgTsmYMA

translate(150, 150); 

rotate(radians(mouseY));

fill(0);
rect(0, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(200, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(400, 0, 100, 100);

}

In my program I want to use different blend modes when drawing text, but the text is not affected by the blendMode() function call.

Here's a simple program that demonstrates the issue, just move the mouse over the rectangle and see how the ellipse is correctly blended, as opposed to the letter 'K'.

void setup(){
    size(600, 600, P2D);

    rectMode(CENTER);
    textSize(100);
    textAlign(CENTER, CENTER);
}

void draw(){
    blendMode(NORMAL);
    background(50);

    noStroke();
    fill(255);
    rect(300, 300, 100, 100);

    blendMode(EXCLUSION);
    text("K", mouseX+50, mouseY);
    ellipse(mouseX-50, mouseY, 75, 75);
}

When the user draws a rectangle, it shows the shape being drawn. When the user releases their mouse, it then creates a PGraphic of the final shape. I would then like the user to draw on top of that. Here is my problem:

I had to reset the background of the canvas when drawing a rectangle because otherwise, it shows a trail of rectangles. The result is that while the user draws a new rectangle the old ones disappear and come back once the mouse has been releasd

Some thoughts: I would also like to add features where the user can select on a previously drawn rectangle and change it's colour, stroke, send to back, bring to front etc..

To achieve this, I'm storing all drawn rectangles (PGraphics) into an ArrayList which will be drawn via a for loop. This will allow me to adjust the behaviour by moving the PGraphics elements up and down the ArrayList.

QUESTIONS: Is this correct or should I be creating an ArrayList of rectangles? Instead of creating my own class of Shape am I better off using PShape?

int startX;
int startY;
int endX;
int endY;
boolean drawing;
int strokeW = 3;
Shape shape;

PGraphics shapeLayer; 
ArrayList<PGraphics> layersList = new ArrayList();

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  strokeWeight(strokeW);
  if (key >= '0' && key <= '9') {
    strokeW = key - '0';
  }
  for(int i = 0; i < layersList.size(); i++) {
    image(layersList.get(i), 0, 0);
  }
  if (drawing) {
    shape.createRectangle();
  }
}


void mousePressed() {
  startX = mouseX;
  startY = mouseY;

  shapeLayer = createGraphics(width, height);
  shapeLayer.beginDraw();
}  

void mouseDragged() {
  drawing = true;
  endX = constrain(mouseX, 0, 500);
  endY = constrain(mouseY, 0, 500); 

  shape = new Shape(startX, startY, endX, endY);
  shapeLayer.clear();
}

void mouseReleased() {
  drawing = false;
  shapeLayer.endDraw();
  layersList.add(shapeLayer);
}  

Here is the Shape Class:

class Shape {
  int startX;
  int startY;
  int endX;
  int endY;

  Shape(int x1, int y1, int x2, int y2) {
    startX = x1;
    startY = y1;
    endX = x2;
    endY = y2;
  }    

  void createRectangle() {
    background(255, 0);
    shapeLayer.strokeWeight(strokeW);
    shapeLayer.rectMode(CORNERS);
    shapeLayer.rect(startX, startY, endX, endY);  
    rectMode(CORNERS);
    rect(startX, startY, endX, endY);

  }

}  

    var angle;


    var Polygon= function(x, y, hi, wei) {
        this.x = x;
        this.y = y;
        this.height = hi;
        this.width = wei;
    }
      Polygon.prototype.display = function() {
          push();
          translate(this.x, this.y);

          rect(0, 0,this.height, this.width);
          pop();
      }

      Polygon.prototype.area = function () {
        return this.calcArea();
      }

      Polygon.prototype.calcArea = function () {
        return this.height * this.width;
      }

    function Protogon(x, y, hi, wei, word) {
      Polygon.call(this, x, y, hi, wei);
      this.word = word;

    };

    Protogon.prototype= Object.create(Polygon.prototype); 
    Protogon.prototype.constructor = Protogon;
    Protogon.prototype.display = function() {
          push();
          translate(this.x, this.y);
          rotate(angle);
          rect(50, 0,this.height, this.width);
          text(this.word, 50, -10);
          pop();
    }

    function setup() {
      createCanvas(720, 400);
      angle = 1.0;
      square = new Polygon(width/2, height/2, 20, 40);
      zz = new Protogon(square.x+20, square.y+20, 60, 40, "Hello");
    }

    function draw() {
      background(50, 89, 100);
      stroke(1);
      fill('red'); 
      square.display();
      fill('green');
      zz.display();
      angle+=0.01 ;
    }

int rectMode The current rect mode (read-only)
processing.github.io/processing-javadocs/core/processing/core/PGraphics.html#rectMode

Sorry if this is a dumb question

 0,0 +--------+                              +---------+  xmax, ymax
     |        |                to            |         |
     |        |                              |         |
     +--------+ width,height       xmin,ymin +---------+

I could do this in processing 2 but changes in 3 invalidates previous method.

void setup()
{
  size(1000, 600);
  noLoop();
}

void draw()
{
  scale(width/2, height/4);
  noFill();
  rect(0,0,1,1);
}

I'm expecting a unfilled rectange taking half the width and quarter the height but I'm seeing a filled rectange with strange boundaries.

Is there any reason or is this a bug ? The same happens with shapes.

Output:

Important part: Line and rectangle from top left

Box[] boxes=new Box[5];
 void setup(){
   size(200,200);
   rectMode(CENTER);
   for(int i=0;i<boxes.length;i++){
     boxes[i]= new Box( random(100),random(100), random(5,15)
     );
   }
 }
  void draw(){
    background(192);
    for(int i=0;i<boxes.length;i++){
      boxes[i].draw();
    }
    for(int j=0;j<boxes.length;j++){
      for(int k=0; k< boxes.length; k++){
        if(j !=k){
          boxes[j].attract(boxes[k]);
        }
      }
    }
  }

  void mousePressed(){
    for(int i=0;i<boxes.length;i++){
      boxes[i].mousePressed();
    }
  }

I am trying to reproduce an old sketch in p5js but I ran into troubles...

Here is the code

var fontRegular, fontBold

var offset = 20
var z = 0.0

function preload(){

    fontRegular = loadFont("assets/Regular.otf")
    fontBold = loadFont("assets/Bold.otf")
}


function setup() {

    createCanvas(windowWidth, windowHeight)
    colorMode(HSB,360, 100, 100);

}

function draw() {

    background(5)       

    var chars = "+ — I O"
    var splitString = split(chars, " ");

    textFont(fontRegular);
    fill(0,0,100).strokeWeight(0).textSize(20)
    text(s, 10, 10, 200, 80)

    for ( var x = offset; x < width - offset; x += offset){
        for (var y = offset; y < height - offset; y += offset){


            var nl = map(noise(z, x/450.0, y/450.0), 0, 1, 0, 3)

            text(chars[nl], x, y)
        }
    }

    z = z + .0006

}

Console is given me an error from the p5.js library: p5.js:12854 Uncaught TypeError: Cannot read property 'toString' of undefined

This is the original sketch that works perfectly in Processing:

float z = 0.0;
PFont myFont;
int offset = 18;

void setup(){
  size(500,700);
  pixelDensity(displayDensity());
  //colorMode(HSB, 360,300,360);
  noStroke();
  myFont = createFont("MaisonNeue-Bold", 10);
  textFont(myFont);
  textAlign(CENTER, CENTER);

}

void draw() {

  background(255);
  String[] chars = split("+ — I O + C", ' ');

  for ( int x = offset*3; x < width-offset*2; x +=offset){
    for ( int y = offset*3; y < height-offset*2; y += offset){

      int nl = (int) map(noise(z, x / 450.0, y / 450.0), 0, 1, 0, 7);

      fill(0);
      rectMode(CENTER);
      if ((y - 16) % (2) == 0){
        text(chars[nl], x,y );}
        else{
        text(chars[nl], x + 8 ,y);
        }

    }
  }

  z = z + .006;

}

I'm guessing I am doing something wrong with arrays in p5js...

Any suggestions?

Thank you!

This is the code I have at the moment and as you can see, it is randomly selecting the hue value from 50-250 but is there any way I can set it so it selects from 0-50 and 200-250? So it doesn't select any number between 51-199 and 251-255.

Any advice or help would be greatly appreciated! Thank you!

int amt = 10;

int[] x1 = new int[amt];
int[] x2 = new int[amt];
int[] y1 = new int[amt];
int[] y2 = new int[amt];

color[] c = new color[amt];

color bgcolor;

void setup() {
  size(600,600);
  colorMode(HSB);
  rectMode(CORNERS);
  noStroke();
  bgcolor = color(random(50),100,255);
  background(bgcolor);

  for(int i = 0; i < amt; i++){
    x1[i] = int(random(width)); 
    x2[i] = x1[i] + int(random(80,800));
    y1[i] = int(random(height));
    y2[i] = y1[i] + int(random(50,500));
    c[i] = color(random(50,250),90,255);
  }
}

void draw() {
    for(int i = 0; i < amt; i++){
      fill(c[i]);
      rect(x1[i],y1[i], x2[i], y2[i]);
    }
}

Why are (in the following code) multiple shapes in the fill color (150) even though the fill command is the last command in the DRAW zone. I thought only subsequent shapes would be filled in that color - but it is also filling in earlier shapes in the same (150) grey.

void setup() {
    size(640,420);
    background(240);
    smooth();
}

void draw() {

  //body of zork
  rectMode(CENTER);
  rect(320,210,80,120);

  //head of zork
  ellipse(320,118,65,65);

  //eyes of zork
  //fill(50);
  ellipse(307,115,10,20);
  ellipse(333,115,10,20);
  fill(150);
}

ERROR: 0:2: '' : Declaration must include a precision qualifier or the default precision must have been previously declared. ERROR: 0:30: '' : Declaration must include a precision qualifier or the default precision must have been previously declared.

The piece of code I am trying to run:

float x,y,z;
void setup() {
  size(200,200,P3D);
  x = width/2;
  y = height/2;
  z = 0;
}

void draw() {
  translate(x,y,z);
  rectMode(CENTER);
  rect(0,0,100,100);

z++; // The rectangle moves forward as z increments.
}

Thank you

var canvas; var counter=0; var boby=0 ; var obj1 = 0; var obj2 = 1; var obj3 = 2; var changesize=0; var attackLevel = 1.0; var releaseLevel = 0; var attackTime = 0.001 var decayTime = 0.1; var susPercent = 0.2; var releaseTime = 0.5; var env, Osc; var state; var start; function setup(){ masterVolume(0.06); canvas= createCanvas(displayWidth/2,displayHeight/2); noStroke(); noLoop(); canvas.mousePressed(theplanes);

}

function theplanes(){

ourtimer(300,70,2,800,500);

}

function sound(freq){ env = new p5.Env(); env.setADSR(attackTime, decayTime); env.setRange(attackLevel, releaseLevel); Osc = new p5.Oscillator('sawtooth'); Osc.amp(env); Osc.start(); Osc.freq(freq); env.play(); }

function ourtimer(xloc,yloc,count,freq,wait){

setInterval(plane1,wait,xloc,yloc,count,freq);

function plane1(xloc,yloc,count,freq){

sound(freq); var size= (map(sin(changesize),-1,1,0,60));

colorvalues=255/count; steps=size/count;

for (i = 0; i < count; i++) { fill(icolorvalues); stroke(0); strokeWeight(1); rectMode(CENTER); rect(xloc, yloc, size - isteps, size - i*steps);

} changesize++;

}

} function draw(){ background(100);

}

Please help.

float lX; float lY; float lW; float lH; float lS; float rX; float rY; float rW; float rH; float rS; boolean up, down; boolean v1, h1; boolean started = true; int mate = 9; int xPos; int yPos; int incDec =4;
int bVal=0; int gVal=0; int rVal=250; int w = 40; int h = 40; int speedx = 2; int speedy = 3;

void setup(){ //I h8 U Java!!! size (600,600); rectMode (CENTER); ellipseMode (CENTER); lX = 30; lY = height/2; lW = 40; lH=100; lS = 5; rX=570; rY = height/2; rW = 40; rH=100; rS=5; xPos = 250; yPos = 250; }

void draw (){ background(0); drawlpad(); drawrpad(); movelpad(); moverpad(); drawball(); moveball(); restrictpaddle(); contactpad(); contactr(); }

void drawlpad(){ fill(0,250,0); rect(lX,lY,lW,lH); }

void drawrpad(){ fill(0,0,250); rect(rX,rY,rW,rH); }

void movelpad(){ if (up){ lY=lY-lS; } if (down){ lY=lY+lS; } }

void moverpad(){ if(v1){ rY=rY-rS; } if(h1){ rY=rY+lS; } }

void drawball(){
fill(rVal,gVal,bVal); ellipse(xPos,yPos,w,h); //bsize }

void moveball(){ xPos = xPos +incDec;

if (xPos >600-w/2){ incDec=-incDec; setup(); } if (xPos<10+w/2){ incDec=-incDec; setup(); } yPos = yPos + mate; if (yPos>600){ mate=-mate;

} if (yPos < 0){ mate=-mate;

}

}

void restrictpaddle(){ if (lY - lH/2 < 0) { lY = lY + lS; } if (lY + lH/2 > height) { lY= lY - lS; } if (rY - rH/2 < 0) { rY = rY + rS; } if (rY + rH/2 > height) { rY = rY - rS; } }

void contactpad() { if (xPos-w/2 < lX + lW/2 && yPos-h/2 < lY +lH/2 && yPos +lH/2 > lY - lH/2){ if (incDec<0){ incDec = -incDec; } } }

void contactr() { if(xPos+w/2 > rX - rW/2 && yPos-h/2 < rY + rH/2 && yPos+h/2 > rY -rH/2){ if (incDec>0){ incDec = -incDec; } } }

void keyPressed(){ if(started = true){ if (key=='w' || key=='W'){ up=true; } if (key=='s'||key=='S'){ down=true; } if (keyCode==UP){ v1=true; } if(keyCode ==DOWN){ h1=true; } } }

void keyReleased(){ if (key=='w' || key=='W'){ up=false; }

if (key=='s'||key=='S'){ down=false; }

if (keyCode==UP){ v1=false; }

if(keyCode ==DOWN){ h1=false; } }

void mousePressed (){ //for change color int temp; temp=bVal; bVal=gVal; gVal=rVal; rVal=temp; }

/*void scores () { fill(255); text (scorer1, 100, 50); text (scorer, width-100,50); }