p5.js Web Editor | 7vector logo

xxxxxxxxxx
// this is how I did the gradient effect
var PS = `precision highp float;
​
  // x,y coordinates, given from the vertex shader
  varying vec2 vTexCoord;
​
  // the canvas contents, given from filter()
  uniform sampler2D tex0;
  // other useful information from the canvas
  uniform vec2 texelSize;
  uniform vec2 canvasSize;
​
  void main() {
    // get the color at current pixel
    vec4 color = texture2D(tex0, vTexCoord);
    // set the output color
    color.r = color.r * ((vTexCoord.x * 0.5 + 0.25) - 0.1);
    color.g = color.g * ((vTexCoord.x * 0.5 + 0.25) - 0.55);
    color.b = color.b;
    gl_FragColor = vec4(color.rgb, 1.0);
  }`;
​
let shade;
​
function setup() {
  createCanvas(600, 300, WEBGL);
  shade = createFilterShader(PS)
}
​
var DTcount = 0;
​
function draw() {
  background(13,10,23);
  DTcount += round(deltaTime/1000,3)
  
  strokeWeight(2)
  fill(13,10,23)
  stroke(255)
  
  // spinny logo
  
  let inOffset = 0;
  let outOffset = -2*PI/3;
  let radius = 50
  let inRadius = 25;
  let Speed = -PI/3
  
  line(-190 + sin((DTcount * Speed) + inOffset) * inRadius, 0 + cos((DTcount * Speed) + inOffset) * inRadius ,-190 + sin((DTcount * Speed) + outOffset) * radius, 0 + cos((DTcount * Speed) + outOffset) * radius )
  line(-190 + sin((DTcount * Speed + (2*PI/3)) + inOffset) * inRadius, 0 + cos((DTcount * Speed  + (2*PI/3)) + inOffset) * inRadius ,-190 + sin((DTcount * Speed  + (2*PI/3)) + outOffset) * radius, 0 + cos((DTcount * Speed  + (2*PI/3)) + outOffset) * radius )
  line(-190 + sin((DTcount * Speed + (4*PI/3)) + inOffset) * inRadius, 0 + cos((DTcount * Speed  + (4*PI/3)) + inOffset) * inRadius ,-190 + sin((DTcount * Speed  + (4*PI/3)) + outOffset) * radius, 0 + cos((DTcount * Speed  + (4*PI/3)) + outOffset) * radius )
  
  
  // spikes
  
  line(-300,-130,-240 + sin(DTcount*PI/2)*8,-40 + sin(DTcount*PI/2)*3)
  line(-240 + sin(DTcount*PI/2)*8,-40 + sin(DTcount*PI/2)*3, -250, -150)
  
  line(-240,-150,-180 + sin(DTcount*PI/2 + 0.2)*6,-60 + sin(DTcount*PI/2)*-2)
  line(-180 + sin(DTcount*PI/2 + 0.2)*6,-60 + sin(DTcount*PI/2)*-2, -190, -130)
  line(-190, -130, -110 + sin(DTcount*PI/2 - 0.2)*7,-50 + sin(DTcount*PI/2)*2)
  line(-110 + sin(DTcount*PI/2 - 0.2)*7,-50 + sin(DTcount*PI/2)*2, -150, -135)
  line(-150, -135, -20 + sin(DTcount*PI/2 + 0.3)*4, -55 + sin(DTcount*PI/2)*2)
  line(-20 + sin(DTcount*PI/2 + 0.3)*4, -55 + sin(DTcount*PI/2)*2, -70, -140)
  line(-70, -140, -20 + sin(DTcount*PI/2 + 0.2)*4, -95 + sin(DTcount*PI/2)*2)
  line(-20 + sin(DTcount*PI/2 + 0.1)*4, -95 + sin(DTcount*PI/2)*2, -55, -150)
  
  line(-48, -150, 35 + sin(DTcount*PI/2 + 0.5)*5, -40 + sin(DTcount*PI/2 - 0.1)*4)
  line(35 + sin(DTcount*PI/2 + 0.5)*5, -40 + sin(DTcount*PI/2 - 0.1)*4, 10, -120)
  line(10, -120, 75 + sin(DTcount*PI/2 + 0.4)*5, -35 + sin(DTcount*PI/2 + 0.1)*4)
  line(75 + sin(DTcount*PI/2 + 0.4)*5, -35 + sin(DTcount*PI/2 + 0.2)*4, 37, -130)
  line(37, -130, 135 + sin(DTcount*PI/2 - 0.1)*10, -55 + sin(DTcount*PI/2 + 0.2)*4)
  line(135 + sin(DTcount*PI/2 - 0.1)*10, -55 + sin(DTcount*PI/2 + 0.2)*4, 105, -155)
  
  
  line(310, 150, 200 - sin(DTcount*PI/2 + 0.1)*7, 40 - sin(DTcount*PI/2 - 0.2)*4)
  line(200 - sin(DTcount*PI/2 + 0.1)*7, 40 - sin(DTcount*PI/2 - 0.2)*4, 240, 120)
  line(240, 120, 150 - sin(DTcount*PI/2 - 0.3)*11, 50 - sin(DTcount*PI/2 - 0.1)*6)
  
  
  // text
  
  line(-120, -20, -90, -20)
  line(-90, -20, -120, 20)
  
  line(-70, -20, -70, 20)
  line(-70, 20, -40, -20)
  
  line(-20, -20, -20, 20)
  line(-20, -20, 10,-20)
  line(-20, 0, 10, 0)
  line(-20, 20, 10,20)
  
  arc(50, 0, 40, 40, PI/2, 3*PI/2)
  
  line(70, -20, 100, -20)
  line(85, -20, 85, 20)
  
  line(120, -20, 120 + (40 / sqrt(3))*2, -20)
  line(120 + (40 / sqrt(3))*2, -20, 120 + (40 / sqrt(3)), 20)
  line(120, -20, 120 + (40 / sqrt(3)), 20)
  
  line(120 + (40 / sqrt(3))*2 + 20, -20, 120 + (40 / sqrt(3))*2 + 20, 20)
  line(120 + (40 / sqrt(3))*2 + 20, -20, 120 + (40 / sqrt(3))*2 + 50, -20)
  
  
  
  filter(shade)
  
}
Cookies

Sketch Files

Console

Preview
