API tools faq
paste
Advertisement
letsgetprocessing

Bezier Game

letsgetprocessing
Sep 30th, 2015
317
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.71 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title>Bezier Game</title>
  4.         <script src="https://rawgit.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
  5.  
  6.         <script type='text/javascript'>
  7.         var resizeCanvas = function() {
  8.             var canv = Processing.getInstanceById('pjs');
  9.             canv.size(window.innerWidth, window.innerHeight);
  10.         }
  11.         </script>
  12.  
  13.         <script type="text/processing" data-processing-target="pjs">
  14.         color active_color = color(255, 0, 0);
  15.         color passive_color = color(80);
  16.         color win_color = color(0, 255, 0);
  17.         color bg_color = color(0);
  18.         color text_color = color(200);
  19.  
  20.         int w = 500;
  21.         int h = 500;
  22.         int rad = 30;
  23.         int start_time;
  24.         int score;
  25.         int drawing_mode;
  26.         boolean show_error;
  27.         float error_time = 0.0;
  28.         float angle;
  29.  
  30.         PGraphics error;
  31.  
  32.         class Point
  33.         {
  34.           float xpos, ypos;
  35.           boolean is_active, is_static;
  36.  
  37.           Point(float x, float y, boolean active_state, boolean static_state)
  38.           {
  39.             xpos = x;
  40.             ypos = y;
  41.             is_active = active_state;
  42.             is_static = static_state;
  43.           }
  44.         }
  45.  
  46.         class MCurve
  47.         {
  48.           Point a, b, c, d;
  49.           Point[] points;
  50.  
  51.           MCurve(Point a_point, Point b_point, Point c_point, Point d_point)
  52.           {
  53.             a = a_point;
  54.             b = b_point;
  55.             c = c_point;
  56.             d = d_point;
  57.            
  58.             points = new Point[4];
  59.             points[0] = a_point;
  60.             points[1] = b_point;
  61.             points[2] = c_point;
  62.             points[3] = d_point;
  63.           }
  64.         }
  65.  
  66.         Point active_point;
  67.         ArrayList<MCurve> mcurves;
  68.  
  69.         boolean check()
  70.         {
  71.           PGraphics pg = createGraphics(width, height);
  72.           pg.beginDraw();
  73.           pg.background(0);
  74.           pg.noStroke();
  75.           pg.fill(100, 60);
  76.          
  77.           for (MCurve mcurve : mcurves)
  78.           {
  79.             pg.bezier(mcurve.a.xpos + width / 2, mcurve.a.ypos + height / 2,
  80.                    mcurve.b.xpos + width / 2, mcurve.b.ypos + height / 2,
  81.                    mcurve.c.xpos + width / 2, mcurve.c.ypos + height / 2,
  82.                    mcurve.d.xpos + width / 2, mcurve.d.ypos + height / 2);
  83.           }
  84.          
  85.           pg.endDraw();
  86.  
  87.           PGraphics pg_error = createGraphics(width, height);
  88.          
  89.           boolean is_correct = true;
  90.           pg.loadPixels();
  91.           pg_error.beginDraw();
  92.           pg_error.noStroke();
  93.           pg_error.fill(color(150, 0, 0));
  94.           for (int i = 0; i < pg.pixels.length(); i++)
  95.          {
  96.            if (brightness(pg.pixels[i]) > 30.0)
  97.             {
  98.               pg_error.ellipse(i % width, floor(i / width), 10, 10);
  99.               is_correct = false;
  100.             }
  101.           }
  102.           pg_error.endDraw();
  103.          
  104.           if (!is_correct)
  105.             error = pg_error;
  106.           return is_correct;
  107.         }
  108.  
  109.         void draw_playing()
  110.         {
  111.           background(bg_color);
  112.           noStroke();
  113.          
  114.           for (MCurve mcurve : mcurves)
  115.           {
  116.             for (Point p : mcurve.points)
  117.             {
  118.               if (p.is_active)
  119.               {
  120.                 fill(active_color);
  121.                 ellipse(p.xpos + width / 2, p.ypos + height / 2, rad, rad);
  122.               }
  123.               else if (!p.is_static)
  124.               {
  125.                 fill(passive_color);
  126.                 ellipse(p.xpos + width / 2, p.ypos + height / 2, rad, rad);
  127.               }
  128.             }
  129.           }
  130.  
  131.           if (show_error)
  132.           {
  133.             image(error, 0, 0);
  134.             error_time -= 1 / frameRate;
  135.             if (error_time < 0)
  136.            {
  137.              error_time = 0.0;
  138.              show_error = false;
  139.            }
  140.          }
  141.  
  142.          stroke(255);
  143.          for (MCurve mcurve : mcurves)
  144.          {
  145.            noFill();
  146.            bezier(mcurve.a.xpos + width / 2, mcurve.a.ypos + height / 2,
  147.                   mcurve.b.xpos + width / 2, mcurve.b.ypos + height / 2,
  148.                   mcurve.c.xpos + width / 2, mcurve.c.ypos + height / 2,
  149.                   mcurve.d.xpos + width / 2, mcurve.d.ypos + height / 2);
  150.          }
  151.          
  152.          fill(text_color);
  153.          textAlign(CENTER);
  154.          textSize(50);
  155.          text("UNTANGLE IT", width / 2, 50);
  156.          textSize(56);
  157.          text("TIME: " + score, width / 2, height - 45);
  158.          textSize(20);
  159.          text("PRESS C TO CHECK", width / 2, height - 15);
  160.  
  161.  
  162.          score = int(millis() / 1000.0) - start_time;
  163.        }
  164.  
  165.        void draw_finished()
  166.        {
  167.          background(bg_color);
  168.          stroke(255);
  169.  
  170.          pushMatrix();
  171.          translate(width / 2, height / 2);
  172.          rotate(angle);
  173.          angle += TWO_PI / 600.0;
  174.          
  175.          for (MCurve mcurve : mcurves)
  176.          {
  177.            noFill();
  178.            bezier(mcurve.a.xpos, mcurve.a.ypos,
  179.                   mcurve.b.xpos, mcurve.b.ypos,
  180.                   mcurve.c.xpos, mcurve.c.ypos,
  181.                   mcurve.d.xpos, mcurve.d.ypos);
  182.          }
  183.          popMatrix();
  184.          
  185.          fill(win_color);
  186.          textAlign(CENTER);
  187.          textSize(30);
  188.          text("CONGRATULATIONS!", width / 2, 40);
  189.          textSize(20);
  190.          text("YOUR BEST TIME: " + score, width / 2, height - 35);
  191.          text("PRESS N TO START A NEW GAME", width / 2, height - 15);
  192.        }
  193.  
  194.        void reset_all()
  195.        {
  196.          float n = 12.0;
  197.          int r = 100;
  198.          mcurves = new ArrayList<MCurve>();
  199.          
  200.           float prev_point_x = r * cos(0);
  201.           float prev_point_y = r * sin(0);
  202.           for (int i = 0; i < n; i++)
  203.          {
  204.            float next_point_x = r * cos((i + 1) / n * TWO_PI);
  205.            float next_point_y = r * sin((i + 1) / n * TWO_PI);
  206.            
  207.            Point a = new Point(prev_point_x, prev_point_y, false, true);
  208.            Point b = new Point(random(w - rad) + rad / 2 - w / 2, random(h - rad) + rad / 2 - h / 2, false, false);
  209.            Point c = new Point(random(w - rad) + rad / 2 - w / 2, random(h - rad) + rad / 2 - h / 2, false, false);
  210.            Point d = new Point(next_point_x, next_point_y, false, true);
  211.  
  212.            MCurve mcurve = new MCurve(a, b, c, d);
  213.            
  214.            mcurves.add(mcurve);
  215.            prev_point_x = next_point_x;
  216.            prev_point_y = next_point_y;
  217.          }
  218.          
  219.          score = 0;
  220.          start_time = int(millis() / 1000.0)
  221.          drawing_mode = 0;
  222.          show_error = false;
  223.          angle = 0.0;
  224.        }
  225.  
  226.        void keyPressed()
  227.        {
  228.          if ((key == 'c') && (drawing_mode == 0))
  229.            {
  230.              if (check())
  231.                drawing_mode = (drawing_mode + 1) % 2;
  232.              else
  233.              {
  234.                show_error = true;
  235.                error_time = 3.0;
  236.              }
  237.            }
  238.          else if ((key == 'n') && (drawing_mode == 1))
  239.            reset_all();
  240.        }
  241.  
  242.        void mouseDragged()
  243.        {
  244.          if (active_point != null)
  245.          {
  246.            active_point.xpos = constrain(mouseX, rad / 2, width - rad / 2) - width / 2;
  247.            active_point.ypos = constrain(mouseY, rad / 2, height - rad / 2) - height / 2;
  248.          }
  249.        }
  250.  
  251.        void mousePressed()
  252.        {
  253.          Point closest = null;
  254.          float min_dist = 99999999.9;
  255.          for (MCurve mcurve : mcurves)
  256.          {
  257.            for (Point p : mcurve.points)
  258.            {
  259.              float dist = sqrt(pow(p.xpos - mouseX + width / 2, 2) + pow(p.ypos - mouseY + height / 2, 2));
  260.              if ((dist < rad) && !p.is_static && dist < min_dist)
  261.              {
  262.                min_dist = dist;
  263.                closest = p;
  264.              }
  265.            }
  266.          }
  267.          if (closest != null)
  268.          {
  269.            closest.is_active = true;
  270.            active_point = closest;
  271.          }
  272.        }
  273.  
  274.        void mouseReleased()
  275.        {
  276.          if (active_point != null)
  277.          {
  278.            active_point.is_active = false;
  279.            active_point = null;
  280.          }
  281.        }
  282.  
  283.        void setup()
  284.        {
  285.          size(640, 360);
  286.          reset_all();
  287.        }
  288.  
  289.        void draw()
  290.        {
  291.          if (drawing_mode == 0)
  292.            draw_playing();
  293.          else
  294.            draw_finished();
  295.        }
  296.        </script>
  297.     </head>
  298.     <body onload="resizeCanvas();" onresize="resizeCanvas();" style="margin: 0;padding: 0;">
  299.         <canvas id="pjs"></canvas>
  300.     </body>
  301. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!