Category Archives: Visual Elements

I was originally planning to do a cool real time visualization of the Twitter API, but unfortunately I didn’t get the API keys in time. Instead I have thrown together a neat little demo animation using modulo and a for loop to create concentric circles

Link: https://editor.p5js.org/full/SJ2mTiYc7

var ellipseWidth = 1;
var ellipseRadius = 1;

function setup() {
  
  var width = 600;
  var height = 600;
  createCanvas(width, height);
  
}

function draw() {
  
  background(220);
  
	for(var i=0;i<100;i++){
    //Outer Ellipses
      fill(220);
      stroke(0);
    	ellipseRadius = (ellipseWidth%i)*4;
      ellipse((width / 2), (height / 2), ellipseRadius, ellipseRadius);
  	//Inner Ellipses
      stroke(255,0,0);
    	ellipseRadius = sin(ellipseWidth)*100;
  		ellipse((width / 2), (height / 2), ellipseRadius, ellipseRadius);
  }

  ellipseWidth++;
  
}

 

 

Visual Element

moving circle:

https://editor.p5js.org/full/HymGIW5cm

code:

var circleX=0;
function setup() {
createCanvas(400, 400);
}

function draw() {
background(0);

stroke(220);
strokeWeight(6);
noFill();
if(mouseY<100){
fill(220);
}
if(mouseY>300){
fill(220);
}

ellipse(circleX,mouseY,80,80);
circleX=circleX+1;

if (circleX>600){
circleX=0;
}

}

Tears

https://editor.p5js.org/full/SJ3_70YcQ

Code:

var x = 70
function setup() {
createCanvas(400, 400);
}

function draw() {
background(255, 229, 229);

noFill();
bezier(315, 20, 50, 10, 90, 45, 20, 80);
bezier(315, 20, 40, 100 , 100, 40, 20, 80);

fill(128, 77, 0);
ellipse(150, 40, 37, 37);

fill(0);
ellipse(150, 40, 15, 15);

fill(255);
ellipse(155, 35, 5, 5);

fill(182, 184, 246);
ellipse(70, x, 10, 15);
x = x + 3;}

1st Time With p5

Originally, I planned on making some bouncing balls; but, one thing led to another and these happened.

Here was the original plan.

https://editor.p5js.org/full/BkHyQjMcQ

https://editor.p5js.org/ach549@nyu.edu/sketches/BkHyQjMcQ

Then, the self portrait…

https://editor.p5js.org/full/BJH9oCfcm

https://editor.p5js.org/full/BJH9oCfcm

Then this!

https://editor.p5js.org/full/B1sZEJQ97

https://editor.p5js.org/ach549@nyu.edu/sketches/B1sZEJQ97

Flying Face

This is a face that circulates on the screen and when the mouse is pressed, its mouth opens and closes.

View it full screen here : https://editor.p5js.org/full/SyDeZTU9Q

This is the code I used to run it:

function setup() {
createCanvas(400, 400);
}
var value = 0;
function draw() {
background (150, 170, 50) ;

translate(width / 3, height / 3);
translate(p5.Vector.fromAngle(millis() / 1000, 40));

ellipseMode(RADIUS);
fill(255);
ellipse(50, 50, 30, 30);

ellipseMode(CENTER);
fill(0);
ellipse(50, 50, 30, 30);

ellipseMode(RADIUS);
fill(255);
ellipse(150, 50, 30, 30);

ellipseMode(CENTER);
fill(0);
ellipse(150, 50, 30, 30);

fill(value);
arc(100,190, 60, 60, 0, PI, CHORD);

stroke(0);
line(72, 200, 127, 200)
}
function mousePressed() {
if (value === 0) {
value = 255;
}
else {
value = 0;
}
}

Using p5 for the first time

I decided to make two little animations for this week so that I could really get familiar with working with p5. I have had some bad experiences with coding in the past so I wanted to get more comfortable this time before we began larger projects!

 

Here is my first animation (its suppose to be an abstract sunrise (very badly done ofcourse)):

https://editor.p5js.org/andrikumar/sketches/SkexA_LcX

link to solely animation:

https://editor.p5js.org/full/r18BOc7qm

 

Here is the second animation:

https://editor.p5js.org/andrikumar/sketches/r18BOc7qm

link to solely animation:

https://editor.p5js.org/full/SkexA_LcX

 

Here is the code for the first animation: