HTTP/2 200 date: Sat, 11 Oct 2025 10:31:00 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=1gLevdhCq5KHGvKsOBICFmwdi6KWT7VM2TsbTjpehgm29PK3qhu6Dael6z4Pf6CkrLWkpY%2FHCH1tBTNCw4hQrmnYfSWSVrzDKu4ll9w%3D"}]} content-encoding: gzip cf-ray: 98cdaf706e884445-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Snake

A snake that follows your cursor.

Snake

float[] x = new float[20];
float[] y = new float[20];
float segLength = 10;
void setup() {
  size(320, 240);
  smooth();
}
void draw() {
  background(226);
  image( loadImage("dirt.jpg"), 0, 0 );
  dragSegment(0, mouseX - 8, mouseY - 8);
  for(int i=0; i < x.length-1; i++) {
    dragSegment(i+1, x[i], y[i]);
  }
}
void dragSegment(int i, float xin, float yin) {
  float dx = xin - x[i];
  float dy = yin - y[i];
  float angle = atan2(dy, dx);  
  x[i] = xin - cos(angle) * segLength;
  y[i] = yin - sin(angle) * segLength;
  //stroke(23, 79, 4, 220);
  
  pushMatrix();
  translate(x[i], y[i]);
  rotate(angle);
  
  color c;
  
  if ( i % 3 == 1 )
    c = color(0, 0, 0, 255);
  else if ( i % 3 == 2 )
    c = color(255, 255, 0, 255);
  else
    c = color(255, 0, 0, 255);
  stroke( c );
  strokeWeight(10);
  line(0, 0, segLength, 0);
  
  if ( i == x.length - 1 )
  {
    fill( c );
    noStroke();
    beginShape(TRIANGLES);
    vertex(0, 5);
    vertex(-2 * segLength, 0);
    vertex(0, -5);
    endShape();
  }
  
  if ( i == 0 )
  {
   // stroke(0, 255);
   noStroke();
   fill(0, 255);
   ellipse(segLength, -2, 3, 3);
   ellipse(segLength, 2, 3, 3);
    //point(segLength, -2);
    //point(segLength, 2);
  }
  
  popMatrix();
}