Public
Edited
May 20, 2020
1 star
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(600, 400);
// The next line sets background colora sdfaslkfmas;lkdfmas;dlf
sketch.background(220, 220, 220);
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(600, 400);
sketch.background(220, 220, 220);
drawGrassField(sketch);
};
})
function drawGrassField(sketch) {
sketch.fill(150, 230, 150);
sketch.noStroke();
sketch.rect(20, 20, 560, 360);
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(600, 400);
sketch.background(220, 220, 220);
drawGrassField(sketch);
lineTheField(sketch);
};
})
function lineTheField(sketch){
sketch.stroke(255, 255, 255); // white
sketch.noFill(); // don't fill the shapes we are about to draw
// draw the out-of-bounds line.
sketch.rect(20, 20, 560, 360);
// draw midfield line
sketch.line(300, 20, 300, 380);
// draw a circle at midfield
sketch.ellipse(300, 200, 100, 100);
// draw the kickoff marker, as a solid circle (so turn on the fill)
sketch.fill(255, 255, 255);
sketch.ellipse(300, 200, 3, 3);
sketch.noFill();
// draw the two penalty boxes
sketch.rect(20, (sketch.height /2) - 220/2, 94, 220);
sketch.rect(sketch.width - 20 - 94, (sketch.height /2) - 220/2, 94, 220);
// draw the two inner goalie boxes
sketch.rect(20, (sketch.height / 2) - 105/2, 32, 105);
sketch.rect(sketch.width - 20 - 32, (sketch.height / 2) - 105/2, 32, 105);
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(600, 400);
sketch.background(220, 220, 220);
drawGrassField(sketch);
lineTheField(sketch);
lineDetailMarkings(sketch);
};
})
function lineDetailMarkings(sketch){
// draw penalty-hash
sketch.line(20 + 62, 198, 20 + 62, 202);
sketch.line(sketch.width - 20 - 62, 198, sketch.width - 20 - 62, 202);
// draw the two penalty arcs
sketch.arc(20 + 62, 200, 100, 100, -.88, .88);
sketch.arc(sketch.width - 20 - 62, 200, 100, 100, sketch.PI - 0.88, sketch.PI + 0.88);
// draw the corner-kick arcs
sketch.arc(20, 20, 15, 15, 0, sketch.PI / 2);
sketch.arc(20, sketch.height - 20, 15, 15, 1.5 * sketch.PI, 0);
sketch.arc(sketch.width - 20, 20, 15, 15, sketch.PI / 2, sketch.PI);
sketch.arc(sketch.width - 20, sketch.height - 20, 15, 15, sketch.PI, 1.5 * sketch.PI);
// draw 10-yard markers
let tenYards = 57;
// first along the sidelines
sketch.line(20 + tenYards, 15, 20 + tenYards, 20);
sketch.line(sketch.width - 20 - tenYards, 15, sketch.width - 20 - tenYards, 20);
sketch.line(20 + tenYards, sketch.height - 20, 20 + tenYards, sketch.height - 20 + 5);
sketch.line(sketch.width - 20 - tenYards, sketch.height - 20, sketch.width - 20 - tenYards, sketch.height - 20 + 5);
// along the goal-lines
sketch.line(15, 20 + tenYards, 20, 20 + tenYards);
sketch.line(sketch.width - 20, 20 + tenYards, sketch.width - 20 + 5, 20 + tenYards);
sketch.line(15, sketch.height - 20 - tenYards, 20, sketch.height - 20 - tenYards);
sketch.line(sketch.width - 20, sketch.height - 20 - tenYards, sketch.width - 20 + 5, sketch.height - 20 - tenYards);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
