Project van de cursus
Mi Proyecto del curso: Codificación creativa: crea piezas visuales con JavaScript
Mi Proyecto del curso: Codificación creativa: crea piezas visuales con JavaScript
van ddddd @ddddd
- 973
- 66
- 15
15 opmerkingen
Je hebt hier mooie en zeer elegante dingen! Is er een kans dat je hiervoor een github-repo zou delen? Ik zou graag willen leren van wat je hebt gedaan. Je geometrieën zijn uitstekend.
@mikepeiman Hallo, ik zou graag de code hierachter met u delen. Ik heb GitHub echter nooit als actieve gebruiker gebruikt en ik weet er niet veel van. Ik vind het niet erg om het hier te plaatsen. Ik heb in ieder geval alleen dingen gebruikt die we in de lessen van de cursus hebben geleerd. Ik heb gewoon meer tijd besteed aan het kiezen van kleuren of afbeeldingen waarvan ik dacht dat die goed werkten.
Geweldig! Ik zou zeker graag wat van je code zien; eerlijk gezegd heb je dit concept heel creatief en mooi toegepast. Github is gemakkelijk te gebruiken op een eenvoudige manier voor individuele gebruikers zoals ik (het kan ingewikkeld worden met teams/open source), hoewel ik het begrijp als je er niet bekend mee bent. Als je daar een account hebt, zijn "gists" een gemakkelijke manier om codefragmenten/bestanden te delen. https://docs.github.com/en/github/writing-on-github/editing-and-sharing-content-with-gists/creating-gists#about-gists
Anders, als je het leuk vindt om hier te posten, laten we dan wat lange opmerkingen maken :)
Kun je de code delen voor de uiteindelijke animatie, die geometrische vorm aan de rechterkant?
Ook de animatie over de afbeelding van de ruggengraat, de lijn-en-cirkel-stapel die om de verticale as draait?
En misschien ook de draaiende lijn-en-cirkel-spiraal rechts, direct onder de ruisbeelden?
Ik ben blij om de mijne ook te delen - ik zal mijn laatste project vandaag posten als je wilt zien waar ik het naartoe heb gebracht, en het staat allemaal in een github-repo waar ik ook een link naar zal plaatsen.
Hartelijk dank voor uw vriendelijke woorden.
Welnu, dit is de code van "die geometrische vorm van rechts"
Dit is de laatste versie, het is een beetje vies met verschillende kleuren.
const canvasSketch = required('canvas-sketch');
const willekeurig = vereisen ("canvas-sketch-util/random");
const math = vereisen ("canvas-sketch-util/math");
const-instellingen = {
afmetingen: [ 1000, 1000 ],
animeren: waar,
};
laat meervoud = 0,009;
laat numVertices = 3 - ophogen;
const colores = ["ffadad","ffd6a5","fdffb6","caffbf","9bf6ff","a0c4ff","bdb2ff","ffc6ff","fffffc"];
const colorPick = [];
//loop xa crear colores max. aantal kleuren por 10
voor (var i = 0; ik < 40; i++) {
for (var j = 0; j < colores.length; j++) {
colorPick.push(kleuren [j]);
}
}
const schets = () => {
return ({ context, breedte, hoogte, frame }) => {
context.fillStyle = 'zwart';
context.fillRect(0, 0, breedte, hoogte);
aantalVertices += inc;
laat arco = (Math.PI * 2) / numVertices;
laat straal = breedte * .40;
const vX = [];
const vY = [];
voor (var i = 0; i < numVertices; i++) {
laat hoek1 = (i * arco) - Math.PI * .5;
//línea mier. le resto ese PI*5 para set el primer vertice (0º) arriba.
vX [i]= Math.cos(hoek1) * straal;
vY [i]= Math.sin(hoek1) * straal;
context.save();
context.fillStyle = `#${colorPick [i]}`;
context.translate (breedte * .5, hoogte * .5);
context.beginPath();
context.arc(vX [i], vY [i], breedte * .01, 0, Math.PI * 2);
context.fill();
context.herstel();
}
//loop xa crear lineas
voor (var i = 0; i < numVertices; i++) {
voor (var j = 0; j < (numVertices - 1); j++) {
context.save();
context.lineWidth = breedte * 0,0011;
context.strokeStyle = `#${colorPick [i]}`;
context.translate (breedte * .5, hoogte * .5);
context.beginPath();
context.moveTo(vX [i], vY [i]);
context.lineTo(vX [j + 1], vY [j + 1]);
context.slag();
context.herstel();
}
}
};
};
canvasSketch (schets, instellingen);
@mikepeiman
de lijnen over de wervelkolom
const canvasSketch = required('canvas-sketch');
const willekeurig = vereisen ("canvas-sketch-util/random");
const math = vereisen ("canvas-sketch-util/math");
const-instellingen = {
afmetingen: [ 1080, 1080 ],
animeren: waar,
};
const schets = () => {
return ({ context, breedte, hoogte, frame }) => {
context.fillStyle = 'wit';
context.fillRect(0, 0, breedte, hoogte);
laat line_max = breedte * 0,8;
laat line_min = breedte * 0.3;
laat numLineas = 24;
laat rMax = breedte * 0,015;
laat rMin = breedte * 0,008;
laat linew_max = breedte * 0,003;
laat linew_min = breedte * 0,0005;
laat gapLinea = breedte * 0,025;
laat todoY = (hoogte - (numLineas - 1) * gapLinea) * 0,5;
voor (laat ik = 0; ik < numLineas; i++) {
laat linea_y = i * gapLinea;
//let lineaLong = random.range (line_min, line_max);
laat n = willekeurig.ruis1D(i + frame, 0,01);
laat lineaLong = line_min * (n + 0,5);
laat x1 = lineaLong * -0,5;
laat x2 = lineaLang * 0,5;
laat coef_rad = (rMax - rMin) / (line_max - line_min);
laat straal = rMin + ((lineaLong - line_min) * coef_rad);
laat hoek = willekeurig.bereik (-0.1, 0.1) * Math.PI;
laat lineWidth = 2;
//la siguientes 2 lineas reescalan también la línea.
//let coef_lw = (linew_max - linew_min) / (line_max - line_min);
//let lineWidth = linew_min + ((lineaLong - line_min) * coef_lw);
laat n_hoek = n * -Math.PI;
//console.log(lineaLong);
context.save();
context.lineWidth = lineWidth;
//context.fillStyle = "#ffffe6";
context.translate(breedte * 0,5, todoY)
context.translate(0,linea_y);
context.roteren(n_hoek);
context.beginPath();
context.verplaatsNaar(x1,0);
context.lineTo(x2,0);
context.slag();
context.beginPath();
context.arc(x1, 0, straal, 0, Math.PI * 2);
context.fill();
context.slag();
context.beginPath();
context.arc(x2, 0, straal, 0, Math.PI * 2);
context.fill();
context.slag();
context.herstel();
}
};
};
canvasSketch (schets, instellingen);
@mikepeiman
En de andere
const canvasSketch = required('canvas-sketch');
const willekeurig = vereisen ("canvas-sketch-util/random");
const math = vereisen ("canvas-sketch-util/math");
const-instellingen = {
afmetingen: [ 1080, 1080 ],
animeren: waar,
};
const schets = () => {
return ({ context, breedte, hoogte, frame }) => {
context.fillStyle = 'wit';
context.fillRect(0, 0, breedte, hoogte);
laat numLineas = 71;
// laat hoek = (Math.PI * 6) / numLineas;
laat hoek = (Math.PI * frame * 0.01) / numLineas;
laat rboli_max = breedte * 0,02;
laat rboli_min = breedte * 0,002;
laat rad_max = breedte * 0,5;
laat rad_min = breedte * 0.3;
laat inc_rad = (rad_max - rad_min) / numLineas;
laat inc_boli = (rboli_max - rboli_min) / numLineas;
voor (var i = 0; ik < numLineas; i++) {
laat rboli = rboli_max - (i * inc_boli);
laat x_1 = 0;
laat x_2 = rad_min + (i * inc_rad);
laat y_1 = 0;
laat y_2 = 0;
context.save();
context.translate(rad_max, rad_max);
context.fillStyle = "zwart";
context.strokeStyle = "zwart"
context.roteren(i * hoek);
context.beginPath();
context.moveTo(x_1, y_1);
context.lineTo(x_2, y_2);
context.slag();
context.beginPath();
context.arc(x_2, y_2, rboli, 0, Math.PI * 2);
context.fill();
context.herstel();
}
};
};
canvasSketch (schets, instellingen);
@mikepeiman zoals je hebt gemerkt zijn er kleine veranderingen. Ik doe meestal veel tests en renders, dan kies ik wat mijn favoriet is, dus misschien is de laatste versie van de code niet dezelfde als de render die je in dit project bekijkt.
Groeten.
@ddddd Heel erg bedankt voor het delen! Ik heb het allemaal al lokaal geladen en het werkt net als in je clips. Prachtig! Ook mijn proces is hetzelfde, zoveel vele tweaks en veranderingen, en toen ging ik terug door 1000+ foto's en verschillende videoclips om te kiezen wat ik wilde delen. Moeilijk om enkele van de interessante effecten opnieuw te creëren terwijl ik experimenteer.
Ik heb een github-coderepository gemaakt voor mijn project zoals ik zei dat ik dat zou doen; en ik heb je drie voorbeelden daar ook als aparte bestanden toegevoegd, ik hoop dat je het niet erg vindt. De repo is hier: https://github.com/mikepeiman/creative-coding-domestika
Het allerbeste voor jou, neem op elk moment contact op en veel succes op je reis.
Dit is geweldig. Had je enige voorkennis van coderen voordat je deze cursus volgde?
@mohamedyoushau19 Hallo, bedankt voor je reactie.
Nou, ik wist heel weinig dingen over coderen. Bijna niets. Ik denk dat ik het nog steeds niet weet. Ik heb alleen gebruikt wat we in deze lessen hebben geleerd.
@mohamedyoushau19 Hallo, bedankt voor je reactie.
Nou, ik wist heel weinig dingen over coderen. Bijna niets. Ik denk dat ik het nog steeds niet weet. Ik heb alleen gebruikt wat we in deze lessen hebben geleerd.
Goed gedaan! Ik hou van de composities, kleuren, thema's. Het is cool hoe je deze concepten hebt genomen en er op een prachtige manier mee aan de slag bent gegaan!!
Wauw, deze zijn echt gaaf! Prachtig hoe je de basisconcepten hebt gecombineerd.
@ddddd gebruik van de concepten in je werk.
Ik heb een korte vraag voor je. Hoe heb je de verplaatsing van de foto tot stand gebracht. Ik heb vergelijkbare effecten onderzocht met context.clip() maar het is me niet gelukt om het voor elkaar te krijgen.
Gracias!
@aleceinpet Bedankt!
Nadat ik de afbeelding op canvas had geladen, deed ik de verplaatsing met context.getImageData() en context.putImageData() en speelde ik met een willekeurige x-positie.
Log in of doe gratis mee om te reageren