Skip to content

Instantly share code, notes, and snippets.

@madbunnykim
Last active October 16, 2017 22:48
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save madbunnykim/140225a4fef8a8f54e3cbbd8d996ae83 to your computer and use it in GitHub Desktop.
Snap a pic
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
<h1></h1>
<p class="header">Smile</p>
</body>
</html>
let img;
let slider;
let button;
let bgcolor;
function setup() {
canvas = createCanvas(800, 700);
slider = createSlider(290,320,305);
bgcolor = color(255, 240, 60);
canvas.mouseOver(changeColor);
canvas.mouseOut(reverseColor);
button = createButton("snap");
button.mousePressed(newFile);
}
function draw() {
background(bgcolor);
slider.position(width/2-50,7*height/8-20);
button.position(width/2-5, 7*height/8+20);
//camera body
noStroke();
fill(0);
rectMode(CENTER);
rect(width/2,height/2,600,400,20);
noStroke();
fill(255,255,255);
rectMode(CENTER);
rect(width-190,height/3-30,70,52,10);
noStroke();
fill(0);
rect(width/2,height/4-20,150,80,20);
noStroke();
fill(0);
rect(width/2-230,height/4-25,40,40,5);
//subject
imageMode(CENTER);
image(img,width/2,height/2,270,270);
//moving lens
strokeWeight(80);
stroke(0);
noFill();
ellipse(width/2,height/2,slider.value());
//non-moving lens
strokeWeight(10);
stroke(255,255,255);
noFill();
ellipse(width/2,height/2,320);
}
function newFile(){
let r = random (0,500);
createP("LeoTheExtraLongCorgi_" + floor(r,r,0,500) + ".jpg");
}
function changeColor() {
bgcolor = color(255, 153, 60);
}
function reverseColor() {
bgcolor = color(255, 240, 60);
}
function preload() {
img = loadImage('leo.jpg');
}
html, body {
margin: 0;
padding: 0;
font-family: Verdana;
}
.header {
margin: 10pt;
font-family: Verdana;
font-size: 50pt;
position:absolute;
left:300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment